Next.js 16- Next.js 16 App Router、React 19、TypeScript 与 Tailwind CSS 变量体系
- 项目详情页使用静态参数生成，适配 Next 16 的 Promise params
项目2026.04-2026.06
个人作品集网站
Next.js / 交互动效 / 双语内容 / 移动端适配
Next.js 16React 19TypeScriptGSAPRive
继续查看成果、技术栈、实现要点
项目概览
把个人项目、研究兴趣和 AI 工具协作能力组织成可访问的交互式作品集。
面向求职 HR 与研究生导师的个人网站，基于 Dave Holloway 风格学习重构，展示个人介绍、技能、项目、联系方式和交互式视觉效果。
成果摘要
当前项目源码、设计参考截图、移动端验证脚本和导出产物均在本目录内；页面本身就是该项目的可运行成果。
职责Next.js / 交互动效 / 双语内容 / 移动端适配
时间2026.04-2026.06
核心栈Next.js 16 App Router、React 19、TypeScript 与 Tailwind CSS 变量体系 / 项目详情页使用静态参数生成，适配 Next 16 的 Promise params / Rive、GSAP/滚动视差、卡片转场与 prefers-reduced-motion 兼容 / 针对移动端编写 Playwright 验证脚本检查溢出、触控目标和布局重叠
技术拆解
技术工作
- Rive、GSAP/滚动视差、卡片转场与 prefers-reduced-motion 兼容
- 针对移动端编写 Playwright 验证脚本检查溢出、触控目标和布局重叠
- 形成面向求职与导师沟通的个人作品集主站。
- 保留一级页面布局，并扩展项目二级页面证据展示。
- 建立内容、动效和移动端自动化验证脚本。
- 用统一项目数据源驱动首页卡片和二级详情页。
- 通过共享颜色、代码编号和媒体区保持一级/二级视觉连续。
- 将简历、项目证据与网页内容对齐，减少不实包装。
- 适合展示你使用 AI 工具完成需求拆解、实现、调试和验证的能力。
- 可作为所有项目材料的入口，降低 HR 或导师了解成本。