https://github.com/zainulabdeenofficial/github-streak-card
🔥 GitHub Streak Card – Track your coding journey in style! A powerful tool to showcase your GitHub streaks, contributions, and developer stats with stunning visuals. ✨ Fully customizable, real-time data, and perfect for your profile or personal website. Built by ZainulabdeenOfficial to help you analyze your work and inspire consistent coding!
https://github.com/zainulabdeenofficial/github-streak-card
communityexchange contribution-graph customization developer-tools dynamic-readme github-api github-profile github-readme github-stats github-widget interactive-readme learn nextjs open-source open-source-project personal-dashboard profile-readme readme-card streak-tracker vercel
Last synced: 6 days ago
JSON representation
🔥 GitHub Streak Card – Track your coding journey in style! A powerful tool to showcase your GitHub streaks, contributions, and developer stats with stunning visuals. ✨ Fully customizable, real-time data, and perfect for your profile or personal website. Built by ZainulabdeenOfficial to help you analyze your work and inspire consistent coding!
- Host: GitHub
- URL: https://github.com/zainulabdeenofficial/github-streak-card
- Owner: ZainulabdeenOfficial
- License: mit
- Created: 2025-06-29T11:04:29.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-07-15T08:16:37.000Z (11 months ago)
- Last Synced: 2025-07-15T19:12:37.026Z (11 months ago)
- Topics: communityexchange, contribution-graph, customization, developer-tools, dynamic-readme, github-api, github-profile, github-readme, github-stats, github-widget, interactive-readme, learn, nextjs, open-source, open-source-project, personal-dashboard, profile-readme, readme-card, streak-tracker, vercel
- Language: TypeScript
- Homepage: https://v0-git-hub-streak-score-card-phi.vercel.app
- Size: 154 KB
- Stars: 17
- Watchers: 0
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# 🔥 GitHub Streak Card Generator
🎯 **Create stunning, animated GitHub streak cards** featuring water effects, circular avatars, and full customization — perfect for elevating your GitHub profile!
🌐 **Try it live**: [https://v0-git-hub-streak-score-card-phi.vercel.app](https://v0-git-hub-streak-score-card-phi.vercel.app)
---
## ✨ Features at a Glance
- 🔥 **Live Current Streak**
- 📈 **Longest Streak Tracker**
- 📊 **Yearly & Total Contributions**
- 👤 **Public Repos, Stars, Followers**
- 🖼️ **Circular Avatar Integration**
- 🌊 **Water Ripple Animation**
- 🎨 **5+ Beautiful Themes**
- 💡 **Custom Color & Layout Support**
- 📋 **README Code Generator**
- 💾 **Export as PNG**
- ⚡ **Next.js Fast Performance**
- 📱 **Fully Responsive Design**
---
## 🚀 How to Use
1. Open 👉 [**Streak Card Generator**](https://v0-git-hub-streak-score-card-phi.vercel.app/)
2. Enter your **GitHub username**
3. Pick a **theme** or customize your own
4. Preview your card in real-time
5. 📋 **Copy README code** and paste into your profile
💥 Done! Your profile now has a visual contribution highlight!
---
## 🎨 Theme Collection
| 🌈 Theme | 🖼️ Description |
|--------------|-------------------------------------|
| 🌙 Dark | Elegant dark mode with rich contrast |
| 🌊 Ocean | Cool blues & fluid design (Default) |
| 🌅 Sunset | Bold reds & oranges |
| 🌲 Forest | Earthy greens and calm visuals |
| 💜 Purple | Royal look with soft hues |
---
## 🖼️ Layout Overview
```
[ Circular Avatar ] | [ Animated Streak Circle ] | [ Stats & Languages ]
```
**Includes:**
- 👤 Profile block (avatar, username, join date)
- 🔥 Streak counter (with water animation)
- 📊 Contributions, repo count, languages
- 🧑💻 Language bar (visually ranked top languages)
---
## 🛠️ Examples in Action
### 🌊 Ocean Theme – `ZainulabdeenOfficial`
### 💜 Purple Theme – `Hoor507`
## Sunset Theme Salman Ahmad
## Dark Theme Linus Torvalds
---
## 🎛️ Full Customization
| Option | What It Does |
|------------------|----------------------------------------|
| 🎨 Background | Card's background color |
| 🔤 Text | Text color across all card elements |
| 🌈 Accent | Highlight color for icons/streak |
| 🟦 Border | Card outline & segment separators |
| 💧 Water | Color of animated water effect |
| 🔥 Streak Counter | Current streak color & pulse animation |
---
## ⚙️ Deploy Your Own Version
Click below to deploy on **Vercel** in one click:
[](https://vercel.com/new/clone?repository-url=https://github.com/yourusername/github-streak-card-advanced)
1. Connect GitHub
2. Deploy
3. Customize your card service under your domain!
---
## 🤝 Contributions Welcome!
We'd ❤️ your help to improve and grow this tool:
1. Fork the repo
2. Create a feature branch: `git checkout -b my-feature`
3. Commit: `git commit -m '✨ Add new feature'`
4. Push: `git push origin my-feature`
5. Open a Pull Request
---
## 📄 License
This project is under the **MIT License**. See [LICENSE](LICENSE) for more info.
---
## 🙏 Credits & Thanks
- 💻 GitHub REST API
- 🧩 [shadcn/ui](https://ui.shadcn.com/)
- 🚀 Vercel (for smooth deployment)
- 🌍 Open-source community inspiration
---
🌟 **Crafted with ❤️ by [ZainulabdeenOfficial](https://github.com/ZainulabdeenOfficial)** 🌟
🔗 [Generate Your Card Now](https://v0-git-hub-streak-score-card-phi.vercel.app/)
🎨 Elevate your GitHub presence today!