GitHub Languages Card

✨ Generate beautiful, real-time SVG cards showcasing your GitHub top programming languages ✨

---

✨ Demo

Interactive demo — real-time theme switching & card generation

🔗 Live URL: github-languages-card.vercel.app

Note for users from restricted regions (e.g., Iran):
If Vercel is inaccessible, please use a VPN to access the live demo. 🙏

🚀 Quick Start

Copy and paste this into your GitHub README.md:

![GitHub Languages](https://github-languages-card.vercel.app/api/top-languages?username=VIDAKHOSHPEY22&theme=pink)

Example Result

✨ Built by VIDAKHOSHPEY22 with LangCard ✨

![GitHub Languages](https://github-languages-card.vercel.app/api/top-languages?username=YOUR_USERNAME&theme=pink)

_{🎨 18+ themes | ⚡ Real-time | 🚀 Open Source}

🎨 Themes Gallery

Choose from 18+ professionally designed themes to match your style. Here are our most beautiful themes:

Theme	Preview	Theme	Preview
Pink ⭐		Dark Neon 💚
Neon 💙		Hacker 💚
Purple 💜		Coffee 🤎
Golden ⭐		Ocean 🌊
Sunset 🌅		Fire 🔥
Mint 🌿		Strawberry 🍓
Lavender 🌸		Peach 🍑
Dark 🌙		Graphite ⚫
Snow ❄️		White 🤍

🌟 Top Picks (Most Popular)

Rank	Theme	Why It's Special
1 🥇	Pink	Sweet, modern, and eye-catching gradient
2 🥈	Dark Neon	Cyberpunk vibes with glowing effects
3 🥉	Neon	Bright, energetic, and futuristic
4	Hacker	Classic matrix-style green on black
5	Coffee	Warm, cozy, and professional
6	Purple	Royal and elegant deep purple tones
7	Golden	Premium, luxurious golden gradient
8	Ocean	Calm, professional blue tones

📊 Features

Feature	Description
🎨 18+ Themes	Professionally designed color schemes
📈 Top Languages	Shows your most used programming languages with percentages
👥 GitHub Stats	Displays repositories, followers, stars, and forks
🖼️ Avatar Support	Shows your GitHub profile picture
📱 Responsive	Works perfectly on all devices
⚡ Real-time	Live preview with instant theme switching
🔒 Privacy Focused	No data storage, direct API calls
🚀 Fast Loading	Optimized SVG generation with caching

🛠️ API Documentation

Endpoint

GET /api/top-languages

Parameters

Parameter	Type	Required	Default	Description
username	string	✅ Yes	-	GitHub username
theme	string	❌ No	pink	Theme name (see themes list below)

Example Request

curl "https://github-languages-card.vercel.app/api/top-languages?username=VIDAKHOSHPEY22&theme=hacker"

Available Themes

pink, dark, mint, purple, ocean, sunset, graphite, coffee, 
lavender, peach, neon, strawberry, darkNeon, fire, snow, 
hacker, white, golden

Response Format

The API returns an SVG image that can be embedded directly in markdown:

![GitHub Languages](https://github-languages-card.vercel.app/api/top-languages?username=VIDAKHOSHPEY22&theme=pink)

💻 Self-Hosting

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• Git

Installation

1. Clone the repository

git clone https://github.com/VIDAKHOSHPEY22/github-languages-card.git
cd github-languages-card

2. Install dependencies

npm install

3. Configure environment

cp .env.example .env
# Edit .env with your GitHub token (optional but recommended)

4. Start the server

node server.js

5. Open your browser

http://localhost:3000

Docker Deployment

Create a Dockerfile:

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]

Build and run:

docker build -t langcard .
docker run -p 3000:3000 langcard

Environment Variables

Variable	Description	Default
PORT	Server port	3000
GITHUB_TOKEN	GitHub API token (higher rate limit)	-
NODE_ENV	Environment	development
RENDER_EXTERNAL_URL	External URL for production	-

🎯 Use Cases

• GitHub Profile README - Showcase your coding skills
• Developer Portfolio - Display your tech stack
• Team Dashboard - Monitor team language usage
• Coding Blog - Add interactive stats to articles
• CV/Resume - Showcase your programming language proficiency

📁 Project Structure

github-languages-card/
├── server.js              # Main Express server
├── public/                # Static files
│   ├── index.html         # Landing page
│   └── images/            # Documentation images
├── utils/                 # Utility functions
│   ├── github.js          # GitHub API integration
│   ├── svgBuilder.js      # SVG card builder
│   └── helpers.js         # Helper functions
├── themes/                # Theme definitions
│   ├── pink.js
│   ├── dark.js
│   ├── mint.js
│   └── ... (all themes)
├── .env                   # Environment variables
├── package.json           # Dependencies
└── README.md              # Documentation

🔧 Tech Stack

Technology	Purpose
	Runtime Environment
	Web Framework
	HTTP Client
	Graphics Generation

📸 Screenshots

Main application interface with live preview

🤝 Contributing

Contributions are what make the open source community such an amazing place! Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Development Setup

# Install dependencies
npm install

# Run in development mode
node server.js

# The server will restart on changes

🐛 Known Issues

• GitHub API has rate limits (60 requests/hour without token)
• Use GITHUB_TOKEN environment variable for higher limits (5000/hour)
• First request may be slow due to GitHub API response time

👨‍💻 Author

Vida Khoshpey	Yalda Khoshpey
📧 vviiddaa2@gmail.com	📧 yaldatwin@gmail.com

📬 Contact Us

_{Made with ❤️ by Vida & Yalda — Twin Coders 👯‍♀️}

---

⭐ Support This Project

📊 GitHub Stats

---

📜 License

MIT License • Open Source