CASE STUDY / LIVE
Developer Portfolio
ビルド不要の静的構成で、公開開発実績を多言語で伝えるGitHub Pagesサイト。
- HTML
- CSS
- JavaScript
- GitHub API
- SEO
Problem
開発、学習、資格など多量の情報から、代表作品と技術力を短時間で理解できる構造が必要でした。
Architecture
HTML・CSS・JavaScriptのみで構成し、プロジェクト情報と翻訳をデータとして管理。PublicリポジトリはGitHub APIから取得し、失敗時はローカルデータへ切り替えます。
SEO & Accessibility
canonical、OGP、JSON-LD、sitemap、見出し構造、skip link、キーボード操作、レスポンシブ表示を整備しました。
Result
GitHub Pagesで公開運用できる、多言語・レスポンシブ対応の技術ポートフォリオとして公開しています。
Lessons
トップページの情報量を抑え、詳細ページへ段階的に案内することで、読みやすさと情報の深さを両立しました。