mcpField
D
developer-portfolio

developer-portfolio

github.com/rebyteai-template设计与 UI1796 次安装19 周前更新
代码仓库

关于 developer-portfolio

面向开发者的可定制 Next.js 作品集模板，包含动画区块、联系表单和 dev.to 博客集成。内容可在独立数据文件中编辑。

主要功能

  1. 01响应式 Next.js 作品集
  2. 02Lottie 动画
  3. 03Email 和 Telegram 联系表单
  4. 04dev.to 博客集成
  5. 05编辑个人资料、项目和技能

适用场景

  1. 01发布开发者作品集
  2. 02展示工作经历和项目
  3. 03通过 Email 或 Telegram 接收咨询

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/rebyteai-template/rebyte-skills --skill developer-portfolio

安装后在 Claude Code 中输入/developer-portfolio确认已加载。

详细介绍

开发者作品集 Pro

一款现代、响应式的作品集，采用 Next.js、Lottie 动画，支持通过 Email/Telegram 联系，并集成 dev.to 博客。

技术栈

  • 框架：Next.js 16 with App Router
  • React：React 19
  • 样式：Tailwind CSS 4
  • 动画：Lottie
  • 包管理器：pnpm
  • 输出：.next directory
  • 开发端口：3000

设置

1. 克隆模板
git clone --depth 1 https://github.com/Eng0AI/developer-portfolio-template.git .

如果目录不为空：

git clone --depth 1 https://github.com/Eng0AI/developer-portfolio-template.git _temp_template
mv _temp_template/* _temp_template/.* . 2>/dev/null || true
rm -rf _temp_template
2. 移除 Git 历史记录（可选）
rm -rf .git
git init
3. 安装依赖项
pnpm install

构建

pnpm build

部署

Vercel（推荐）
vercel pull --yes -t $VERCEL_TOKEN
vercel build --prod -t $VERCEL_TOKEN
vercel deploy --prebuilt --prod --yes -t $VERCEL_TOKEN
Netlify
netlify deploy --prod

自定义

编辑 utils/data/ 中的内容：

  • personal-data.js - 姓名、个人简介、社交链接
  • experience.js - 工作经历
  • projects-data.js - 作品集项目
  • skills.js - 技术技能
  • educations.js - 教育背景

环境变量

变量必需说明
NEXT_PUBLIC_GTM否Google Tag Manager ID
NEXT_PUBLIC_APP_URL是你的作品集公开 URL
TELEGRAM_BOT_TOKEN否联系表单使用的 Telegram 机器人令牌
TELEGRAM_CHAT_ID否Telegram 聊天 ID
GMAIL_PASSKEY否Gmail 应用密码
EMAIL_ADDRESS否联系表单使用的 Gmail 地址

开发

pnpm dev

访问 http://localhost:3000

需要 Node.js 18.17+（推荐使用 Node.js 20+）

评论

支持 Markdown