Back to Details

developer-portfolio

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Developer Portfolio Pro

专业开发者作品集

A modern, responsive portfolio with Next.js, Lottie animations, contact form with Email/Telegram, and dev.to blog integration.
一个基于Next.js的现代化响应式作品集网站，集成Lottie动画、支持邮件/电报的联系表单，以及dev.to博客整合。

Tech Stack

技术栈

  • Framework: Next.js 16 with App Router
  • React: React 19
  • Styling: Tailwind CSS 4
  • Animation: Lottie
  • Package Manager: pnpm
  • Output: 
    .next
    directory
  • Dev Port: 3000
  • 框架：Next.js 16（搭配App Router）
  • React：React 19
  • 样式：Tailwind CSS 4
  • 动画：Lottie
  • 包管理器：pnpm
  • 输出目录：
    .next
  • 开发端口：3000

Setup

安装步骤

1. Clone the Template

1. 克隆模板

bash
git clone --depth 1 https://github.com/Eng0AI/developer-portfolio-template.git .
If the directory is not empty:
bash
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
bash
git clone --depth 1 https://github.com/Eng0AI/developer-portfolio-template.git .
如果目标目录非空：
bash
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. Remove Git History (Optional)

2. 移除Git历史记录（可选）

bash
rm -rf .git
git init
bash
rm -rf .git
git init

3. Install Dependencies

3. 安装依赖

bash
pnpm install
bash
pnpm install

Build

构建

bash
pnpm build
bash
pnpm build

Deploy

部署

Vercel (Recommended)

Vercel（推荐）

bash
vercel pull --yes -t $VERCEL_TOKEN
vercel build --prod -t $VERCEL_TOKEN
vercel deploy --prebuilt --prod --yes -t $VERCEL_TOKEN
bash
vercel pull --yes -t $VERCEL_TOKEN
vercel build --prod -t $VERCEL_TOKEN
vercel deploy --prebuilt --prod --yes -t $VERCEL_TOKEN

Netlify

Netlify

bash
netlify deploy --prod
bash
netlify deploy --prod

Customization

自定义配置

Edit content in 
utils/data/
:
  • personal-data.js
    - Name, bio, social links
  • experience.js
    - Work history
  • projects-data.js
    - Portfolio projects
  • skills.js
    - Technical skills
  • educations.js
    - Education background
编辑
utils/data/
目录下的内容：
  • personal-data.js
    - 姓名、个人简介、社交链接
  • experience.js
    - 工作经历
  • projects-data.js
    - 作品集项目
  • skills.js
    - 技术技能
  • educations.js
    - 教育背景

Environment Variables

环境变量

VariableRequiredDescription
NEXT_PUBLIC_GTM
NoGoogle Tag Manager ID
NEXT_PUBLIC_APP_URL
YesYour portfolio's public URL
TELEGRAM_BOT_TOKEN
NoTelegram bot token for contact form
TELEGRAM_CHAT_ID
NoTelegram chat ID
GMAIL_PASSKEY
NoGmail app password
EMAIL_ADDRESS
NoGmail address for contact form
变量是否必填说明
NEXT_PUBLIC_GTM
否Google Tag Manager ID
NEXT_PUBLIC_APP_URL
是你的作品集公开访问地址
TELEGRAM_BOT_TOKEN
否用于联系表单的Telegram机器人令牌
TELEGRAM_CHAT_ID
否Telegram聊天ID
GMAIL_PASSKEY
否Gmail应用专用密码
EMAIL_ADDRESS
否联系表单使用的Gmail地址

Development

开发

bash
pnpm dev
Opens at http://localhost:3000
Requires Node.js 18.17+ (Node.js 20+ recommended)
bash
pnpm dev
访问地址：http://localhost:3000
要求Node.js 18.17+（推荐使用Node.js 20+）