workouts 是一个可以部署到 GitHub Pages 的个人运动数据看板。它用 React、TypeScript 和 Tailwind CSS 做前端，把跑步、骑行、徒步、健身这些平时散落在不同 App 里的记录，整理成一个长期可看的公开页面。
打开演示页时，它给人的第一印象很像“运动版 GitHub Profile”：不是只展示一次训练截图，而是把年度热力图、路线地图、活动列表、目标进度、连续记录、个人最佳成绩和月度日历放在一起。对跑者或骑行爱好者来说，这种页面的意义不只是好看，而是让多年积累的训练轨迹有了一个不依赖单个平台的归档。
页面顶部可以在 All、Run、Ride、Hike、Gym 之间切换，主视图会跟着过滤不同运动类型。年度热力图用颜色区分活动，右侧有总里程、运动时长、覆盖地区和最新活动；再往下是活动记录表、地图轨迹和 5K、10K、半马、全马等个人最好成绩。它没有把数据藏在复杂菜单里，而是尽量让你一眼看到“这一年到底动了多少”。
真正实用的部分在数据同步。项目把同步脚本也整理了出来，支持 Strava、Garmin 国际版/国区、Keep、Nike Run Club、悦跑圈、COROS、行者、咕咚、OPPO Health，也可以导入本地 GPX/FIT 文件。同步后生成 src/static/activities.json，前端再基于这份静态数据渲染看板。换句话说，它不是一个只放假数据的漂亮模板，而是给了你一条把真实运动记录搬到自己主页上的路。
如果你愿意折腾一点，还可以用 GitHub Actions 自动更新数据，再部署到 GitHub Pages。这样一来，训练记录既能长期保存，也能作为个人主页的一部分被分享出去。对喜欢量化自我、做公开记录，或者想学习个人数据仪表盘设计的前端开发者来说，workouts 都是一个不错的参考。
我觉得它最有意思的地方，是把“运动打卡”从平台动态里拿了出来，变成一个更慢、更个人化的档案。单次跑步当然会很快被时间线冲走，但几年的热力图、路线和 PR 放在同一个页面上，就会变成一种很直观的自我激励。
项目地址
在线演示：https://zhaohongxuan.github.io/workouts/
项目地址：https://github.com/zhaohongxuan/workouts
原创文章，如若转载，请注明出处：https://wefound.cc/p/2664.html
