このサイトについて

ポートフォリオは、小さなテンプレートと構造化 JSON から完全な HTML5 文書として生成される。Python 3 標準ライブラリだけのビルダーが各言語版を事前生成し、ブラウザ側でページを組み立てない。

main ブランチから GitHub Pages で配信する。ポートフォリオの背後に CMS、アプリケーションフレームワーク、データベース、サーバー側アプリはない。

実行時

HTML5 · CSS · 素の JavaScript

ビルド

Python 3 · JSON · HTML テンプレート

ホスティング

GitHub Pages

英語、香港繁体字中国語、簡体字中国語、日本語、ドイツ語、フランス語、ロシア語を別々の静的版として生成し、それぞれに canonical URL、hreflang の代替リンク、言語別メタデータを持たせる。

文学テキストは通常の UI 文言より厳格に扱う。指定された作品では繁体字中国語を正本とし、簡体字版は文字体系だけを変換してハッシュを照合する。翻訳は専用の検証で各行と連の構造が保たれているか確認する。

ロケール

en-GB · zh-Hant-HK · zh-Hans · ja · de · fr · ru

文学テキスト

OpenCC 補助 · ソースハッシュ · 行構造の検査

メタデータ

canonical · hreflang · Open Graph

CSS Grid、subgrid、container queries、logical properties、custom properties、clamp() による流動的な寸法を使う。メディアクエリは保守的なフォールバックにとどめ、対応ブラウザでは各要素が自身の利用可能幅に応じて組み替わる。

書体は WOFF2 を自前配信する。欧文本文は主に EB Garamond、メタデータは Courier Prime／Cousine、繁体字中国語と日本語は Shippori Mincho、簡体字中国語は Noto Serif SC、香港字形のごく小さな欠落は I.Ming の小さなサブセットで補う。CJK サブセットは fontTools と Brotli で再構築し、Noto のソースはコミットと SHA-256 で固定している。

レイアウト

Grid · subgrid · コンテナクエリ · 論理プロパティ

書体

EB Garamond · Courier Prime · Cousine · Shippori Mincho · Noto Serif SC · I.Ming

配色

明色／暗色 · prefers-color-scheme

意味的なランドマーク、単一の主要見出し、スキップリンク、見えるキーボードフォーカス、完全な言語名、十分な大きさのタッチターゲットを用意する。reduced-motion、higher-contrast、forced-colour といった OS／ブラウザ設定も尊重する。

読書設定ではサンセリフ、文字拡大、文字間隔、行長、簡略レイアウト、モーション低減、高コントラストを切り替えられる。すべてプログレッシブエンハンスメントで、設定はブラウザ内にだけ保存する。

読書設定

サンセリフ · 大きな文字 · 間隔 · 行幅 · 簡素化 · 動き · コントラスト

保存

localStorage のみ

検査

独自の構造監査 · axe-core ブラウザ監査

写真と研究図版は picture/srcset で WebP と JPEG の候補を用意し、寸法と sizes 属性を明示する。先頭画像を優先し、それ以外のページ下部の画像は遅延読み込みと非同期デコードを使う。

ページ下部のセクションでは content-visibility を利用でき、View Transitions と scroll-linked motion は任意のプログレッシブエンハンスメントに限る。動きを減らす設定が指定されればアニメーションを止める。

画像

picture · srcset · WebP · JPEG

読み込み

寸法指定 · 遅延読み込み · 非同期デコード

段階的 CSS

content-visibility · View Transitions · スクロールタイムライン

生成ページが最新か、ロケールのスキーマが一致するか、文学テキストの構造が保たれているか、アクセシビリティのランドマークと操作要素が揃っているか、ローカルリンクとページ内アンカーが正しく参照先に到達するか、画像に代替テキストがあるか、JavaScript の構文が正しいかをリポジトリ内で検査する。

ブラウザ QA では、複数言語・複数ビューポート幅でのレイアウト検査、axe-core によるアクセシビリティ監査、HTML 検証も行う。GitHub Actions では push と pull request のたびに軽量な検査を先に実行し、通過後にブラウザ検査を行う。GitHub Pages は main から同じ静的ファイルを独立して配信する。

リポジトリ検査

生成状態 · 多言語整合性 · アクセシビリティ · リンク／資源 · JS 構文

ブラウザ QA

Playwright · axe-core · html-validate

公開

GitHub Actions · GitHub Pages