Colophon

How this site is built.

This site is built the way the systems it describes are: deliberately, with nothing decorative that doesn’t carry meaning. Since the work itself is proprietary, the craft of the site is the part I can show in full — so here is how it’s made.

Stack

Framework: Astro — static output, zero client JS by default
Language: TypeScript, end to end
Content: Astro content collections, schema-validated (projects, logs)
Styling: Hand-written CSS + Tailwind v4 tokens — no component kit
Type: Geist + Geist Mono, self-hosted (no external requests)
Color: Design tokens — “Kantan, dimmed”: charcoal ground, deeper panels, one signal orange
Hosting: Vercel, static prerender
Analytics: Vercel Analytics — privacy-light, no third-party trackers

Rendered at build, not at runtime

Every page’s Open Graph card is generated during the build with satori (layout → SVG) and resvg (SVG → PNG) — no runtime image service. The downloadable résumé is a real PDF drawn with pdfkit from the same data and the same embedded fonts, so its text stays selectable and machine-parseable rather than a flattened image. One source of truth feeds the page, the card, and the PDF.

The diagrams are drawn, not stocked

The architecture diagrams are hand-built inline SVG in the site’s own palette — the honest visual of a backend system, where a stock photo would only read as filler. Edges are computed curves from one shared layout file. When a diagram scrolls into view its nodes assemble along the data flow, each edge draws itself out of its source, and events start travelling the orange hot path (paused while off screen). Alt text describes the system, not “diagram”.

Motion is earned

Motion carries meaning: the hero is a live-style log of events from every domain the work spans, and the diagrams animate the actual data flow. Page transitions use the View Transitions API; scroll reveals enhance content that is already visible by default, so nothing ships blank if a transition never fires. Every animation has a reduced-motion alternative.

Quiet keyboard affordances

⌘K / Ctrl-K opens a command palette built on the native <dialog> element — jump to any page or project, or copy the email, without the mouse. It is progressive enhancement: with JavaScript off, the site is still fully navigable.

Accessible and fast by construction

Contrast is verified for WCAG AA on the dim ground, including small meta text — the signal orange for fills and display type, a lighter orange for small text. Full keyboard navigation with a visible focus ring, a skip link, semantic landmarks, and sitewide JSON-LD. The content is server-rendered HTML with self-hosted fonts; the JavaScript is a thin enhancement layer (view transitions, ⌘K, scroll reveals) that the page works without, so it stays fast on a phone over a slow connection.

Curious about a specific decision? Trace a request through the trading core, or ask me directly.