申冰个人网站 V0.1（fable5）

一个面向面试官、业务同学、产品同学和朋友的轻交互式个人主页。

视觉方向：Claude 官网式的温暖极简 —— 大面积温暖浅色背景、serif 标题、朴素但有质感的卡片、充足留白、克制的动效。整体像一份被认真整理过的个人产品笔记，而不是传统简历页。陪伴角色「小冰」以手绘线稿小插图的形式出现在页面各处。

技术栈

• Next.js 16（App Router）+ TypeScript
• 原生 CSS variables + CSS keyframes（无额外 UI 依赖）
• 数据驱动内容：src/data/site-data.json
• 静态生成（SSG），Vercel 部署

本地启动

npm install
npm run dev

默认本地地址：http://localhost:3000

质量检查

npm run validate   # 内容与色板校验
npm run lint
npm run typecheck
npm run build

一次性执行全部检查：

npm run check

目录结构

• 页面：src/app/（首页 / experience/[slug] / thoughts / thoughts/[slug] / contact）
• 组件：src/components/（导航、页脚、经历卡、手记卡、小冰线稿、橱窗插图等）
• 数据：src/data/site-data.json + 类型与查询工具 src/data/site.ts
• 样式：src/app/globals.css（全局视觉系统，PRD 色板 + Claude 式排版）
• 工具脚本：scripts/validate-content.mjs
• 素材：public/images/shenbing-photo.jpg、public/files/shenbing-resume.pdf
• 产品需求文档：.intake/产品需求文档.md

可访问性与安全

• 所有图片有 alt；语义化 HTML；支持 prefers-reduced-motion
• 外链统一通过 SafeLink 组件输出 target="_blank" + rel="noopener noreferrer"
• 不提交 .env*、.vercel/、node_modules/ 与构建产物

部署

分支 fable5/v0.1 部署在独立 Vercel 项目 shenbing-personal-site-fable5（Framework Preset: Next.js）。

手动部署（已登录 Vercel CLI）：

npx vercel deploy --prod