Skip to content

πŸ”₯ 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!

License

Notifications You must be signed in to change notification settings

ZainulabdeenOfficial/GitHub-Streak-Card

Repository files navigation

πŸ”₯ 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


✨ 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
  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

ZainulabdeenOfficial

πŸ’œ Purple Theme – Hoor507

Hoor507

Sunset Theme Salman Ahmad

GitHub Streak

Dark Theme Linus Torvalds

GitHub Streak


πŸŽ›οΈ 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

  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 for more info.


πŸ™ Credits & Thanks

  • πŸ’» GitHub REST API
  • 🧩 shadcn/ui
  • πŸš€ Vercel (for smooth deployment)
  • 🌍 Open-source community inspiration

🌟 Crafted with ❀️ by ZainulabdeenOfficial 🌟
πŸ”— Generate Your Card Now
🎨 Elevate your GitHub presence today!

About

πŸ”₯ 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!

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •