A React TypeScript application that generates hexagon-shaped skill badges from SkillIcons URLs and downloads them as individual PNG files with transparent backgrounds in a ZIP archive.
- 🔷 Hexagon Badge Generation: Creates beautiful hexagon-shaped badges with technology colors
- 📦 PNG Zip Download: Downloads all badges as individual PNG files in a ZIP archive
- 🎨 Transparent Background: PNG files have transparent backgrounds for versatile usage
- 🎨 Technology Colors: Supports 50+ technologies with authentic brand colors
- 📱 Responsive Design: Works perfectly on desktop and mobile devices
- ⚡ TypeScript: Built with type safety and modern React patterns
- 🚀 GitHub Pages: Automatically deployed via GitHub Actions
Visit the live application: https://PhyoeBlitz.github.io/badge-generate/
- Node.js (v18 or higher)
- npm or yarn
- Clone the repository:
git clone https://github.com/PhyoeBlitz/badge-generate.git
cd badge-generate- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173/badge-generate/
- Enter a SkillIcons URL in the input field (e.g.,
https://skillicons.dev/icons?i=ts,react,python,aws) - Click "Generate Hexagon Badges" to create the badges
- Click "Save All as PNG Zip" to download all badges as individual PNG files with transparent backgrounds
- Single Icon:
https://skillicons.dev/icons?i=ts - Frontend Stack:
https://skillicons.dev/icons?i=js,ts,react,vue - Python Stack:
https://skillicons.dev/icons?i=python,django,flask,fastapi - DevOps Stack:
https://skillicons.dev/icons?i=aws,docker,kubernetes,jenkins - Full Stack:
https://skillicons.dev/icons?i=html,css,js,php,mysql
- ⚛️ React 18 - Modern UI library with hooks
- 🔷 TypeScript - Type safety and better development experience
- ⚡ Vite - Fast build tool and development server
- 📦 JSZip - Client-side ZIP file creation
- 🎨 CSS3 - Advanced styling with hexagon clip-path
- 🔄 GitHub Actions - Automated deployment to GitHub Pages
The app supports 50+ technologies including:
- Frontend: TypeScript, JavaScript, React, Vue, Angular
- Backend: Python, Java, PHP, Go, Rust, Node.js
- Cloud: AWS, Docker, Kubernetes, Jenkins
- Databases: MySQL, PostgreSQL, MongoDB, Redis
- Tools: Git, GitHub, GitLab, VS Code, Figma
- 🎨 Authentic Colors: Each technology badge uses official brand colors
- 🔍 High Resolution: 2x scale PNG output for crisp quality at any size
- 🔷 Perfect Hexagons: CSS clip-path creates perfect geometric shapes
- ✨ Hover Effects: Interactive animations and scaling on hover
- 📱 Mobile Responsive: Seamlessly adapts to different screen sizes
- 🌟 Transparent PNGs: Perfect for overlaying on any background
- ⚡ Fast Performance: Client-side processing with no server dependencies
This project is automatically deployed to GitHub Pages using GitHub Actions. Every push to the main branch triggers:
- Build Process: Compiles TypeScript and bundles assets
- Optimization: Minifies code and optimizes images
- Deployment: Automatically publishes to GitHub Pages
npm run dev- Start development server with hot reloadnpm run build- Build optimized production bundlenpm run preview- Preview production build locallynpm run lint- Run ESLint for code quality checks
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is powered by SkillIcons - an amazing service that provides beautiful tech stack icons. Special thanks to:
- SkillIcons by @tandpfun - For providing the awesome skill icons API
- Technology Communities - For creating and maintaining the iconic logos and brand colors
This project is open source and available under the GPL-3.0 license.
Built with ❤️ by PhyoeBlitz