Betty Xu 个人网站｜AI Coding 驱动的持续迭代作品集

这个网站既是我的个人作品集，也是一个持续演进的 AI Coding 产品。它把职业定位、项目案例、简历和产品思考组织成可阅读、可维护的中英文内容系统，并通过自定义 Hugo 主题生成响应式页面。访客可以直接查看线上成品和公开源码，也能从仓库中的 Research、Plan、CHANGELOG 和提交历史追溯每轮需求如何进入实现与验证。

一页简历能够快速传达经历，却很难展示一个项目的问题判断、个人职责、关键动作和交付边界；常见作品集模板虽然能快速上线，但容易让不同项目落入相同叙事，也难以随着经历变化持续调整。另一方面，AI Coding 可以快速生成页面和功能，但在缺少上下文、规格与验证时，也容易引入双语不一致、模板语法错误、UTF-8 BOM、错误 URL、部署环境差异和过度包装等问题。因此，真正的机会不是“让 AI 做一个网页”，而是建立一套能持续把个人判断转化为可靠线上结果的协作流程。

项目首先要让目标读者快速理解我的方向，并能沿着首页主案例、项目分类和详情页继续核验能力证据；其次要让中英文内容、项目字段与视觉组件可以独立维护，新增项目不需要重写模板；最后要保证每轮 AI Coding 交付都经过研究、计划、人工审查、构建和关键路径检查。当前用已上线页面、双语完整性、响应式表现、构建通过和公开迭代记录判断交付是否成立，不把访问量、招聘转化或效率提升写成已经验证的成果。

需求研究主要来自三类材料：我的真实教育与实习经历、各项目的原始文档与可公开证据，以及现有站点在内容层级、移动端体验和部署稳定性上的问题。迭代过程中持续审视首页是否先呈现核心能力、项目卡片是否区分职责与团队成果、详情页是否说明结果状态，以及双语页面是否保持相同的信息结构。这个项目没有进行正式访谈或规模化可用性测试，因此所有关于读者理解和使用效果的判断仍属于待验证假设。

信息架构围绕“快速定位—查看代表证据—深入项目—了解完整经历”展开：首页先呈现职业定位和主案例，再提供能力证据、更多项目、文章与简历入口；项目汇总页用语言无关的分类键组织核心 AI、系统开发、产品研究、AI Coding Demo 和数据建模案例；详情页统一使用案例速览和八段叙事，明确问题、角色、行动、结果与反思。内容保存在中英文 Markdown 中，模板负责稳定结构，CSS 变量和复用组件负责视觉一致性，使内容迭代与界面实现保持解耦。

站点使用 Hugo 和自定义 Go Templates 生成静态页面，以 CSS、少量 JavaScript 和 SVG 完成主题、响应式导航、项目视觉与交互细节。AI Coding 采用 Research → Plan → Implement 流程：先阅读相关代码和内容形成研究，再明确影响文件、风险、示例与 Todo，获得确认后实施；每轮结果通过 Hugo 生产构建、关键页面存在性断言、UTF-8 无 BOM 检查、模板字符串与 URL 规则检查进行验证。部署同时维护 Vercel 构建脚本与 GitHub Actions → GitHub Pages 链路，并把实际踩坑沉淀为仓库规则。

当前已经形成可公开访问的中英文响应式个人网站，覆盖首页、简历、分组项目列表、项目详情和博客，并支持明暗主题、移动端导航与项目状态表达。代码仓库公开保存自定义主题、内容文件、数十份研究与实施计划、CHANGELOG、发布前检查和两套部署配置，使站点的演进过程能够被核验。项目证明了从个人内容策略到可运行网页的完整 AI Coding 交付链路；尚未完成的部分是系统化的外部用户测试、访问行为分析和招聘转化验证。

这项实践最重要的认识是，AI Coding 的质量上限并不由一次生成多少代码决定，而由问题是否被定义清楚、上下文是否准确、计划是否可审查，以及结果是否经过真实构建和页面验证决定。持续迭代中，内容真实性与工程稳定性同样重要：既要避免把团队成果或计划指标写成个人已实现结果，也要把编码、模板和部署错误转化为自动检查。下一步更值得投入的是基于真实访问路径优化信息层级、补充项目证据素材，并用可观察数据验证访客是否更容易找到核心案例。