Readme-Driven Development, Except the Readme Is a Spacecraft

Most GitHub profiles are a wall of badges that stopped meaning anything around 2019. A streak counter, seven trophies, a "most used languages" card everyone has. It's wallpaper. You scroll past your own.

A few weeks ago George Kobaidze built a cyberpunk city out of his contribution graph — one building per day — and it stopped me mid-scroll. Not because it was flashy, but because it was his. The skyline was his year.

That sent me down a two-week rabbit hole with one question nagging at me:

A skyline is a beautiful picture of your data. What if the profile was a working instrument instead — where nothing is decoration, and every pixel is a live number?

So I rebuilt my profile as a self-flying spacecraft. Readme-driven development, except the readme is a mission console. I called it Deep Field Survey, and it reports on its own star system every morning without me touching it.

Here's the console, and here's how it's built.

One rule: if it moves, it has to mean something

I wrote that on a sticky note before I wrote any code, and it killed about half my ideas — which was the point. No ambient wiggle for vibes. Every animated thing on the console is a readout of real data. That single constraint is what separates a gimmick from a dashboard.

Let me walk the panels.

The planet is ringed by my contribution calendar

The hero is a rotating world, and the rings around it aren't Saturn cosplay. There are 7 orbital rings — one per weekday — and each ring is divided into 53 segments, one per week. A segment lights up (and warms from cyan → mint → gold) by how much I committed that day.

It's the exact data in the little green squares, wrapped around a planet. A quiet month is a thin, dim arc. A sprint is a bright band blazing around the equator. Same information, except now it's something you'd actually stop scrolling for.

The radar is my open-source footprint

The "External Systems Reached" panel is a literal radar — sweep, pinging blips, the works. Every blip is a real pull request I opened in someone else's repo (promptfoo, Windows-MCP, mastra, probity…). It's the part of my work that doesn't show up in my own repo list, surfaced as contacts on a scope.

The spectrum is my languages, read like starlight

Instead of the usual pie chart, my languages are emission lines — a spectrograph where each colored band's width is the real percentage of my code. TypeScript is a fat cyan line; Shell is a thin green one. It reads like you're analysing the light coming off a star, which is exactly the vibe.

The signal is my writing — and this is my favorite

The bottom panel is an oscilloscope labelled "Intercepted Transmissions." For about ten minutes it was a pretty sine wave, and I hated it, because it broke my one rule. So I ripped it out and plotted the thing it should have been all along: my reactions-per-post on dev.to.

Now the big spike in the signal is my most-reacted article (a post about GitHub attack surface, at 23 ♥). The "intercepts" sweeping past are my writing's actual reach over time. It went from screensaver to dashboard in a single commit, and it's the panel I check now.

The part that's genuinely annoying to build

Here's the wall everyone hits: GitHub READMEs can't run JavaScript. No <script>, no canvas, no WebGL. Markdown and images, that's it. So how does any of this animate?

Animated SVG, embedded as an <img>. This is the whole trick. When GitHub renders an SVG as an image, the SVG's own declarative animations — CSS keyframes and SMIL — still run. So the rings rotate, the radar sweeps, the spectrum flickers, the signal's scan line tracks across — all pure SVG, zero JavaScript, straight in the README.

Each panel is a standalone .svg file. The profile is just a stack of them:

![hero](./svg/hero.svg)
![missions](./svg/missions.svg)
![ops](./svg/ops.svg)
...

It files its own report every morning

The console is self-updating. A scheduled GitHub Action runs a Node script that pulls fresh data and regenerates every panel:

GitHub GraphQL ─┐
                ├─→  generate.mjs ─→ 10 animated SVGs ─→ committed to the repo
dev.to API     ─┘       (cron: daily, no human in the loop)

Contribution calendar and repos come from GitHub's GraphQL API; reactions and comments come from dev.to's public API (no key needed). The script renders the SVGs, and if anything changed, a bot commits them. I never touch it. The footer says "auto-refreshed daily, no human in the loop" and it means it.

Three traps I fell into, so you don't

1. An animated image embedded inside an SVG won't animate. I spent an hour excited about a 72-frame rotating planet baked into the hero SVG… then realized GitHub renders the SVG as a static image, so the nested animation shows one frame — and the file ballooned to 7 MB. The fix: the globe is a crisp still, and the rings (which animate fine as real SVG) do the spinning around it. The rotation lives in the standalone web version instead.

2. Fonts betray you. System fonts render differently on every machine, so your careful spacing turns to mush on someone else's screen. I subset Google Fonts down to only the ~80 glyphs I actually use and embed them as base64 — pixel-identical type everywhere, and the files stay tiny.

3. The dumbest bug of the fortnight. A stat bar refused to show up. No error, just… nothing. The cause: it was a <span>, and an inline element ignores width and height. One display:block and every bar appeared. Ten years in and CSS still finds new ways to make me feel like it's day one.

How the rings actually work (the fun maths)

Each ring is an <ellipse> with pathLength="53" — I normalise the circumference to 53 units so one unit is exactly one week. Then the stroke-dasharray paints a dash where that week/day had activity and a gap where it didn't. A slow stroke-dashoffset animation drifts the whole thing. Front halves and back halves are clipped separately so the rings pass behind the planet at the top and in front at the bottom — that's what sells the 3D.

Why "every pixel is data" is the whole point

A profile that merely looks cool is a one-time dopamine hit; people screenshot it and move on. A profile where the planet's glow is your streak, the rings are your calendar, and the signal is your readership is something else: a status board for a career. It rewards you for shipping and it's quietly honest when you don't. That accountability is the feature.

George gave me the spark. The "make it mean something" rule gave me the rest — and a much harder, much more satisfying build.

Make your own

The whole generator is open and drops into any profile repo — swap your username, add the Action, done. It's running live on my profile right now:

→ github.com/rudratoshs

If you build your own instrument panel out of it, tag me — I want to see what you wire up. And a follow here means more "turn your dev data into something alive" write-ups. 👋

One question for you: if you could put a single number from your dev life on a dial the whole world could see — commits, PRs, reactions, review turnaround, coffees — which one would you pick, and be honest: would having it visible actually make you ship more? 👇