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テーマとUI設定
  5. 05VercelとNetlifyへのデプロイ

活用シーン

  1. 01個人ポートフォリオサイトの作成
  2. 02MDXブログ記事の公開
  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 対応