The system behind the site.
Here's the actual system, and a breakdown of the site itself using my own weekly-breakdown format.
Warm parchment, not pure white — avoids the generic AI-cream look.
One step deeper — used for cards and section bands.
Near-black warm charcoal, not pure black — softer on a warm background.
Secondary text — labels, captions, metadata.
Cobalt — the one loud color. Used for CTAs, links, key numbers only.
Burnt orange — reserved for flip-card backs and highlights, so it stays a deliberate second color, not clutter.
Borders and dividers — quiet enough to structure without shouting.
Used only for h1/h2 and card titles — carries warmth and personality without touching body text.
Neutral and highly legible — every paragraph of actual reading content uses this.
Reserved strictly for metadata — tags, stats, nav — so it reads as structure, not styling.
Hero elements stagger in on load once. Motion earns attention by being rare, not constant.
Cards fade + lift as you scroll to them — the page never dumps everything on you at once.
Flip cards aren't decoration — the metric on the back is real information you'd otherwise need another line of text for.
The Lab's funnel animates by chasing a target every frame, so rapid input never resets or stutters the motion.
Every animation has a prefers-reduced-motion fallback — accessibility isn't an afterthought bolt-on.
This portfolio itself — applying my own weekly-breakdown format to the site I built it in.
Audience is PM/product recruiters, not developers — the site needs to prove product and design thinking, not just list finished projects. It also has to double as a real working notebook I update weekly, not a one-time static résumé page.
- Solo builder — no separate design handoff, so every visual decision had to be made and justified alone.
- Static site (Astro) — no backend, so every interactive tool runs entirely client-side.
- Has to stay maintainable weekly — adding a breakdown should be "write a markdown file," not "touch the codebase."
The first version leaned dark-terminal, which reads well for engineers but undersells product/business thinking. Warm parchment + cobalt reads more like a product one-pager — closer to the PM audience actually reading this.
A static project grid is a list. A flip card that reveals a real metric on hover turns browsing into small moments of discovery — and forces me to actually have a number for every project, which is good discipline anyway.
Four separate tools would have bloated the nav and diluted focus. Tabs under one entry read as 'a considered lab' rather than a pile of unrelated demos.
Three-typeface systems usually feel chaotic. Restricting mono strictly to tags/data and serif strictly to headings keeps it feeling like a system, not a font showcase.
- The Lab gives recruiters something to actually do, not just read — that's rare in a portfolio.
- The two-tone palette visibly differentiates it from the sea of dark-mode developer portfolios.
Bet: the Lab's drag-and-drop matrix doesn't support touch-drag on mobile, and keyboard-only navigation through the flip cards and sliders hasn't been properly audited. Both are exactly the kind of gaps a design-literate PM should catch before calling something done — next on the list.