Astro 5 と React アイランドで構成したモダンなポートフォリオサイトです。ゲーム作品、技術スタック、ライトニングトーク資料、Qiita の新着記事（ビルド時取得）を掲載しています。
- フレームワーク: Astro 5 — 静的出力、ファイルベースのルーティング
- インタラクティブ: @astrojs/react 経由の React 19（カルーセル、ヘッダー、各ページ、ダイアログなど）
- スタイル: Tailwind CSS 3.4 +
src/styles/globals.cssのデザイントークン - UI: shadcn 系コンポーネント（Radix UI プリミティブ: Dialog、Sheet など）
- アイコン: Lucide React
- カルーセル: Swiper 12
- TypeScript（strict）、パスエイリアス
@/→src/ - デプロイ: gh-pages で
dist/を公開
/
├── public/ # 静的アセット（ビルドで dist にそのままコピー）
│ ├── brand/ # PWA アイコン（logo192 / logo512）
│ ├── images/
│ │ ├── games/ # ゲームサムネイル
│ │ ├── icons/ # 技術スタック・SNS（Qiita など）
│ │ └── profile/
│ ├── favicon.ico
│ ├── manifest.json
│ ├── robots.txt
│ └── .nojekyll # GitHub Pages 用
├── src/
│ ├── components/
│ │ ├── pages/ # ページ単位の React アイランド（Home、About など）
│ │ └── ui/ # 共通 UI（button、card、dialog、sheet など）
│ ├── data/ # games.json, techStack.json, ltData.json, aboutSections.ts
│ ├── layouts/
│ │ └── Layout.astro # ベースレイアウト、フォント、グローバル CSS
│ ├── lib/ # qiitaFeed.ts、utils（cn）など
│ ├── pages/ # Astro のルート
│ │ ├── index.astro
│ │ ├── about.astro
│ │ ├── tech.astro
│ │ ├── talks.astro
│ │ └── game/[id].astro
│ ├── styles/globals.css # CSS 変数（ライトテーマ既定、.dark 用トークンあり）
│ ├── types/
│ └── utils/siteRoot.ts # import.meta.env.BASE_URL（GitHub Pages の base）に追従
├── astro.config.mjs
├── tailwind.config.mjs
├── tsconfig.json
└── components.json # shadcn のパス・スタイル設定
依存関係は pnpm（pnpm-lock.yaml）で管理しています。npm でも問題なく動きます。
pnpm install # または: npm install
pnpm dev # または: npm run dev
pnpm build # または: npm run build （astro check + astro build）
pnpm preview # または: npm run preview
pnpm deploy # または: npm run deploy （ビルド後に dist を gh-pages ブランチへ）deploy は predeploy → build のあと、dist を公開します。
- 開発・本番の既定はサイトルート
/想定です。siteRoot()とアセットパスは Astro のimport.meta.env.BASE_URLに合わせます。 - GitHub Pages のプロジェクトサイト（
https://user.github.io/repo-name/）では、astro.config.mjsにbase: '/repo-name'を設定し、siteも Pages の URL に合わせてください。
現在の設定例: site は https://44yyp9.github.io（必要に応じて変更）。
- ほぼ静的 HTML — 必要な箇所だけハイドレーション（フル SPA より初回表示が軽い想定）
- レスポンシブ — モバイルは Sheet（スライドオーバー）、デスクトップはピル型ナビ
- ヘッダー — GitHub / Qiita リンク（デスクトップはバー、モバイルはシート下部）
- ホーム — ヒーロー、Swiper スポットライト、作品グリッド、Qiita セクション（
src/lib/qiitaFeed.ts→ ビルド時に Qiita API v2） - お問い合わせ — Radix Dialog のフォーム
- アクセシビリティ — ランドマーク、アイコンのみの操作にはラベル
- タイポグラフィ — Outfit + BIZ UD Gothic（
Layout.astroを参照）
| ページ | パス | 内容 |
|---|---|---|
| ホーム | / |
スポットライト、作品グリッド、Qiita 記事 |
| About | /about |
プロフィール・セクション（aboutSections.ts） |
| Tech Stack | /tech |
カテゴリ別スキル（techStack.json） |
| Lightning Talks | /talks |
スライド埋め込み（ltData.json） |
| ゲーム詳細 | /game/[id] |
作品ごとのページ（games.json） |
既定 UI はライトでニュートラルなベースに、バイオレット系のアクセントです。トークンは src/styles/globals.css の HSL 形式 CSS 変数（--background、--primary、--card など）で、Tailwind（tailwind.config.mjs）から参照しています。将来ダークモードを有効にする場合は .dark ブロックを利用できます。
以前は Create React App + Material UI でした。今回の構成では、カルーセル・メニュー・フォームなど効果が大きい部分に React を残し、事前レンダーしたページを配信して SEO と表示速度を優先しています。レガシーの Front/react_app ツリーはこのリポジトリには含めていません。
個人用ポートフォリオ — 無断転載・再利用は禁止です。
SG