Learning Next.js the Hard Way: Breaking and Fixing My Own Portfolio

My first serious attempt at building a personal site with Next.js. What started with copy-pasting from ChatGPT ended up as a crash course in fixing broken layouts, bugs, and decisions I didn’t understand... until I did.

Where It Started

I’d never built anything like this before. I had a rough idea of what I wanted, but no real plan. I relied on ChatGPT a lot to help piece things together, and it was brilliant most of the time, but it did throw me off a few times too.

Getting the Stack Right

  • Started on Next.js 13.5.4 because that’s what ChatGPT recommended
    • Later found out it was already outdated and had security issues
  • Moved to Next.js 14 which went okay
    • Felt more up to date, and things seemed stable for a while
  • Then upgraded to 15. It wrecked everything.
    • Routing broke, layouts fell apart, hydration bugs everywhere
    • Took days of back-and-forth with ChatGPT to slowly rebuild it all

What I Ended Up Doing

  • Refactored loads of the site halfway through
    • Broke big messy components into smaller ones that were easier to manage
  • Got Framer Motion in for the hero animation
    • Learned how smooth transitions make a site feel a lot more polished
  • Built a proper light and dark mode setup with Tailwind
    • Took a while to understand how to make all the classes behave
  • Fixed hydration bugs with dynamic imports
    • Messed it up trusting ChatGPT blindly, then figured out the right way

Branding Stuff

I designed a proper logo, favicon and OG image because the placeholders looked crap. The new stuff actually fits the site and looks good when shared.

Bits That Went Wrong (and What I Learned)

  • ChatGPT helped a lot, but also led me down the wrong path a few times
  • Some early shortcuts made things harder later on
  • The site broke multiple times, but I always managed to put it back together
  • I came out of it understanding what I was doing, not just copying code

The End Result

  • Fully responsive, works in light and dark mode
  • Pages feel smooth and intentional, not slapped together
  • Everything loads quick and looks the way I want it to
  • I now know how to build, break and fix a real project from scratch

Would I Do It Again?

Yeah, 100%. It was frustrating at times, but I learned loads. And I’m proud of how it turned out.

Next.jsReactTailwindTypeScriptJavaScriptFramer MotionWeb DesignPerformanceUXLessons Learned
Live Site