🎮 PixelMD | GitHub Profile README Generator

"Level Up Your Profile" — Create stunning GitHub profiles with a nostalgic 8-bit pixel art aesthetic and modern Glassmorphism UI.

🚀 Live Demo • ✨ Features • 🛠️ Tech Stack • 🚀 Installation • 🤝 Contributing

---

📸 Preview

Light Mode

Dark Mode

---

✨ Features

🎨 Pixel Art Interface A nostalgic gaming-inspired UI that makes creating your profile fun and engaging.	🌗 Light & Dark Mode Seamlessly switch between themes with a beautiful animated toggle.
🎭 100+ Tech Icons Choose from our curated pixel art icon collection or use your own.	📋 One-Click Export Copy your generated markdown instantly or download as README.md.
📊 GitHub Stats Integrate your GitHub stats with beautiful themes (Tokyo Night, Dracula, etc.).	🌐 Social Links Connect all your social platforms with pixel-styled icons.

---

🛠️ Tech Stack

Category	Technology
Framework	Angular 21 (v21.2.7)
Language	TypeScript
UI Styling	CSS3 / Glassmorphism
Icons	Lucide Icons + Custom Pixel Art
Testing	Vitest
Deployment	GitHub Pages / Netlify

---

🚀 Installation

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• Angular CLI (npm install -g @angular/cli)

Step 1: Clone the Repository

git clone https://github.com/SamuelCubano/PixelMD-github-profile-readme-generator.git
cd PixelMD-github-profile-readme-generator

Step 2: Install Dependencies

npm install
# or
yarn install

Step 3: Start Development Server

ng serve
# or
npm start

Navigate to http://localhost:4200/ in your browser. The application will automatically reload if you change any of the source files.

Step 4: Build for Production

ng build --configuration=production

The build artifacts will be stored in the dist/ directory.

---

🎯 How to Use

1. Step 1 - Tell us about you: Add your greeting, name, role, and bio
2. Step 2 - Your Highlights: Customize icons for work, learning, collaboration, etc.
3. Step 3 - Tech Arsenal: Select your technologies from 100+ pixel art icons
4. Step 4 - Digital Presence: Add your social media and GitHub profile links
5. Step 5 - Generate: Copy your markdown or download the README.md file

---

🤝 Contributing

We love contributions! Here's how you can help make PixelMD even better:

Ways to Contribute

• 🐛 Report bugs and issues
• 🎨 Add new pixel art icons
• 💡 Suggest new features
• 📖 Improve documentation
• 🌍 Add translations

Getting Started

1. Star ⭐ the repository to show your support
2. Fork 🍴 the repository
3. Create a feature branch

   git checkout -b feature/amazing-feature

4. Make your changes and commit them

   git commit -m 'Add some amazing feature'

5. Push to the branch

   git push origin feature/amazing-feature

6. Open a Pull Request 🎉

Icon Contribution Guidelines

If you want to add new pixel art icons:

• Icons should be 64x64 pixels
• Use a pixel art style consistent with existing icons
• Export as PNG with transparent background
• Add the icon entry to src/app/data/data.ts

---

⭐ Support the Project

If PixelMD helped you create an awesome GitHub profile, please consider:

• Giving us a ⭐ Star on GitHub
• Sharing the project with other developers
• Contributing new icons or features
• Following the repository for updates

Your support motivates us to keep adding more components and styles! 🚀

---

🎨 Credits

Developed with ☕ and pixel love by Samuel Cubano from Venezuela.

Special thanks to:

• The Angular team for the amazing framework
• Lucide Icons for the beautiful icon set
• All contributors who help make this project better

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Made with love for the developer community