A portfolio that argues for systems should be built like one.

Every page rendered. Nothing was broken in a way a visitor would notice. Underneath, the presentation layer was five years of decisions nobody had written down: a red in a Sass variable here, the same red typed as a hex there, a style attribute on a heading that needed to be slightly bigger one afternoon in 2021.

None of that is visible from the front. It is extremely visible to someone who opens DevTools, which is exactly the person this site exists for. I was applying for roles where the work is the system underneath the interface, and handing over an interface with no system underneath it.

Before a single page was touched, every value moved into JSON in tokens/, split across three layers. Base holds raw hex and pixel values and is the only layer permitted to have them. Semantic gives those values roles, named element-property-role, so --text-color-link reads as what it styles, which property, in what job.

Component tokens come last, and only once a component has earned one. Style Dictionary compiles all three into dist/tokens.css, which every page links before the stylesheet. The compiled file is generated, so it is never edited by hand.

The CSS follows Atomic Design, and main.css is nothing but imports in dependency order. Base, then atoms, then molecules, then organisms, then layout, then utilities. Every rule below the base layer consumes semantic tokens and nothing else.

That order is doing real work. The sheet is imported before the nav because the navigation panel is a sheet variant, and an override has to come after the thing it modifies. Getting the sequence right means the cascade never needs to be fought with a higher-specificity selector.

With tokens and components in place, the pages were rebuilt as assemblies. A case study is a case hero, a series of sections on the twelve-column grid, and a project row at the end. The markup describes structure, and the stylesheet owns every measurement.

Spacing is a strict 8px scale, no 4s and no 12s. If a gap isn't divisible by eight it isn't in the system, which sounds arbitrary until you stop having the conversation about whether something should be 12 or 14.

The header is on every page, so it was the obvious component to lock first. My first pass made the markup identical everywhere but left the links alone, on the reasoning that links are content and content varies by page.

That reasoning was wrong, and it took someone saying so to see it. A global navigation that changes from page to page isn't global. The one variation I'd have defended was aria-current, which says which page you're on — and that was the thread worth pulling.

Auditing the palette against WCAG 2.2 turned up two colours that had been on the live site the whole time. The brand red measures 4.36:1 on the page background, just under the 4.5:1 needed for body text. Muted text sat at 40% black, which measures 2.6:1 and isn't close.

Both were fixed at the value rather than the usage. Body links now take the 600 step of the ramp at 5.9:1, and muted text sits at 60% black. Neither original value was deleted, because both are still correct in the places WCAG allows them.

There's a Design/Code toggle in the header of every page. Switching it to Code outlines each element that carries a data-xray attribute and labels it with its layer and component name, which is how the annotations on the drawings above were derived.

The labels aren't a diagram of the architecture, they're attached to the components themselves. If the structure ever drifts from what the labels claim, the labels start lying in public, which is a good reason to keep them true.

The rebuild lived in a v5/ folder while the old pages stayed at the domain root. For a while that was sensible, and then it stopped being sensible, because an outside audit pointed out that none of the new work had ever been deployed. Real visitors were still getting the old build.

So v5/ was promoted to the root, the legacy pages were archived out of the working tree, and a deploy config now copies only the paths that should be served. The icon sprite is generated from the official library by a script that fails loudly on a typo rather than shipping a blank square.

Sixty-five commits over nine days, and the site is now the same kind of artifact as the work it describes. The visible design changed less than the amount of effort suggests, which is the correct outcome for a structural rebuild.

What changed is the cost of the next change.

The point of building it this way is that the next few things become small. Some of them are already obvious, and a couple of them are still open problems I'd rather name than hide.

These are in the order I expect to get to them, not in order of how impressive they sound.