CSES GitHub Profile Badge & Card Generator

Showcase your CSES (Computer Science Education Society) competitive programming stats directly on your GitHub Profile README! This Next.js service dynamically scrapes only your public profile data to generate customizable, production-ready SVG badges and cards.

---

🚀 How to Use in your GitHub Profile

You don't need to configure or code anything to use this. Simply follow these steps:

Step 1: Copy the Markdown Code

Choose either a complete statistics card or a compact badge:

Option A: CSES Profile Card (Recommended)

Displays your total submissions, first submission date, and programming languages breakdown:

[![CSES Profile Card](https://cses-badge.vercel.app/api/card?user=YOUR_CSES_ID&theme=github&style=modern)](https://cses.fi/user/YOUR_CSES_ID)

Option B: CSES Submissions Badge

Displays a simple badge with your total submissions:

[![CSES Submissions Badge](https://cses-badge.vercel.app/api/badge?user=YOUR_CSES_ID&theme=github&style=modern)](https://cses.fi/user/YOUR_CSES_ID)

Step 2: Get Your CSES User ID

1. Log in to cses.fi.
2. Click on your username in the top right to go to your profile.
3. Look at the URL in your browser. It will look like https://cses.fi/user/12345/.
4. Your CSES User ID is the number (e.g., 12345).

Step 3: Paste and Customize

Replace YOUR_CSES_ID in the markdown code with your actual CSES User ID, and paste it into your GitHub profile README file (README.md).

Live Website:
https://cses-badge.vercel.app/
GitHub:
https://github.com/xnocode/CSES-Badge