`
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 (
Welcome to My Portfolio
Hi, I’m [Your Name], a web developer.
- My Projects
- Contact
)
}
/* pages/projects.js */
export default function Projects() {
return (
My Projects
- Project 1 – Description
- Project 2 – Description
)
}
/* pages/contact.js */
export default function Contact() {
return (
Contact Me
Email: your@email.com
)
}
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 Step 4 — Deploy to Vercel
- Push your project to GitHub
- Go to vercel.com and sign in with GitHub
- Click “New Project”, select your repo, and deploy
- 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.
