作品集模板

概述

一个完全响应式的 Next.js 13 作品集模板，围绕当时全新的 App Router 构建，从一开始就采用 TypeScript，包含 Framer Motion 动画，以及一个连接到 Resend 的工作联系表单。我在 whyian.dev 上使用它。仓库是公开的，任何人都可以将其作为自己个人网站的起点进行复刻。

功能特性

• 最新的 Next.js 13 —— 从一开始就内置了 App Router、Server Actions 以及客户端与服务器组件的分离。
• 端到端的 TypeScript —— 每个组件、钩子和 API 路由都有类型定义，因此重构时无所畏惧。
• Tailwind CSS + 亮色/暗色模式 —— 干净、响应式的 UI，可适应系统偏好设置。
• Framer Motion —— 流畅的滚动驱动和悬停动画，用于区域过渡、卡片显示和微妙的微交互。
• 通过 React Email + Resend 实现的安全邮件发送 —— 联系表单使用 React.Email 组合邮件模板，通过 Resend 发送，并在服务器端验证输入，以防止表单被滥用。
• 自定义 React 钩子 —— 用于滚动位置、区域可见性检测和活动区域跟踪的小型实用钩子。
• 性能 —— Lighthouse 评分 95+，部署版本的平均加载时间低于 100 毫秒。
• 100% 响应式 —— 在低至 360px 的移动设备上也能清晰工作。

技术栈

• 框架: Next.js 13 with App Router
• 语言: TypeScript 5
• 样式: Tailwind CSS with a custom design system
• 动画: Framer Motion
• 邮件: React.Email for templating, Resend for delivery
• 托管: Vercel

值得注意的部分

• 使用 Server Actions 处理联系表单 —— 无需单独的 API 路由，表单直接提交到一个 Server Action，该 Action 会验证并调用 Resend。代码更简洁，少了一层抽象。
• 滚动驱动的区域跟踪 —— 一个自定义的 useActiveSection 钩子观察滚动位置，并在导航中高亮当前区域，使用 IntersectionObserver 实现，因此开销很小。
• 将暗色模式视为设计约束，而非事后补充 —— 调色板中的每种颜色都经过精心选择，以确保在两种主题下看起来都合适，而不仅仅是通过反转滤镜进行切换。