独立开发者作品集站产品系统Vibe Coding

接外包最难的不是技术，是让客户在 30 秒内判断“这个人能不能做我的活”。简历不行——全是形容词；
聊天记录也不行——客户没耐心翻。


所以需要一个能点开、能看到真项目、也能看到审美水准的门面。这个站不写自夸，只放四个真项目的
“问题 → 过程 → 设计决策 → 结果”，客户翻完两条案例，就知道交付标准在哪。

个人独立开发者作品集站，暖黑电影感配色 + 编辑式排版，用来展示真实项目并承接定制开发需求。全
站静态渲染，无后端、无数据库。


一、首页：大字排版首屏、能力矩阵（网站与落地页 / 小程序 / 内部工具 / AI Agent）、服务流程与报价
说明。
二、作品区：案例索引 + 四条完整案例详情，每条按“问题 → 过程 → 设计决策 → 结果 → 复盘”五段
写，配指标卡与真实截图。
三、实验室（Lab）：技术实验与学习记录，展示在做的东西而不只是做完的。
四、服务与关于：服务范围、合作方式、常见问题。
五、联系：mailto 表单直连邮箱，不依赖后端服务。

独立完成，设计与开发均为本人。
我负责的具体任务：①定视觉语言（暖黑电影感 + 编辑式排版），写成设计令牌；②搭 Next.js 15 App
Router 骨架与多语言路由；③写 7 个页面路由与 20 个组件；④做进场动画与平滑滚动，并处理“减弱
动效”系统偏好；⑤配 metadata、JSON-LD、sitemap 与 robots。
技术栈：Next.js 15（App Router）+ React 19 + TypeScript + Tailwind CSS v4（令牌写在 @theme）
+ next-intl + Framer Motion。
亮点与难点：难点是全站内容驱动——案例、能力、服务都放在数据文件里，加一条案例不用改页面；另
一个是动效要克制，进场统一走一个 variant，并尊重 prefers-reduced-motion；亮点是设计令牌集中
一处，换配色只改一个文件。