mcpField
D
dillion-portfolio

dillion-portfolio

github.com/rebyteai-templateデザイン・UI1754 回インストール19 週間前に更新
リポジトリ

dillion-portfolio について

dillion-portfolioは、ブログ、職務経歴のタイムライン、プロジェクト紹介を備えた開発者向けNext.jsテンプレートです。経歴データやMDXコンテンツを編集して個人サイトを作成できます。

主な機能

  1. 01開発者向けポートフォリオレイアウト
  2. 02MDXコンテンツのブログ
  3. 03職務経歴タイムライン
  4. 04プロジェクト紹介
  5. 05編集可能な経歴データ

活用シーン

  1. 01開発者のポートフォリオサイト作成
  2. 02個人ブログの公開とプロジェクト紹介

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/dillion-portfolioを入力して読み込まれたか確認します。

詳細

Dillion ポートフォリオ

ブログ、職務経験のタイムライン、プロジェクトの紹介を備えた、ミニマルな開発者向けポートフォリオです。

技術スタック

  • フレームワーク: Next.js 14
  • React: React 18
  • アニメーション: Framer Motion
  • スタイリング: Tailwind CSS, shadcn/ui
  • コンテンツ: ブログ用の MDX
  • パッケージマネージャー: pnpm
  • 開発ポート: 3000

セットアップ

1. テンプレートをクローンする
git clone --depth 1 https://github.com/Eng0AI/portfolio-template.git .

ディレクトリが空でない場合：

git clone --depth 1 https://github.com/Eng0AI/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 --dir=.next

カスタマイズ

src/data/ ディレクトリのコンテンツを編集します：

  • resume.tsx - 個人情報、職務経験、学歴、プロジェクト

ポートフォリオのコンテンツは、content/ ディレクトリに MDX ファイルとして保存されています。

開発

pnpm dev

http://localhost:3000 で開きます

コメント

Markdown 対応