// Overview
A fully redesigned personal portfolio built with Next.js App Router, TypeScript, Tailwind CSS v3, and Framer Motion. Features a custom design token system, scroll-triggered animations, an animated skill marquee, a stats counter bar, and individual project case study pages. Optimised for SEO with structured data, Open Graph metadata, and a 90+ Lighthouse score.
// Gallery
// Key Achievements
- Custom design token system via CSS custom properties consumed by Tailwind utilities
- Framer Motion scroll-triggered entrance animations with stagger and spring physics
- Animated stats counter bar using useMotionValue and Framer Motion animate()
- Auto-scrolling dual-direction skill marquee with hover-pause and edge fade
- Dynamic /projects/[slug] case study pages generated from a shared data module
// Stack
Next.jsTypeScriptTailwind CSSFramer Motion