High-Throughput Portfolio Platform
A developer-centric portfolio designed to load sub-second, achieve zero layout shift (CLS), and render advanced visual effects using GPU compositing instead of resource-heavy images.
Interactive Architecture & Performance Sandbox
Google Lighthouse v10 Benchmarks (Core Web Vitals)
Note: Layout shift (CLS) is kept near zero via explicit aspect ratios. Performance metrics represent standard dynamic client loads under cellular emulation.
The Challenge
Standard web portfolios rely heavily on media assets, high-weight custom fonts, and third-party libraries, leading to cumulative layout shift (CLS), delayed first paint times (FCP), and poor performance scores. Integrating decorative ambient mouse-glow trackers often consumes excessive CPU cycles due to synchronous JavaScript layout reads.
The Engineering Solution
Built on Next.js 16 (App Router) and React 19, this system uses Tailwind CSS v4 to declare dynamic Obsidian design tokens natively. Hover glows are composited in the GPU via pointer event tracking bound to requestAnimationFrame, avoiding style recalculation cycles. Page texture is rendered using an inline SVG turbulence noise filter, saving hundreds of kilobytes in image requests.
Technical Implementation Highlights
Glow Pointer Tracking
Mouse movement updates CSS variables globally. The browser composites the radial-gradient layer directly in the GPU using the contain: strict layout boundary property, preventing page-wide layout recalculations.
Inline SVG Noise
Using feTurbulence inside a base64 inline data URI, a high-fidelity retro grain is composited directly onto the viewport at a cost of less than 300 bytes, avoiding high-weight grain asset overhead.
React 19 & Tailwind v4
Optimized server components generate minimal hydrate client bundles. Tailwind CSS v4 compiles directly into CSS variables, establishing clean structural boundaries between styling and layout logic.