Universal Portfolio Template

一个面向设计师、开发者、摄影师、导演、插画师、建筑师、写作者与跨学科创作者的模块化个人作品集模板。

特性

• 编辑部式响应式布局，适配桌面、平板和手机
• 浅色 / 深色主题，并在本地记住访客偏好
• 可筛选的项目展示区
• 支持 CSS 项目占位视觉或真实项目图片
• 关于、服务能力、履历与联系模块
• 邮箱一键复制与社交链接
• 自定义 Open Graph 分享封面和 favicon
• 原生 CSS 动效与 prefers-reduced-motion 降级
• 内容与页面结构分离，无大型动画或 UI 框架

技术栈

• React 19
• TypeScript 5
• Next.js 兼容 App Router
• Vinext + Vite
• Cloudflare Worker 运行入口
• Node.js 22+

快速开始

npm install
npm run dev

打开 http://localhost:3000/。

修改个人内容

绝大多数内容集中在 app/portfolio-data.ts：

配置	用途
profile	姓名、角色、介绍、邮箱、统计数据和简历链接
projects	项目名称、类别、年份、说明、服务、图片和强调色
services	服务范围
capabilities	技能标签
experience	工作经历
socials	社交平台链接

将项目图片放进 public/projects/，然后把项目对象的 image 改为 /projects/your-image.webp。留空时会继续显示内置 CSS 占位视觉。

更完整的修改说明见 docs/CUSTOMIZATION.md。

常用命令

npm run dev      # 启动本地开发
npm run build    # 创建生产构建
npm run start    # 启动生产服务
npm run test     # 构建并运行自动化测试
npm run lint     # 运行代码检查

项目结构

app/
  globals.css          全局主题、布局和响应式样式
  layout.tsx           页面元数据与社交分享配置
  page.tsx             页面结构和交互
  portfolio-data.ts    可编辑的作品集内容
build/                 Sites / Vite 构建插件
docs/                  定制、结构和部署文档
public/                favicon、分享封面与项目图片
tests/                 服务端渲染和功能约束测试
worker/                Cloudflare Worker 入口

详细说明见 docs/PROJECT_STRUCTURE.md。

部署

提交到 GitHub 后，可连接支持 Node.js 22 和自定义构建命令的平台。生产构建命令为 npm run build。

部署前检查清单和 Cloudflare 配置说明见 docs/DEPLOYMENT.md。

内容与隐私

模板默认不包含分析脚本、数据库、表单后端或第三方追踪。联系按钮使用 mailto:，邮箱复制仅调用浏览器剪贴板 API。