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 unique way, but GitHub’s README sandbox limits interactivity and styling.

结果

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

工作流

• 1. Conceived the idea of a 3D contribution city and cyberpunk console.
• 2. Designed SVG assets for each console slice (header, stats, city, project cards, footer).
• 3. Embedded CSS animations inside SVGs to create typing and blinking cursor effects.
• 4. Used a 40‑pixel grid and glow overflow to align seams between images.
• 5. Calculated building heights with a square‑root formula to avoid extreme towers.
• 6. Generated city layout from GitHub contribution data, sorting buildings back‑to‑front.
• 7. Automated daily updates via a GitHub Actions workflow that queries the GitHub API once per day, regenerates SVGs, and commits changes.
• 8. Stored secrets (API token) in GitHub Actions secrets to keep them private.
• 9. Published the final README with the stacked SVG images.
• 10. Monitored for API failures and handled retries.
• 11. Shared the result on Dev.to.

证据

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 used a 40 px grid. Every slice is a multiple of 40 pixels tall, so the faint background grid continues across the cuts instead of jumping.

来源

h = 8 + 110 · √(c/cmax)

来源