← All writing

How this site is built

· Meta

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 post 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 activity chart, the language bar, and the benchmark bars are Astro components that take arrays from a few JSON files and emit <svg> at compile time. Axis ticks and the “best week” annotation 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, the project filters and card tilt, and the show-more expander. 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.

Writing and projects are markdown files in the repo. Each post or project is one folder with a markdown file and its images. The archive pages, the homepage lists, the RSS feed and the search index are all generated from the same two 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 site follows your system preference until you press the toggle, then it remembers.

The sky keeps real time. The sun crosses the hero between six in the morning and six in the evening, the moon takes the night shift, and the sky tints at dawn and dusk. That runs off your local clock, not the colour theme, so a night owl in light mode still gets the moon.

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.

Enjoyed this?

New posts land in the feed the moment they ship.

Follow via RSS