Live 2026 · /timeTravel

Time travel interface

The same career rendered in four complete design systems, selected by year. The facts are identical in every frame. Only the visual language and the vocabulary change, which turns out to be the whole argument.

Visit the page Jump to 1998 Jump to 2035

The idea

A career is not static, it is read from a moment

A resume pretends to be a neutral record. It is not. It is written in the vocabulary of the moment it was written in, and the same facts would have been framed completely differently ten years earlier or ten years later.

So this makes that literal. Pick a year and the entire interface becomes that year: a CRT terminal in 1998, skeuomorphic iOS in 2012, a glass dashboard in 2024, and a sparse archival retrospective in 2035 where the whole career is described in the past tense by something that has finished observing it.

Architecture

One attribute swaps the entire visual language

All four era sections exist in the DOM at once. CSS decides which is visible and what everything looks like, so switching years is a single attribute write and one paint.

There is no JavaScript rendering and no component framework. The script does three things: set the attribute, keep the URL hash in sync, and handle keyboard navigation across the tablist. Everything else is CSS keyed off body[data-era], in a stylesheet loaded only by this page so the other pages carry none of its weight.

Decisions

The interesting problems were not technical

Two of the original years were wrong. The first draft put Amazon Retail in 2012, but 2012 was Amazon Register. Corrected, which conveniently also lands on the peak year of skeuomorphic iOS.
1998 predates the entire record. Rather than quietly fudging it, the terminal opens by warning that the record contains timestamps beyond its epoch and displays them anyway. The anachronism became the joke instead of the bug.
2035 asserts nothing. The venture appears as the company that eventually became part of how enterprises learned to trust machines. Evocative, and carefully free of any invented acquisition, valuation, or outcome for a real business.
It has to survive an audit. This page sits one URL from an agent-facing page that invites models to hunt for inconsistencies, so the dates had to be right.

Stack

What it runs on

Rendering	Static HTML. All four eras in the DOM, CSS controls visibility.
State	A single data-era attribute on body, mirrored to the URL hash.
Styling	Four scoped theme blocks in a page-local stylesheet.
Accessibility	Tablist semantics, roving tabindex, arrow and Home/End keys, reduced-motion support.
Script	Roughly 50 lines, inline. No dependencies.