Colophon
How this site is built, and who built what.
Atlas, the design here, is topographic contours fading into grid paper, amber accents on a dark field. The brief was a workshop notebook, not a brochure.
How it got built
I suck at web design. The time capsule is the evidence.
So I used Claude (Anthropic’s coding agent) for the design, CSS, and template work. The process was iterative. Five mock-ups and wireframes before anything stuck. I tried a clean techy direction, a road-trip / waypoints feel, and a nature-journal look before landing on what’s here: a little of each. Topo lines for the trail side, grid paper for the lab side, amber waypoints holding it all together.
A couple of examples from the process. I actually like(d) Grid. But I want my websites to be more than just a techy blog. I wanted to have my hikes, and travels, and other tidbits posted too. And it didn’t feel like they belonged there as much.
The structure is entirely mine. The chapter idea, pulling out a handful of entries as the through-line of a longer arc, came out of wanting a way to highlight the few things that actually mattered without burying them in the registry. I wanted blog-length writeups and quick scratch notes living side by side, and the whole thing to work for the day job, the home lab, hiking, the kitchen, and trips - all in the same archive.
I really enjoyed the iterative process with Claude Design honestly. It made it fun. Webdesign has always been a slog, I hate CSS, frankly HTML is a pain. Its hard to get things to look “good”. With Claude Design I could mark up different sections, give feedback in plain language. It was really like working with someone. Anyways, before this sounds too much like an ad… :)
Under the hood
Built with Eleventy. Markdown in, static HTML out, deployed by a GitHub Action. Search runs on Pagefind. Set in IBM Plex Sans and IBM Plex Mono.
Two faces share the same source: benvirgilio.com leads with the CV, nebriv.com leads with the workshop. A SITE_FACE env var picks which one builds. Entries live one-per-directory under src/entry/, numbered, with their images alongside. Drafts only show in dev. Trail entries get their own layout because they have GPX files and elevation numbers to display.