DevPort - 作品展示网站

基于 Next.js 的全栈个人开发者作品展示平台，包含访客端作品集、双语项目详情和完整后台管理能力。

设计特色

• 编辑式作品集：用大字号排版、技术网格与清晰的信息层级突出个人定位和作品叙事
• 克制的视觉系统：暖白底色、近黑文本与钴蓝强调色，兼顾识别度和阅读舒适度
• 完整访客路径：个人定位、精选作品、工作方式、联系合作形成连续浏览体验
• 项目案例详情：支持封面、Markdown 长文、项目图片集和外部演示链接
• 响应式与无障碍：覆盖移动端到桌面端，并适配键盘焦点与减少动画偏好

技术栈

• 前端框架: Next.js 16 (App Router)
• UI 库: shadcn/ui + Tailwind CSS
• 动画库: Framer Motion
• Markdown 编辑器: @uiw/react-md-editor
• 数据库: SQLite + Prisma
• 图片存储: 本地静态资源

快速开始

安装依赖

pnpm install

初始化数据库

pnpm db:push

配置后台账号密码

编辑 config/.env 文件（首次启动会自动创建模板）：

# 后台管理账号密码配置（必须设置）
ADMIN_USERNAME=admin
ADMIN_PASSWORD=your_password

# 联系方式配置（可选）
SOCIAL_GITHUB=https://github.com/yourusername
SOCIAL_EMAIL=your.email@example.com
SOCIAL_TELEGRAM=your_telegram_username

启动开发服务器

pnpm dev

访问：

• 前台: http://localhost:3000
• 后台: http://localhost:3000/admin（需要登录）

Docker 部署

使用 Docker Compose（推荐）

1. 启动容器：

docker-compose up -d

2. 配置后台账号密码：

编辑 config/.env 文件（首次启动会自动创建模板），设置 ADMIN_USERNAME 和 ADMIN_PASSWORD。

重要：首次部署时必须设置 ADMIN_PASSWORD，否则无法登录后台。

3. 重启容器使配置生效：

docker-compose restart

4. 访问应用：

• 前台: http://localhost:3000
• 后台: http://localhost:3000/admin

使用 Docker 命令

# 构建镜像
docker build -t devport:latest .

# 运行容器
docker run -d \
  -p 3000:3000 \
  -v $(pwd)/data:/app/data \
  -v $(pwd)/uploads:/app/public/uploads \
  -v $(pwd)/config:/app/config \
  -e DATABASE_URL=file:/app/data/prod.db \
  --name devport \
  devport:latest

首次启动会在 ./config/.env 自动创建配置文件模板，编辑后重启容器即可生效。

数据持久化

• 数据库文件保存在 ./data/prod.db
• 上传的图片保存在 ./uploads 目录
• 配置文件保存在 ./config/.env

更新部署

# 重新构建并启动
docker-compose up -d --build

数据文件通过 volume 挂载在宿主机，重新构建镜像不会影响数据。

功能特性

前台

• 多语言支持（简体中文 / English）
• 个人定位与合作状态展示
• 精选项目网格（响应式布局）
• 项目详情页（封面、Markdown 与图片集）
• 标题和内容支持中英文切换显示
• 项目内容自动生成卡片摘要
• 基于 Framer Motion 的轻量入场与交互动效

后台

• 用户登录鉴权
• 项目 CRUD 操作
• 拖拽调整项目展示顺序
• 标题和内容支持中英文分别编辑
• Markdown 编辑器
• 图片上传和管理
• 清理未使用的已上传图片
• 项目隐藏/显示控制

开源协议

本项目采用 MIT License 开源协议。

Made with ❤️ by Yuuuuu0