My Vite Portfolio is Dead. Long Live Next.js.

Look, I’ll be honest with you – this wasn’t some grand master plan. I was knee-deep in launching Oplinque  (my job tracking app that’s basically my digital brain for job hunting), and somewhere between debugging Drizzle queries and questioning my life choices, I thought: “You know what would be fun? Redoing my entire portfolio.”

Spoiler: it wasn’t “fun.” It was 3 AM coding sessions and way too much coffee.

Why the Heck Did I Do This?

My old Vite portfolio was… fine. It worked. It loaded fast. But here’s the thing about being a developer: sometimes “fine” isn’t enough when you spot something shiny.

The actual reasons:

1. SEO was garbage – My projects weren’t getting indexed properly. Turns out, when Google’s bots visit a client-side rendered page and see an empty <div id="root">, they just shrug and leave.

2. I wanted a blog – And not just any blog. I wanted MDX support so I could throw React components into my posts like a madman. Nextra made this stupidly easy.

3. Oplinque needed a proper home – After spending months building a job tracking app with AI resume analysis (yes, it actually works), I needed a portfolio that could properly showcase it. My old site was basically a glorified link dump.

The Migration: A Journey in Three Stages

Stage 1: Denial

# Me, thinking this would be easy
npx create-next-app@latest my-new-portfolio
# Narrator: It was not easy.

I genuinely thought I’d be done in a weekend. Two weeks later, I was still tweaking CSS.

Stage 2: The “Everything is Broken” Phase

Here’s what nobody tells you about migrations: nothing works the first time.

React 19 had just dropped. My beloved old dependencies were throwing tantrums. And don’t even get me started on the App Router – it’s powerful, but my muscle memory from Pages Router kept trying to create _app.tsx files like some kind of reflex.

The biggest gotcha? Hydration errors. So. Many. Hydration. Errors.

// What I wrote
<div suppressHydrationWarning>
  {/* literally everything */}
</div>
 
// What I should have done
// Actually understand server vs client components

Stage 3: Acceptance (and Actually Shipping)

Eventually, things started clicking. The App Router actually makes sense once you stop fighting it. Server components are genuinely cool. And having file-based routing with .mdx files for blog posts? Chef’s kiss.

The Stack (Because You’re Curious)

Here’s what’s powering this site:

• Next.js 16 – Living on the edge with the RC because I like pain
• Nextra 4.6 – For the blog functionality and MDX magic
• Tailwind CSS 4 – The new architecture is actually nice
• Framer Motion – Because subtle animations make everything better
• React Flow – For that weird spatial portfolio view (more on this)

Oh, and Bun for package management because npm is slow and I’m impatient.

About That Spatial View…

If you’ve clicked around, you might have noticed there’s a /spatial page that looks like someone’s Figma board exploded. That’s intentional.

I wanted something that felt different from every other “minimal dark mode portfolio” out there. Is it practical? Debatable. Is it memorable? I hope so.

It uses React Flow to render my experience and skills as draggable nodes. Will recruiters think it’s cool or confusing? Honestly, I have no idea. But I ship things and find out.

What I Actually Learned

1. Migrations are never “just” migrations

You’re not copy-pasting files. You’re rethinking architecture. Every shortcut you took in the old codebase comes back to haunt you.

2. Ship first, polish later

I could have spent another month perfecting animations. Instead, I deployed when it was “good enough” and iterated. Perfect is the enemy of done.

3. Your portfolio is a sandbox

This is the one project where you can go wild. Weird navigation? Try it. Experimental UI? Why not. Nobody’s paying you to be safe here.

4. Document while you build

This blog post would have been way easier to write if I’d taken notes during the migration. Learn from my mistakes.

What’s Next?

Now that this is live, I can focus on what matters – shipping more features for Oplinque and building things that help people. The portfolio is just the wrapper. The projects are the substance.

If you’re considering a similar migration, my advice is simple: just start. It’ll be messier than you expect, take longer than you planned, and break in ways you didn’t anticipate. But you’ll come out the other side with something you’re actually proud of.

And isn’t that the point?

P.S. – If you’re job hunting and want to actually track your applications without losing your mind, check out Oplinque . It’s free, it works, and I built it because I was tired of spreadsheets.