Git City

“你的每一行代码，都在构建这座城市的未来。你的每一次提交，都在让属于你的摩天大楼拔地而起。”

想象一下，如果全球开发者的 GitHub 个人资料不再是一串串枯燥的数字和绿色的格子图，而是一座座矗立在云端、闪闪发光的3D 像素艺术建筑，那会是什么景象？

Git City 将这个愿景变成了现实。它是一个基于 Web 的交互式 3D 城市，将每个 GitHub 用户映射为一座独特的建筑。在这里，代码贡献度决定建筑高度，仓库数量决定地基宽度，而 Star 数则化作夜晚窗户里温暖的灯光。

🏙️ 核心体验：代码可视化新范式

1. 🏢 建筑即人格：数据驱动的像素美学

在 Git City 中，你的编程生涯被具象化为一座独一无二的建筑：

• 高度 = 贡献值：提交的代码越多，你的大楼就越高耸入云。
• 宽度 = 仓库数：拥有的公共仓库越多，你的地基就越宽广稳固。
• 亮度 = Star 数：获得的星标越多，窗户就越明亮璀璨。
• 图案 = 活跃度：近期的活跃程度决定了窗户亮灯的动态图案，让城市充满生机。

通过 实例化网格 (Instanced Mesh) 和 LOD (细节层级) 技术，Git City 能够流畅渲染成千上万座建筑。近距离观察时，你能看到动画闪烁的窗户和精细的像素细节；远观时，简化的几何体确保了帧率的丝滑流畅。

2. 🚁 自由飞行：探索开发者天际线

告别静态的个人主页，Git City 提供了完全自由的飞行模式：

• 无缝漫游：使用流畅的相机控制，在城市上空自由翱翔，穿梭于高楼大厦之间。
• 发现同行：随机降落在任何一座建筑前，查看来自世界各地的开发者资料。
• 全景视野：欣赏由全球顶尖程序员共同构建的壮丽天际线。

3. 🎮 游戏化社交：成就、定制与互动

Git City 不仅仅是一个可视化工具，更是一个充满乐趣的开发者社区：

• 🏆 成就系统：根据提交数、Star 数、仓库规模等解锁专属成就徽章。
• 🎨 建筑定制：认领你的建筑，使用商店物品（王冠、光环、特效屋顶、面部装饰）打造个性化地标。
• 🤝 社交互动：发送 Kudos（致敬）、赠送虚拟礼物、推荐朋友，实时查看动态反馈。
• ⚖️ 比较模式：邀请好友进行“PK”，将两座建筑并排展示，直观对比双方的代码影响力。
• 📸 分享卡片：一键生成精美的横屏或 Story 格式截图，轻松分享至社交媒体。

🛠️ 技术架构：现代 Web 图形学的典范

Git City 采用了最前沿的 Web 技术栈，确保了性能与美观的完美平衡：

🚀 快速开始：构建你自己的城市

想要本地运行或贡献代码？只需几步即可启动：

# 1. 克隆仓库
git clone https://github.com/srizzon/git-city.git
cd git-city

# 2. 安装依赖
npm install

# 3. 配置环境变量
# Linux/macOS
cp .env.example .env.local
# Windows (PowerShell)
Copy-Item .env.example .env.local

# 编辑 .env.local，填入你的 Supabase URL/Key 和 Stripe 密钥

# 4. 启动开发服务器
npm run dev

打开浏览器访问 http://localhost:3001，即可看到属于你的那座正在建设中的像素大楼。