CodeDevs — AIで自動生成する開発者ポートフォリオ

Web

概要

CodeDevsは、GitHubの公開プロフィールとリポジトリ情報を取り込み、AI(自然言語生成)を用いてプロジェクトの要約・経歴説明・注目ポイントを自動生成し、見栄えの良いポートフォリオサイトとして出力するツールです。入力はGitHubユーザー名のみで済むように設計されており、開発履歴やスター数、主要言語などを元にプロフェッショナルな紹介文やプロジェクトハイライトを作成。TypeScriptで実装されており、テンプレートベースで応用しやすく、短時間でポートフォリオを立ち上げられます。

GitHub

リポジトリの統計情報

  • スター数: 7
  • フォーク数: 1
  • ウォッチャー数: 7
  • コミット数: 4
  • ファイル数: 20
  • メインの言語: TypeScript

主な特徴

  • GitHubプロフィールとリポジトリデータを自動で収集してポートフォリオを生成
  • AIを使ったプロジェクト要約・自己紹介文の自動作成
  • モダンでレスポンシブなWebテンプレートによる出力
  • 設定やテンプレートを拡張してカスタマイズ可能

技術的なポイント

CodeDevsはTypeScriptを中心に構築されており、技術的には以下の要素が注目されます。まずデータ取得はGitHubの公開API(RESTまたはGraphQL)を用いてユーザー情報、リポジトリ一覧、スター数、主要言語、READMEなどを収集します。取得した生データはAIへのプロンプト生成に使われ、プロジェクト毎の要点抽出や「プロフィール文」の自動生成に活用されます。AI部分は外部のLLMサービス(API呼び出し)を想定した設計になっており、プロンプト設計(プロンプトテンプレート)と生成結果の整形が重要です。

フロントエンドはテンプレート駆動で、生成したテキストとメタデータをレンダリングして静的サイトまたはSSR/ISRで配信可能です。TypeScriptによる型定義でAPIレスポンスや生成コンテンツの整合性を確保し、コンポーネント分割でUIの再利用性を高めています。現実運用ではGitHub APIレート制限やAI APIのコスト管理が課題となるため、キャッシュ層(レスポンスキャッシュ、生成済みページの保存)、バッチ処理、そしてAPIトークンの安全な管理(環境変数、シークレットストア)が設計上重要です。テストやCI/CDの導入により、テンプレート変更やAIプロンプトの改善を安全に反映できます。さらに、生成文の品質管理(誤情報・プライバシー配慮)やローカライズ対応も実運用で検討すべきポイントです。

プロジェクトの構成

主要なファイルとディレクトリ:

  • .gitignore: file
  • CONTRIBUTING.md: file
  • IMPLEMENTATION.md: file
  • LICENSE: file
  • README.md: file

…他 15 ファイル

補足(想定される構成):

  • src/ や components/ といったTypeScriptソースやUIコンポーネント群
  • scripts/ に生成処理やデプロイ用スクリプト
  • templates/ にHTML/MDテンプレートやスタイル
  • 設定ファイル(環境変数やAPIキーの読み込み)

リポジトリに含まれるIMPLEMENTATION.mdやCONTRIBUTING.mdは、実装方針や外部貢献の手順を示しており、拡張やローカル開発の指針が書かれていると推測されます。READMEはプロジェクト概要と使用方法、導入例を図やスクリーンショットで示しており、ユーザーはGitHubユーザー名を入れるだけでデモを試せるような体験が提供されているようです。

使いどころと改善案

CodeDevsは個人開発者やフリーランスが短時間でポートフォリオを整える場面で有用です。企業の採用ページ向けのカスタム出力や、チームのメンバー紹介ページの自動生成など応用先は広いでしょう。改善点としては、AI生成テキストの編集UIの追加、生成履歴の保存と差分管理、GitHub Actionsなどを使った自動デプロイパイプライン、マルチ言語対応とアクセシビリティ向上、そしてローカル・プライベートリポジトリ対応(認証フローの追加)などが考えられます。

まとめ

短時間で見栄えの良いポートフォリオを自動生成できる実用的なTypeScriptツールです。

リポジトリ情報:

READMEの抜粋: image

CodeDevs

CodeDevs is an AI-powered portfolio generator that automatically creates beautiful developer portfolios from GitHub profiles. It fetches your GitHub data, uses AI to generate professional summaries and highlights, and presents everything in a modern, responsive portfolio website.

Features

  • Automatic Portfolio Generation: Enter any GitHub user…