Next.jsポートフォリオテンプレート

このテンプレートで学ぶこと

機能

セットアップ方法

1. 依存関係のインストール

pnpm install
# または
npm install

2. 開発サーバーの起動

pnpm dev
# または
npm run dev

3. ブラウザで確認

カスタマイズ方法

基本情報の編集

1. 基本情報

export const personalInfo: PersonalInfo = {
 // 基本情報
 name: "あなたの名前", // ← ここを変更
 title: "大学1年生・駆け出しエンジニア", // ← ここを変更
 location: "Tokyo, Japan", // ← ここを変更
 avatarImage: "avatar.jpg", // ← 画像ファイル名(publicフォルダに配置)
 initials: "YOUR", // ← アバター画像がない場合のイニシャル
};

2. About Me セクション

about: {
 paragraphs: [
 <>大学1年生の駆け出しエンジニアです。Web開発の世界に魅了され、日々新しい技術を学んでいます。</>,
 // ← ここに自分の自己紹介を書いてください
 <>現在は<strong className="text-foreground">React</strong>と<strong className="text-foreground">Next.js</strong>を中心としたモダンなフロントエンド技術を学習中。</>,
 // 複数の段落で構成できます
 ]
},

3. 技術スタック

techStack: [
 { name: "Next.js", icon: <SiNextdotjs className="w-3 h-3 mr-1" /> },
 { name: "React", icon: <SiReact className="w-3 h-3 mr-1" /> },
 // ← ここに学習中・使用中の技術を追加できます
],

4. 趣味・興味

hobbies: [
 {
 title: "Learning & Reading", // タイトル
 description: "技術書やPodcastでのインプット", // 説明
 icon: <FaBook className="h-5 w-5 text-primary" />, // アイコン
 badges: ["Clean Code", "Podcast"] // バッジ
 },
 // ← 3つの趣味・興味を設定できます
],

5. 学歴・教育歴

education: [
 {
 period: "2024 — 現在",
 school: "○しろまる○しろまる大学 ○しろまる○しろまる学部", // ← ここを変更
 description: "プログラミングやWeb開発について学習中。", // ← ここを変更
 badges: ["現在学習中", "Web開発", "フロントエンド"],
 link: "https://example.com" // 学校のサイト(オプション)
 },
 // 高校の情報も同様に編集できます
],

6. ソーシャルリンク

socialLinks: [
 {
 platform: "GitHub",
 url: "https://github.com/yourusername", // ← あなたのURLに変更
 icon: <FaGithub className="size-6" />
 },
 // Twitter, Instagram, Qiita, Zennなど複数のリンクを設定可能
],

アバター画像の追加

avatarImage: "your-photo.jpg", // public/your-photo.jpg を参照

テーマカラーの変更

おみくじ機能について

const [omikujiResult, setOmikujiResult] = useState<string>("");
const drawOmikuji = () => {
 const randomIndex = Math.floor(Math.random() * omikujiOptions.length);
 setOmikujiResult(omikujiOptions[randomIndex]);
};

おみくじの結果をカスタマイズ

Vercelでの公開

1. GitHubにプッシュ

git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin <あなたのリポジトリURL>
git push -u origin main

2. Vercelでデプロイ

使用技術

学習リソース

よくある質問