{"id":30619086,"url":"https://github.com/hassanxtech/portfolio-gallery","last_synced_at":"2026-03-15T08:45:52.059Z","repository":{"id":310380416,"uuid":"1039506597","full_name":"HassanXTech/portfolio-gallery","owner":"HassanXTech","description":"A developers’ portfolio showcase for your inspiration and listing — Build. Share. Inspire. Built with Next.js and Tailwind CSS.","archived":false,"fork":false,"pushed_at":"2025-08-24T18:43:32.000Z","size":174861,"stargazers_count":3,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-24T22:51:42.772Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://portfoliogallery.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HassanXTech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["HassanXTech"],"buy_me_a_coffee":"hassanxtech","custom":["https://portfoliogallery.dev","https://hassanx.tech"]}},"created_at":"2025-08-17T11:42:56.000Z","updated_at":"2025-08-24T18:43:36.000Z","dependencies_parsed_at":"2025-08-24T20:24:42.204Z","dependency_job_id":null,"html_url":"https://github.com/HassanXTech/portfolio-gallery","commit_stats":null,"previous_names":["hassanxtech/portfolio-gallery"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/HassanXTech/portfolio-gallery","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HassanXTech%2Fportfolio-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HassanXTech%2Fportfolio-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HassanXTech%2Fportfolio-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HassanXTech%2Fportfolio-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HassanXTech","download_url":"https://codeload.github.com/HassanXTech/portfolio-gallery/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HassanXTech%2Fportfolio-gallery/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272847491,"owners_count":25003208,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-30T02:00:09.474Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2025-08-30T12:17:05.655Z","updated_at":"2026-03-15T08:45:52.021Z","avatar_url":"https://github.com/HassanXTech.png","language":"TypeScript","funding_links":["https://github.com/sponsors/HassanXTech","https://buymeacoffee.com/hassanxtech","https://portfoliogallery.dev","https://hassanx.tech"],"categories":[],"sub_categories":[],"readme":"# Portfolio Gallery\n\n\u003e _**Providing Beautiful Portfolios. ✨**_\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./public/images/readme-banner.png\" alt=\"Portfolio Gallery - Providing Beautiful Portfolios\" /\u003e\n  \u003cbr\u003e\u003cbr\u003e\n  \u003cp align=\"left\"\u003e\n    \u003cstrong\u003e100+ stunning portfolio designs with live previews, source code, and professional outcomes.\u003c/strong\u003e\n    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.\u003cbr\u003e\n    \u003c/br\u003e\n    \u003cem\u003eEvery 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.\u003c/em\u003e\n    \u003c/br\u003e\n  \u003c/p\u003e\n  \u003cbr\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/stars/HassanXTech/portfolio-gallery?style=social\" alt=\"GitHub stars\" /\u003e\n\u003cimg src=\"https://img.shields.io/github/forks/HassanXTech/portfolio-gallery?style=social\" alt=\"GitHub forks\" /\u003e\n\u003cimg src=\"https://img.shields.io/badge/license-MIT-green?style=social\" alt=\"License\" /\u003e\n\u003cimg src=\"https://img.shields.io/github/last-commit/HassanXTech/portfolio-gallery?style=social\" alt=\"Last commit\" /\u003e\n\u003cimg src=\"https://img.shields.io/github/issues/HassanXTech/portfolio-gallery?style=social\" alt=\"Issues\" /\u003e\n    \n  \u003c/p\u003e\n  \n  \u003c!-- Peerlist Badge --\u003e\n  \u003cp align=\"center\"\u003e\n    \u003ca href=\"https://peerlist.io/hassantech/project/portfolio-gallery\" target=\"_blank\" rel=\"noreferrer\"\u003e\n      \u003cimg src=\"https://img.shields.io/badge/Peerlist-Project%20Showcase-00D4AA?style=for-the-badge\u0026logo=peerlist\u0026logoColor=white\u0026labelColor=1F2937\" alt=\"Portfolio Gallery on Peerlist\" /\u003e\n    \u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n---\n\n## Visit: **[Portfolio Gallery](https://portfoliogallery.dev)**\n\n![Portfolio Gallery UI - Web Development Portfolios](./public/images/readme-img-one.png)\n![Portfolio Gallery UI - UI/UX Design Portfolios](./public/images/readme-img-two.png)\n![Portfolio Gallery UI - Mobile App Portfolios](./public/images/readme-img-four.png)\n![Portfolio Gallery UI - Data Science Portfolios](./public/images/readme-img-three.png)\n\n\u003e _**Note: This project showcases real developer portfolios with live previews, source code links, and inspiration for developers and designers.**_  \n\u003e [Learn more about contributing portfolios.](https://github.com/HassanXTech/portfolio-gallery/discussions)\n\n## Portfolio Gallery in the Wild!!!\n\n\u003cp align=\"left\"\u003e \nCurious where Portfolio Gallery is getting featured, shared, talked about or appreciated? \n\u003c/br\u003e\nCheck out this growing list of shoutouts, showcases, and love from the community:  \n\u003c/br\u003e\n\n⚡[**Where Portfolio Gallery is Making Noise??**](https://github.com/HassanXTech/portfolio-gallery/discussions)\n\u003c/p\u003e\n\n## Features\n\n- **Live Portfolio Previews** - See portfolios in action with iframe embeds\n- **Source Code Access** - Direct links to GitHub repositories and source code\n- **Category Organization** - Browse by Web Development, Mobile Apps, UI/UX Design, and more\n- **Search \u0026 Filter** - Find portfolios by name, category, or tags\n- **Favorites System** - Save and organize your preferred portfolios\n- **Responsive Design** - Optimized for all screen sizes and devices\n- **Modern UI/UX** - Beautiful, intuitive interface built with Tailwind CSS\n- **Portfolio Thumbnails** - Visual previews with auto-background fill\n- **Smooth Navigation** - Category carousel with pinned tabs and smooth scrolling\n- **Dark/Light Theme** - Automatic theme switching with system preference support\n\n## Tech Stack\n\n- **Next.js 15** - React framework with App Router\n- **TypeScript** - Type-safe development\n- **Tailwind CSS** - Utility-first CSS framework\n- **Vercel** - Deployment and hosting\n- **React Context** - State management for favorites\n- **Next.js Image** - Optimized image handling\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js 18+\n- npm, yarn, pnpm, or bun\n\n### Installation\n\n1. Clone the repository:\n\n```bash\ngit clone https://github.com/HassanXTech/portfolio-gallery.git\ncd portfolio-gallery\n```\n\n2. Install dependencies:\n\n```bash\nnpm install\n# or\nyarn install\n# or\npnpm install\n```\n\n3. Run the development server:\n\n```bash\nnpm run dev\n```\n\n4. Open [http://localhost:3000](http://localhost:3000) in your browser\n\n### Build for Production\n\n```bash\nnpm run build\nnpm start\n```\n\n## How to Use This\n\n1. Visit the live site: **[https://portfoliogallery.dev](https://portfoliogallery.dev)**\n2. Browse through the collection of developer portfolios by category.\n3. Click on any portfolio to open its preview modal with live website preview.\n4. Use the toggle to switch between thumbnail and live preview.\n5. Access source code and visit the live website directly from the modal.\n6. Add portfolios to your favorites for easy access later.\n\nThese portfolios are great for:\n\n- Finding design inspiration\n- Evaluating developer talent\n- Learning new techniques\n- Building your own portfolio\n\n## Screenshots\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./public/snapshots/screenshot-1.png\" alt=\"Portfolio Gallery Homepage - Web Development Portfolios\" width=\"400\" /\u003e\n  \u003cimg src=\"./public/snapshots/screenshot-2.png\" alt=\"Portfolio Gallery UI/UX Design Category\" width=\"400\" /\u003e\n  \u003cimg src=\"./public/snapshots/screenshot-3.png\" alt=\"Portfolio Gallery Mobile App Portfolios\" width=\"400\" /\u003e\n  \u003cimg src=\"./public/snapshots/screenshot-4.png\" alt=\"Portfolio Gallery Search and Filter\" width=\"400\" /\u003e\n  \u003cimg src=\"./public/snapshots/screenshot-5.png\" alt=\"Portfolio Gallery Dark Theme\" width=\"400\" /\u003e\n  \u003cimg src=\"./public/snapshots/screenshot-6.png\" alt=\"Portfolio Gallery Portfolio Details\" width=\"400\" /\u003e\n\u003c/div\u003e\n\n\n### Portfolio Categories\n\nThe application supports these portfolio categories:\n\n- **Web Development** - Full-stack web applications\n- **Mobile Apps** - iOS and Android applications\n- **UI/UX Design** - User interface and experience design\n- **Data Science \u0026 ML** - Machine learning and data projects\n- **Backend \u0026 DevOps** - Server-side and infrastructure\n- **Agency** - Creative agency portfolios\n- **Design Engineering** - Design systems and engineering\n- **Indie Makers** - Independent developer projects\n- **Game Dev** - Game development portfolios\n- **Student/Junior** - Early career developers\n- **Content \u0026 Writing** - Technical writing and content\n\n### Customization Tips\n\n**Thumbnails**: Use high-quality images with 16:9 aspect ratio\n**Live URLs**: Ensure websites are accessible and mobile-friendly\n**Source Code**: Link to public repositories with clear documentation\n**Tags**: Use relevant, searchable technology tags\n**Descriptions**: Write clear, concise descriptions of the work\n\n## Usage\n\n1. Browse the portfolio collection on the website\n2. Use category tabs to filter by portfolio type\n3. Search for specific portfolios or technologies\n4. Click on portfolios to see live previews\n5. Add interesting portfolios to your favorites\n6. Access source code and live websites directly\n\nEach portfolio includes:\n\n- High-quality thumbnail preview\n- Live website preview (when available)\n- Source code repository link\n- Technology tags and descriptions\n- Responsive design showcase\n\n## Contributing\n\nWe welcome contributions to expand the portfolio collection. To add new portfolios:\n\n### Adding New Portfolios\n\n1. Fork the repository\n2. Create a feature branch:\n\n```bash\ngit checkout -b feature/new-portfolio-name\n```\n\n3. Navigate to `src/data/portfolios.ts`\n4. Add your portfolio following the established format:\n\n```typescript\n{\n  id: \"unique-portfolio-id\",\n  name: \"Portfolio Display Name\",\n  category: \"web-development\",\n  description: \"A brief description of the portfolio\",\n  badge: \"New\", // Optional: \"New\", \"Popular\"\n  thumbnailUrl: \"https://example.com/thumbnail.png\",\n  liveUrl: \"https://example.com\",\n  sourceUrl: \"https://github.com/username/repo\",\n  tags: [\"React\", \"Next.js\", \"Tailwind CSS\"],\n  thumbnailFit: \"contain\", // \"contain\" or \"cover\"\n  style: {\n    background: \"#ffffff\",\n    // Optional custom background styling\n  },\n}\n```\n\n### Contribution Guidelines\n\n- **Quality**: Ensure portfolios are professional and well-designed\n- **Accessibility**: Verify live URLs are accessible and mobile-friendly\n- **Documentation**: Include clear descriptions and relevant tags\n- **Thumbnails**: Use high-quality images that represent the work well\n- **Uniqueness**: Avoid duplicating existing portfolios\n- **Performance**: Ensure live websites load reasonably fast\n\n### Portfolio Requirements\n\n- **High-quality thumbnail** (minimum 1200x800px)\n- **Live demo URL** (working website)\n- **Source code link** (GitHub repository)\n- **Proper categorization** (web, mobile, uiux, etc.)\n- **Responsive design** (mobile-friendly)\n\n### Testing Your Portfolios\n\n1. Test the portfolio in the development environment\n2. Verify thumbnail displays correctly\n3. Check live website accessibility\n4. Ensure source code links work\n5. Test responsive behavior across devices\n\n### Pull Request Process\n\n1. Commit your changes with descriptive messages\n2. Push to your feature branch\n3. Create a pull request with:\n   - Clear description of the portfolio added\n   - Screenshots or preview of the portfolio\n   - Any special considerations or notes\n\n```bash\ngit add .\ngit commit -m \"feat: add new web development portfolio\"\ngit push origin feature/new-portfolio-name\n```\n\n## Development\n\n### Project Structure\n\n```\nportfolio-gallery/\nsrc/\n├── app/                   \n│   ├── globals.css       \n│   ├── layout.tsx        \n│   ├── page.tsx           \n│   └── not-found.tsx      \n│\n├── components/           \n│   ├── ui/                # shadcn/ui components\n│   │   ├── badge.tsx     \n│   │   ├── button.tsx     \n│   │   └── tabs.tsx       \n│   ├── layout/            \n│   │   ├── navbar.tsx     \n│   │   └── footer.tsx     \n│   ├── portfolio/         \n│   │   ├── portfolio-showcase.tsx     \n│   │   ├── portfolio-card.tsx        \n│   │   ├── portfolio-grid.tsx         \n│   │   ├── portfolio-modal.tsx\n│   │   └── portfolio-empty-state.tsx \n│   ├── home/             \n│   │   ├── hero.tsx               \n│   │   ├── support-dropdown.tsx   \n│   │   └── return-to-preview.tsx  \n│   └── providers/         \n│       └── theme-provider.tsx \n│\n├── lib/                   \n│   ├── utils.ts           \n│   └── constants.ts      \n│\n├── hooks/                 \n│   ├── useTheme.tsx       \n│   └── useCopy.tsx        \n│\n├── types/                 \n│   ├── portfolio.ts         \n│   └── index.ts           \n│\n├── context/               \n│   └── favourites-context.tsx \n│\n└── data/                 \n    ├── portfolios.ts      # Portfolio data (contribute here)\n    └── categories.ts      \n```\n\n## Community\n\n- **Discussions** - [GitHub Discussions](https://github.com/HassanXTech/portfolio-gallery/discussions)\n- **Issues** - [Report bugs or request features](https://github.com/HassanXTech/portfolio-gallery/issues)\n- **Contributing** - [How to contribute](https://github.com/HassanXTech/portfolio-gallery/blob/main/CONTRIBUTING.md)\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## Acknowledgments\n\n- Built with Next.js and Tailwind CSS\n- Inspired by modern portfolio design patterns\n- Community-driven portfolio collection\n- Powered by Vercel for seamless deployment\n\n## Support\n\nFor questions, issues, or suggestions:\n\n- Open an issue on GitHub\n- Check existing issues before creating new ones\n- Provide detailed information for bug reports\n- Join discussions for feature requests\n\n## Built By\n\n- GitHub: [@HassanXTech](https://github.com/HassanXTech)\n\nIf you like this project, consider giving it a ⭐️ on GitHub and sharing it with others!\n\n---\n\n\u003e _**Happy coding!**_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhassanxtech%2Fportfolio-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhassanxtech%2Fportfolio-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhassanxtech%2Fportfolio-gallery/lists"}