Back to Details

magic-portfolio

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Magic Portfolio

Magic 作品集模板

A simple, clean portfolio template with MDX-based blog and projects, automatic SEO, gallery, and endless theming options.
这是一个简洁干净的作品集模板，基于MDX构建博客和项目内容，具备自动SEO、图库功能以及无限主题定制选项。

Tech Stack

技术栈

  • Framework: Next.js 16
  • React: React 19
  • UI: Once UI
  • Styling: Sass
  • Content: MDX
  • Package Manager: npm
  • Dev Port: 3000
  • 框架: Next.js 16
  • React: React 19
  • UI组件库: Once UI
  • 样式: Sass
  • 内容格式: MDX
  • 包管理器: npm
  • 开发端口: 3000

Setup

搭建步骤

1. Clone the Template

1. 克隆模板

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

Build

构建

bash
npm run build
bash
npm run 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 --dir=.next
bash
netlify deploy --prod --dir=.next

Customization

自定义配置

  • src/resources/once-ui.config.js
    - Theme and UI settings
  • src/resources/content.js
    - Site content
  • src/app/blog/posts/
    - Blog posts in MDX
  • src/app/work/projects/
    - Project case studies
  • src/resources/once-ui.config.js
    - 主题与UI设置
  • src/resources/content.js
    - 站点内容配置
  • src/app/blog/posts/
    - MDX格式的博客文章
  • src/app/work/projects/
    - 项目案例研究

Development

开发运行

bash
npm run dev
Opens at http://localhost:3000
Requires Node.js v18.17+
bash
npm run dev
启动后访问 http://localhost:3000
要求Node.js v18.17+版本