Shipped

ashwingupta.dev - Design Handoff to Production

Personal

⚡A portfolio site is its own proof unit. The designer baseline was self-defeating - the first thing a hiring manager measured was a performance failure on the site claiming performance engineering.

⚠️Designer baseline: 400 CSS-animated DOM particles, 2 MB JPEG hero, Google Fonts loaded per-component, 72 unvetted dependencies. The site needed to signal systems thinking - and was doing the opposite.

⚙️Rebuilt end-to-end. Three-layer spatial architecture (environment, canvas particle field, hologram interface). All visual effects collapsed into a single Canvas 2D RAF loop. Images to WebP with fetchpriority preload. Below-fold sections split via React.lazy + Suspense.

🛡️Scanline texture pre-rendered to offscreen canvas (1 drawImage vs 270 fillRect/frame). Edge cache rebuilt every 3 frames. RAF paused on visibility change. Mouse tracking gated behind RAF. Stable 60 FPS under CPU throttle.

🚀Image: 2 MB → 211 KB (90%). JS bundle: 72% cut. DOM nodes: 400 CSS-animated eliminated. Font requests: 3 → 0. Canvas frame time: 18–25 ms → 4–6 ms.

▸Ambient interface layer: geolocation → Haversine nearest-IATA across a curated airport dataset. Shows visitor's local timezone clock alongside home (BLR). Falls back to `Intl.DateTimeFormat` if permission denied. Normalized mouse XY mapped to [-1, 1] and session timer complete the bottom-right HUD.

▸Exploration tracker built on scroll-depth weighting across 18 distinct pages - not binary page visits. Each page contributes proportionally by max scroll reached. Color arc interpolates RGB across red → yellow → blue → green brackets. Persists in localStorage across sessions.

▸Radial-arc scroll-to-top resets cleanly per navigation via `astro:page-load`. Scroll container detection handles both `.hologram-interface` (homepage) and `.thinking-scroll` (article pages). All HUD widgets use `transition:persist` - zero flicker across View Transitions.

↳ Live at ashwingupta.dev • 90% image reduction • 72% JS bundle cut • 400 CSS DOM nodes eliminated • ambient HUD system with geolocation, exploration tracking, and persistent cross-page widgets

Spatial UI ArchitectureTypeScript / ReactCanvas 2DAstro • VercelPerformance EngineeringAmbient InterfaceDomain & DNS

View on GitHub