betterkite.github.io

个人作品集站点，部署于 GitHub Pages：https://betterkite.github.io/

纯静态实现（HTML + CSS + 原生 JS），无构建步骤、无框架依赖。参考了常见 "数据驱动作品集" 的信息架构（首页概览 → 项目集锦 → 项目详情 → 写作骨架）， 代码为原创实现。

目录结构

├── index.html                  # 首页：Hero / 数据概览 / 入口 / 精选项目 / 技术栈 / 联系
├── projects/
│   ├── index.html              # 项目集锦列表页（数据驱动 + 开源贡献）
│   └── atlasgate.html          # AtlasGate 完整案例页
├── writing.html                # 文章与复盘骨架页（筹备中主题清单）
├── 404.html
├── assets/
│   ├── css/styles.css          # 设计系统（暗色主题，CSS 变量）
│   ├── js/main.js              # 卡片渲染 / 筛选 / 导航 / 复制链接 / 滚动显现
│   └── favicon.svg
├── data/
│   ├── projects.json           # 项目数据源（新增项目只改这里）
│   └── profile-stats.json      # 首页统计数字
├── scripts/
│   ├── update_profile_stats.py # 刷新 GitHub 统计数字
│   └── validate_site.py        # JSON 与内部链接静态校验
└── .github/workflows/validate-site.yml

如何新增一个项目

1. 编辑 data/projects.json，追加一条记录：

{
  "id": "my-new-project",
  "name": "My New Project",
  "status": "active",
  "featured": true,
  "categories": ["infra"],
  "summary": "一句话说清它是什么、解决什么问题。",
  "tags": ["技术栈", "亮点"],
  "caseUrl": "projects/my-project.html",
  "githubUrl": "https://github.com/betterkite/xxx"
}

2. （可选）参照 projects/atlasgate.html 新建详情案例页。
3. 运行 python3 scripts/validate_site.py 确认内部链接没有断。

刷新首页统计

GITHUB_TOKEN=ghp_xxx python3 scripts/update_profile_stats.py
# upstreamPullRequests 字段需要手工维护

本地预览

任何静态服务器都可以：

python3 -m http.server 8080
# 打开 http://127.0.0.1:8080