redesign: bento grid + progressive disclosure + view transitions

[4444J99]

The Problem

The portfolio is very vertical (~5-6 screenfuls on homepage). Research shows 74% of viewing time happens in the first 2 screenfuls. Scrolling loses attention. Hiring managers get 7.4 seconds of scan time.

The Research

Full research at .claude/plans/2026-03-17-ux-redesign-research.md. Key findings:

• NNGroup: 57% of time above fold, 74% in first 2 screens
• Progressive disclosure: hide density behind layers (tabs, expandable cards, hover reveals)
• Tufte: maximize data-ink ratio — "busy" is a hierarchy failure, not a quantity problem
• View Transitions API: Baseline across Chrome/Safari/Firefox, zero-JS morph animations
• Dark theme: --text-muted: #707070 fails WCAG AA (needs #787878+)
• Conversion: recruiters judge in 7.4s, cards for browsing, lists for comparison

The Design

Bento grid with progressive disclosure and view transitions:

Viewport 1 (above fold):
  ┌─────────────────────┬──────────┐
  │ Hero + proof metrics │ View     │
  │ (repos, tests, yrs) │ toggle   │
  ├──────────┬──────────┼──────────┤
  │ Featured │ Featured │ Persona  │
  │ project  │ project  │ links    │
  ├──────────┴──────────┴──────────┤

Viewport 2 (74% attention zone):
  ├──────────┬─────┬──────────┬────┤
  │ Project  │Proj │ Project  │Stat│
  │ card 3   │ 4   │ card 5   │pill│
  ├──────────┼─────┤──────────┤    │
  │ CTA      │Proj │ Project  │    │
  └──────────┴─────┴──────────┴────┘

Card click → view-transition morph → full case study page.

Implementation Tasks

• Fix --text-muted WCAG AA contrast (quick win)
• Create BentoGrid component with CSS grid + mixed cell sizes
• Compress hero: embed stats inline, remove separate stats section
• Add view-transition-name to project cards for morph-to-detail
• Make engineering/creative toggle persistent and prominent
• Implement expandable card pattern (click to reveal detail inline)
• Add persistent navigation rail (replace scroll-to-find)
• Responsive mobile fallback (bento → dense single column)
• Apply to all pages (about, dashboard, resume, etc.)
• Install Microsoft Clarity for post-launch validation

[4444J99]

S-wiring: Progressive disclosure now visitor-facing

Session S-wiring (2026-03-30) wired the swarm-generated copy into the live system:

Onboarding panel — Placeholder text replaced with two-line cards (description + audience targeting). Three personas addressed directly: recruiters, engineers, researchers.

Bridge buttons — 158 HTML arrows removed (double-arrow CSS bug fixed). DepthControl.astro now has a 10-entry contextual label map (BRIDGE_LABELS). 70 buttons across 10 top pages show contextual text ("See the architecture", "Read the evidence", etc.). 102 remaining buttons get improved default ("See the full picture").

Hero copy — Variant A (direct/confident) deployed to HeroBentoCell + HeroSection.

29 files changed, 526 tests passing. Advances this issue's progressive disclosure goal. Remaining: stranger test validation (omega #2), bridge labels for 11 more pages (IRF-PRT-022).

IRF: DONE-297, DONE-298.