DEV Community

Cover image for I built a free GitHub profile README generator with no badge APIs, no backend and a 3D contribution universe
SandeepKomal
SandeepKomal

Posted on

I built a free GitHub profile README generator with no badge APIs, no backend and a 3D contribution universe

#github #opensource #javascript #githubactions

README-Glassfolio turns your GitHub username into a themed profile README (banner, stats, heatmap, 3D universe, projects) as plain SVGs in your own repo. Publish in one click, and it refreshes itself daily.

Your GitHub profile is often the first thing a recruiter, a hiring manager or a possible collaborator sees. For most of us it's a contribution graph and six pinned repos. That's a missed chance.

So I built README-Glassfolio: type your GitHub username, pick a theme, and get a complete profile README with a banner, stats, a contribution heatmap, a 3D "contribution universe", a languages card, a timeline, project cards and Connect buttons. Then publish it to your profile in one click.

👉 Try it: readme-glassfolio.in
⭐ Source (MIT): github.com/SandeepKomal/README-Glassfolio

The README-Glassfolio page: a themed preview that shows the README exactly as GitHub will show it

The problem with most profile README tools

If you've made a fancy profile README before, you've probably pasted in a stack of image URLs pointing at somebody else's server: a stats card here, a streak counter there, a typing banner on top. It looks great until:

  • the free service hits its rate limit and your profile fills with broken images,
  • the service shuts down,
  • or you realise every visit to your profile is pinging a third party.

README-Glassfolio takes a different approach: everything is drawn as plain SVG files that live in your own <user>/<user> repo. No badge APIs, no stats services, no backend. Data comes straight from api.github.com, and every card is rendered in your browser.

What you get

Here's a README made with it (Royal theme, default options), shown on GitHub's dark and light pages:

The same README on GitHub's dark page and on its light page

  • Wave header and footer: a gradient banner with your name, title and top skills, with gently drifting waves.
  • Stats and streak cards: commits, PRs, issues, stars, followers, current and longest streak.
  • Contribution heatmap: laid out like GitHub's own graph, with best day and daily average.
  • 🪐 3D contribution universe: your year as a 3D pie of month wedges round a glowing core, with your top repos orbiting as planets sized by stars, plus a mini pie of your commit / PR / issue / review mix.
  • Languages card, timeline, project cards (pick the ones you want featured, in your order) and Connect buttons.
  • An optional changelog layout that shows your repos as release notes, and a Recently pushed card.

8 themes, or your own colours

aurora, cyber, sunset, emerald, royal, graphite, the light paper, or auto, which picks colours from your username so every profile looks different. Want your brand colours? Choose Custom, pick two accents, and it adjusts them so text stays readable. The tests throw 300 random and extreme colour pairs at it to check that.

Day and night, automatically

By default you get two complete image sets, dark and light, wrapped in <picture> with prefers-color-scheme. Visitors in dark mode see the dark set; visitors in light mode see the light one. Nothing looks out of place on either page.

Publish in one click, and it stays fresh

  1. Create your profile repo (your-username/your-username, public).
  2. Create a fine-grained token limited to only that repo, with Contents and Workflows set to read and write.
  3. On readme-glassfolio.in, enter your username, tweak the options, press Publish to GitHub and paste the token.

All files land in one commit. The token goes only to api.github.com, stays in memory, and is cleared after publishing.

A README is normally a snapshot, so "Keep my stats fresh every day" is on by default. It adds a small GitHub Action to your repo that rebuilds the README once a day and commits only when something changed. It has no uses: lines (no third-party actions), no secrets, one permission (contents: write), and a copy of the generator sits in .readme-patch/ so you can read every line that runs. If GitHub's API is down that day, it changes nothing, so you never end up with a half-empty profile.

Prefer not to use a token? Download the zip and drag the files into your repo.

📘 New to profile READMEs? There's a step-by-step guide with screenshots (also as a PDF) that walks through every click.

Safe to paste a token into

I took security seriously, because I'm asking people to paste a token into a web page:

  • A strict Content-Security-Policy: scripts only from the site itself, network requests only to the site and api.github.com, no inline scripts, no eval.
  • No innerHTML anywhere. The live preview builds elements from a whitelist, so markup hidden in a bio or repo description can't do anything.
  • Tokens are never stored and can't end up in a share link.
  • The browser tests actually attack the page (injected scripts, inline handlers, eval, fetch/XHR/image/iframe/WebSocket to another host) and check that everything is blocked.

For terminal fans: there's a CLI

Same engine, zero dependencies, Node 18+:

git clone https://github.com/SandeepKomal/README-Glassfolio
cd README-Glassfolio

node cli.js your-username --theme cyber --role "Cloud Engineer" --stack "AWS, Terraform"
node cli.js --sample                       # try it with no network
GITHUB_TOKEN=github_pat_xxx node cli.js your-username --publish --daily
Enter fullscreen mode Exit fullscreen mode

Output goes to ./out/: README.md, banner.svg and cards/.

A few small touches I'm proud of

  • A preview that tells the truth. It shows your README inside a mock GitHub profile at GitHub's real widths (896px desktop, 390px phone), with light/dark switching.
  • Text that always fits. A fuzz tool renders about 1,800 cards with extreme repo names (90 characters, million-star counts) in a real browser and measures every text box so nothing collides.
  • Motion that respects people. Animations are plain CSS inside the SVGs. With "reduce motion" on, visitors see the finished still image.
  • Share links like ?user=octocat&theme=cyber rebuild the same setup, and a 1280×640 share image is ready for LinkedIn or X.
  • A "Make it even better" checklist scores your profile and points to what's missing.

Try it and tell me what you think

It's free, open source (MIT), and runs entirely in your browser:

If you make your profile with it, drop your GitHub link in the comments. I'd love to see what themes people pick. A ⭐ on the repo helps more developers find it, and issues and PRs are welcome. Next on my list is a compact card design that reads better on phones.

Happy profile-polishing! ✨

Top comments (0)