I Turned My GitHub Profile Into a Cyberpunk Console With a City Built From My Contributions

说明与用途

作者为其 GitHub 个人资料创建了一个动态的赛博朋克控制台，将贡献可视化为 3D 城市，并每天更新，使用 SVG 和 GitHub Actions。

问题

The author wanted a custom GitHub profile that visually represented their contributions in a more engaging way than the default grid of green squares.

结果

The author successfully transformed their GitHub profile into a dynamic cyberpunk console that visualizes contributions as a 3D city, updates daily, and remains fully functional within GitHub’s sandbox constraints.

工作流

• 1. Conceived the idea of a 3D contribution city and cyberpunk console.
• 2. Designed SVG assets for header, footer, stats, city, and project cards.
• 3. Used SVG <style> to embed CSS animations for typing and blinking cursor.
• 4. Stacked 23 SVG images with align="top" to create a seamless terminal window.
• 5. Implemented a square‑root height formula for building heights to avoid extreme towers.
• 6. Added lighting, windows, stars, and a plane for visual realism.
• 7. Wrote a daily update script that queries GitHub’s API once, generates new SVGs, and commits them to the repo.
• 8. Stored API token as a secret in GitHub Actions to keep it hidden.
• 9. Configured the README to reference the SVG assets and display the console.
• 10. Tested rendering and caching behavior, adjusted grid spacing and glow overflow to hide seams.

证据

GitHub doesn’t let you run anything in a README. <script> gets stripped. <style> gets stripped. Even inline style="" attributes get stripped.

来源

To GitHub, an SVG embedded with <img> is just an image. And *inside* an SVG, you’re allowed to use CSS, including animations:

来源

I know, what a weird question, right? My first instinct was simple: height = number of contributions. That gave me one giant tower for my busiest day and a sea of flat slabs for everything else.

来源

I used a square root instead: h = 8 + 110 · √(c/cmax).

来源

I wrote a daily update script that queries GitHub’s API once, generates new SVGs, and commits them to the repo.

来源