Personal Landing Page v1

The public face of the sprint before the real portfolio existed. You land in a dark room with a flickering neon sign that reads "100 PROJECTS / done in Claude" and a live counter. Scroll, and a pull-cord drops, the lights come on, and project cards start floating past.

No automated tests. The counter and cards are a build-time snapshot, so they only update when build.mjs runs again. It was checked with headless Edge screenshots and it runs on a local dev server.

Claude Code, about 3 hours, and the most back-and-forth of the first ten. I pasted a Dribbble moodboard and a headshot and said which corners I liked. Claude named the styles and proposed a mix of them. The first draft was a generic warm editorial page, which was the wrong concept. After I briefed it on what I actually pictured, we pivoted to the neon sign and pull-cord.

The cord was the fiddly part. It started as a click-only stretch. We rewrote it to be driven by scroll, then hit a bug where the pill at the end detached from the line and swung a different direction. The fix was treating it as a real pendulum: rotate the parent, and move the pill by exactly the amount the line stretches. Claude also fixed a dev server that 404'd on folder URLs, a malformed <span> in the neon markup, and swapped height and width animations for transforms after the design hook flagged them.

A small build.mjs reads tracker.csv, finds any real screenshots on disk, and writes data/projects.json. At the time the counter read 03 / 100.

• A whole scroll experience can run on one CSS custom property. --t goes from 0 to 1 with scroll, and the background fade, the cord stretch, the hint, and the counter all read that one value.
• Animating transform instead of height isn't just about speed. Switching the cord to scaleY with a matched translateY is what kept the pill attached to the line.
• A page that shows a living dataset should generate itself. Reading the tracker at build time means the count can't lie, and shipped projects swap from placeholder to real screenshot on their own.
• Brief, then ask. The best idea came out of the back-and-forth, not the first draft.

It sat on top of #1's tracker.csv, which is the whole reason the counter could be honest. The idea of a page that rebuilds itself from files I already keep came back at the end: the portfolio site (#96) and the documentary page (#99) were both built as generators that rebuild from the case studies and the tracker. That's the same idea, not shared code.

One thing aged: the sign says "done in Claude." By the end, 13 of the 100 were built by Codex.

I'd wire the counter and cards to the live tracker at runtime instead of a snapshot, and add a cut-out version of the headshot so I float like the cards do.