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

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