capad.fyi · hero rebuild · scoped to the hero
Scoped correctly this time. One section. Nothing below the hero is being redesigned here — Selected work, the timeline, the stack, the manifesto and the colophon all stay exactly as they are, in your existing design system.
The design system is the one already in globals.css: the same
--paper, --ink, --muted, the same
.glass recipe, the same .grain, the same
.ambient, the same radius-40 pane, the same eyebrow pill straddling
the top edge, the same proof strip straddling the bottom, the same dot rail. Every
value on the mock below is lifted from that file rather than eyeballed.
The one idea: the handoff is geometry, not material. Your own print CSS already says it — “the geometry — radius, hairline rule — is what actually carries the design onto the page.” So the hero keeps the glass pane's exact shape and prints on it. Its bottom edge is a perforation, the CTA sits on the perforation, and below the tear your real glass cards begin unchanged.
Kept deliberately, because these are the parts of the current hero that already work.
| Kept Pane | Radius 40, the 1px hairline, the inset bevel stack and the ::before rim gradient, all from globals.css:101-175. Only the fill changes: rgba(255,255,255,.44) becomes --paper. The silhouette is identical, so it is recognisably your hero. |
|---|---|
| Kept Straddles | The eyebrow pill on the top edge and the proof strip on the bottom edge are the current hero's two best gestures and they are load-bearing for the composition. Both stay, in the same places. |
| Kept Type | Wordmark capad at the same weight and tracking. Geist Sans, Geist Mono, the Caveat signature, the same mono eyebrow scale. |
| New Portrait | The picture moves onto the sheet, whole, right-aligned inside the pane. T4 ink, deckled silhouette, the deliberate registration offset you liked. It was absent from the current hero entirely. |
| New The tear | A perforation along the sheet's bottom edge, notched with a repeating radial mask. It costs no filter, and it sets a repeating rhythm that the card grid picks up underneath — which is the actual flow mechanism. |
| New CTA on the seam | See the work straddles the perforation, as it straddles the card edge on the live site. The button is now literally the boundary between the two materials, so pressing it reads as crossing from print into product. |
The seam is at 840px. Everything below it is your existing section, unmodified.
Read it top to bottom exactly as you would scroll it.
I build the tools that shouldn’t need to exist.
The ones that do frustrated me into building better ones: fast, free, and yours to keep.
shipping in the open searchts · glyphmaps · grove · beep-beep-oss
selected work
Two shipped, two in progress. Status updates live, straight from the CMS.
A keyless web unlocker that reads, searches, and transcribes what a naive fetch cannot, from bot-walled pages to whole AI-chat share conversations.
A PR reviewer in two forms. It checks the branch out, installs it, runs the repo's own test command, and posts findings as me.
Google Maps turn-by-turn on the back of a phone, mirrored onto the Nothing Phone (4a) Pro's 137-LED Glyph Matrix. No Maps API key.
A free Git review companion that sits beside your AI coding editor. The commit graph, diffs, and every in-flight worktree, live.
also shipped, smaller: CoffeeBreath · Discord Voice Overlay · Dooper · MSU Halls Register
not mine, I just fixed it: wmux
Nothing is cut. Two moves, both yours to confirm.
| Now | hero → selected work → a short timeline → who i am → the stack → what people say → say hello |
|---|---|
| Proposed | hero → selected work → what people say → a short timeline → the stack → who i am → say hello |
| Move 1 | Testimonials up, directly after selected work. Right now the reader sees the work, then a timeline, a manifesto and a stack, and only meets third-party proof on the way out. Moving it puts the proof directly under the thing it is proof of, while it is still the thing being read. It also means the walk into the ask is your own voice rather than someone else’s. |
| Move 2 | “Who i am” becomes the last content section. The manifesto is the affinity section and affinity is what you want late, once the reader already trusts the work. It currently sits third, where it interrupts the proof chain between the timeline and the stack. |
| Say hello | Stays last. I did not put the manifesto after it. A portfolio that ends on biography instead of a way to reach you is worse, and you did not ask for it. |
You liked the shared idea, so it is drawn properly here rather than described.
| Option A | Keep the deck exactly as it is. The glass card carousel, the flip, the droplet burst. It is genuinely the most distinctive interaction on the site and it is already fast on real hardware. Moving it up one section is a one-line reorder. |
|---|---|
| Option B | The shared idea. Each quote attaches to the project it is about, so the two searchts tweets sit under searchts and the wmux maintainer note sits under wmux. Stronger as evidence, and it stops being a separate section at all — but it gives up the card-flip interaction, which is a real loss. |
| What I would do | A. Now that the hero is rebuilt and the reorder is small, the deck is the one piece of motion in the whole site and it earns its place — especially one section higher, where it is read instead of scrolled past. Keep B in reserve for the case-study pages, where per-project peer review has room to actually breathe. |