Neo-brutalist portfolio kit（ネオ・ブルータリストポートフォリオキット）
本番サイトから抽出された、完全にテスト済みのポートフォリオテンプレートです。すべてのファイルは assets/ にあります。新しい Vite + React プロジェクトにコピーし、プレースホルダーデータを所有者のものに置き換えて、そのままデプロイできます。このキットは vite build が一から成功し、コンソールエラーなくレンダリングされることが確認されています。
含まれるもの
- デザインシステム — フラットな彩度の高い色、3px ボーダー、ソリッドオフセットシャドウ、傾いたタイル（
assets/src/brutal/brutal.css、.nbスコープ下）。 - セクション — ローダー · 固定ナビゲーション（スクロールスパイ、テーマ + 言語 + サウンド切り替え、モバイルシート） · 一文字ごとにホバー効果のあるヒーロー · アバウト · フルスクリーンのケーススタディオーバーレイ（前/次、キーボード、フォーカス復元）付きワークグリッド · スタック · アコーディオン形式の経験 · お問い合わせフォーム · ライブローカル時計付きフッター。
- バイリンガル + RTL — 英語/アラビア語、論理 CSS プロパティ使用、ライト/ダーク、フラッシュ無し。
- サウンド — 生成型 124 BPM シンセウェーブループとホバー/クリック効果音（ヒーローの各文字がペンタトニックノートを再生）。オーディオファイル不要、ライセンス不要。
- アシスタント —
api/chat.jsをバックエンドとするフローティングチャット：所有者自身のデータに対する RAG（アラビア語対応 BM25 + Gemini 埋め込み）、根拠のある回答、モデルフォールバック、同一オリジン + レート制限。API キーがブラウザに到達することはありません。 - デプロイ設定 —
vercel.json（SPA リライト）、.vercelignore。
クイックスタート（新規プロジェクト）
npm create vite@latest my-portfolio -- --template reactを実行し、assets/package.deps.jsonにリストされている依存関係をインストールします（i18next react-i18next lenis framer-motion lucide-react @emailjs/browser @google/genai）。assets/の内容をプロジェクトルートにコピーします（src/をマージ、index.htmlとvite.config.jsを置き換え、api/、vercel.json、.vercelignoreを追加）。デフォルトのsrc/App.css/index.cssのインポートは削除してください — このキットはbrutal.cssで独自の CSS を提供します。- 所有者のデータを入力します（カスタマイズする項目を参照）。
- ポートレートを
src/Imgs/portrait.jpgに、プロジェクトのスクリーンショットをpublic/projects/（WebP、幅 ≤1280px）に追加します。 npm run dev→ ライト/ダーク、EN/AR、375px と 1440px を確認します。npx vite buildが成功する必要があります。- デプロイ：
references/deploy-and-secrets.mdを参照してください。
カスタマイズする項目（コンテンツを含む唯一のファイル）
| ファイル | 入力内容 |
|---|---|
src/data/siteFacts.js | 名前 (EN/AR)、ヒーロー名の分割、ナビゲーションのイニシャル、場所、タイムゾーン、連絡先リンク、EmailJS 公開 ID、技術スタックの列、ツール |
src/data/projectsMeta.js | プロジェクト：タイトル、タグ、ライブ URL（または null）、order、i18nIndex |
src/data/projectImages.js | プロジェクトごとのスクリーンショット；最初の画像がカードカバー |
src/i18n/locales/{en,ar}.json | すべてのコピー — ヒーローステートメント、アバウトテキスト/統計、ハイライト、経験、プロジェクトごとのサブタイトル/説明/画面ラベル、プロジェクトの「種類」、お問い合わせテキスト、アシスタントプロンプト |
index.html | <title>、description、ファビコン |
入力時のルール：所有者のみが確認できる事実を記述すること。クライアント、数値、日付、リンクを決して捏造しないこと。技術名は両言語で英語のままにすること。ロケールファイル内の projects.items[i] は i18nIndex と一致している必要があります。
デザイン言語（概要 — 正確な値は references/design-system-spec.md にあります）
- フラットカラーのみ。 グラデーション、グロー、ぼかし、ガラス、紫色の「AI」ルックはなし。奥行き = ボーダー + ハードシャドウ。
- ボーダー
3px solid var(--nb-line)· シャドウ ソリッドオフセット（5px/8px 8px 0、ホバー時12–14px） · 傾き-2°…2°、ホバー時に水平に戻る。 - タイポグラフィ： Bricolage Grotesque 800 大文字を見出しに、Space Grotesk を本文に、JetBrains Mono 大文字をラベルに。アラビア語：Cairo 700–900、トラッキングなし、大文字なし。
- コントラストルール： 彩度の高い塗りつぶし上のテキストは常に
#111、ボーダーも両テーマで#111；ニュートラルなサーフェスのみテーマに応じて反転します。 - セクションのリズム： ヒーロー 黄 → アバウト 紙 → ワーク 青 → スタック 紙 → 経験 ライラック → お問い合わせ ピンク → フッター 黒。
--nb-*トークンを変更して色を変更しますが、リズムは維持してください。
エンジニアリングルール（編集時はこれらを守ってください）
- データ属性で表示状態を制御（
data-reveal→data-in）、クラスは使用不可 — React の再レンダリングはクラスを上書きします。 - ケースオーバーレイには
data-lenis-preventが必要、さもないと Lenis が内部のホイールをブロックします。スクロール可能な他のオーバーレイ（アシスタントチャット、モバイルシート）でも同様です。 - 論理 CSS を使用（
inline-start/end、margin-inline）、RTL で矢印を反転、数値カウンターをdir="ltr"でラップ、アラビア語にレタースペースを適用しない。 - 本番コードから
localhostを絶対に呼び出さない — ブラウザがユーザーにローカルネットワークの許可を求めます。API は、その URL 環境変数が設定されている場合のみ呼び出してください。 - パフォーマンス： 画面外のセクションは遅延読み込み；WebP 画像に
loading="lazy"；transform/opacityのみをアニメーション；prefers-reduced-motionを尊重；公開パスに重い 3D/UI ライブラリを使用しない。 - シークレット： API キーはサーバー環境変数（
GEMINI_API_KEY）のみに配置。シークレットの前にVITE_を付けない（ブラウザにバンドルされます）。公開 EmailJS ID はクライアントコードで問題ありません。 - アクセシビリティ： 可視フォーカスリング、スキップリンク、トグルに
aria-pressed、オーバーレイにrole="dialog"+ フォーカス復元、縮小動作のサポート。
「完了」と言う前に確認すること
npx vite buildが成功すること。- ライト + ダーク、EN + AR（RTL）、375px と 1440px で水平オーバーフローがないこと。
- ケーススタディを開く → Prev/Next/
Esc、マウスホイールで内部をスクロールできること。 - ヒーロー名とコントロールをホバー（1 回クリック後）してサウンドを確認；トグルが永続化すること。
- アシスタントがデプロイされている場合：お問い合わせに関する質問、全プロジェクト一覧の質問、データに含まれない質問（「知らない」と答える必要がある）をすること。
- プレビューペインは非表示（アニメーションが一時停止）の場合があります — 2 番目のスクリーンショットまたは実際のブラウザで動作を確認してください。
デザインシステムアーティファクト
DESIGN-SYSTEM.md— 概要 + リンク付きパレット/ルールテーブル。design-system/tokens.cssおよびtokens.json— React キット外で使用するためのトークン。design-system/styleguide.html— リビングスタイルガイド（ブラウザで開く）：コントラスト付きパレット、タイプスケール、シャドウ/傾きスケール、すべてのコンポーネント、モーション、Do/Don't。
参考文献（必要なときに読んでください）
references/design-system-spec.md— 正確なデザインシステム：原則、すべての色とその配置、コントラスト数値、タイプスケール、スペーシング、シャドウ/ボーダー/傾きスケール、モーショントークン、z-index、ブレークポイント、コンポーネントの構造と状態。references/design-system.md— クラスカタログ、セクションのレシピ、色の変更やセクションの追加方法。references/interaction-and-sound.md— ホバー/プレス動作、リビールシステム、音楽 + SFX のアーキテクチャとチューニング。references/i18n-and-rtl.md— ロケール構造、キーマップ、アラビア語タイポグラフィ、RTL チェックリスト。references/assistant-rag.md— チャットエンドポイントの仕組み、ナレッジチャンク、検索とプロンプトのチューニング方法。references/deploy-and-secrets.md— GitHub + Vercel の手順、環境変数、キーローテーション、トラブルシューティング。