Process rigor that actually ships.

08 / How this page works

Every section demonstrates one technique. This is the index.

View Transitions API

The theme toggle morphs light↔dark via document.startViewTransition where supported; instant swap everywhere else.

CSS scroll-driven animations

The top progress bar runs on animation-timeline: scroll(); the career timeline and the method cards enter on view() — pure CSS, @supports-gated, gated so unsupported browsers simply render the final state.

Container queries

The two-track cards in "What I do" reflow based on their container's width, not the viewport.

:has() parent selection

Credential rows highlight when the status chip inside them is hovered — no JavaScript.

Sticky card-deck scene

The method steps stack like a card deck as you scroll — pure position: sticky, the scrollbar is the camera. No scripting, nothing to trap your scroll.

@property typed custom property

The contact button's gradient border is painted from a registered @property angle — a custom property the browser knows is an <angle>, so the conic gradient renders crisply. Static by design.

text-wrap: balance / pretty

Headlines balance and paragraphs avoid orphans — the quiet technique proving craft isn't only animation.

Performance & access as features

Zero-JS baseline (all content renders with scripts off), one-shot non-looping motion, full prefers-reduced-motion paths. Lighthouse and axe runs gate every release — measured, not claimed.

Built and maintained with the MAE-I Build agent cohort — the same gated pipeline I run for client work.