Writing· · 3 min read
This site renders itself five ways
Why a portfolio has an era scrubber, how one content layer drives five presentation skins, and what the last era is actually arguing.
- 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:
| Era | Paradigm |
|---|---|
| 1968 · Teletype | Output is a stream. It prints once, in order, and never comes back. |
| 1983 · Terminal | The screen can be addressed. Navigation becomes a language you type. |
| 1998 · Rack | Software gets a body. State is something you can see blinking. |
| 2026 · Field | Everything is a document. Beautiful, static, waiting to be read. |
| 20XX · Intent | No 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
localStoragein 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-motionremoves 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.