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

说明与用途

作者用 SVG 渲染的 3D cyberpunk 城市替代了默认的 GitHub 贡献图，并通过 GitHub Actions 自动每日更新。

问题

Create a visually engaging GitHub profile without using JavaScript or CSS, while representing contribution data in a custom 3D city visualization.

结果

The profile now displays a single, animated cyberpunk console that updates daily, visually representing the user's contribution history as a 3D city.

工作流

• 1. Design SVG assets for each console slice (header, stats, city, footer).
• 2. Embed SVGs as <img> tags in README to bypass sandbox restrictions.
• 3. Use CSS inside SVGs for animations (typing cursor, glow).
• 4. Slice console into 23 images, aligning top to create seamless window.
• 5. Generate city from contribution data: tilt grid, apply square‑root height scaling, add windows and lights.
• 6. Automate daily updates via a GitHub Action that queries the GitHub API once, builds SVGs, commits changes, and pushes.
• 7. Store API token as a secret to keep credentials hidden.

证据

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

来源

I decided to go further and turn the whole profile into a cyberpunk console: neon glow, scanlines, a terminal that types out my name, and a frame that holds everything together.

来源

I fixed a bug, refreshed, saw the bug. Fixed it again, refreshed, still the bug. Turns out I'd fixed it the first time.

来源

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

来源