Providing Beautiful Portfolios. ✨
100+ stunning portfolio designs with live previews, source code, and professional outcomes.
Transform your online presence with curated portfolio designs that showcase your skills beautifully. Built for developers who demand excellence, designers who prioritize impact, and hiring managers who need to evaluate talent effectively.
Every portfolio demonstrates real-world success with live demos and accessible source code. Whether you're building your own portfolio, seeking inspiration, or evaluating talent, our collection provides the professional foundation you need to succeed.
Visit: Portfolio Gallery
Note: This project showcases real developer portfolios with live previews, source code links, and inspiration for developers and designers.
Learn more about contributing portfolios.
Curious where Portfolio Gallery is getting featured, shared, talked about or appreciated?
Check out this growing list of shoutouts, showcases, and love from the community:
⚡Where Portfolio Gallery is Making Noise??
- Live Portfolio Previews - See portfolios in action with iframe embeds
- Source Code Access - Direct links to GitHub repositories and source code
- Category Organization - Browse by Web Development, Mobile Apps, UI/UX Design, and more
- Search & Filter - Find portfolios by name, category, or tags
- Favorites System - Save and organize your preferred portfolios
- Responsive Design - Optimized for all screen sizes and devices
- Modern UI/UX - Beautiful, intuitive interface built with Tailwind CSS
- Portfolio Thumbnails - Visual previews with auto-background fill
- Smooth Navigation - Category carousel with pinned tabs and smooth scrolling
- Dark/Light Theme - Automatic theme switching with system preference support
- Next.js 15 - React framework with App Router
- TypeScript - Type-safe development
- Tailwind CSS - Utility-first CSS framework
- Vercel - Deployment and hosting
- React Context - State management for favorites
- Next.js Image - Optimized image handling
- Node.js 18+
- npm, yarn, pnpm, or bun
- Clone the repository:
git clone https://github.com/HassanXTech/portfolio-gallery.git
cd portfolio-gallery- Install dependencies:
npm install
# or
yarn install
# or
pnpm install- Run the development server:
npm run dev- Open http://localhost:3000 in your browser
npm run build
npm start- Visit the live site: https://portfoliogallery.dev
- Browse through the collection of developer portfolios by category.
- Click on any portfolio to open its preview modal with live website preview.
- Use the toggle to switch between thumbnail and live preview.
- Access source code and visit the live website directly from the modal.
- Add portfolios to your favorites for easy access later.
These portfolios are great for:
- Finding design inspiration
- Evaluating developer talent
- Learning new techniques
- Building your own portfolio
The application supports these portfolio categories:
- Web Development - Full-stack web applications
- Mobile Apps - iOS and Android applications
- UI/UX Design - User interface and experience design
- Data Science & ML - Machine learning and data projects
- Backend & DevOps - Server-side and infrastructure
- Agency - Creative agency portfolios
- Design Engineering - Design systems and engineering
- Indie Makers - Independent developer projects
- Game Dev - Game development portfolios
- Student/Junior - Early career developers
- Content & Writing - Technical writing and content
Thumbnails: Use high-quality images with 16:9 aspect ratio Live URLs: Ensure websites are accessible and mobile-friendly Source Code: Link to public repositories with clear documentation Tags: Use relevant, searchable technology tags Descriptions: Write clear, concise descriptions of the work
- Browse the portfolio collection on the website
- Use category tabs to filter by portfolio type
- Search for specific portfolios or technologies
- Click on portfolios to see live previews
- Add interesting portfolios to your favorites
- Access source code and live websites directly
Each portfolio includes:
- High-quality thumbnail preview
- Live website preview (when available)
- Source code repository link
- Technology tags and descriptions
- Responsive design showcase
We welcome contributions to expand the portfolio collection. To add new portfolios:
- Fork the repository
- Create a feature branch:
git checkout -b feature/new-portfolio-name- Navigate to
src/data/portfolios.ts - Add your portfolio following the established format:
{
id: "unique-portfolio-id",
name: "Portfolio Display Name",
category: "web-development",
description: "A brief description of the portfolio",
badge: "New", // Optional: "New", "Popular"
thumbnailUrl: "https://example.com/thumbnail.png",
liveUrl: "https://example.com",
sourceUrl: "https://github.com/username/repo",
tags: ["React", "Next.js", "Tailwind CSS"],
thumbnailFit: "contain", // "contain" or "cover"
style: {
background: "#ffffff",
// Optional custom background styling
},
}- Quality: Ensure portfolios are professional and well-designed
- Accessibility: Verify live URLs are accessible and mobile-friendly
- Documentation: Include clear descriptions and relevant tags
- Thumbnails: Use high-quality images that represent the work well
- Uniqueness: Avoid duplicating existing portfolios
- Performance: Ensure live websites load reasonably fast
- High-quality thumbnail (minimum 1200x800px)
- Live demo URL (working website)
- Source code link (GitHub repository)
- Proper categorization (web, mobile, uiux, etc.)
- Responsive design (mobile-friendly)
- Test the portfolio in the development environment
- Verify thumbnail displays correctly
- Check live website accessibility
- Ensure source code links work
- Test responsive behavior across devices
- Commit your changes with descriptive messages
- Push to your feature branch
- Create a pull request with:
- Clear description of the portfolio added
- Screenshots or preview of the portfolio
- Any special considerations or notes
git add .
git commit -m "feat: add new web development portfolio"
git push origin feature/new-portfolio-nameportfolio-gallery/
src/
├── app/
│ ├── globals.css
│ ├── layout.tsx
│ ├── page.tsx
│ └── not-found.tsx
│
├── components/
│ ├── ui/ # shadcn/ui components
│ │ ├── badge.tsx
│ │ ├── button.tsx
│ │ └── tabs.tsx
│ ├── layout/
│ │ ├── navbar.tsx
│ │ └── footer.tsx
│ ├── portfolio/
│ │ ├── portfolio-showcase.tsx
│ │ ├── portfolio-card.tsx
│ │ ├── portfolio-grid.tsx
│ │ ├── portfolio-modal.tsx
│ │ └── portfolio-empty-state.tsx
│ ├── home/
│ │ ├── hero.tsx
│ │ ├── support-dropdown.tsx
│ │ └── return-to-preview.tsx
│ └── providers/
│ └── theme-provider.tsx
│
├── lib/
│ ├── utils.ts
│ └── constants.ts
│
├── hooks/
│ ├── useTheme.tsx
│ └── useCopy.tsx
│
├── types/
│ ├── portfolio.ts
│ └── index.ts
│
├── context/
│ └── favourites-context.tsx
│
└── data/
├── portfolios.ts # Portfolio data (contribute here)
└── categories.ts
- Discussions - GitHub Discussions
- Issues - Report bugs or request features
- Contributing - How to contribute
This project is licensed under the MIT License - see the LICENSE file for details.
- Built with Next.js and Tailwind CSS
- Inspired by modern portfolio design patterns
- Community-driven portfolio collection
- Powered by Vercel for seamless deployment
For questions, issues, or suggestions:
- Open an issue on GitHub
- Check existing issues before creating new ones
- Provide detailed information for bug reports
- Join discussions for feature requests
- GitHub: @HassanXTech
If you like this project, consider giving it a ⭐️ on GitHub and sharing it with others!
Happy coding!
