Cinematic Technologist Portfolio
Adaptive performance canvas & interactive narrative portfolio
System Overview & Objective
Built from scratch to turn portfolio browsing into a cinematic narrative. Features a scroll-linked 2D canvas that interpolates across 4 thematic stages (Idea -> Prompt -> Code -> Reality). Engineered with a custom usePerformanceProfile hook that interrogates deviceMemory, hardwareConcurrency, and prefers-reduced-motion to dynamically scale DPR, particle counts, and blur intensity.
Verified Empirical Benchmark & Metrics
Turbopack static prerender (7/7 routes); 60 FPS target canvas loop with dynamic DPR scaling (Profiled across DPR 1.0–2.0 under hardware concurrency throttling).
Execution Pipeline & Signal Flow
Technical Challenge & Engineering Solution
Running a continuous animation loop alongside heavy backdrop blur and glow effects without dropping frames on mid-range mobile devices. Solved by decoupling canvas rendering, capping DPR on mobile, and pausing execution when offscreen.
Architecture Specification
Next.js App Router -> Dynamic lazy-loading boundary for Canvas story -> IntersectionObserver active section tracking -> Performance tiering state engine -> Accessible glass UI components.
Key Highlights & Technical Deliverables
- Scroll-driven 300svh Canvas particle and atmospheric wave renderer
- Hardware-aware profiling (deviceMemory + CPU cores) with dynamic DPR scaling
- Native OS-level prefers-reduced-motion detection with adaptive fallback rendering
- Zero client-side runtime errors and production build under 6 seconds