Turn Your GitHub Profile Into an Animated Terminal (No Widgets, No Tokens)

Create a repo named exactly after your username (so username/username) on GitHub and drop a README.md in it. GitHub renders that README at the top of your profile page. That is the entire unlock, everything else is what you put in it.

Mine is AKCodez/AKCodez, open it in a second tab so you can see every trick in this guide running live.

The usual move is embedding github-readme-stats, streak counters and trophy widgets. Three problems. They are someone else's servers, so they rate-limit and go down. They look identical on every profile that uses them. And you learn nothing building them.

The self-hosted way is three files committed straight to the repo:

1. Your meme as the portrait. Mine is my classic hackerman gif. A committed gif animates on GitHub forever, no service needed, and it has 10x more personality than ASCII art.
2. A neofetch style info card as a hand-built SVG, your OS, stack, socials, with terminal styling and a blinking cursor.
3. Your real contribution heatmap as an animated SVG, rendered from data you scraped yourself.

One sizing trap before you lay these out side by side: the profile README column is only about 790px wide. Keep your two image widths summing under about 760px, otherwise GitHub silently max-width shrinks whichever one does not fit and your two columns stop matching in height.

GitHub serves every user's contribution calendar as plain public HTML at github.com/users/YOUR_USERNAME/contributions. No login, no API key, no rate-limit drama for a once-a-day read of your own page.

A ~60 line Python script with requests and BeautifulSoup grabs it, reads every td.ContributionCalendar-day cell (the date and intensity level live right in the attributes, the per-day count sits in a matching tool-tip element), and writes one contributions.json with all 370 days plus your yearly total. A second script turns that JSON into a terminal-styled SVG, rounded cells, GitHub's green palette, month labels, legend, and your total typed at the bottom.

Here is the part nobody tells you, and it cost me two live debugging sessions on my own profile. GitHub does not serve your README images directly, it proxies them through its camo CDN in a sandboxed context. Inside that sandbox, CSS keyframe animations in SVGs never start. Your art works perfectly on localhost, then renders frozen and invisible on your actual profile, every element stuck at its starting opacity of 0. This is why half the animated-profile tutorials on Google produce blank boxes 🤯

Three rules fix it for good:

1. Animate with SMIL, the animate and animateTransform tags that live inside the SVG itself. Those run fine behind camo.
2. Make the static file the finished state. Every element's plain attributes are its final visible look, and reveals hide it only through the running animation (a values 0;0;1 keyTimes trick). If animations are ever blocked, your graph degrades to a fully rendered static image instead of a blank panel.
3. Never begin a reveal at exactly 0 seconds. Browsers sometimes reuse a cached SVG image whose animation clock is paused at t=0, and any animation active at exactly 0 freezes on its hidden first value, blank panel again. Give every reveal begin="0.01s" and the paused case falls back to your visible static art.

Static reveals are fine, loops are what make a profile feel alive (and what make it usable as b-roll). The build runs six layers:

1. A matrix rain background across both panels, columns of dim green glyphs falling forever behind everything. Make the fall STEPPED (discrete 16px jumps on a shared clock) instead of smooth: that is how the rain in the film actually moves, and it is also the difference between an idle page and a pegged CPU core, because dozens of smoothly-translating columns force the image to repaint every single frame.
2. Pop-flash cells. Each cell scales in from nothing with an overshoot bounce while flashing bright green, sweeping left to right across the year in about 2.5 seconds.
3. Star glints. A deterministic subset of cells twinkles with little white sparks forever, short flash, long hold, so the raster stays mostly idle.
4. A green scan beam that rides the reveal, then ghost-sweeps the whole grid on a 9 second loop.
5. Shimmering hot cells. Bright days pulse on staggered infinite timers.
6. The typed counter. Your yearly total types itself out behind an animated clip path, then a block cursor blinks next to it forever.

The blinking cursor doubles as your proof of life: its static state is invisible, so if you can see it blinking on your live profile, the animation engine is running through the proxy.

A GitHub Action re-scrapes your calendar every morning, re-renders the SVG, and commits only when something changed. The [skip ci] in the commit message stops it from re-triggering itself. Free on public repos.

Everything above, the scripts, the SVGs, the workflow, both animation traps, is one prompt for Claude Code. Swap in your username and your own gif, it builds and pushes the whole thing, then verifies the animation actually plays on your live profile. Same energy as the living website build, you describe the system, the agent ships it.