100
Lighthouse desktop, flagship
Perf, a11y, best-practices, SEO. all 100 on desktop after wave 3. Mobile holds 95+ across all routes.
Case study · Wave D
portfolio v9.3 chrome rebuild.
One institutional register, ninety-two pages, zero decoration that earns its bytes.
The portfolio had grown into 84 routes across two lanes (AI engineering, quantitative research), maintained for eleven months. The v9.x line had accumulated a layer of decoration. accent gradients on hero panels, soft halo shadows, oversized radii, motion that ran for motion's sake. The result read junior: confident on a single page, drifting across the site.
v9.3 set one binding constraint: every surface must read as the same institutional chrome. Bloomberg-tape dark with one amber accent, hairline rules, mono + serif type pair, no halo, no glow, no gradient. The measure was not aesthetics. The measure was recognition across pages: a recruiter landing on the flagship, the project, and the proof page should see the same document.
92routes rebuilt
7chrome waves shipped
0halo / glow / gradient tokens
1accent (mono + amber)
Binding rules
the chrome contract.
Six rules, written down before any component ships. If a rule has no enforcement, it is not a rule.
- 01
Tokens, never literals.
Every color, space, type, and motion value pulls from
src/styles/tokens.css. No inline hex. No magic numbers. If a token does not exist, raise a request to the UI/UX owner before shipping. - 02
No halo, no glow, no gradient.
The chrome is institutional: hairline borders, status-bound shadows, mono surface + one amber accent. Halo shadows on chrome are rejected. Radial gradients on backdrops are rejected. Linear-gradient text fills are rejected.
- 03
Bundle discipline: ≤ 100 KB gzipped per route.
Total JavaScript per route must hold the 100 KB gzipped budget. Lazy-load below-the-fold components. Code-split per route. Astro islands over monolithic React. Budget is enforced by CI. failures block deploy.
- 04
WCAG 2.2 AA on every route.
Contrast ≥ 4.5:1 on body text, ≥ 3:1 on large text and UI controls. The a11y specialist audits per-component before merge. The 16-cell status × background contrast matrix is filled with measured ratios before any binding color ships.
- 05
Reduced motion is non-negotiable.
Every animation ships with its three states (pre, post, no-motion) in the same PR. The un-animated page must be byte-equivalent to the post-animation page. The
prefers-reduced-motionguard is not a follow-up. - 06
NDA-clean copy.
No platform or employer names on the public site unless on the explicit
/experiencepage. Public-data reproducible. Every claim with evidence. The portfolio reads as a senior practitioner, never a junior.
Wave log
how the chrome was rebuilt.
Seven waves. Each wave closed a specific gap from the audit. Each wave shipped atomic, with a verification gate.
| Wave | Scope | Finding closed | Commits | Pages |
|---|---|---|---|---|
| 1 | Token dedupe + chrome palette unification | 17 duplicate hex literals → 1 token alias | 1 | all |
| 2 | IA quick wins + above-the-fold route grid | 7 of 10 critical IA findings | 1 | 3 |
| 3 | Architecture: home HTML −61%, motion lazy-load | CSS hoisting bloat + render-blocking motion.css | 3 | all |
| 4 | Security baseline + CSP defense in depth | JWT verify, cookie policy, CSP hardening | 5 | all |
| 5 | Chrome polish rounds 1 to 5 (hl-blue + stagger) | Techy-blue headline + cascading fade-in | 5 | 26 |
| 6 | WCAG 2.2 AA pass + JWT jose patch | 5 of 5 routes clean, 13 of 13 CVE patched | 2 | 5 |
| 7 | Site header unification + 36-page inheritance | Header duplication removed across surfaces | 1 | 36 |
Architecture delta
The flagship home route shipped at 103.7 KB HTML in v9.2. The v9.3 wave 3 rebuild dropped it to 40.3 KBn/a a61% reduction with zero visual regression. The motion layer (27 KB CSS, 6 keyframes, 44 transitions) now loads via themedia="print"; onload="swap" pattern on full-chrome pages only; slim-chrome pages pay zero bytes.
Verified outcomes
what the gates said.
Numbers from the audit, the Lighthouse run, and the bundle analyzer. Not a marketing page. a receipt.
0
axe-core violations
Per-route axe-core sweep: 0 violations, 0 of 91 rules failing on the flagship. A11y specialist sign-off on every chrome surface.
≤ 100
KB JS gzipped per route
CI gate enforces the budget. Slim-chrome routes (home, /for-recruiters, /screening-call) ship zero motion.css bytes via the deferred-load pattern.
5 / 5
WCAG 2.2 AA passes
All five flagship routes pass WCAG 2.2 AA on body text, large text, UI controls, focus order, and target size. Binding color matrix filled before any chrome ships.
0
halo / glow / gradient violations
Vibe-audit pattern-matcher rejects linear-gradient on text,radial-gradient on backdrops, and halo-shadow chrome. CI gate.
36
pages inheriting unified chrome
Site header unification (wave 7) collapsed N duplicate chrome components into a single source. 36 pages now inherit one chrome. recognition across surfaces is a function of components, not hand-edits.
Smoke verification
Route renders at /case-studies/v9-3-chrome, status 200, no console errors, no missing assets, single h1, valid JSON-LD breadcrumbs, four section anchors (#goal, #contract, #execution,#result) reachable. Bundle within route budget.
Want to see another wave?
Every chrome wave ships atomic, with a verification gate. The ledger is public.