I Was Overwhelmed, So I Turned My GitHub Profile Into a Roguelike Dungeon

说明与用途

作者使用 SVG 切片和 .NET 生成器将 GitHub 个人资料改造成 roguelike 地牢，恢复动力并可视化贡献。

问题

The author was overwhelmed with a long to‑do list and needed a motivating project to regain momentum.

结果

The project transformed the author’s GitHub profile into an engaging roguelike dungeon, providing daily visual feedback on contributions and motivating continued work.

工作流

• 1. Designed a README layout using stacked SVG images to form a single console.
• 2. Built a .NET 10 console app (DungeonGen) with renderers for each section (header, dungeon, inventory, quests, about, connect).
• 3. Mapped contribution calendar to dungeon tiles, added night sky, hero, and stat boxes.
• 4. Generated interactive GitHub Pages page for hover tooltips.
• 5. Implemented GitHub Action to run generator daily and commit changes only when SVGs differ.
• 6. Added cache‑busting query parameters to SVG URLs to force image refresh.
• 7. Handled GraphQL API limitations and partial data errors.
• 8. Adjusted rendering of side rails to avoid zero‑width bounding box issue.

证据

I started small: a header with a typing animation, built by animating a clipPath width one character at a time.

来源

A GitHub Action runs the generator every day and commits only if something changed:

来源

Each renderer is just C# string building that produces SVG. No libraries, no magic.

来源

The generator now adds a hash of each SVG to its URL (dungeon.svg?v=1a2b3c4d), so a changed image gets a new URL.

来源