Back to projects
web
This Website
Personal brand portfolio with cinematic hero, animated skill system, interactive timeline, and bento-grid project showcase. Built with Next.js 16, Framer Motion 12 and Tailwind CSS v4.
View project// tech stack
Next.js 16TypeScriptTailwind CSS v4Framer Motion 12
// the problem
Standard portfolio templates look generic and don't reflect engineering depth. I needed something that conveyed technical range, attention to detail, and personality — without feeling like a resume in HTML.
// the solution
Built from scratch with Next.js 16 App Router, Tailwind CSS v4 (CSS-first config), Framer Motion 12 animations, and a GitHub API integration that keeps the projects section always current. Server Components for data fetching, client components only where interactivity is needed.
// outcomes
- ↗Dark/light mode with smooth transitions
- ↗Animated skill bars and timeline
- ↗GitHub API auto-sync
- ↗Playwright e2e test suite