Building a Modern Web Portfolio with Next.js

Creating a modern web portfolio is essential for showcasing your work and skills as a developer. In this post, I'll walk you through how I built my portfolio using Next.js, Tailwind CSS, and modern React patterns.

Why Next.js?

Next.js is a powerful React framework that provides:

• Server-side rendering
• Static site generation
• API routes
• File-based routing
• And much more!

Getting Started

First, create a new Next.js project:

npx create-next-app@latest my-portfolio
cd my-portfolio

Adding Tailwind CSS

Tailwind CSS is a utility-first CSS framework that makes styling your components a breeze:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Building the Components

Here's a simple example of a card component:

const Card = ({ title, description }) => {
  return (
    <div className="border rounded-xl p-6 hover:border-primary transition-all">
      <h2 className="font-bold text-xl">{title}</h2>
      <p className="text-muted-foreground">{description}</p>
    </div>
  );
};

Stay tuned for more updates on building modern web portfolios!