Project 04
lostcreeper.com 个人网站
lostcreeper.com 是当前正在构建的个人主页与数字档案馆项目。它不以传统简历页为目标，而是将个人经历、专业背景、兴趣审美、项目实践、技能结构、荣誉成果和联系入口组织成一个具有影像感、编辑感和持续更新能力的线上个人空间。成熟版本已经形成单页滚动主页加项目详情页的信息闭环。
整体定位与视觉系统
网站以 `丁紫博的个人空间` 和 `Welcome to Creeperland` 建立个人识别，整体采用暗绿、黑色、暖白、低饱和金色和苔藓绿构成视觉系统。设计关键词包括 Dark、Cinematic、Editorial、Personal、Image-driven 和 Scroll storytelling。
页面没有采用普通简历式排版，而是更接近小型个人展览：首屏建立氛围，后续章节依次呈现关于我、经历、兴趣、项目、技能、荣誉和联系入口，让用户在滚动中逐步理解网站主人的学习路径与创作方向。
- 暗绿黑金配色形成统一品牌气质。
- 背景视频、音乐开关、细网格、金色线条和滚动 reveal 建立沉浸式入口。
- section label、卡片、边框和图片系统共同形成档案馆式视觉语言。
内容架构与数据驱动
项目内容集中在 `src/data` 目录中，页面组件负责渲染结构与交互。`site.ts` 维护站点身份与导航，`about.ts` 维护个人背景，`experience.ts` 维护教育、学生工作、实习和项目经历，`likes.ts` 维护兴趣展览，`projects.ts` 维护代表项目卡片与详情内容。
这种数据驱动结构让网站接近一套轻量内容管理系统。新增项目、替换图片、更新联系方式和补充荣誉时，不需要重写页面结构，只要维护对应数据文件即可。
- 内容数据化：所有核心内容按模块拆分，降低长期维护成本。
- 组件模块化：Hero、Header、About、Experience、Likes、GoodAt、Honors、Contact 各自独立。
- 资源分区化：public/assets 按 Home、About、Experience、I Like It、I'm Good At It 等模块组织。
项目详情页系统
Projects 区是网站的核心作品集模块。首页卡片负责快速展示编号、项目名、类型、摘要、工具链和截图；点击后进入独立详情页，继续展示项目背景、实现链路、关键成果和图文材料。
详情页位于 `src/app/projects/[slug]/page.tsx`，通过 `generateStaticParams` 为每个项目生成静态路径，并通过 metadata 提供页面标题和摘要。返回逻辑会记录用户进入详情页前的滚动位置，让用户从详情页返回时仍停留在 Projects 区域。
- 首页卡片解决快速浏览，详情页解决深度阅读。
- 每个项目以 slug 生成独立页面，适合长期扩展为完整作品集。
- 项目图片、说明文字和章节内容均由 `projects.ts` 统一维护。
技术架构与项目成熟度
项目使用 Next.js、React、TypeScript、Tailwind CSS 和 Framer Motion 构建。Next.js 提供 App Router、静态参数生成和部署友好的构建能力；React 负责组件化渲染；TypeScript 为项目、经历和内容字段提供结构约束；Tailwind CSS 与全局 CSS 变量共同维护视觉系统；Framer Motion 提供克制的滚动动效。
成熟度体现在三个方面：信息结构完整，覆盖身份、经历、兴趣、项目、技能、荣誉和联系；工程结构清晰，内容、组件、样式和资源各有边界；展示系统可持续扩展，能够继续加入更多项目报告、真实截图、部署说明和成果材料。
- 可部署：适合部署到 Vercel 并绑定 lostcreeper.com 域名。
- 可维护：内容字段和素材目录结构清楚，便于长期更新。
- 可展示：项目卡片与详情页共同承担作品集和数字档案馆功能。