The Challenge
Problem
Most portfolios are static and boring. I needed a site that felt 'alive' and clearly communicated my specific brand of 'Creative Engineering'.
Solution
Leveraged Next.js 15 for server-side performance and Framer Motion for client-side delight. Used a centralized config architecture to make content updates trivial.
Engineering Hurdles
Balancing Performance & Animation
Heavy animations initially caused layout shift. Solved by using `layoutId` props and optimizing re-renders with React.memo.
Key Features
Page Transition System (AnimatePresence)
Centralized Data Config (config.ts)
Responsive Glassmorphism UI
Dynamic Case Study Routing
Tech Stack
framework
Next.js 15 (App Router)
styling
Tailwind CSS v4 (Alpha), PostCSS
animation
Framer Motion
deployment
Vercel
My Role
Product Designer & Engineer