GitHub-Streak-Card

KO | EN

gitlite — search

#javascript #hacktoberfest #ai #llm #android #rust #deep-learning #docker #macos #java #cli #vue #security #mcp

GitHub-Streak-Card

(★ 25)

🔥 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!

GitHub-Streak-Card Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 🔥 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`
<div align="center">
  
![ZainulabdeenOfficial](https://v0-git-hub-streak-score-card-phi.vercel.app/api/card-with-avatar?username=ZainulabdeenOfficial&theme=%7B%22backgroundColor%22%3A%22%230f172a%22%2C%22textColor%22%3A%22%23e2e8f0%22%2C%22accentColor%22%3A%22%230ea5e9%22%2C%22borderColor%22%3A%22%231e293b%22%2C%22waterColor%22%3A%22%230ea5e9%22%2C%22streakColor%22%3A%22%2306b6d4%22%7D)

</div>

### 💜 Purple Theme – `Hoor507`
<div align="center">

![Hoor507](https://v0-git-hub-streak-score-card-phi.vercel.app/api/card-with-avatar?username=Hoor507&theme=%7B%22backgroundColor%22%3A%22%23581c87%22%2C%22textColor%22%3A%22%23f3e8ff%22%2C%22accentColor%22%3A%22%23a855f7%22%2C%22borderColor%22%3A%22%237c3aed%22%2C%22waterColor%22%3A%22%23a855f7%22%2C%22streakColor%22%3A%22%23c084fc%22%7D)

</div>

##  Sunset Theme Salman Ahmad
<div align="center">

![GitHub Streak](https://v0-git-hub-streak-score-card-phi.vercel.app/api/card-with-avatar?username=ahmmikun&theme=%7B%22backgroundColor%22%3A%22%23451a03%22%2C%22textColor%22%3A%22%23fef3c7%22%2C%22accentColor%22%3A%22%23f59e0b%22%2C%22borderColor%22%3A%22%2392400e%22%2C%22waterColor%22%3A%22%23f59e0b%22%2C%22streakColor%22%3A%22%23dc2626%22%7D)

</div>

## Dark Theme Linus Torvalds
<div align="center">

![GitHub Streak](https://v0-git-hub-streak-score-card-phi.vercel.app/api/card-with-avatar?username=torvalds&theme=%7B%22backgroundColor%22%3A%22%231a1b27%22%2C%22textColor%22%3A%22%23ffffff%22%2C%22accentColor%22%3A%22%2300d4aa%22%2C%22borderColor%22%3A%22%2330363d%22%2C%22waterColor%22%3A%22%2300d4aa%22%2C%22streakColor%22%3A%22%23ff6b6b%22%7D)

</div>

---

## 🎛️ 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:

[![Deploy with Vercel](https://vercel.com/button)](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!

</div>

GitHub-Streak-Card

GitHub-Streak-Card Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

GitHub-Streak-Card

GitHub-Streak-Card Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README