13日目。GitHubのプロフィールを、コードを一行も書かずにかっこいいポートフォリオサイトに変換できたらどうだろう？
プロンプト#
「GitHubポートフォリオジェネレーターを作って。ユーザー名を入力したら、統計情報、リポジトリ、使用言語、アクティビティが載った洗練されたポートフォリオを生成する。複数のテンプレート、複数のカラーテーマ、HTMLエクスポート機能付き。」
どうやって作ったか#
Watchfireがこれを19個のタスクに分解した。コアの作業はGitHub API連携から始まり、ポートフォリオに必要なデータをすべて取得する：プロフィール情報、リポジトリ、コントリビューション活動、使用言語、所属組織。そこからテンプレートシステム、テーマエンジン、エクスポートと共有機能を構築していった。
タスクリストは幅広い内容をカバーしていた：5つのポートフォリオテンプレート（Minimal、Developer Card、Creative/Bento Grid、Corporate/Showcase、Hacker/Terminalテーマ）、7つのカラーテーマ、カスタムアクセントカラー、印刷・PDFモード、自動検出スキル、デプロイガイド、READMEエクスポート、ソーシャルシェアカードジェネレーター。バックエンドなしでブラウザだけで動くものとしては、驚くほど充実した機能セットだ。
出来上がったもの#
ランディングページはすでに洗練されている。デフォルトでダークモード、きれいなタイポグラフィ、3ステップの説明、そしてホームページ上ですべてのテンプレートとテーマのプレビューが表示される。
5つのテンプレート、それぞれ個性的。 Showcaseはベントグリッドレイアウトのフル機能オプション。Developer Cardはコンパクトで要点を押さえている。Bento Gridは非対称カードルックを採用。Minimalはタイポグラフィだけに絞り込む。そしてTerminalは全体をコマンドラインインターフェースとしてレンダリングし、ASCIIアートと等幅フォント付き。
7つのカラーテーマ＋カスタムアクセント。 Midnight、Ocean、Forest、Sunset、Rose、Slate、そして自分でアクセントカラーを選べるカスタムオプション。ランディングページにはライトモードのバリエーションもある。
生成されたポートフォリオはデータが豊富。 アニメーション付きカウンターの統計情報、コントリビューションヒートマップ、積み上げ棒グラフの言語内訳、トップリポジトリ、最近のアクティビティ、所属組織、ソーシャルリンク。すべて認証不要の公開GitHub APIから取得。
カスタマイズパネルが充実。 個別のセクションのオン・オフ切り替え、テーマとテンプレートのライブ切り替え、自己紹介テキストの上書き、変更の即時反映。すべてクライアントサイドで処理されるので、切り替え間のローディングがない。
Bento Gridテンプレートがいい感じ。 これは意外だった。プロフィール情報、統計、注目リポジトリ、最近のアクティビティ、使用言語を非対称カードグリッドに配置して、ちゃんとしたデザインプロジェクトのように見える。
Terminalテンプレートがヤバい。 ポートフォリオ全体をターミナルでコマンドを実行しているかのようにレンダリングする。プロフィール情報はfetchスタイルの出力として表示され、統計はCLIレスポンスとして、リポジトリはディレクトリエントリとしてリストされる。点滅カーソルまである。
デプロイガイド内蔵。 ポートフォリオのHTMLをエクスポートしたら、デプロイモーダルがNetlify Drop、GitHub Pages、Vercelでのホスティング手順を案内してくれる。各プラットフォームへのリンク付きのステップバイステップの説明。デモを実際に使えるものに変えるこういう仕上げが大事。
バグレポート#
GitHubの公開APIは認証なしで1時間あたり60リクエストの上限があり、各ポートフォリオ生成で約4リクエスト使う。テスト中にポートフォリオを急速に再生成していたら何度かレートリミットに引っかかった。バグというよりは知っておくべき制約。アプリはちゃんと処理して待つように教えてくれる。
READMEには6テーマと4テンプレートと書いてあるが、実際のアプリには5テンプレートと7テーマが入っている。コードがドキュメントを追い越した。このチャレンジ全体を象徴する話だ。
数字で見る#
- 5つのポートフォリオテンプレート それぞれ異なるレイアウト
- 7つのカラーテーマ ＋カスタムアクセントカラー
- 19個のWatchfireタスク API連携からデプロイガイドまで
- バックエンドゼロ すべてクライアントサイドで動作
- 4回のGitHub API呼び出し ポートフォリオ生成ごと
- エクスポート形式: HTMLダウンロード、クリップボードコピー、共有リンク、README、ソーシャルシェアカード
試してみて#
Day 13 of #30DaysOfVibeCoding - GitHub Portfolio
公開GitHubユーザー名を入力してテンプレートを選ぶだけ。
Day 13の感想#
これは本当にある隙間を埋めている。ほとんどの開発者ポートフォリオツールは、プロジェクト全体をセットアップするか、特定のデザインに縛られるかのどちらか。GitFolioはユーザー名を入力するだけで、どこにでもホストできる自己完結型HTMLファイルを生成する。テンプレートのバリエーションもしっかりしていて、Terminalテーマだけでも試す価値がある。デプロイガイドがポートフォリオ生成から実際にオンラインに公開するまでの最後の障壁を取り除いてくれる。
認証なし、データベースなし、トラッキングなしでブラウザだけで動くのもいいポイント。ターミナルを触ったことがない人にこのURLを渡しても、5分でポートフォリオサイトを公開できる。
出力品質が向上しているのが、プロンプティングが上手くなったからなのか、ツールが意図をより正確に推測できるようになったからなのか、正直わからない。たぶん両方だろう。
これは30 Days of Vibe Codingの13日目です。AIアシストコーディングで30日間に30プロジェクトを出荷する様子をフォローしてください。
