My Substack profile was a wall of “Read full story” embeds. 400+ lists, two books, a travel map, a games hub and an AI practice, and the only way to see any of it was to scroll a feed. When someone asked what I do, I had no single link to send them.
What It Is
One page at clemens.listsof30.com. It opens on a typed line, “I love lists of 30.”, then an ID card with an engraved portrait. Flip the card and it says hi: email, socials, the Substack.
A switch at the top changes who you are reading about. Author is ink on warm paper, set in Lora. Engineer turns the page near-black with a blueprint grid, every letter in JetBrains Mono, the portrait printed as a negative, and the headline becomes “I build tools I actually use.” Adding #engineer to the link opens that side directly, so a professional contact gets a different first impression from the same address.
Each side has its own numbers and its own work. The writer side has Lists of 30, the books, and Clem’s Travels. The engineer side has Clembot, Study, Job Search, the essays, the games, and Recipe Flow.
Thirty Elements
The brief I started from asked for a skills grid laid out like a periodic table. A skills grid is a résumé, and this page is not one, so the table became thirty elements of my life in five rows: Write, Wander, Make, Family, Self. Tap one and a single panel opens under the table with the list it came from.
Twenty-eight of the thirty open a published list, from 30 Lasts with Evie to 30 Beginner Table Tennis Advice. The other two, Mentoring and Osaka & Hamburg, do not have a link yet. I renamed a few elements along the way to match the post I wanted there, so Happy Memories became Peak Dad Moments. The last element is Future Clemens, because item 30 of a list is supposed to zoom out.
How the Swap Works
Every color, font, and corner on the page is a token. Engineer mode overrides five color tokens, two font roles, and the radii, and that is the whole swap. No component knows which mode it is in. A script in the page head sets the mode before the first paint, so the engineer link never flashes the paper version first.
Every interaction has a version without JavaScript. The switch disappears and both sides show. The ID card shows both faces. The thirty elements become a plain list.
The page is black and white with one exception. Logos keep their color, because a logo redrawn in grey stops being that logo.
Lemons
Tap anywhere and lemons fly out. The lemon is the See Lemons mark from my sign-off, so it counts as a logo here and stays yellow.
Each tap fires one of five fireworks: a ring, a two-layer peony, a fountain, a spiral, or a drooping willow, never the same one twice in a row. Then they fall. The lemons bounce off the ID card, the work cards, the number tiles, and the thirty elements. They land on top of them, ride along when you scroll, and roll off the edges. Each one lasts about four seconds, so tapping fast builds a show. Up to 240 can be on screen at once, and the oldest fade out early so every tap still fires.
None of it gets in the way. The tap still reaches the link or button under it, and if your device asks for reduced motion, no lemons appear.
What Broke
The site went down for about ten minutes on launch day. A build ran out of memory and left its output folder empty, the deploy read the build’s log text instead of its exit code, and the empty folder went to production. Every URL returned 404. The machine had run out of memory because preview servers I had started earlier that day were still running. Deploys now refuse to run unless the build exits cleanly and produces every file it should.
The security headers caught one thing too, and only on the live host. A strict font rule blocked seven small font files that no local preview could show, and the first check against the real domain found it.
Status
Live at clemens.listsof30.com, a static Astro site on Cloudflare Pages. A few facts still carry a dashed underline. That means I have not confirmed them yet, and they stay marked on the live page until I do.