DEV Community

KimDoYoon
KimDoYoon

Posted on

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

#webdev #opensource #github #productivity

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.

Terminal Identity demo card

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"
/>
Enter fullscreen mode Exit fullscreen mode

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

Cobalt theme

Prism / Aurora

Aurora theme

Amber / Sakura

Sakura theme

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:

  1. It reads your query params
  2. Optionally fetches your GitHub public stats
  3. 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

Top comments (0)