How I Built My Animated Portfolio with Next.js and GSAP

Introduction

This portfolio was built with a singular goal: to showcase my work while demonstrating technical care in how it's built. Every animation, every layout decision, and every optimisation was deliberate, not just added for the sake of motion.

Tech Stack Choices

Next.js 16 (App Router, Turbopack) – for static export and fast local builds.

GSAP + ScrollTrigger – for performant, scrub-based scroll animations.

Lenis – for smooth inertia scrolling on desktop.

next-transition-router – for custom page transitions without a server.

Tailwind CSS – for rapid, consistent styling.

Performance Decisions

Above-the-fold images are preloaded and gated behind a real, byte-level loading screen rather than a fixed-duration animation.

GSAP animations are scoped to each component's lifecycle via useGSAP, so nothing leaks or double-fires on route change.

Lenis is disabled on touch devices in favor of native scroll — smooth-scroll libraries add real risk of janky or broken touch scrolling if not handled carefully.

Decorative background animation (like the grid pan) is switched off on smaller screens, since a still-running, non-composited background animation costs more than it's worth on lower-power devices.

Conclusion

Building this portfolio was as much about understanding *why* an animation library or pattern works a certain way as it was about making things move. The result is a site I can keep extending confidently, because each piece was built to fail safely rather than silently.