Building a Personal Portfolio with Next.js and Tailwind CSS

 

A personal portfolio is more than just a digital resume; it defines who you are online. If you are a developer, artist, or worker, a portfolio website lets possible clients or managers see your work and get to know you. For fast performance, we will use Next.js and Tailwind CSS to make a sleek, flexible portfolio. The style will be modern and utility-first. You will have a full site ready to go by the end of this guide.

 

Why Choose Next.js and Tailwind CSS?

Next.js is a powerful React framework that makes it easier to view on the server, route files, and improve speed. It works well for SEO and is great for websites that load quickly. Tailwind CSS, on the other hand, is a utility-first CSS system that lets you make styles directly in your HTML. You do not have to write standard CSS when you use Tailwind. You can get a flexible style with little work. They work well together to make a great tech stack for portfolio websites.

Setting Up the Project

To start, make a fresh Next.js app and add Tailwind CSS to it.

Step 1: Create the Next.js app

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

Step 2: Install Tailwind CSS

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

Step 3: Configure Tailwind

Edit the tailwind.config.js file:

content: [
 "./pages/**/*.{js,ts,jsx,tsx}",
 "./components/**/*.{js,ts,jsx,tsx}",
]

Step 4: Import Tailwind in global styles

In styles/globals.css, replace the content with:

@tailwind base;
@tailwind components;
@tailwind utilities;

Now you're ready to build.

Creating Pages and Routing

Next.js's routing method is based on files. Every file in the pages directory turns into a route. 

Like, the home page is pages/index.js. Let's look at a simple home page that uses Tailwind styling:

export default function Home() {
  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-100">
      <h1 className="text-4xl font-bold text-blue-600">Hi, I'm Alex</h1>
      <p className="text-lg mt-4 text-gray-700">Web Developer & Designer</p>
    </div>
  );
}

You can add additional sections by making about.js or projects.js files in the pages folder. 

Building Reusable Components 

Next. js lets you break up UI elements into sections called components. Let's make a navigation bar.

Header.js inside the components folder:

import Link from 'next/link';

export default function Header() {
  return (
    <nav className="bg-white shadow p-4 flex justify-between items-center">
      <h2 className="text-xl font-bold text-gray-800">MyPortfolio</h2>
      <div>
        <Link href="/" className="mx-2 text-gray-700 hover:text-blue-600">Home</Link>
        <Link href="/about" className="mx-2 text-gray-700 hover:text-blue-600">About</Link>
        <Link href="/projects" className="mx-2 text-gray-700 hover:text-blue-600">Projects</Link>
      </div>
    </nav>
  );
}

import Link from 'next/link';

export default function Header() {
  return (
    <nav className="bg-white shadow p-4 flex justify-between items-center">
      <h2 className="text-xl font-bold text-gray-800">MyPortfolio</h2>
      <div>
        <Link href="/" className="mx-2 text-gray-700 hover:text-blue-600">Home</Link>
        <Link href="/about" className="mx-2 text-gray-700 hover:text-blue-600">About</Link>
        <Link href="/projects" className="mx-2 text-gray-700 hover:text-blue-600">Projects</Link>
      </div>
    </nav>
  );
}

Import and use this in your pages:

import Header from '../components/Header';

export default function Home() {
  return (
    <>
      <Header />
      {/* Other content */}
    </>
  );
}

Showcasing Projects and Skills

Let's use Tailwind's grid system to make a projects page with a simple card style.

pages/projects.js:
export default function Projects() {
  return (
    <div className="p-8 bg-gray-50 min-h-screen">
      <h2 className="text-3xl font-bold mb-6">Projects</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div className="bg-white p-4 rounded-lg shadow">
          <h3 className="text-xl font-semibold">Weather App</h3>
          <p className="text-gray-600">Built with React and OpenWeather API</p>
          <a href="#" className="text-blue-500 underline mt-2 inline-block">View Project</a>
        </div>
        {/* Add more cards as needed */}
      </div>
    </div>
  );
}

This section automatically adapts to different screen sizes and is fully responsive. 

Making It Responsive 

It is easy to use responsive design with Tailwind because it has breakpoint prefixes like sm:, md:, lg:, and xl:.

For example:

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  {/* Content here */}
</div>

This makes sure that the layout changes to fit different screen sizes without having to use custom media queries.

Deploying Your Portfolio

Vercel, the company that made Next.js, makes deployment easy.

How to deploy:

1. Push your code on GitHub.
2. Sign up for Vercel and add your GitHub project.
3. Press "Deploy," and your site will be online.

Each push to GitHub will change your live site, and Vercel will do this for you instantly.

Conclusion

Using Next.js and Tailwind CSS, you have now made a modern, fully usable personal portfolio that is responsive. This stack is flexible, scalable, and works very well right out of the box. Every step, from arranging and making components to deploying them, gives you the tools you need to build a skilled online presence. You could add a contact form, graphics, or a blog area to your portfolio to make it bigger.

Customise and improve your portfolio all the time, it should change as your skills do.