Design notes / construction drawing

The same page, drawn as blueprint.

Every diagram below mirrors Main’s scroll order — same regions, wireframed instead of styled, with callouts pointing at the specific technique, tool, or file behind each piece, from the hero fan geometry down to the site-wide chrome that sits outside any one section.

01

Hero

Two-column grid, headline left / fanned photo stack right. The fan replaces a single static portrait so it reads as one composed object, not a gallery grid.

Bricolage Grotesque / font-displayInline stat textPhotoFan — fanned overlap geometryTiltCard — cursor-reactive 3D
02

Experience

Vertical timeline — a gradient connector line with a pulsing dot marking the current role, so it reads as a progression rather than a bulleted resume list.

Gradient connector linePulsing dot — current roleglass-card per waypoint
03

Selected work

Sticky two-column — picker list left, detail panel right. Terminal-window chrome (traffic-light dots, fake file path) was stripped from the detail panel; a ghost numeral is the index cue instead.

01
Picker order sets detail panelGhost numeral — index cueEditorial stat row, not pills
04–06

Statement → Life → Connect

One continuous scroll region — the Barclays Center clip pinned as the background via CSS sticky (no scroll-hijacking JS), content scrolling over it until the footer clears. The clip's own arena audio is the soundtrack.

life-bg.mp4 — pinned full-bleed background
PinnedVideoSection — sticky trickglass-card-strong-video over videolife-bg.mp4 — H.264, native audioAuto-plays/pauses on scroll visibility
07

Site-wide chrome

The stuff outside any one section, stacked as fixed-position siblings of the page content, not part of it: a scrolling status band up top, a floating two-tab nav pill just below it, a scroll-spy dot rail down the right edge (labels in a liquid-glass pill so they stay readable over anything moving behind them), and the layered ambient background (grid + cursor trail) underneath everything.

StatusTicker — scrolling status bandNavigation — two route tabs (Main/Design)SectionRail — dot rail, glass-pill labelsScrollGradient — scroll-linked aurora fadeAmbient background — see 08
08

Ambient background system

Two layers, Main only, stacked behind every section: an isometric-skewed grid of boxes that light up along the cursor's path, and a glyph trail of tool/stack icons following the same cursor. Both read `[data-trail-mask]` on headings/body copy so neither renders behind text a reader actually needs to see.

BoxesField — isometric grid, cursor-lit cellsAsciiFlowTrail — brand-glyph cursor trailBoth respect [data-trail-mask] + reduced-motion

Full interactive X-Ray (live wireframe overlay on the real components, spacing rulers) is next — this pass is the static diagram version.