Skip to content
COLOPHON

How this site is built

A portfolio should be able to show its own work. So this page is the honest ledger — the platform features the site leans on, checked live against the browser you’re reading this in, and a plain accounting of what’s underneath.

THE HONEST LEDGER

The platform features this site relies on, checked live against your browser right now. Nothing here is a claim — it's a reading.

/11
supported here
  • oklch() colorthe accent ramp is generated in perceptual space
  • color-mix()every tint / hover / border blend on the page
  • :has() selectorx-ray frames whatever owns an annotation
  • anchor positioningthe Work menu + inline footnote popovers
  • popover attributefootnotes open on the native top layer
  • view transitionscross-fade morph between pages
  • container queriescomponents that respond to their box, not the viewport
  • scroll-driven animationthe Paper→FHIR scrubber where supported
  • backdrop-filterthe floating nav + the intro veil
  • text-wrap: balanceheadline line-breaking
  • prefers-reduced-motionevery animation has a still twin
FRAMEWORK
Next.js (App Router) · React · TypeScript
RUNTIME DEPS
Framer Motion + Vercel Analytics — and honestly, that's it
STYLING
Tailwind + hand-written CSS · zero UI-kit components
TYPE
Fraunces · Inter · JetBrains Mono — self-hosted, no font CDN
COLOR
One hex in → a full AA-clamped theme, derived per mode
ACCESSIBILITY
WCAG 2.2 AA target · keyboard-complete · reduced-motion honored
BUILT WITH
AI as a multiplier, from a written spec — and it says so
§ 02

The short version

Everything on this site is either HTML and CSS doing things that needed a JavaScript library eighteen months ago, or a small amount of React where real interactivity earns it. The accent you’re reading is one color run through a One hex is anchored at step 500 and walked through a 10-step lightness ramp, then the text/fill/border pairings are each clamped to clear WCAG 4.5:1 — independently for dark and light. The color stays itself where it can and bends only where contrast demands. that guarantees it stays accessible in both themes. The floating footnote you just opened is the native The popover attribute puts the panel on the browser’s top layer, and CSS anchor positioning pins it to its term and flips it when it runs out of room — no positioning library, no z-index archaeology. attribute plus CSS anchor positioning — no library.

It was built the way I build most things now: from a written spec, with AI as a multiplier, in the medium it ships in. That’s not a disclaimer — it’s the point. Press X anywhere on the site to x-ray any piece and see the platform feature behind it.