🚀 Awesome Developer Portfolios

A curated collection of 1,899+ world-class developer portfolios, personal websites, and design inspirations.

---

🌐 LIVE SHOWCASE WEBSITE

🚀 Browse 1,899+ Developer Portfolios with Live Responsive Previews

Click below to open the interactive live web application in your browser:

  

---

✨ Highlights & Features

• Curated Developer Portfolios: Filter through thousands of inspiring websites built by Software Engineers, Full-Stack Developers, AI Engineers, Frontend Artisans, and Designers.
• Interactive Live Preview: Preview any portfolio inside an embedded, responsive frame right within the showcase without leaving the page.
• Multi-Device Responsive Inspector: Test sites across Desktop (1280px), Tablet (768px), and Mobile (375px) device viewports.
• Instant Search & Filtering: Filter by roles (e.g., React, Node.js, AI, Full Stack), host platform (Vercel, Netlify, GitHub Pages, Cloudflare), or jump alphabetically using the A-Z Bar.
• Modern Glassmorphic UI: Ultra-sleek dark mode aesthetic featuring backdrop blur, ambient gradient glows, and fluid micro-interactions.

---

➕ How to Submit & Feature Your Portfolio

We welcome and encourage developer submissions from around the globe! Gain visibility among founders, recruiters, hiring managers, and fellow engineers.

⚡ Method 1: Interactive Web App (Fastest)

1. Open the Live Web Application.
2. Click the "Share Your Portfolio" button in the top navigation header.
3. Enter your details:
   • Full Name & Portfolio URL
   • Primary Role (e.g. Full Stack Developer, AI Engineer)
   • Category & Skill Tags (e.g. React, TypeScript, Python)
   • Contact Email & Phone (Essential for real-time notification alerts!)
4. Click "Copy JSON Entry" to copy the pre-formatted code block, then click "Open Pull Request on GitHub" to submit directly!

---

📩 Method 2: Manual GitHub Pull Request

1. Fork this repository by clicking the Fork button at the top right of this page.
2. Clone your forked repository locally:

   git clone https://github.com/balavenkatesh3322/awesome-developer-porfolio.git

3. Locate the relevant category file under src/data/categories/:
   • ai_data_science.json - AI & Data Science
   • full_stack.json - Full Stack
   • software_engineer.json - Software Engineer
   • frontend.json - Frontend
   • mobile_app_dev.json - Mobile App Dev
   • ui_ux_design.json - UI/UX & Design
   • backend_cloud.json - Backend & Cloud
4. Add your portfolio object to the respective JSON array:

   {
     "id": 1900,
     "name": "Your Full Name",
     "url": "https://your-portfolio-domain.com",
     "role": "Full Stack Engineer",
     "category": "Full Stack",
     "tags": ["React", "TypeScript", "Node.js", "Python"],
     "email": "your.email@example.com",
     "phone": "+1234567890",
     "initials": "YN",
     "firstLetter": "Y",
     "featured": true
   }

5. Commit your changes and push to your fork:

   git add .
   git commit -m "feat: add portfolio and notifications for [Your Name]"
   git push origin main

6. Open a Pull Request against the main branch of balavenkatesh3322/awesome-developer-porfolio.

---

🔔 How Real-Time Notifications Work for Developers

By providing your email and/or phone in your portfolio JSON entry:

• Instant Comment Alerts: Whenever a hiring manager, recruiter, or community member leaves a comment or feedback on your portfolio modal, a direct notification alert is automatically dispatched to your inbox/phone.
• Appreciation & Likes: Track viewer appreciation and engagement metrics in real time.
• Direct Founder & Recruiter Outreach: Enable one-click direct email/call actions right from your portfolio modal card.
• Privacy First: Email and phone details are strictly used for developer engagement and direct outreach.

---

🗺️ Product Roadmap

We are constantly building and evolving Awesome Developer Portfolios to empower developers worldwide. Here is what we're building and where you can help contribute:

🌟 Phase 1: Interactive Engagement & Social Proof (Completed & Active)

• ❤️ Real-time Like Engine: Click-to-heart portfolios with persistent local & global engagement counters.
• 💬 Developer Feedback & Comments: Leave reviews, recruiter notes, and constructive feedback directly on portfolio viewports.
• 🔖 Save & Bookmark Collections: Save favorite portfolios to your personal bookmarks with local state synchronization.
• ✨ Interactive Random Spotlight Jump: Attention-grabbing spring jump animation that randomly highlights standout portfolios for discovery.
• 📱 Multi-Device Live Inspector: Desktop, Tablet, and iPhone frame viewports with live iframe loading.

---

🚀 Phase 2: Community & Developer Ecosystem (In Progress & Open for PRs)

• 🔥 Top-Liked & Trending Leaderboards: Sort catalog by most liked, highest bookmarked, or most commented portfolios of the week.
• 🤖 GitHub Actions Auto-Validation Bot: Automated workflow to verify portfolio URL status, SSL certificates, and response times on PR submission.
• 🏆 Community Badges & Verification: Verified Senior Engineer, AI Pioneer, UI/UX Artisan, and Open Source Contributor badges.
• 📊 Developer Analytics Dashboard: Viewers count, live preview clicks, and referral tracking for portfolio owners.
• 📤 Export & Share Collections: Export saved portfolio bookmarks as Markdown lists or JSON for portfolio reviews.

---

🔮 Phase 3: AI-Powered Showcase & Matchmaking (Upcoming)

• 🤖 AI Portfolio Critique & Recommendations: AI assistant offering instant UI/UX feedback and resume/portfolio improvements.
• 🎯 Recruiter & Founder Matchmaker: Direct inquiry forms for recruiters to connect with featured developers based on tech stacks.
• 🎨 Custom Theme Engine: Customizable dark/light ambient themes and customizable grid display density options.

---

🤝 Call for Contributions — Join the Open Source Movement!

Awesome Developer Portfolios is built by developers, for developers. We believe every engineer deserves a platform to showcase their craft, inspire others, and land dream opportunities.

Whether you are a seasoned open-source veteran or making your very first open-source contribution, we invite you to join us!

💡 Ways You Can Contribute:

1. Submit Your Portfolio: Fork the repo, add your site entry in src/data/categories/, and raise a Pull Request!
2. Build Roadmap Features: Pick any unfulfilled task from our Roadmap above (e.g. enhanced Like/Comment/Save backend, analytics, search improvements) and send a PR.
3. Refine UI & Animations: Enhance Framer Motion animations, layout micro-interactions, responsive CSS, or typography pairings.
4. Fix Bugs & Improve Code: Report issues, optimize bundle performance, or refine TypeScript interfaces.
5. Spread the Word: Star this repository ⭐, share it on Twitter/X, LinkedIn, Reddit, or Dev.to!

---

🛠️ Local Development

Want to run the showcase application on your local machine or build upon it?

Prerequisites

• Node.js (v18+ recommended)
• npm or yarn

Installation & Run

# Clone the repository
git clone https://github.com/balavenkatesh3322/awesome-developer-porfolio.git

# Navigate into project directory
cd awesome-developer-porfolio

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:3000 in your browser.

---

🤝 Contributing

Contributions are always welcome! Whether it's adding new portfolio sites, improving UI/UX components, or fixing bugs:

1. Star the repository ⭐
2. Fork the repository
3. Create a feature branch (git checkout -b add/your-name)
4. Commit changes (git commit -m 'Add amazing feature')
5. Push to branch (git push origin add/your-name)
6. Open a Pull Request

---

📄 License

Distributed under the MIT License. See LICENSE for more information.

---

Crafted with ❤️ for the global developer community by Bala Venkatesh.