I made a terminal-style SVG card generator for GitHub READMEs (and this is my first post ever, please be nice)

KimDoYoon — Fri, 10 Apr 2026 09:58:57 +0000

Hi. This is my first dev.to post. I've been lurking here for about two years, saving articles to my reading list and never actually reading them. Classic.

Anyway, I built something and I wanted to share it, so here we are.

The problem (aka my excuse to build something)

I kept seeing the same GitHub profile READMEs. GitHub Readme Stats. A badge. Another badge. Maybe a snake animation if you were feeling adventurous.

Don't get me wrong — those tools are great. I use them too. But I wanted my profile to feel more like me — something with a bit more personality. Something that looked like a deliberate design decision, not just "I copy-pasted this from someone else's README."

So I did what any reasonable developer would do instead of just updating their bio:

I spent way too long building a whole new tool.

What I built

Terminal Identity — terminal-style SVG identity cards, generated from a single URL.

One <img> tag. No tokens. No GitHub Actions. No setup at all.

<img
  src="https://terminal-identity-opal.vercel.app/api?name=yourname&username=your-github&theme=amber/solar"
  width="100%"
  alt="my card"
/>

That's it. Paste it in your README and it works.

What it can do

Live GitHub stats — repos, stars, forks, followers pulled from the public API at render time
Top languages — bar chart or skill icons (powered by skillicons.dev)
4 provider shells — Classic, Amber, Obsidian, Prism (each has a different layout feel)
8 themes — Solar, Ember, Aurora, Cobalt, Velvet, Graphite, Matcha, Sakura
Custom bio — with multi-line wrapping and **bold** support
Background patterns — grid, rings, or pulse
Fully customizable — accent colors, card size, which stats to show, which languages to exclude

Here's the same card in a few different themes:

Obsidian / Cobalt

Prism / Aurora

Amber / Sakura

How it works (the part where I pretend I knew what I was doing)

The whole thing is a single serverless function on Vercel. When you hit the /api endpoint:

It reads your query params
Optionally fetches your GitHub public stats
Builds an SVG string and returns it as image/svg+xml

The SVG is hand-crafted — no canvas, no headless browser, no Puppeteer. Just string templates, some math, and a pixel-based text wrapping function I'm probably too proud of.

The same terminal-card.js file runs both server-side (Node.js) and in the browser playground. Writing isomorphic JS across environments for the first time was genuinely one of those "oh so THAT'S why people do it this way" moments.

The live playground

I also built a playground at terminal-identity-opal.vercel.app where you can tweak everything visually and copy the URL or markdown directly.

It renders the SVG live as you type, fetches your GitHub stats if you enter a username, and lets you download the SVG or copy the API URL.

Try it

🔗 Live playground: https://terminal-identity-opal.vercel.app

⭐ GitHub: https://github.com/doyoon530/terminal-identity

If you end up using it on your profile, I'd genuinely love to see it — drop a link in the comments. And if something looks broken or wrong, please tell me. This is my first real open source project and I'm still figuring out what "done" looks like.

Thanks for reading my first post. I'll try to actually read some articles in return.

Built with Vercel · SVG · vanilla JS · and a questionable amount of time spent on font metric calculations