Building a Modern Responsive Portfolio using Next.js and Tailwind CSS 🚀

In today's digital era, having a personal portfolio is more important than ever. It showcases your skills, projects, and personal brand in the best way possible. Recently, I built and deployed my own portfolio using Next.js and Tailwind CSS, two powerful tools for creating modern and responsive websites.
👉 Check out my live portfolio here!

In this blog, I’ll walk you through how I built it, and how you can create your own too!

---

🛠️ Tools & Technologies Used

• Next.js – React framework for production-grade apps

• Tailwind CSS – Utility-first CSS framework

• Vercel – Hosting platform for deploying Next.js apps easily

---

🧱 Step 1: Setting Up the Project

First, I created a new Next.js project and installed Tailwind CSS.

npx create-next-app@latest navi-portfolio
cd navi-portfolio
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Then, I configured Tailwind by adding the paths to my tailwind.config.js file:

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

And imported the Tailwind directives inside globals.css:

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

Now, Tailwind CSS was ready inside my Next.js app!

---

🎨 Step 2: Building the Portfolio Structure

Here’s a quick view of my folder structure:

├── app
│   ├── layout.tsx
│   ├── page.tsx
├── components
│   ├── HeroSection.tsx
│   ├── AboutSection.tsx
│   ├── ProjectsSection.tsx
│   ├── ContactSection.tsx
│   ├── Navbar.tsx
│   ├── Footer.tsx
│   └── more...
├── constants
│   ├── projects.ts
│   ├── TechStack.js
├── hooks
│   ├── useLocalStorage.ts
├── lib
│   ├── utils.ts
├── styles
│   ├── globals.css

Each section was modularized into components for better reusability.

• HeroSection: My name, title, and intro.

• 

• Beautiful Landing Section with My Introduction

  ---

• AboutSection: Brief story about me.

• 

• A Basic intro of me

  ---

  ProjectsSection: Dynamic project cards pulled from constants.

  

• Highlighting Some of My Best Works

  ---

  ContactSection: Form to get in touch.

  

  Easy Contact Section for Visitors

---

Navbar: Smooth navigation links.

Clean and Smooth Navigation Bar for Easy Access Across Sections

---

• Footer: Copyright and social links.

• 

  Minimalistic Footer with Social Links and Copyright Information

Also, I added a Dark Mode Toggle with useLocalStorage hook to save theme preferences!

---

💻 Step 3: Making It Fully Responsive

Responsiveness was my top priority.
I used Tailwind’s utility classes like:

<div className="grid grid-cols-1 md:grid-cols-2 gap-8">

<section className="p-6 md:p-12 lg:p-24">

Mobile-first design was ensured by using sm:, md:, and lg: prefixes in Tailwind classes.

• Fully Responsive Design on Mobile Devices

---

🌍 Step 4: Deploying the Portfolio to GitHub and Vercel

Once my project was ready locally, I deployed it following these steps:

🔹 1. Push the Project to GitHub

If you haven't initialized Git yet:

bashCopyEditgit init
git add .
git commit -m "Initial commit - portfolio setup"

Now create a new repository on GitHub (example: navi-portfolio).

Then, link your local project to GitHub:

bashCopyEditgit remote add origin https://github.com/your-username/navi-portfolio.git
git branch -M main
git push -u origin main

✅ After pushing, your code will appear on GitHub.

---

🔹 2. Setup and Deploy to Vercel

Now, let's make it live!

• Go to Vercel.com and Login / Signup.

• Click “New Project".

• Select your GitHub repository (navi-portfolio).

• Click "Deploy".

✅ Vercel will automatically detect it’s a Next.js app and deploy it within seconds!

You’ll get a live link like this:
👉 https://navya-sree-ram-kumar-chowdary.vercel.app/

---

🏁 Final Thoughts

Crafting this portfolio with Next.js and Tailwind CSS turned out to be an incredibly smooth and enriching journey.
The modular structure of Next.js made development organized and efficient, while Tailwind's utility-first approach gave me full creative control over the design.

Within a short time, I was able to build a fast, modern, and fully responsive portfolio that truly reflects my skills and personality.

✨ If you’re looking to establish your online presence, I highly recommend starting with these technologies — they make the process not only easy but also genuinely enjoyable!

• Your portfolio is the first page of your story — make it unforgettable!

---