把你的 GitHub 提交历史变成炫酷可视化故事
- 🔢 年度贡献热力图 — 一眼看懂全年活动
- 🔥 连续活跃追踪 — 记录你的 Coding Streak
- 📜 提交故事线 — 把 commit 变成故事卡片
- 🏆 成就里程碑 — 解锁 GitHub 成就时刻
- ⭐ 热门项目展示 — 自动排名 Top 仓库
- 🛠️ 语言分析 — 统计主用编程语言
- 📱 移动端适配 — 随时随地查看
git clone https://github.com/PHclaw/devstory.git
cd devstory
npm install
npm run dev打开 http://localhost:5173，输入任意 GitHub 用户名即可生成故事。
| 技术 | 用途 |
|---|---|
| React 18 + TypeScript | 前端框架 |
| Vite | 构建工具 |
| Tailwind CSS | 样式框架 |
| Framer Motion | 动画库 |
| GitHub REST API + GraphQL | 数据源 |
输入你的 GitHub 用户名，DevStory 会：
- 拉取你的提交历史、仓库、事件
- 生成年度统计（提交数、连续天数、Star 总数）
- 展示语言偏好排行榜
- 构建提交时间线（带 emoji 和心情）
- 高亮里程碑事件
- 展示 Top 仓库卡片
深色赛博朋克风格，霓虹边框 + 玻璃拟态 + 流畅动画
MIT © PHclaw