🚀 Modern Portfolio Template – Next.js & Tailwind

A modern, open-source developer portfolio template built with Next.js, Tailwind CSS, and Framer Motion.

✨ Edit one JSON file ⚡ Zero-code customization 🚀 Deploy in minutes

---

🌐 Live Demo

👉 Demo: https://msdev7.netlify.app/

---

🖼️ Screenshots

---

⭐ Use This Template

Click the button below to instantly create your own portfolio repo 👇

👉 Use this template

No setup headaches. Just clone → edit data → deploy.

---

✨ Features

• ⚡ Next.js (App Router)
• 🎨 Tailwind CSS 4
• 🎥 Framer Motion animations
• 📱 Fully responsive design
• 🧠 Perfect for Fullstack & AI Developers
• 🗂️ Data-driven architecture
• 🧩 Component-based layout
• 🚀 Netlify & Vercel ready
• 🔍 SEO-friendly metadata

---

🧠 How This Template Works

This portfolio is fully data-driven.

You do not edit React components.

✔️ Update one JSON file ✔️ Save ✔️ Deploy

---

📝 Customization Guide

🔧 Main File (MOST IMPORTANT)

data/personal.json

Update:

• Name & role
• About section
• Skills & stats
• Contact info
• Social links
• SEO metadata
• CTA buttons

📘 Full step-by-step guide: 👉 data/README.md

---

📁 Projects Configuration

Projects live here:

data/projects.ts

Each project supports:

• Title
• Bullet-point description
• Image
• Tech stack tags
• Live demo link
• GitHub link

🟢 Tip: The first project in the list is treated as your featured project.

---

🖼️ Images

Add all images here:

public/images/

Use relative paths:

image: "/images/project-1.png"

---

🚀 Getting Started

1️⃣ Clone or use template

git clone https://github.com/ms-dev7/modern-portfolio-template.git
cd modern-portfolio-template

2️⃣ Install dependencies

npm install
# or
pnpm install

3️⃣ Run locally

npm run dev

Open 👉 http://localhost:3000

---

🌍 Deployment

Netlify

• Build command:

  npm run build

• Publish directory:

  .next
  

Vercel (Recommended)

• Import repo
• Click Deploy
• Done 🎉

---

🧩 Tech Stack

• Next.js
• React
• TypeScript
• Tailwind CSS
• Framer Motion
• Lucide Icons

---

🔍 GitHub SEO (Why This Repo Will Rank)

This template is optimized for GitHub search using keywords like:

• nextjs portfolio template
• developer portfolio
• tailwind portfolio
• ai developer portfolio
• fullstack developer portfolio
• open source portfolio template

---

🛠️ Who Is This For?

• Developers
• Fullstack Engineers
• AI Engineers
• Freelancers
• Students
• Open-source contributors

---

🧾 License

MIT License – free to use for personal & commercial projects.

---

🙌 Author

MS Dev Fullstack & AI Developer

🌐 Portfolio: https://msdev7.netlify.app/ 🐙 GitHub: https://github.com/ms-dev7

---

⭐ Support the Project

If this helped you:

• ⭐ Star the repo
• 🍴 Fork it
• 🧑‍💻 Share it