TL;DR: this post is about how AI helped me get the project above unstuck. If you want to create your own card for your GitHub profile, go to codetrainer.pepinelli.dev.

The idea

A while ago, inspired by github-readme-stats, I had the idea of creating a card with my GitHub stats and the technologies I work with, to put on my profile. When I thought about including the GitHub badges, the Pokémon trainer card immediately came to mind, the one where trainers show off their badges. It was perfect, a business card to show off the vast range of technologies I master:

I looked for a reference in the games, and the trainer card from Pokémon Fire Red matched exactly what I had in mind:

It has the name, trainer ID, journey stats and, most importantly, the badges. Exactly what I wanted. I opened Figma and made the first version:

Then I added the colors and the logos for the badges and technologies, and it looked just the way I wanted (yes, I renamed the project along the way):

The font that wouldn’t load

With the UI done, all that was left was the implementation. My idea was to have an API with a single endpoint that receives a GitHub username and returns the card as an SVG. Simple, right?

I built the API and started on the first version of the card. It only had the background, and the next step was adding the Pokémon-style font. That’s where the trouble started. I needed to ship the font along with the SVG, and I tried every method I could find online, but nothing worked. The font simply wouldn’t load.

This was February 2025. I remember everyone was talking about Opus 3 and GPT-4o, so I decided to give this AI thing a chance and asked it to fix the font problem. It tried in many different ways, I lost a good few hours and… nothing. I walked away convinced that “this AI is useless”. Soon after, other priorities showed up and the project was abandoned.

A little over a year later

Our field has completely changed since then. Some companies are explicitly asking devs not to write code by hand. Most developers have changed how they see AI, going from a fancy autocomplete to an agent that writes code that could go straight to production. It was no different for me. Today I use agents every day, both at work and on personal projects.

One day, with 2% of my weekly Claude quota left, I was wondering what to do with those leftovers and remembered my dear card. I threw the same font problem at Claude Opus 5.5 and, in about 30 seconds, it was solved.

I couldn’t believe it. The solution wasn’t even that complex, but it would definitely have taken me a long time to get there, if I ever did.

So what was the problem?

The problem was never my code. Since GitHub renders README images inside an <img> tag, the SVG can’t load anything external, so the font has to be embedded as base64, and I had already done that correctly. Instead of messing with my code, Claude isolated the font and loaded it on its own in a headless Chromium, which spat out this:

OTS parsing error: cmap: Range glyph reference too high (105 > 104)
cmap: Failed to parse table

That’s when it explained something I had never heard of: Chrome and Firefox run every font through a sanitizer called OTS (OpenType Sanitizer), and if any table is invalid, the browser silently throws away the whole font and falls back to monospace. Figma and the system font installer aren’t that strict, which is why the font worked in the design and never on the web.

The defect was in the cmap table, which maps characters to glyphs. The last range, which according to the spec should point to glyph 0 (the “character not found” one), pointed to glyph 105, in a font that only has glyphs 0 to 104. The fix was changing a single value in the binary (from 106 to 1) and recalculating the file’s checksums. No glyph changed, the font looks exactly the same, the invalid pointer is just gone.

I would never have thought of opening the font binary, because I was looking for the bug in the wrong place the whole time.

Did I give up too quickly the first time? Maybe. But even using these agents every day, this was one of those moments that make it clear how much AI has evolved.

If you liked the idea and want to create your own card, just go to codetrainer.pepinelli.dev.

And if you really liked it, leave a star on the repository! It would make me very happy.