How this site is built

The site is its own code sample. The source is public, and every claim below links to the file that backs it.

The stack, and why it is small

A personal site should load fast and get out of the way, so there is no framework runtime on the page. Astro renders everything to HTML at build time. The styling is a hand-written token system on top of Tailwind 4. The only JavaScript is one module for the interactions you can feel (reveals, scroll-spy, the tilt and the magnetic buttons).

  • Astro 5 Fully static output. Every page is HTML at build time.
  • Tailwind CSS 4 Config-less. The whole theme is four CSS partials of custom properties and component classes.
  • Self-hosted fonts Anton, Archivo Variable and DM Mono via @fontsource, preloaded, no third-party font host.
  • One interaction module Reveal, scroll-spy, tilt, magnetic buttons and the sticker physics live in a single file with a cleanup path.
  • Playwright End-to-end and visual checks run against the built site in three browser engines.
  • Cloudflare Pages Static deploy with CSP, HSTS and Permissions-Policy headers set in a _headers file.

By the numbers

  • Home page, over the wire ~100 KB HTML + CSS + JS + four font files, gzipped
  • Framework JavaScript 0 KB No React, no hydration, no client router
  • Interaction bundle 2.7 KB One TypeScript module, gzipped
  • Browsers in the test matrix 3 Chromium, Firefox, WebKit
  • End-to-end tests 16 Counted from the suite at build time

Measured 22 Aug 2026

Design system

Neobrutalist on purpose. Thick borders, hard offset shadows and oversized display type on a warm paper ground. Light and dark share one structure that inverts. The --ink token carries text, borders and shadows, so flipping it flips the whole page without touching a component.

Accents are rationed. The acid yellow only ever sits on dark ink, the coral is tuned to pass AA as text on paper, and motion respects prefers-reduced-motion down to the blinking cursor.

tokens.css components.css motion.css prose.css

Testing and shipping

npm run build type-checks first, so a bad type fails the deploy rather than shipping. Playwright runs the suite against the built output in Chromium, Firefox and WebKit, including a performance budget that fails if the home page grows past 150 KB.

Cloudflare Pages serves the static output behind CSP, HSTS and Permissions-Policy headers. The footer on every page links to the exact commit it was built from.

astro check Playwright Prettier GitHub Actions