developer-portfolio

開発者ポートフォリオ Pro

Next.js、Lottie アニメーション、Email／Telegram に対応したお問い合わせフォーム、dev.to ブログ連携を備えた、モダンでレスポンシブなポートフォリオです。

技術スタック

• フレームワーク: Next.js 16（App Router）
• React: React 19
• スタイリング: Tailwind CSS 4
• アニメーション: Lottie
• パッケージマネージャー: pnpm
• 出力先: .next ディレクトリ
• 開発ポート: 3000

セットアップ

1. テンプレートをクローンする

git clone --depth 1 https://github.com/Eng0AI/developer-portfolio-template.git .

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

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. 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

カスタマイズ

utils/data/ 内のコンテンツを編集します：

• personal-data.js - 名前、プロフィール、ソーシャルリンク
• experience.js - 職歴
• projects-data.js - ポートフォリオのプロジェクト
• skills.js - 技術スキル
• educations.js - 学歴

環境変数

変数	必須	説明
NEXT_PUBLIC_GTM	いいえ	Google Tag Manager ID
NEXT_PUBLIC_APP_URL	はい	ポートフォリオの公開 URL
TELEGRAM_BOT_TOKEN	いいえ	お問い合わせフォーム用の Telegram ボットトークン
TELEGRAM_CHAT_ID	いいえ	Telegram チャット ID
GMAIL_PASSKEY	いいえ	Gmail アプリパスワード
EMAIL_ADDRESS	いいえ	お問い合わせフォーム用の Gmail アドレス

開発

pnpm dev

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

Node.js 18.17 以降が必要です（Node.js 20 以降を推奨）。