The Problem with Single-Page Portfolios
My original portfolio was a single, long scrolling page. While it looked impressive with all the GSAP animations and Spline 3D elements, it had real problems:
- **SEO was terrible** — search engines saw one page with everything
- **Sharing specific content was impossible** — no unique URLs for projects or blog posts
- **Load time suffered** — everything loaded at once, even content users might never see
- **Navigation was confusing** — users had to scroll through everything to find what they wanted
The Migration Strategy
Instead of rewriting from scratch, I chose a surgical approach: keep the beautiful home page intact and add new routes around it. Next.js Pages Router made this straightforward:
- 1.**Home page stays** — all GSAP animations, Spline 3D, and Typed.js effects preserved
- 2.**New routes added** — /work, /experience, /blog, /about, /contact, /resume
- 3.**Shared components created** — Navbar, Footer, PageHeader used across all pages
- 4.**Data centralized** — constants.js remained the single source of truth
What I Learned
The biggest insight was that **multi-page doesn't mean multi-app**. With Next.js, route transitions are smooth, shared components maintain visual consistency, and each page can be independently optimized for SEO.
Static generation with `getStaticProps` means every project page and blog post is pre-rendered at build time — blazing fast loads with perfect SEO scores.