VSCode Portfolio 機能紹介
デモサイト:
https://v0-project-steel-nine.vercel.app/
コード(ご自由に流用、コピー、folkください)
https://github.com/shinguakira/vscode-portfolio
着想元:
https://remix-portfolio-nine.vercel.app/
このプロジェクトは、上記のポートフォリオサイトに触発されて制作しました。VS Codeのエディタ画面をそのままポートフォリオにするというアイデアに惹かれ、Next.js + TypeScriptで一から再構築しています。オリジナルのコンセプトを引き継ぎつつ、3テーマ切り替え、インタラクティブターミナル、ビジュアルリグレッションテスト、日英対応など独自の機能を追加しています。
Visual Studio Codeのエディタインターフェースを完全に再現したポートフォリオサイトです。単なる見た目の模倣ではなく、ファイルエクスプローラー、検索、ターミナル、設定パネルなど、実際に操作できるインタラクティブなUIを備えています。
開発についての注記
本ポートフォリオサイトは、V0およびClaude Codeで開発しました。
VS Code レイアウト
サイト全体がVS Codeのウィンドウとして構成されています。
- タイトルバー: アプリ名、パネル開閉ボタン、ヘルプボタン、検索ボックス、言語切り替え（日本語/英語）
- アクティビティバー: 左端のアイコン列。各アイコンをクリックするとサイドバーの表示が切り替わる
- サイドバー: エクスプローラー、検索、Git履歴、更新履歴、拡張機能の5つのパネル
- エディタエリア: ファイルを開くとタブ付きでコンテンツを表示。プレビューモードにも対応
- ターミナル: コマンド入力が可能なインタラクティブターミナル
- ステータスバー: ブランチ名、エラー数、エンコーディング、ファイルタイプなどを表示
エクスプローラー
VS Codeのファイルエクスプローラーを再現したサイドバーパネルです。ポートフォリオの各セクションをフォルダとファイルのツリー構造で表現しています。
-
about/フォルダ:profile.md、strong-points.md、faq.md、experience.json -
projects/フォルダ:README.md、skills.json - その他:
contact.md、config.yaml
ファイルをクリックすると、対応するセクションのコンテンツがエディタエリアに表示されます。ファイルの拡張子に応じたアイコンも表示され、VS Codeの操作感を忠実に再現しています。
検索
アクティビティバーの虫眼鏡アイコンをクリックすると、検索パネルが開きます。ファイル名やコンテンツをキーワードで検索でき、一致するファイルをすばやく見つけることができます。タイトルバーの検索ボックスからも同様の検索が可能です。
Git履歴
キャリアの経歴をGitのコミット履歴風に表現したパネルです。各コミットが1つの職務経歴に対応しており、以下の情報が表示されます。
-
コミットハッシュ: 短縮ハッシュ形式（例:
a7f3d2e） - コミットメッセージ: 担当した主要な業務やプロジェクト名
- 日付: 在籍期間
- 会社名・役職: コミッターとして表示
-
変更内容:
+で追加された実績や成果を表現
Gitのタイムラインとして経歴を見せることで、エンジニアとしてのキャリアの流れを直感的に伝えます。
更新履歴（Changelog）
このポートフォリオサイト自体の開発履歴をバージョン管理風に表示するパネルです。
- v2.0.0: VS Code風UIの完全リニューアル
- v1.5.0: 拡張機能パネルの追加
- v1.4.0: Git履歴ビューの実装
- v1.3.0: ターミナル機能の追加
- v1.2.0: 設定パネルの追加
- v1.1.0: 検索機能の実装
- v1.0.0: 初回リリース
各バージョンにはリリース日と変更点（追加・変更・修正）がGitのコミットスタイルで記載されています。
拡張機能
VS Codeの拡張機能マーケットプレイスを模したパネルです。自分が開発したプロジェクトを「拡張機能」として一覧表示しています。
各プロジェクトには以下の情報が含まれます。
- プロジェクト名とアイコン
- 作者名
- 説明文: プロジェクトの概要
- 技術タグ: 使用技術（Next.js、TypeScript、React など）
- 評価: 星レーティング
- ダウンロード数とバージョン
- リンク: リポジトリとデモサイトへのリンク
プロジェクトを「インストール」する感覚でポートフォリオを閲覧できる、ユニークな表現です。
ターミナル
タイトルバーのパネルボタンまたはステータスバーのアイコンから開閉できるインタラクティブターミナルです。実際にコマンドを入力して操作できます。
対応コマンド:
-
help— 利用可能なコマンド一覧を表示 -
npm run start— キャリア履歴を開発サーバーのログ風に再生表示 -
ls— プロジェクトのディレクトリ一覧を表示 -
clear— ターミナル出力をクリア
ターミナルパネルには「TERMINAL」「OUTPUT」「PROBLEMS」のタブがあり、VS Codeの下部パネルの見た目を再現しています。
設定
アクティビティバー最下部の歯車アイコンから開く設定パネルです。サイト全体の見た目をリアルタイムでカスタマイズできます。
テーマプリセット
6種類のカラープリセットから選択できます。
- ダークブラック
- ミッドナイト
- ダークブルー
- ダークグリーン
- ダークパープル
- グレー
カスタムカラー
- 背景色: HEXカラーコードで自由に指定
- 文字色: HEXカラーコードで自由に指定
- アクセントカラー: HEXカラーコードで自由に指定
フォントサイズ
スライダーでフォントサイズを調整可能です。
プレビューテーマ
ポートフォリオの各セクションの表示スタイルを3種類から選択できます。
- モダン: ダークテーマとグラデーションを使用した現代的なデザイン
- 革新的: 実験的で未来的な大胆なビジュアルデザイン
- プロフェッショナル: 洗練されたミニマルでエレガントなデザイン
設定はlocalStorageに保存され、次回アクセス時も維持されます。
チュートリアル
初回アクセス時に自動表示されるインタラクティブチュートリアルです。「ポートフォリオへようこそ!」というモーダルが表示され、「説明を見る」を選択するとステップバイステップで各機能の使い方を案内します。
チュートリアルでは以下の要素をハイライトしながら説明します。
- アクティビティバーの操作方法
- サイドバーの各パネル
- ファイルの開き方とプレビュー
- エディタエリアの使い方
- ターミナルの操作
- 設定のカスタマイズ
「今後このメッセージを表示しない」チェックボックスで非表示にでき、タイトルバーのヘルプボタンからいつでも再表示できます。
ポートフォリオセクション
エディタエリアでファイルを開くと、ポートフォリオの各セクションが表示されます。全7セクション（+ README）があり、それぞれ3つのビジュアルテーマで表示できます。
プロフィール
| Modern | Innovative |
|---|---|
 |
 |
| Professional | |
|---|---|
 |
自己紹介セクションです。名前、肩書き、紹介文、フロントエンド/バックエンドの技術スタック、実績（経験年数・プロジェクト数・満足度）を表示します。テーマによってレイアウトが大きく異なり、Modernはグラデーション背景、Innovativeはネオン調、Professionalはクリーンなホワイト基調です。
プロジェクト
開発したプロジェクトをカード形式で一覧表示します。各カードにはプロジェクト名、説明、使用技術タグ、デモ・コードへのリンクが含まれます。
スキル
技術スタックをカテゴリ別（フロントエンド、バックエンド、AI/ML、インフラ）に表示します。各技術にはアイコン、習熟度（S/A/B）、経験年数が記載されています。
経歴
職務経歴をタイムライン形式で表示します。各エントリには期間、会社名、役職、担当業務、成果が含まれます。クリックすると詳細モーダルが開きます。
お問い合わせ
連絡先情報（Email、GitHub、LinkedIn、Twitter）と対応可能な業務内容を表示します。
強み・FAQ
強みセクションでは自分の強みをカード形式で、FAQセクションではよくある質問をアコーディオン形式で表示します。
テーマシステム
全セクションが Modern、Innovative、Professional の3つのビジュアルテーマに対応しています。
| テーマ | 特徴 |
|---|---|
| Modern | ダークな背景にグラデーションとアクセントカラーを効かせた現代的なデザイン。カード要素にはグラスモーフィズム風の半透明効果 |
| Innovative | 黒背景にネオンカラー（シアン、マゼンタ、イエロー）を使用した未来的・実験的なデザイン。ボーダーの発光エフェクトが特徴 |
| Professional | 白背景のクリーンでミニマルなデザイン。セリフ体を活用し、落ち着いた配色でビジネスシーンに適した印象 |
テーマは設定パネルまたはエディタのプレビューボタンから切り替え可能です。
レスポンシブ対応
4つのビューポートに対応しています。
- デスクトップ (1920×1080): フルレイアウト
-
モバイル横向き (844×390): サイドバーを縮小し、
short:カスタムバリアントでスケーリング - モバイル横向きビューポート: スクロールなしのビューポート表示
- モバイル縦向き (390×844): 縦向き専用レイアウトの案内表示
日本語/英語切り替え
タイトルバー右上の地球アイコンから日本語と英語を切り替えられます。next-intlによるルーティングベースの国際化を採用しており、URLのロケールプレフィックス（/ja、/en）で言語が決定されます。すべてのUI要素とコンテンツが両言語に対応しています。