Harpreet Singh | Full-Stack Developer

Introduction

Every developer needs a space to showcase their work, a digital resume that's alive and interactive. When I decided to build my new portfolio, I had three main goals: it needed to be incredibly fast, visually striking, and easy to update. This led me to choose a modern, powerful tech stack: Next.js 15, Tailwind CSS, Sanity.io, and Framer Motion.

In this post, I'll break down why I chose each of these technologies and how they came together to create the site you're on right now.

The Core: Next.js 15 and the App Router

For the foundation, I chose Next.js. While I could have used Create React App, Next.js offers critical advantages for a portfolio site:

Performance: By default, Next.js pre-renders pages as static HTML. This means my portfolio loads almost instantly for visitors, which is crucial for making a good first impression.
SEO: Server-side rendering and static site generation make it incredibly easy for search engines like Google to crawl and rank my site.
Developer Experience: The App Router provides a clean, file-based routing system that's intuitive to work with as the project grows.

Styling: Tailwind CSS & Shadcn UI

For styling, I went with the powerful combination of Tailwind CSS and Shadcn UI.

Tailwind CSS is a utility-first framework that allowed me to design custom components directly in my HTML. This approach is incredibly fast and avoids the hassle of writing separate CSS files.
Shadcn UI is not a traditional component library. Instead, it provides beautifully designed, accessible components that I can copy directly into my project. This gives me full control over the code, making it easy to customize them to fit my site's aesthetic perfectly.

This combination provided the speed of a utility framework with the quality of professionally designed components.

Content Management: Sanity.io Headless CMS

A portfolio should be a living project. I knew I wanted to add a blog (like this post!) without having to redeploy the entire site every time I wrote something new. This is where a headless CMS comes in.

I chose Sanity.io because of its generous free tier and amazing developer experience. It provides a separate, customizable admin panel (the "Studio") where I can write, edit, and manage all my content—from blog posts to project details. My Next.js app then simply fetches this content at build time or on the fly. This decoupling of content and code is a powerful, modern approach to web development.

The "Wow" Factor: Framer Motion & React Three Fiber

A portfolio shouldn't just be functional; it should be memorable. To bring the site to life, I used two animation libraries:

Framer Motion: For all the UI animations, like the staggered text in the hero section, the scroll-in effects for each section, and the interactive project cards. It has a simple API that makes creating complex, fluid animations a breeze.
React Three Fiber: This library allowed me to add the rotating 3D shape in the hero section. While it's a small touch, it immediately signals a comfort with more advanced frontend technologies and creates a unique visual hook.

Conclusion

Building this portfolio was an incredible learning experience. This tech stack not only resulted in a fast and beautiful website but also reinforced modern development best practices like component-based architecture, content decoupling, and performance optimization.