What I Learned Building My Portfolio with Next.js

Building a personal portfolio is one of those projects that sounds small until you're three hours deep debating whether a section header should fade in from the left or the right.

Here are the decisions that shaped the current build and what I'd keep if I did it again.

Why Next.js (Pages Router) over plain React

SEO. A plain React SPA renders blank HTML until the JS executes — terrible for search crawlers. Next.js pre-renders each page to HTML, so the content is immediately readable. For a portfolio, where discoverability matters, that's a meaningful difference.

I stayed on Pages Router (not App Router) because it's stable, well-documented, and I didn't need the streaming/server-component features that App Router is designed for.

Framer Motion for scroll animations

Every section fades in as you scroll. I built a Reveal wrapper component that uses Framer Motion's useInView + useAnimation hooks to trigger a slide-up fade on first viewport entry.

const controls = useAnimation();
const ref = useRef(null);
const isInView = useInView(ref, { once: true });

useEffect(() => {
  if (isInView) controls.start("visible");
}, [isInView]);

The key: once: true. You only want the animation to fire on first scroll into view, not on every scroll back and forth.

Why I skipped Tailwind

Tailwind is great for teams and design systems. For a one-person portfolio where I'm writing custom animations and one-off component layouts, SCSS modules give me more control with less noise in the JSX. I can co-locate styles with components and use CSS variables for theming without fighting utility class specificity.

The intersection observer sidebar

The sidebar highlights the active section as you scroll. Rather than calculating scroll positions manually, I use a native IntersectionObserver watching all .section-wrapper elements. When a section crosses the 30% threshold, the sidebar link updates.

Zero scroll event listeners. Zero jank.

What I'd do differently

Add a blog from the start. Writing forces you to articulate what you actually know, and a blog on your portfolio is a signal to employers that you engage with the craft beyond just shipping code.

(Which is exactly why you're reading this now.)