https://github.com/varnika060306/github-card-generator
A stylish GitHub profile card generator with PNG download and theme toggles.
https://github.com/varnika060306/github-card-generator
api github javascript open-source profile-card
Last synced: about 11 hours ago
JSON representation
A stylish GitHub profile card generator with PNG download and theme toggles.
- Host: GitHub
- URL: https://github.com/varnika060306/github-card-generator
- Owner: Varnika060306
- Created: 2025-07-29T01:48:44.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2025-07-29T02:50:50.000Z (2 months ago)
- Last Synced: 2025-08-25T07:27:29.981Z (about 2 months ago)
- Topics: api, github, javascript, open-source, profile-card
- Language: JavaScript
- Homepage:
- Size: 106 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📇 GitHub Card Generator
A stylish GitHub profile card generator with PNG download and theme toggles.
🚀 **Live Demo**: [Click here to view](https://varnika060306.github.io/github-card-generator/)
## ✨ About the Project
The GitHub Card Generator is a stylish and interactive tool to generate a shareable GitHub profile card.
It includes:
- Light/Dark mode toggle
- PNG download support
- A live preview of your GitHub data
Ideal for use in portfolios, resumes, or GitHub READMEs.
## 🛠 Tech Stack
- HTML
- CSS
- JavaScript
## 🚀 How to Use
Follow these simple steps to use the GitHub Card Generator:
1. **Clone the repository**
```bash
git clone https://github.com/Varnika060306/github-card-generator.git
```
2. **Navigate into the project folder**
```bash
cd github-card-generator
```
3. **Open the app in your browser**
- Double-click on `index.html`
**OR**
- Use the command below to open it from the terminal (macOS):
```bash
open index.html
```
4. **Use the tool**
- Enter your GitHub username
- Click the **Generate** button
- Use the **Theme Toggle** button to switch between light and dark mode
- Click **Download PNG** to save your profile card
That’s it.Your stylish GitHub card is ready 🎉
## ✨ Features
- 🎨 Toggle between **light** and **dark** themes
- 👤 Generate a stylish GitHub profile card
- 🖼️ Download the card as a **PNG image**
- 🧠 Built with clean, readable vanilla JavaScript
- ⚡ No external dependencies or frameworks
## 📁 Folder Structure
```
github-card-generator/
├── index.html # Main HTML file
├── style.css # Styling for the card and UI
├── script.js # Logic for card generation, toggles, and download
├── demo.gif # Demo GIF showing the tool in action
└── README.md # Project documentation
```
## 🙌 Credits
This mini project was created as part of my open-source learning journey.
Inspired by GitHub profile card designs and built to practice vanilla web dev ✨
- Designed & Developed by [@Varnika060306](https://github.com/Varnika060306)