A terminal for a homepage

Draft: written from the code in this repo. Rewrite it in your own voice before publishing.

My homepage used to open on a big name over a 3D render. Now it opens on a prompt. You can read the page like a normal site, or type / and drive it. Everything is one HTML file and a little vanilla JavaScript.

Commands are just a lookup table

Each command is a function that returns lines of output. The first line gets a dot, the rest are indented underneath, like a tool result in a coding agent.

const COMMANDS = {
  about: () => ["Read about.md (4 lines)", ...ABOUT],
  f1:    () => { go("spa"); return ["Heading to Spa-Francorchamps…"]; },
  clear: () => { log.replaceChildren(); return null; },
};

Aliases map extra words onto the same functions, so skills runs stack and lap runs f1. Anything else gets a friendly “command not found”.

The slash menu

Typing / opens a list of commands that filters as you type. The arrow keys move the highlight, Enter runs it, Tab completes it and Escape closes it. The input is marked up as a combobox with the menu as its listbox, so screen readers announce the highlighted option.

Small touches

• ↑ and ↓ walk back through what you’ve typed when the menu is closed.
• A short “Thinking…” line shows before each answer. It’s skipped if you’ve asked for reduced motion.
• Single letters in square brackets ([A], [W]…) run commands from anywhere on the page.
• /theme flips between dark and light and remembers your choice.

A dragon made of text

The mascot is drawn from a character map. Each character is a colour, and a few lines of code turn it into SVG squares:

"..........h.h.......",
".ww......####.......",
".www....##e###ffF...",
"..wwww.#######fFFFf.",

The e pixels blink every few seconds. The f pixels are fire, hidden until you type /dragon. The icons on these blog posts use the same trick.

Keeping it honest

A terminal is fun, but it can’t be the only way in. All of the content is also on the page as normal HTML, the prompt works on a phone keyboard, and the heavy 3D in the footer waits until you scroll to it.

Try it on the homepage: type /help.