How this site works

This site is styled as a code editor — title bar, activity bar, tabs, an explorer, a status line, even a ⌘K "go to file" palette. A colophon seemed fitting.

The shell

It's a React 18 + Vite single-page app, but the IDE chrome is a persistent layout: only the editor pane swaps between routes, with a crossfade. The explorer lists each page as a file (this note is how-this-site-works.md), and the animated flourishes — the typed hero line, the dot-grid backdrop, the click spark — are vendored react-bits components running on GSAP.

Static where it counts

A SPA is a bad citizen for crawlers and link previews, so the build prerenders one static HTML file per route — including one per note — with that page's title, canonical URL and OG tags baked in. Scrapers that never run JavaScript get correct metadata; browsers boot the SPA and React Router takes over from there.

Notes without a CMS

These notes are Markdown strings in a single posts.js file, rendered by a deliberately tiny Markdown subset (headings, lists, links, code, blockquotes — about 80 lines). Adding a post is a commit, which means every post is reviewed, versioned and deployed like code. For a site this size, a CMS would be more moving parts than content.

Paranoia, applied

Old habits from the day job: a strict Content-Security-Policy with hashed inline scripts (the build fails if the hashes drift), escaped-and-validated link targets in the Markdown renderer even though I'm the only author, and Cloudflare Pages serving the result from the edge.

The source is the documentation — the whole thing is a few thousand lines, and this note will stay honest for as long as posts.js and the build script agree.