ashwingupta.dev
A portfolio site is its own proof unit. The original claimed performance engineering while shipping every symptom of the opposite. Rebuilt end-to-end, then extended with an ambient interface system that treats the chrome as part of the argument.
The Problem With Self-Defeating Baselines
The designer baseline shipped 400 CSS-animated DOM particles, a 2 MB JPEG hero, Google Fonts loaded per-component, and 72 unvetted dependencies. Every technical visitor's first data point was a performance failure on the site claiming performance engineering. The standard response - clean it up, swap some images - doesn't address the structural problem. The site needed to signal systems thinking, and it was doing the opposite at the source.
The Architecture
Rebuilt end-to-end as a three-layer spatial interface: environment shell, Canvas 2D particle field, hologram surface. All visual effects collapsed into a single Canvas RAF loop, eliminating 400 CSS-animated DOM nodes entirely. Images converted to WebP with fetchpriority preload on the hero. Below-fold sections split via React.lazy and Suspense so the initial bundle only contains what the first viewport needs.
Scanline texture pre-rendered to an offscreen canvas - 1 drawImage per frame instead of 270 fillRect calls. Edge cache rebuilt every 3 frames. RAF paused on visibility change. Mouse tracking gated behind RAF. Each technique eliminates work at the source rather than hiding it. Optimization is structural, not cosmetic.
Performance Outcomes
Image: 2 MB → 211 KB (90% reduction). JS bundle: 72% cut. DOM nodes: 400 CSS-animated nodes eliminated. Font requests: 3 → 0. Canvas frame time: 18–25 ms → 4–6 ms. Stable 60 FPS under CPU throttle.
The Ambient Interface System
After the performance baseline was locked in, the portfolio grew an ambient HUD layer - persistent fixed widgets that add spatial context without intruding on content.
Bottom-left: a geolocation widget that resolves the visitor's coordinates via navigator.geolocation - falling back to Intl.DateTimeFormat timezone if permission is denied - to the nearest IATA airport code using Haversine distance across a curated set of major airports worldwide. Paired with a live clock and GMT offset display for both the visitor's location and home (BLR).
Bottom-right: normalized mouse XY mapped to [-1, 1] viewport coordinates, a session elapsed timer, and a radial SVG progress arc for back-to-top navigation. The arc tracks scroll position per-page, resets cleanly on Astro View Transitions via astro:page-load, and detects the correct scroll container - .hologram-interface on the homepage, .thinking-scroll on article and work pages.
All HUD widgets use transition:persist across Astro's View Transitions - they survive page navigation without remounting, without state bleed from the previous page, and without a single frame of flicker.
The Exploration Tracker
A progress widget embedded in the right HUD that measures how much of the site a visitor has actually read - not binary page visits, but scroll-depth weighted contribution per page. Of the 17 distinct content pages tracked, each contributes proportionally based on the maximum scroll depth reached during the visit. Arriving at a page and leaving immediately contributes near zero. Scrolling to the bottom gives full credit for that page's 1/18 share of the total.
The progress arc color-stages smoothly: red (0–20%), yellow (20–60%), blue (60–90%), green (90–100%) - via linear RGB interpolation across five stops, no abrupt bracket jumps. The arc fill, stroke, and icon tint all transition together at 0.6s ease. State persists in localStorage across sessions.