フォリオテーマデザインシステム
方向性
最高の開発者ブログとポートフォリオ（leerob.com、overreacted.io、brittanychiang.com、antfu.me）のように、個人ウェブサイトを構築します。一人の人物、一人の声、そして何よりも執筆を重視します。サイトは、整頓されたノートのように、静かで高速に感じられ、テキストと競合するものは何もないようにします。構築したものや学んだことを、具体的な数字とコードで示します。人物のストック写真、マーケティング的な主張、装飾的な効果は使用しません。
基本原則
./theme/views/とテーマのarticle、blog、code、text、blogレイアウト、およびmainビューで提供されるマークアップとクラスのみを使用します。- システムのサンセリフ、セリフ、モノスペースフォントと、既存の
--pico-*変数を使用します。 - 温かみのあるニュートラルカラー（
#2B2924、#6B665E、#E4E0D9、#FBFAF8）と緑色（#1F7A4D、ダークモードでは#4FBF87）のみをリンクと最初のボタンに使用し、コードブロックは常にダークのままにします。 - ライトモードとダークモードをサポートします。テーマ可能な背景に固定のライトカラーを配置しないでください。
- シャドウの代わりに
0.5remの角丸と細い境界線を使用します。
構造
- ホーム（
page）: アバター画像、役職をサブタイトル、1文の自己紹介、2つのボタンからなるhero、listレイアウトのblog要素（タイトル「最近の執筆」）、2カラムのプロジェクトcards、および連絡先用のctaを含みます。 - ライティング（
page）: 何について書いているかの短いメモと、このページを親ページとする全投稿のblogリストを含みます。 - 投稿（
blog）: ライティングの下に配置され、ツリー内で新しいものから順に並びます。各投稿はarticle要素（タイトル、2文のリード、カバー画像）で始まり、その後にtext、レベル2のheading、code要素が続きます。 - アバウト、プロジェクト、ユーズ、ナウ ページ（
page）: レベル1のheadingで始まります。アバウトにはverticalタイムラインの職歴、ユーズにはカテゴリ別のツールリスト、ナウには最終更新日付と今月の活動内容を含めます。 - ホームページの
folio::profile設定を、名前、役職、会社、場所、正方形の写真、1文の自己紹介、メールアドレス、プロフィールリンクで埋めます。
コンポーネント
- 投稿リード: 問題と読者が得られるものを述べる2文。リストカードでは導入として使用します。
- 見出し: 短く具体的なレベル2見出し（「バックフィルをバッチで実行」）。レベル3はその下にのみ使用します。アウトラインが表示されるように、少なくとも2つ使用します。
- コード: スニペットごとに1つの
code要素。言語を設定し、最大15行程度、実際に実行可能なコードとします。 - コールアウト: テキスト要素内の GitHub アラート（
[!NOTE]、[!TIP]、[!WARNING]）。1投稿あたり1つまたは2つまで。 - プロジェクト: プロジェクトごとに1つのカード。名前をタイトル、リポジトリまたはデモをリンク、何をするかの1文（スター数、インストール数、ユーザー数などの数字を含む）、そしてスタックを別行にインラインコードピルとして表示します（例:
`PHP` `Laravel`）。 - 経歴: タイムライン項目。「2023 — 現在」のようなラベル、「役職、会社名」のタイトル、数字を含むインパクトの1文、スタックをコードピルとして表示します。
- フィギュア: 最大3つの主要数値を表示するための
figuresレイアウトのcards要素。
アクセシビリティ
- スキップリンク、セマンティックな見出し、ラベル付きモード切り替え、表示可能な
:focus-visibleアウトラインを維持します。 - 両方のカラースキーム（コードトークンを含む）で WCAG 2.2 AA コントラストを維持します。
- カバー画像と名前リンクには、ターゲットの後に意味のある代替テキストを記述します。「ここをクリック」は使用しません。
コンテンツ
一人称で書き、読者を「あなた」と呼びます。具体的に記述します。バージョン、数字、失敗を明確に挙げます。投稿は背景説明ではなく問題提起で始め、次に何をするかで締めくくります。タイトルは平易で説明的にします（「4億行のテーブルでダウンタイムゼロのマイグレーション」）。バズワード、「単に」、「ちょうど」、「つなぎの導入」は避けます。