Craig Ames 艺术家作品集网站

这是一个基于 Next.js 构建的艺术家作品集网站，复刻自 craigames.com。

目录结构

craigames-website/
├── src/
│   ├── app/                    # 页面文件
│   │   ├── layout.tsx          # 根布局 (Header + Footer)
│   │   ├── page.tsx            # 首页
│   │   ├── about/              # 关于页面
│   │   ├── works/              # 作品列表和详情页
│   │   └── publications/       # 出版物页面
│   ├── components/             # 组件
│   │   ├── Header.tsx          # 导航头部
│   │   ├── Footer.tsx          # 页脚
│   │   └── ProjectCard.tsx     # 作品卡片
│   └── lib/
│       └── projects.ts         # 作品数据 (修改这里更新作品)
├── public/                     # 静态资源
└── ...配置文件

快速开始

1. 安装 Node.js

如果您还没有安装 Node.js，请先访问 https://nodejs.org/ 下载并安装 LTS 版本。

2. 安装依赖

打开终端，进入项目目录，运行：

cd /Users/davidtang/Coding/Web_wanjian/craigames-website
npm install

3. 本地运行

npm run dev

然后在浏览器打开 http://localhost:3000 查看网站。

4. 构建生产版本

npm run build

如何修改内容

修改作品信息

编辑 src/lib/projects.ts 文件，按照现有格式添加或修改作品：

{
  slug: "your-project-slug",        // URL路径 (英文，用-连接)
  title: "Your Project Title",       // 作品标题
  year: "2024",                      // 年份
  category: "Photography",           // 类别
  description: "简短描述...",         // 首页显示的简短描述
  fullDescription: "详细描述...",     // 详情页的完整描述
  exhibitions: ["展览1", "展览2"],    // 展览列表
  image: "图片URL",                   // 封面图片
  gallery: ["图片1", "图片2"],        // 图库图片
}

修改关于页面

编辑 src/app/about/page.tsx 文件中的文字内容。

修改出版物

编辑 src/app/publications/page.tsx 文件中的 publications 数组。

修改导航链接

编辑 src/components/Header.tsx 文件中的 navLinks 数组。

替换图片

目前使用 Unsplash 占位图。要替换为自己的图片：

1. 将图片放入 public/images/ 文件夹
2. 在代码中使用 /images/your-image.jpg 路径引用

部署到 Vercel (免费)

方法一：通过 GitHub (推荐)

1. 创建 GitHub 账号 (如果没有): https://github.com/

2. 创建新仓库:

   • 登录 GitHub
   • 点击右上角 "+" → "New repository"
   • 输入仓库名称 (如 craigames-website)
   • 点击 "Create repository"

3. 上传代码:

   cd /Users/davidtang/Coding/Web_wanjian/craigames-website
   git init
   git add .
   git commit -m "Initial commit"
   git branch -M main
   git remote add origin https://github.com/你的用户名/craigames-website.git
   git push -u origin main

4. 部署到 Vercel:

   • 访问 https://vercel.com/
   • 使用 GitHub 账号登录
   • 点击 "Add New Project"
   • 选择您刚创建的仓库
   • 点击 "Deploy"
   • 等待部署完成，获得免费域名 (如 craigames-website.vercel.app)

方法二：直接上传

1. 访问 https://vercel.com/
2. 注册/登录
3. 将整个项目文件夹拖拽到 Vercel 页面

自定义域名 (可选)

如果您有自己的域名：

1. 在 Vercel 项目设置中添加域名
2. 按照提示配置 DNS 记录
3. 等待 DNS 生效 (通常几分钟到24小时)

技术栈

• 框架: Next.js 14 (App Router)
• 样式: Tailwind CSS
• 动画: Framer Motion
• 语言: TypeScript
• 部署: Vercel

配色方案

背景色: rgb(45, 45, 45)      /* 深灰色 */
文字色: rgb(232, 232, 232)   /* 浅灰色 */
强调色: rgb(252, 96, 0)      /* 橙色 */

常见问题

Q: 图片加载很慢怎么办？ A: 目前使用 Unsplash 在线图片。建议下载图片到本地 public/images/ 文件夹，然后更新代码中的图片路径。

Q: 如何添加更多页面？ A: 在 src/app/ 下创建新文件夹，添加 page.tsx 文件即可。

Q: 如何修改网站标题和描述？ A: 编辑 src/app/layout.tsx 文件中的 metadata 对象。

需要帮助？

如有任何问题，请随时询问！