(Updated on

A Terminal Landing Page for ctrl.alt.7f.ax

A Terminal Landing Page for ctrl.alt.7f.ax

Not every portfolio needs to look like a startup landing page.

Some time back, I decided I wanted something simpler — something that whispered “hacker energy” without screaming hire me. The kind of thing you’d expect to see if a sysadmin had a secret terminal behind their website. That’s how ctrl.alt.7f.ax was born.

This is the story of building a static HTML terminal-style portfolio site, from domain hunt to Matrix rain — no frameworks, no bloat.

The Domain Hunt

Most people start with a template. I started with a TLD.

.ax is the country code top-level domain for Åland Islands — but more importantly, it’s short, snappy, and obscure enough to still have good stuff available. I wanted something minimalist. Two letters. Ideally something that looked like hex.

After trying dozens of combinations, I discovered that both 0f.ax and 7f.ax were available.

Why those?

  • 0f and 7f are both valid hexadecimal
  • [email protected] is a beautiful little email address
  • ctrl.alt.7f.ax felt like a prompt, a mood, and a site

I bought them both. The .ax domains aren’t the cheapest (~£27/year), but when a two-character domain this clean is available, you don’t hesitate.

Building the Site

With the domain sorted, I didn’t want WordPress, a CMS, or even JavaScript frameworks. Just raw HTML, CSS, and a sprinkle of canvas magic.

The idea was simple: make the site feel like you’ve SSH’d into a box that has something to say.

Here’s what I built:

  • A full-screen canvas of falling green glyphs — a subtle Matrix homage
  • A dark, translucent terminal “window” overlay
  • Fake terminal output using classic Unix commands:
  • A shutdown command that ends the session with a CRT-style collapse effect
  • A static index.html file with no dependencies, and no build process

Terminal Output

paul@ctrl-alt-7f:~$ cat about.txt

Paul Barton is a systems engineer, strategist, and traveller. Prefers sun, avoids clutter.

paul@ctrl-alt-7f:~$ finger paul

Login: paul    
Name: Paul Barton
Directory: /home/paul
Shell: /bin/zsh

Email:   [email protected]
Github:  https://github.com/bartonpaul

Last login: Mon Mar 24 17:58:52 2025

Plan:
Continue exploring tech, travel, and truth — with minimalist flair.

paul@ctrl-alt-7f:~$ gpg --recv-keys [email protected]

The gpg block includes my PGP key block.

The Matrix Rain

The Matrix rain effect is done in pure JavaScript using a <canvas> element and some carefully timed setInterval() loops. The characters are drawn one column at a time, and each “drop” moves downward, resetting at random intervals to create the illusion of falling streams.

It’s entirely custom, not borrowed from any library, and switches off after a few seconds so the terminal interface can stand on its own.

Mobile users never see the rain — and that’s by design.

Making It Work on Mobile

Getting the look right on desktop was easy. Mobile was harder.

The matrix canvas bled through the terminal overlay on iPhone — a known issue with how iOS renders layers and z-index. Rather than fight it, I disabled the canvas entirely on narrow screens. The result?

  • Matrix rain on desktop
  • Clean, readable layout on mobile
  • Still feels like a terminal

I also made the prompt sticky on mobile so it stays in view when scrolling, something that feels like cheating — but was worth it for usability.

The Shutdown Effect

Typing shutdown into the prompt doesn’t just remove the page — it simulates an old CRT screen powering down:

  1. The message collapses vertically into a green horizontal bar.
  2. The bar narrows into a thin vertical line.
  3. A final white flash appears (no sound).
  4. A black curtain drops to simulate complete shutdown.

It’s entirely done in CSS, with carefully staggered @keyframes animations and transform-origin: center. The effect runs longer than most sites would dare — almost 5 seconds — just to sell the nostalgia.

Hosted on Cloudflare Pages

The whole site is hosted on Cloudflare Pages, with security headers injected using a custom Cloudflare Worker.

I also enabled “I’m under attack” mode for a bit of ironic gatekeeping — which means some users may have to pass a bot challenge just to read static HTML.

Here’s a simplified version of the Worker logic:

const securityHeaders = {
  "Content-Security-Policy": "default-src 'self';",
  "Strict-Transport-Security": "max-age=31536000; includeSubDomains; preload",
  "X-Frame-Options": "SAMEORIGIN",
  "X-Content-Type-Options": "nosniff",
  "Referrer-Policy": "strict-origin-when-cross-origin"
};

I also strip identifying headers like X-Powered-By and Server — partly for security, partly for cleanliness.

Dotfile Vibes

There’s something comforting about a site that feels like .bashrc and .plan files stitched together. This isn’t just a design — it’s a nod to a whole era of personal computing.

Some visitors might see the terminal output and not know what to do. That’s fine. The kind of people who know what finger is will get it. That’s who this site is for.

Minimalism by Intent

No frameworks.
No cookies.
No analytics.
No fonts loaded from CDNs.
Just 1 index.html file, 1 canvas, and a vibe.

Visit the Site

You can visit the live site here:
👉 https://7f.ax

Or see the staging version at:
👉 https://7f.tskhub.com

Final Thoughts

This site isn’t SEO-optimised. It doesn’t beg for leads. It’s not a content funnel.

But it’s me.
Minimalist. Functional. Slightly obscure.

If you’re reading this and thinking “I want one of those,” you probably don’t need a framework either. You need an idea, a weird domain, and a bit of HTML.

Happy hacking.

— Paul Barton
Email: [email protected]
GitHub: github.com/bartonpaul