字
字节笔记本
2026年2月22日
使用 Next.js + Chakra UI + Framer Motion + Three.js 构建作品集网站
本视频教程由 devaslife 频道制作，详细演示如何使用 Next.js、Chakra UI、Framer Motion 和 Three.js 构建一个现代化的个人作品集网站。整个教程时长约 1 小时 40 分钟，适合有一定 React 基础的开发者学习。
视频简介
这是一个完整的实战编码教程，作者 Takuya Matsuyama（devaslife）将带你从零开始构建一个功能丰富、视觉效果出色的个人网站。教程采用 ASMR 风格的编程录制方式，配合大阪的咖啡馆场景，营造轻松的学习氛围。
核心技术栈
- Next.js - React 全栈框架，提供服务端渲染和静态生成功能
- Chakra UI - 模块化、可访问的 React 组件库
- Framer Motion - React 动画库，用于创建流畅的交互动画
- Three.js - 3D 图形库，用于添加 WebGL 3D 效果
教程内容大纲
| 时间节点 | 内容主题 |
|---|---|
| 00:00 | 项目介绍与预览 |
| 01:27 | 创建新项目 |
| 02:51 | 配置项目（ESLint、Prettier 等） |
| 05:06 | 创建首页 |
| 07:35 | 集成 Chakra UI |
| 11:16 | 转场到咖啡馆继续编码 |
| 12:00 | 添加导航栏 |
| 27:05 | 支持暗黑主题 |
| 34:17 | 添加个人介绍区域 |
| 35:21 | 集成 Three.js 3D 效果 |
| 37:43 | 添加作品展示区域 |
| 40:04 | 添加联系表单 |
| 45:19 | 实现页面动画效果 |
| 47:02 | 响应式布局优化 |
| 54:36 | 部署到 Vercel |
| 58:42 | 性能优化与总结 |
项目特色
1. 暗黑模式支持
教程详细讲解了如何使用 Chakra UI 的主题系统实现无缝的暗黑/亮色模式切换，包括颜色变量的定义和组件适配。
2. 3D 视觉效果
通过 Three.js 集成，在网页中添加引人注目的 3D 元素，提升作品集网站的视觉冲击力。
3. 流畅动画
使用 Framer Motion 实现页面过渡、滚动动画和交互动效，打造专业级的用户体验。
4. 响应式设计
确保网站在各种设备上都能完美展示，从手机到桌面端都有良好的浏览体验。
相关资源
- 视频作者: Takuya Matsuyama (devaslife)
- 作者主页: https://www.craftz.dog/
- 项目源码: https://github.com/craftzdog/craftzdog-homepage
- 作者博客: https://www.devas.life/
- Inkdrop 笔记应用: https://www.inkdrop.app/
适合人群
- 有一定 React 基础的开发者
- 想学习 Next.js 全栈开发的工程师
- 希望打造个人作品集网站的设计师/开发者
- 对前端动画和 3D 效果感兴趣的开发者
学习建议
- 准备环境: 确保本地已安装 Node.js 和 pnpm/yarn/npm
- 跟随编码: 建议边观看边动手实践，加深理解
- 查阅文档: 遇到不熟悉的 API 时，及时查阅官方文档
- 个性化改造: 在掌握基础后，尝试添加自己的创意元素
分享: