Build Notes
Colophon
How this site is made, what it runs on, and why it keeps changing.
Stack
This site runs on the NEAT stack: Netlify, Eleventy, Alpine, and Tailwind. The plumbing has stayed boring in the best way. The visual language has changed a lot more than the stack.
| Layer | Tool |
|---|---|
| Static site generator | Eleventy 3 |
| CSS framework | Tailwind CSS v4 |
| JS sprinkles | Alpine.js |
| Hosting | Netlify |
| Comments | Giscus via GitHub Discussions |
| Upvotes | Upstash Redis via Netlify Functions |
| Search | Client-side search, no external index |
| Analytics | Google Analytics, plus a few local counters for site features |
| Fonts | Plus Jakarta Sans and JetBrains Mono, both self-hosted |
| Icons | Feather Icons |
| Syntax highlighting | Prism.js with custom themes |
| Images | eleventy-img plus a few remote image shortcuts |
| Version | v2.6.14 |
Current Version
The site is currently on v2.6.14. The 2.x era started as a reset: less interest in looking tidy, more interest in looking like mine.
The current design is trying to be three things at once: a notebook, an archive, and a workbench. That pushed the site away from rounded app cards and startup-homepage habits. The new baseline is textured paper, squarer framing, denser indexes, stronger typography, and pages that feel like shelves instead of widgets.
Design Language
The rule now is simple enough to remember:
- Display serif for titles - things worth reading should look like they were named on purpose.
- Serif body for support copy - blurbs, notes, and explanations should read like prose, not UI helper text.
- Monospace for metadata - dates, labels, counts, breadcrumbs, and small navigation bits should feel archival.
- Density as a signal - not clutter, just enough structure to suggest there is actually a body of work here.
- Squarish surfaces - flatter, sharper, less bubbly, less dashboard.
The actual working rules now live in the repo as DESIGN_LANGUAGE.md. I finally wrote them down because I got tired of rediscovering the same typography problems one page at a time.
Moving Parts
Most of the site is static, but a few sections are pulled together at build time. Goodreads fills the reading shelf, Letterboxd fills recent watching, Steam and GitHub provide small activity signals, and a handful of cached APIs keep the now page from feeling frozen.
The interactive pieces are intentionally small. Giscus handles comments through GitHub Discussions. Upvotes and reactions use Redis behind Netlify Functions. Search stays client-side, which keeps the site easy to host and avoids sending the archive to an external search index.
Redesigns
By my read of the changelog and commit history, this is major redesign #6. That count is a little fuzzy because some phases blur into each other, but these are the six visual eras that materially changed the site's grammar.
| # | Era | What changed |
|---|---|---|
| 1 | Initial NEAT site | The first clean Eleventy/Tailwind version. Straightforward personal site, simple blog, basic structure. |
| 2 | Feed and cards era | The site started growing sideways: unified activity feed, more sections, more cards, more surfaces, more UI. |
| 3 | Ground-up system reset | A proper design-system pass. Shared components, cleaner consistency, better page-level discipline. |
| 4 | Dense editorial phase | Less chrome, flatter rows, tighter spacing, stronger metadata, more text density, fewer decorative moves. |
| 5 | Surface/commonality pass | All the lagging pages got pulled into the same system. Less one-off styling, fewer weird holdouts. |
| 6 | Archive/workbench redesign | The current one. Textured paper, sharper edges, stronger type hierarchy, homepage as index, and a deliberate move away from startup energy. |
Every redesign has taught me a slightly different lesson. Early on I mostly learned how to add features without breaking the place. Then I learned that consistency matters more than novelty. This pass drove home something else: typography is not decoration. It is most of the interface.
The homepage now works better because it reads like a table of contents. The archive works better because titles actually look like titles. The footer works better because it looks like a map instead of leftover small print. None of that came from adding more components. It came from finally making the structure and the type agree with each other.
AI-Assisted Development
This site is built with AI help, but not on autopilot. Copilot, Codex, and the rest are useful for boilerplate, implementation, audits, cleanup passes, and repetitive consistency work. They are much less useful at deciding what the site should feel like. That part is still mine.
Some posts are also AI-assisted and marked accordingly. I would rather over-disclose than pretend this stuff is not happening.
Source
The source is on GitHub. It is not a starter template. It is a long-running personal site with too much history, which is exactly why I like it.