TECHNICAL ARTICLE
多言語静的ポートフォリオの設計
ビルド工程を増やさず、情報量、多言語、公開データ、障害時表示を管理するための設計。
データと表示を分ける
プロジェクトと翻訳をJavaScriptデータとして管理し、カードのHTMLを共通レンダラーで生成します。内容追加時の重複編集を減らせます。
Publicデータだけを取得する
GitHub APIには認証トークンを埋め込まず、Publicリポジトリと公開イベントだけを問い合わせます。Privateリポジトリは取得対象にしません。
失敗を前提にする
APIが失敗してもセクションを消さず、保存済みの案内またはGitHubプロフィールへの導線を表示します。
SEOをHTMLに残す
title、description、canonical、OGP、JSON-LD、sitemapは静的HTMLとXMLに持たせ、JavaScriptが動かない環境でも主要情報を伝えます。
トップを入口にする
トップでは要約だけを見せ、記事からケーススタディ、プロジェクト詳細、商用相談へ段階的に案内します。