How I Built My Developer Portfolio — Step by Step

I’ll walk you through how I built my personal portfolio using React, Tailwind CSS, and GitHub Pages — and how you can too."
tags: react, portfolio, webdev, tutorial, github
In this post, I’ll break down how I built my developer portfolio, the tools I used, and how you can do it too — even if you’re just starting out.

---

🧰 Tech Stack

• ⚛️ React — UI library
• 💨 Tailwind CSS — Styling
• 🌐 GitHub Pages — Deployment
• 🧠 Framer Motion — Animations
• 🧰 Vite — Fast build tool

---

🧱 Step 1: Project Setup

I started by setting up a new Vite + React project:

bash
npm create vite@latest my-portfolio
cd my-portfolio
npm install
npm install tailwindcss postcss autoprefixer
npx tailwindcss init 
Then I configured Tailwind CSS in tailwind.config.js and imported the styles in index.css.

🎨 Step 2: Designing the Layout

I focused on minimal, clean design. The key sections were:

Hero section ✨

Projects 🚀

Skills 💻

Contact 📩

I used Tailwind utility classes to make the site responsive and elegant.

🌍 Step 3: Deploying to GitHub Pages

Deployment was smooth using:

npm run build


and pushing to the gh-pages branch.

Then I configured the repo settings to use GitHub Pages.

👉 Final result: My Portfolio

🧠 Lessons Learned

Keep it simple — minimalism works

Mobile-first design pays off

GitHub Pages is underrated

Polish matters — animations make a difference

💬 Final Thoughts

If you're a developer looking to build your own portfolio, start small. You don’t need something fancy. Build something that reflects you.

I’d love to see what you build. Feel free to drop your portfolio links in the comments 👇

Built with ❤️ by Fabian Louis