https://github.com/hassanxtech/portfolio-gallery
A developers’ portfolio showcase for your inspiration and listing — Build. Share. Inspire. Built with Next.js and Tailwind CSS.
https://github.com/hassanxtech/portfolio-gallery
backend-devops data-science developer-inspiration developer-portfolios github-portfolios live-previews mobile-apps nextjs portfolio-browsing portfolio-gallery portfolio-inspiration portfolio-search portfolio-showcase react source-code tailwindcss typescript ui-ux-design vercel web-development
Last synced: 3 months ago
JSON representation
A developers’ portfolio showcase for your inspiration and listing — Build. Share. Inspire. Built with Next.js and Tailwind CSS.
- Host: GitHub
- URL: https://github.com/hassanxtech/portfolio-gallery
- Owner: HassanXTech
- License: mit
- Created: 2025-08-17T11:42:56.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-08-24T18:43:32.000Z (9 months ago)
- Last Synced: 2025-08-24T22:51:42.772Z (9 months ago)
- Topics: backend-devops, data-science, developer-inspiration, developer-portfolios, github-portfolios, live-previews, mobile-apps, nextjs, portfolio-browsing, portfolio-gallery, portfolio-inspiration, portfolio-search, portfolio-showcase, react, source-code, tailwindcss, typescript, ui-ux-design, vercel, web-development
- Language: TypeScript
- Homepage: https://portfoliogallery.dev
- Size: 167 MB
- Stars: 3
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Portfolio Gallery
> _**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](https://portfoliogallery.dev)**
> _**Note: This project showcases real developer portfolios with live previews, source code links, and inspiration for developers and designers.**_
> [Learn more about contributing portfolios.](https://github.com/HassanXTech/portfolio-gallery/discussions)
## Portfolio Gallery in the Wild!!!
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??**](https://github.com/HassanXTech/portfolio-gallery/discussions)
## Features
- **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
## Tech Stack
- **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
## Getting Started
### Prerequisites
- Node.js 18+
- npm, yarn, pnpm, or bun
### Installation
1. Clone the repository:
```bash
git clone https://github.com/HassanXTech/portfolio-gallery.git
cd portfolio-gallery
```
2. Install dependencies:
```bash
npm install
# or
yarn install
# or
pnpm install
```
3. Run the development server:
```bash
npm run dev
```
4. Open [http://localhost:3000](http://localhost:3000) in your browser
### Build for Production
```bash
npm run build
npm start
```
## How to Use This
1. Visit the live site: **[https://portfoliogallery.dev](https://portfoliogallery.dev)**
2. Browse through the collection of developer portfolios by category.
3. Click on any portfolio to open its preview modal with live website preview.
4. Use the toggle to switch between thumbnail and live preview.
5. Access source code and visit the live website directly from the modal.
6. 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
## Screenshots
### Portfolio Categories
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
### Customization Tips
**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
## Usage
1. Browse the portfolio collection on the website
2. Use category tabs to filter by portfolio type
3. Search for specific portfolios or technologies
4. Click on portfolios to see live previews
5. Add interesting portfolios to your favorites
6. 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
## Contributing
We welcome contributions to expand the portfolio collection. To add new portfolios:
### Adding New Portfolios
1. Fork the repository
2. Create a feature branch:
```bash
git checkout -b feature/new-portfolio-name
```
3. Navigate to `src/data/portfolios.ts`
4. Add your portfolio following the established format:
```typescript
{
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
},
}
```
### Contribution Guidelines
- **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
### Portfolio Requirements
- **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)
### Testing Your Portfolios
1. Test the portfolio in the development environment
2. Verify thumbnail displays correctly
3. Check live website accessibility
4. Ensure source code links work
5. Test responsive behavior across devices
### Pull Request Process
1. Commit your changes with descriptive messages
2. Push to your feature branch
3. Create a pull request with:
- Clear description of the portfolio added
- Screenshots or preview of the portfolio
- Any special considerations or notes
```bash
git add .
git commit -m "feat: add new web development portfolio"
git push origin feature/new-portfolio-name
```
## Development
### Project Structure
```
portfolio-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
```
## Community
- **Discussions** - [GitHub Discussions](https://github.com/HassanXTech/portfolio-gallery/discussions)
- **Issues** - [Report bugs or request features](https://github.com/HassanXTech/portfolio-gallery/issues)
- **Contributing** - [How to contribute](https://github.com/HassanXTech/portfolio-gallery/blob/main/CONTRIBUTING.md)
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Acknowledgments
- Built with Next.js and Tailwind CSS
- Inspired by modern portfolio design patterns
- Community-driven portfolio collection
- Powered by Vercel for seamless deployment
## Support
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
## Built By
- GitHub: [@HassanXTech](https://github.com/HassanXTech)
If you like this project, consider giving it a ⭐️ on GitHub and sharing it with others!
---
> _**Happy coding!**_