Portfolio - 作品集展示网站

portfolio/
├── .coze                    # Coze CLI 配置文件
├── package.json             # 项目依赖配置
├── tsconfig.json            # TypeScript 配置
├── next.config.ts           # Next.js 配置
├── postcss.config.mjs       # PostCSS 配置
├── .npmrc                   # npm/pnpm 配置
├── .gitignore               # Git 忽略文件
│
├── public/                  # 静态资源
│   └── *.svg                # SVG 图标
│
├── scripts/                 # 脚本文件
│   ├── build.sh             # 构建脚本
│   ├── dev.sh               # 开发启动脚本
│   ├── start.sh             # 生产启动脚本
│   └── prepare.sh           # 准备脚本
│
└── src/
    ├── app/                 # Next.js App Router
    │   ├── layout.tsx       # 根布局
    │   ├── page.tsx         # 主页面
    │   ├── globals.css      # 全局样式
    │   ├── favicon.ico      # 网站图标
    │   └── robots.ts        # 爬虫配置
    │
    ├── components/          # React 组件
    │   ├── ProjectCard.tsx  # 项目卡片组件
    │   └── ui/              # shadcn/ui 组件库
    │
    ├── data/                # 静态数据
    │   └── projects.ts      # 项目数据
    │
    ├── types/               # TypeScript 类型定义
    │   └── project.ts       # 项目类型
    │
    ├── hooks/               # React Hooks
    │   └── use-mobile.ts    # 移动端检测
    │
    ├── lib/                 # 工具函数
    │   └── utils.ts         # 通用工具
    │
    └── server.ts            # 自定义服务器

# 使用 npm 安装
npm install -g pnpm

# 或使用 corepack
corepack enable
corepack prepare pnpm@latest --activate

pnpm install

pnpm dev

pnpm build

pnpm start

export const projects: Project[] = [
  {
    id: '1',
    title: '项目标题',
    description: '项目描述',
    image: 'https://example.com/image.jpg',
    tags: ['React', 'TypeScript'],
    category: 'web',
    date: '2024-01-01',
    link: 'https://example.com',
    github: 'https://github.com/example',
  },
  // 添加更多项目...
];

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'your-image-domain.com',
        pathname: '/**',
      },
    ],
  },
};

// src/data/projects.json
[
  { "id": "1", "title": "项目1", ... },
  { "id": "2", "title": "项目2", ... }
]

// 在组件中导入
import projects from '@/data/projects.json';

// 创建 src/lib/supabase.ts
import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);

export default supabase;

{
  id: 'unique-id',           // 唯一标识
  title: '项目名称',          // 项目标题
  description: '项目描述',    // 详细描述
  image: '图片URL',          // 封面图片
  tags: ['技术标签'],        // 技术标签数组
  category: 'web',           // 分类: web/mobile/design/other
  date: '2024-01-01',        // 项目日期
  link: 'https://...',       // 项目链接（可选）
  github: 'https://...',     // GitHub 链接（可选）
}

export type Category = 'web' | 'mobile' | 'design' | 'other';

const CARDS_PER_PAGE = 5;  // 修改为你想要的数量

FROM node:24-alpine AS builder

WORKDIR /app

# 安装 pnpm
RUN corepack enable && corepack prepare pnpm@latest --activate

# 复制依赖文件
COPY package.json pnpm-lock.yaml ./

# 安装依赖
RUN pnpm install --frozen-lockfile

# 复制源码
COPY . .

# 构建
RUN pnpm build

# 生产镜像
FROM node:24-alpine AS runner

WORKDIR /app

COPY --from=builder /app/dist ./dist
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./

ENV NODE_ENV=production
ENV PORT=5000

EXPOSE 5000

CMD ["node", "dist/server.js"]

docker build -t portfolio .
docker run -p 5000:5000 portfolio

const nextConfig: NextConfig = {
  output: 'export',
  images: {
    unoptimized: true,  // 静态导出需要
  },
};

pnpm build

# 构建
pnpm build

# 运行
PORT=5000 pnpm start

# 如需使用 Supabase
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

# 如需自定义端口
PORT=5000