Skip to content

This site renders itself five ways

  • interface
  • astro
  • architecture

Every portfolio makes the same claim in the same voice: here is my work, here are my skills, here is a contact form. The claim is usually true. The interface carrying it is always the same one, which means the interface carries no information at all.

So this site has a scrubber. The same content — the same projects, the same words — renders through five interface paradigms:

EraParadigm
1968 · TeletypeOutput is a stream. It prints once, in order, and never comes back.
1983 · TerminalThe screen can be addressed. Navigation becomes a language you type.
1998 · RackSoftware gets a body. State is something you can see blinking.
2026 · FieldEverything is a document. Beautiful, static, waiting to be read.
20XX · IntentNo layout until asked for. You state what you want; the page assembles.

The constraint that makes it real

Five skins is a gimmick if it is five sites. It is architecture if it is one.

So the rule was: no component knows which era it is in. There is one content layer — MDX collections with a typed schema — and one normalised model on top of it. Frontmatter is forbidden from encoding presentation. A project has a status of live, never a colour and never an icon. The teletype prints the word. The rack turns it into a green LED. Neither decision lives in the content.

Skins are expressed almost entirely as custom properties on html[data-era]. Components read semantic tokens — --era-fg, --era-accent, --era-line — and never a literal. Switching era is one attribute write. That is the part worth showing a stranger: not that it looks like a VT220, but that looking like a VT220 costs a stylesheet rather than a fork.

The one place the abstraction genuinely breaks is behaviour. A print-feed animation, a command palette and a WebGL flow field are not the same component with different paint. Those are separate islands, dynamically imported per era, so a visitor reading the teletype never downloads the field’s shader.

What the last era is arguing

Eras one to four are history and can be checked. The fifth is a claim.

Current interfaces are documents pretending to be applications. Navigation is a map you are expected to have memorised, and every product rebuilds that map slightly differently. The interesting alternative is not a better map — it is not needing one. You say what you want and the surface assembles around the request.

That era is deliberately the sparsest thing on the site, because I do not think anyone has built it properly yet, including me. The four eras before it are there so the fifth reads as an argument rather than a mood.

Boring things that were not optional

  • No flash. Era resolves from localStorage in an inline script before first paint.
  • No JavaScript, still readable. Without JS the site is the Field era, static and complete. The scrubber simply is not there.
  • prefers-reduced-motion removes motion, never content. The teletype stops animating its print. It still prints.
  • Every era passes AA contrast. Amber phosphor on near-black is the easy one to get wrong and it was tuned, not eyeballed.

A portfolio that argues about interfaces and then ships an inaccessible one has lost the argument before anyone reads it.