I turned my GitHub profile into a Doctor Doom vs Avengers fight

My GitHub profile used to look like every other profile on the internet. My name in giant bold letters, a one-line bio, a row of generic shields, and an emoji slapped onto every section header like a kindergarten gold star. Functional. Polite. Completely invisible.

Now it opens with a lethal green energy beam and five GitHub cats in full Marvel cosplay.

You can see the crime scene live at github.com/amananandrai. Since #watercooler is for the fun stuff we do instead of actual work, here is the story of how a "quick five-minute profile update" turned into two pull requests merged in the same evening: the hero GIF and the rest of the theme.

The still (or: Marvel's lawyers, please don't read this)

I didn’t want a clean, minimalist developer logo. I wanted a movie poster.

On the left: Doctor Doom in a green hood, firing a massive beam of cosmic energy. On the right: Captain America, Iron Man, Black Panther, and Thor ready to throw down. The twist? Every single one of them is an Octocat. Cap has his shield, Iron Man has a palm repulsor, Black Panther is crouched in the rubble, and Thor is summoning lightning. The GitHub mark sits right inside the moon behind them, because if anthropomorphic feline superheroes are going to have a turf war, the moon should at least be in on the joke.

That single image dictated everything else. The GIF is the poster moving. The banner steals its color palette. The section dividers are just Doom's energy beam stretched thin enough to act as polite interior decorating.

I did set one ground rule: this stays strictly on my personal profile. The Octocat belongs to GitHub, the costumes belong to Disney's legal team, and I would prefer to keep my organs. It lives on a README with my name on it—not on a SaaS landing page, not on a sticker sheet, and definitely not on a client repo.

A GIF, because a static image lacks drama

GitHub READMEs are allergic to JavaScript. Everything is rendered through a strict sanitizer, which means your big, flashy centerpiece has to be an <img> tag that the browser already knows how to loop without throwing a security tantrum.

Pull request 13 drops assets/hero.gif right under the banner. The beam pulses, the lightning flickers, embers drift, and the camera pushes in slowly. It weighs in at 3.7 MB and renders at 720 pixels wide.

<img src="assets/hero.gif" alt="GitHub cats as Doctor Doom, Captain America, Iron Man, Black Panther and Thor in a battle" width="720" /> 

3.7 MB sits comfortably under the wall people usually slam into with README animations—though I would still happily chop a few frames before letting this file get any heavier. Nobody wants to wait on a loading spinner just to read my bio.

SVG, because if the cats move, the dividers have to move too

Making a GIF for every single horizontal divider would have been a crime against bandwidth. Instead, I built the header typography, the section rules, and the footer as SVGs, sneaking the animation inside the files using SMIL.

GitHub strips <style> tags out of Markdown like contraband, and an <img> tag can't load a Google Font or run a script. You have to play inside a very tight sandbox: no JS, no external stylesheets, and no web fonts. I decided to ignore light-mode users entirely and designed strictly for the dark side. The page background is still GitHub's; the theme lives inside the images.

The banner (assets/banner.svg) sets my name in Orbitron and the tagline in JetBrains Mono. To stop GitHub from falling back to Arial and ruining the whole aesthetic, I base64-encoded both fonts and stuffed them directly into the SVG as woff2 data URIs. That is why a text banner weighs 49 KB. Around the text, there’s a scanline, a green and purple wash, a pulsing beam, a lightning bolt, and rising embers.

The beam itself is just a tiny rectangle doing cardio:

<rect x="0" y="-3" width="700" height="6" rx="3" fill="url(#bm)" filter="url(#glow)"> <animate attributeName="height" values="5;9;5" dur="1.2s" repeatCount="indefinite"/> <animate attributeName="y" values="-2.5;-4.5;-2.5" dur="1.2s" repeatCount="indefinite"/> </rect> 

For the horizontal rules, I built assets/pulse.svg—a featherweight 1.1 KB file that transitions from Doom green to Cap blue to Iron Man red, complete with a little white spark that sprints across the screen every three seconds.

The footer wraps things up in the same night gradient with a polite sign-off: THANKS FOR VISITING / LET'S BUILD SOMETHING.

Honestly, I half-expected GitHub's image proxy (camo.githubusercontent.com) to flatten the SVGs and kill the <animate> tags. Watching the live scroll proved it actually worked—every time a divider came back into view, the little white spark was somewhere else on the track. It wasn't just working on localhost.

Logos, badges, and the stubborn cards that refused to cooperate

Pull request 14 was the full wardrobe change. I kept the palette tight:

Shields.io happily took the new hex codes as URL parameters—followers in Doom green, DEV in Cap blue, LeetCode in Iron Man red, and email in gold. Same links, fresh paint.

The standard section emojis got retired and replaced with eight custom neon SVG tiles (about, tech, projects, writing, stats, coding, community, badges) sitting inline next to the headings:

## <img src="assets/sections/about.svg" width="32" height="32" align="absmiddle" alt="" /> About me 

For the tech stack, I took fifteen familiar logos, recolored them to match the theme, and hosted them locally in assets/tech/ so an external badge CDN couldn't revert them back to their factory defaults. Each category (languages, ML, web, databases, tools) gets its own border color, and Python's tile gently breathes on a 2.4-second opacity loop because why not.

The GitHub stats cards accepted the exact same hex values via query parameters. Green titles, gold icons, dark night panel, purple border. I left a note in the PR to fall back to the built-in radical theme if the stats service ever choked on the custom colors, though so far it has behaved.

Then there were the two holdouts. The LeetCode card is still wearing its nord theme, and the HackerRank card doesn't accept color parameters at all. A broken image link looks way worse than a slightly off-brand color scheme, so I let them keep their clothes. At least Stack Exchange let me swap in the ember orange.

It is the classic developer trap: a plain profile, a "quick fifteen-minute tweak," and suddenly you are three hours deep into hand-coding SVG filters. None of it is actually necessary. The code and the articles were already on the page—the superhero cats are just there to get people through the front door.

If you've looked at your own GitHub profile lately, what's the weirdest thing on it that isn't a stats card?