Colophon
This portfolio is built the way I build products — so instead of describing my standards, it has to meet them. This page is the record of how, and of the versions it took to get here.
There is no homepage
A portfolio for a systems designer, shaped like the software I design: a case-file workspace whose navigator, search and keyboard controls persist on every page. There is no "homepage" — every URL, this one included, is a file open in the same application. Information first, decoration last.
It's hand-written HTML, CSS and vanilla JavaScript. No framework, no build step, no analytics, no cookies. The shell makes no external requests — every font and image it uses is served from this domain — and since v3.2 the work itself lives here too: six artifact sites under /artifacts, embedded live in the case files.
Four faces, each with a job
Four faces, each with a job. Archivo, wide and heavy, for display headlines; Inter for interface text; IBM Plex Mono for data and labels; Instrument Serif for the occasional human aside. The Inter-plus-Plex pairing comes from the design system I run at work — this site borrows the habit along with the rules, then puts a louder voice on top.
The tokens below are copied from the stylesheet this page loads. Change one and the whole site follows.
| Token | Value | Used for |
|---|---|---|
| --bg | #f6f2ea | canvas — paper, not screen |
| --bg-raised | #fdfbf5 | cards and panels |
| --text | #141410 | primary text — ink |
| --accent | #2c3bee | the one chrome accent — electric blue |
| --snap | 140ms | control transitions |
| --spring | 280ms | panel transitions |
| --pad | 24px | canvas edges |
| --gap | 12px | between bricks |
Six rules, checkable on this page
The site runs on six rules, borrowed from the 91-rule system documented in case file 001. Here they can be checked against the page you're reading.
- One accent per view. The electric blue carries every interactive signal; nothing else gets colour.
- Motion only when a hand causes it. Nothing on this site animates unprompted.
- Mono for data, never for prose. Labels, figures and captions sit in Plex Mono; sentences sit in Inter.
- Every number carries its source. Inline where it can, in the source notes where it can't.
- Spacing in 24/12 bricks. Canvas edges at 24px, gaps between bricks at 12px.
- Themes cost zero component code. Light and dark are a token swap — press t.
Shipped, learned, logged
The page answers the hand. The overview now opens with a statement instead of a list; every document got an eyebrow. Sections reveal as the reader reaches them, cards lift under the cursor, and the status bar tracks the section being read. Motion still only happens when a hand causes it — the hand just has more to cause.
Scenes, not essays. Every case file now opens with its story in three beats — problem, move, proof — and every section leads with a claim headline and a visual: a diagram, a working demo, a number said loudly. The prose that survived is a caption; the prose that duplicated a visual is gone. Recruiters read headlines; now the headlines carry the story.
The palette woke up. Cream paper, ink and one electric blue under wide Archivo display type; dark mode became the alternate instead of the default. The components never changed — the whole restyle was a token swap, which was the point of having tokens.
One application. The navigator, search and keyboard controls now persist on every page; documents open inside the workspace in their own pane, under a view header, above a status bar. Earlier versions kept the app shell on the homepage and dropped you onto ordinary web pages the moment you clicked — the exact seam this version removes.
Everything moved in. The design system story, its presentations, the component library, the UX Files deck, the class and all three case-study sites are now served from this domain under /artifacts and embedded live in the case files. No screenshots of the work remain anywhere on this site.
The work went live. Each case file now carries a working rebuild of its signature mechanic — drag the dashboard split, flip the join canvas, change a booking and watch the price explain itself, log a week and choose what a clinician sees. Labelled as rebuilds; the genuine captures stay where authenticity is the point. A printable CV joined the nav.
Rebuilt as a product. Case files with the research attached, working search, keyboard navigation, light and dark. The previous version kept being read as template work, and the honest fix was to show the work rather than decorate it.
The scrolly rebuild. One long page, device mockups, a command palette. Shipped, learned from, retired.
Still exists, as a keepsake.
Honest about the edges
- The embedded artifact sites load their own typefaces and animation libraries; the portfolio shell itself still makes zero external requests.
- There is no photograph of me yet; the camera and I are in negotiations.
- This page will drift out of date the moment I ship something new.
Source notes
- Token names and values are copied from /assets/site.css — the same stylesheet this page loads.
- The 91-rule count is from case file 001, the OI design system.
- Changelog months are when each version of this site shipped.