← All projects · № 01

How this site is built

This site: static Astro, build-time SVG charts, a sky that keeps real time, and a few KB of JS.

This site is intentionally boring in the ways that matter and hand-made in the ways that are fun. The colophon at the bottom of every page says “view source; it’s readable”. This page is the longer version of that sentence.

The stack

Astro, static output. Every page is plain HTML rendered at build time. There is no client-side framework, no hydration, no JavaScript required to read anything. A page here is competing with a decade of my browser tabs; it should win on weight.

Charts are build-time SVG. The benchmark charts are Astro components that take arrays from a few JSON files and emit <svg> at compile time. Axis ticks and annotations are computed from the data, so updating a chart means editing numbers, not drawing. No chart library ships to you; the only chart JavaScript is a small hover tooltip.

A few KB of vanilla JS, total. That covers the ⌘K palette and site search, the light and dark toggle, the sun and moon in the hero, count-up animations on stats, the links dock in the corner, and the project filters and card tilt. Everything is written to survive Astro’s view transitions, and everything respects prefers-reduced-motion.

Search is a build artifact. The ⌘K palette fetches a JSON index that is generated at compile time from the same markdown the pages are built from. It loads lazily on first open, never on the critical path.

OpEds, projects and benchmark runs are markdown files in the repo. Each one is a folder with a markdown file and its images. The section pages, the homepage grid, the RSS feed and the search index are all generated from the same collections. Publishing is a build and an upload.

The design choices

Light and dark are one token set. Every component reads CSS custom properties; dark mode is a swap of about twenty tokens on :root, plus a 500 ms cross-fade so the flip feels like dusk instead of a light switch. The hero scene sits out of that cross-fade and animates only transforms and opacity, so the toggle stays smooth. The site follows your system preference until you press the toggle, then it remembers.

The sky keeps real time. Light mode gets the sun, dark mode gets the moon and stars, and whichever is up crosses the hero on an arc set by your local clock, with the sky tinting at dawn and dusk. The clouds are a few SVG blobs with one filter chain per layer. Flip the theme and the sky follows.

Serif on purpose. Fraunces for the headlines and wordmark, Times for everything else. Most engineering blogs reach for the same grotesque sans; this one would rather read like a notebook.

No trackers, no analytics, no cookies, no newsletter. There is an RSS feed and an email address. I genuinely don’t know how many people read this, and that is fine.

Static files on Cloudflare Pages, immutable caching for hashed assets, RSS at /rss.xml. A deploy is one command that builds the site and uploads the output.

If any of this is useful to steal, steal it.

More projects

All projects →