mcpField
M
magic-portfolio

magic-portfolio

github.com/rebyteai-template开发1771 次安装19 周前更新
代码仓库

关于 magic-portfolio

magic-portfolio 是基于 Next.js 的作品集模板，适合展示个人项目和博客。它使用 MDX 管理内容，并提供 SEO、图库与主题自定义。

主要功能

  1. 01MDX 博客与项目内容
  2. 02自动 SEO
  3. 03作品图库
  4. 04主题与界面设置
  5. 05支持 Vercel 和 Netlify 部署

适用场景

  1. 01创建个人作品集网站
  2. 02发布 MDX 博客文章
  3. 03展示项目案例与图片

安装

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

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

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

详细介绍

Magic Portfolio

一款简洁清爽的作品集模板，支持基于 MDX 的博客和项目、自动 SEO、图库以及丰富的主题自定义选项。

技术栈

  • 框架：Next.js 16
  • React：React 19
  • UI：Once UI
  • 样式：Sass
  • 内容：MDX
  • 包管理器：npm
  • 开发端口：3000

设置

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

如果目录不为空：

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. 移除 Git 历史记录（可选）
rm -rf .git
git init
3. 安装依赖
npm install

构建

npm run 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 --dir=.next

自定义

  • src/resources/once-ui.config.js - 主题和 UI 设置
  • src/resources/content.js - 网站内容
  • src/app/blog/posts/ - 以 MDX 编写的博客文章
  • src/app/work/projects/ - 项目案例研究

开发

npm run dev

打开 http://localhost:3000

需要 Node.js v18.17+

评论

支持 Markdown