Building a modern and eye-catching portfolio website is essential in 2025, especially for developers and designers who want to showcase their skills. In this guide, I'll show you how to create a portfolio website like mine using Next.js, Tailwind CSS, and shadcn/ui for a sleek, responsive, and fast experience.

Why Use Next.js for Your Portfolio Website?

Next.js is a powerful React framework that offers server-side rendering, static site generation, and client-side rendering. This makes it perfect for a fast, SEO-friendly portfolio website. With built-in routing, optimized performance, and easy deployment, Next.js is the best choice for a portfolio website in 2025.

Prerequisites

Before you start, make sure you have:

Node.js and npm installed

Basic knowledge of React and JavaScript

A code editor (VS Code recommended)

Step 1: Setting Up Your Project

Let's start by creating a new Next.js project:

npx create-next-app@latest my-portfolio
cd my-portfolio
npm run dev

Your development server should be running at http://localhost:3000.

Step 2: Install Tailwind CSS and shadcn/ui

Tailwind CSS and shadcn/ui make styling effortless. Install them by running:

npm install tailwindcss shadcn/ui
npx tailwindcss init

Step 3: Create Your Portfolio Website Layout

Structure your pages in the pages folder. Create:

index.js for the home page

about.js for the About section

projects.js for your work showcase

contact.js for a contact form

Step 4: Build Components

Use React components for reusable parts like Navbar, Footer, and Project Cards. Example Navbar:

import Link from 'next/link';

export default function Navbar() {
return (

Home
About
Projects
Contact

);
}

Step 5: Add Animations and Interactivity

Enhance your portfolio website with animations using Framer Motion or Tailwind CSS utilities. For example:

import { motion } from 'framer-motion';

Welcome to My Portfolio

Step 6: Deploy Your Portfolio Website

Deploy easily with Vercel by pushing your code to GitHub and linking your repo to Vercel.

Conclusion

Creating a stunning portfolio website in 2025 with Next.js is simple and rewarding. It’s fast, responsive, and perfect for showcasing your skills. Follow these steps, customize your design, and get ready to impress!

Stay tuned for more tips and tricks on building powerful websites in 2025. Happy coding!