CASE STUDY / LIVE

Developer Portfolio

ビルド不要の静的構成で、公開開発実績を多言語で伝えるGitHub Pagesサイト。

Problem

開発、学習、資格など多量の情報から、代表作品と技術力を短時間で理解できる構造が必要でした。

HTML・CSS・JavaScriptのみで構成し、プロジェクト情報と翻訳をデータとして管理。PublicリポジトリはGitHub APIから取得し、失敗時はローカルデータへ切り替えます。

canonical、OGP、JSON-LD、sitemap、見出し構造、skip link、キーボード操作、レスポンシブ表示を整備しました。

GitHub Pagesで公開運用できる、多言語・レスポンシブ対応の技術ポートフォリオとして公開しています。

トップページの情報量を抑え、詳細ページへ段階的に案内することで、読みやすさと情報の深さを両立しました。

採用担当者、技術者、商用案件の相談者が短時間で必要情報へ移動できる三層構造を検討しました。トップを要約、Projectsを一覧、Case Studyを詳細として整理しています。

8言語の翻訳データ、GitHub API、障害時フォールバック、静的SEO、キーボード操作をビルド不要の構成に統合しました。

情報を増やしながらトップページを重くしないことと、API障害時にも公開作品を案内できることが主な課題でした。