Interactive Portfolio
A high-performance Next.js portfolio featuring 3D WebGL visualisations, dynamic theming, and sub-100 Lighthouse scores across all routes.
The brief, unpacked
This portfolio site was designed to showcase engineering work through an immersive, technically impressive interface while maintaining exceptional performance. Built with Next.js 14 App Router and TypeScript, the site features dynamic accent theming via CSS custom properties, 3D scene rendering with Three.js for the hero background, and a fully responsive design system. Every page achieves 95+ Lighthouse scores through aggressive code-splitting, optimised font loading with next/font, and efficient bundle composition.
- Lighthouse Performance
- 98
- Bundle JS (shared)
- 86.9 kB
- Pages with 95+ Score
- All
The work
Challenges, and how they fell
- 01
3D performance on mid-range devices
The Three.js hero scene needed to run at 60fps on a wide range of devices, including mobile and mid-range laptops.
Solution
Implemented adaptive quality scaling based on device capability detection. The renderer uses a low-poly fallback for mobile devices, throttles frame rate to 30fps on battery power, and dynamically reduces particle count when frame drops are detected via performance observers.
- 02
Zero-layout-shift image loading
Project gallery images with unknown aspect ratios needed to load without causing cumulative layout shift.
Solution
Built a custom image component that extracts dimensions from the blob on the server side, embeds aspect-ratio in the markup, and uses a CSS-only blur-up placeholder technique with WebP progressive rendering for smooth transitions.
Gallery
Next project
Atlas Club
Continue