Skip to main content
Next.jsTypeScriptTailwind CSSfrontend

Portfolio

Modern developer portfolio built with Next.js 16, featuring scroll-driven animations, dark mode, and responsive design.

Problem Statement

Developer portfolios need to balance visual appeal with performance and SEO. Most template-based portfolios sacrifice either design quality or Core Web Vitals scores.

Tech Stack

Next.js
TypeScript
Tailwind CSS

Challenges & Solutions

Challenge 1

Achieving smooth scroll-driven animations without impacting Lighthouse performance score

Solution

Used Framer Motion with lazy loading and CSS transforms for GPU-accelerated animations

Challenge 2

Implementing a theme system with multiple modes (light/dark/system)

Solution

Built a tab-based theme switcher with next-themes and smooth transitions

Challenge 3

Optimizing LCP with dynamic imports for below-the-fold content

Solution

Implemented next/dynamic with SSR/CSR split for optimal initial load

Results

  • 95+ Lighthouse performance score on mobile
  • Sub-2 second LCP on 3G connections
  • Fully responsive across all breakpoints

Want to see more?

Check out my other projects or read my technical blog posts.