How to Build a Developer Portfolio Website Using Next.js From Scratch

`

How to Build a Developer Portfolio Website Using Next.js From Scratch

A developer portfolio is more than a website — it's a statement. It showcases your skills, your personality, and your ability to ship something real. In this post, we’ll walk through creating a clean, modern portfolio with Next.js and Tailwind CSS, and deploy it to Vercel — all in a day.

Step 1 — Set up the project

Open your terminal and run the following:

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

This creates your project and starts the dev server at http://localhost:3000.

Step 2 — Add core pages

Create three files: index.js, projects.js, and contact.js inside the pages directory. Here’s the full code for all three pages:

/* pages/index.js */
import Link from 'next/link'

export default function Home() {
  return (
    <div>
      <h1>Welcome to My Portfolio</h1>
      <p>Hi, I’m [Your Name], a web developer.</p>
      <ul>
        <li><Link href="/projects">My Projects</Link></li>
        <li><Link href="/contact">Contact</Link></li>
      </ul>
    </div>
  )
}

/* pages/projects.js */
export default function Projects() {
  return (
    <div>
      <h1>My Projects</h1>
      <ul>
        <li>Project 1 – Description</li>
        <li>Project 2 – Description</li>
      </ul>
    </div>
  )
}

/* pages/contact.js */
export default function Contact() {
  return (
    <div>
      <h1>Contact Me</h1>
      <p>Email: [email protected]</p>
    </div>
  )
}

Step 3 — Add Tailwind CSS

Install Tailwind CSS and related tools:

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

Then update tailwind.config.js:

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

Create styles/globals.css and add:

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

Open pages/_app.js and add the following:

import '../styles/globals.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Step 4 — Deploy to Vercel

1. Push your project to GitHub
2. Go to vercel.com and sign in with GitHub
3. Click “New Project”, select your repo, and deploy
4. You’ll get a live link right away on a Vercel subdomain

Conclusion

You now have a clean, modern portfolio built with Next.js and Tailwind CSS, deployed for free on Vercel. This is just a foundation — from here, you can add a blog, dark mode, animation, or even integrate a CMS like Sanity or Notion.

If you found this post helpful, you can support future articles like this by buying me a coffee. Every coffee helps me keep publishing high-quality dev content, daily.

https://buymeacoffee.com/hexshift