Astro + Tailwind CSS でつくった、日本語 / 英語切り替え対応のポートフォリオサイトです。 黒背景 + オレンジ/赤/黄のフラットな配色で、プロフィール・作品一覧・ソフトウェア配布・ YouTube / ニコニコ動画 / SoundCloud の埋め込み再生をまとめています。
- 本番URL: https://sakura-portfolio-eta.vercel.app/
- リポジトリ: https://github.com/LiamLech/sakura-portfolio
mainにgit pushすると Vercel が自動でビルド・公開します（手動デプロイ操作は不要）
| ページ | 内容 |
|---|---|
ホーム (/) |
ヒーロー（名前・キャッチコピー）+ 再生できる作品プレビュー3件 |
プロフィール (/about/) |
自己紹介・スキル（未設定なら非表示）・連絡先（未設定なら非表示） |
作品 (/works/) |
音楽・映像・文章の作品一覧。カテゴリー×サブカテゴリー（ボカロ曲か否か）で絞り込み可 |
ソフトウェア (/software/) |
音楽制作用ソフトウェア・その他の一覧。各アイテムは専用の説明ページを持つ |
英語版はすべて /en/ 配下に同じ構成であります（例: /en/works/）。
「メディア」という独立ページは存在しません（Works/Softwareに統合済み）。ただしホームの
再生プレビュー用に media コレクションは引き続き使っています。
src/content/works/ に新しい .json ファイルを追加します（ファイル名 = 自由な英数字ID）。
{
"title_ja": "曲のタイトル",
"title_en": "Song Title",
"thumb": "https://nicovideo.cdn.nimg.jp/thumbnails/xxxx/xxxx",
"category": "music",
"subcategory": "vocaloid",
"links": [{ "label": "ニコニコ動画", "url": "https://www.nicovideo.jp/watch/smXXXXXXXX" }],
"date": "2026-09-05",
"featured": true
}category:"music"|"video"|"writing"（このどれかなら/works/に表示される）subcategory:categoryが"music"のときだけ"vocaloid"か"other"を指定（それ以外は省略可）desc_ja/desc_en: 基本は省略でよい（音楽・映像・文章では説明文は表示しない運用にしている）featured: trueにすると、日付が新しい順で上位3件がホームの再生プレビューにも出る （※ホームに出したい場合は、同じ内容をsrc/content/media/にも追加する必要がある。下記参照）
同じく src/content/works/ に追加しますが、category を "software" にします。
{
"title_ja": "プラグイン名",
"title_en": "Plugin Name",
"desc_ja": "説明文。ここは省略せずに書く（専用ページの本文になる）。",
"desc_en": "Description text (this becomes the body of the dedicated page).",
"thumb": "/images/xxx-placeholder.svg",
"category": "software",
"version": "1.0.0",
"links": [
{ "label": "ダウンロード (Windows)", "url": "https://github.com/.../releases/download/vX.X.X/xxx.zip" },
{ "label": "GitHubで見る", "url": "https://github.com/.../xxx" }
],
"date": "2026-09-05",
"featured": false
}category: "software"にすると、カードのリンクは自動的に サイト内の専用説明ページ （/works/{ファイル名}/と/en/works/{ファイル名}/）になる。linksはそのページの中に表示されるversionを書くとタイトル横にv1.0.0のように表示される（省略可）category: "other"も/software/ページに表示される（音楽制作ソフト以外の雑多な公開物用）- 配布ファイルの置き場所は GitHub Releases を推奨（
gh release createまたは GitHub の Releases 画面から。実例: https://github.com/LiamLech/pith/releases）
src/content/media/ に新しい .json ファイルを追加します。
{
"type": "niconico",
"embedId": "smXXXXXXXX",
"title_ja": "曲のタイトル",
"title_en": "Song Title",
"date": "2026-09-05",
"featured": true,
"category": "vocaloid"
}type:"youtube"（embedIdは動画ID）/"niconico"（embedIdはsm...ID）/"soundcloud"（embedIdはトラックの公開URLそのもの）category:"vocaloid"|"other"（今は表示上の用途は無いが、将来フィルターを復活させる時のために残してある）featured: trueの新しい順で上位3件がホームに表示される- ニコニコの動画情報（タイトル・タグ・投稿日）は
http://ext.nicovideo.jp/api/getthumbinfo/{ID}で、 YouTubeはhttps://www.youtube.com/oembed?url=...&format=jsonで取得できる（投稿日は取れないことがある）
src/data/site.ts を編集する:
name/handle/tagline_ja/tagline_en/bio_ja/bio_en/emailavatar: 画像パス。avatarCreditを書くとプロフィールページの写真下に小さくクレジット表記が出る （ホームのヒーローには出さない仕様）socialLinks: 配列に{ label, url, icon }を追加/削除。iconはSocialLinks.astroのiconsオブジェクトにあるものだけアイコン表示される。無いアイコン名を使うとラベルの先頭2文字が出るskills_ja/skills_en: 空配列なら About ページのスキル欄自体が非表示になる
- 背景は黒ベース（ライト/ダークどちらのテーマでも黒。
--color-bg/--color-bg-elevated） - 主役の3色:
--color-accent-1（オレンジ）/--color-accent-2（赤）/--color-accent-3（黄）。 タグ・SNSアイコン・作品バッジなどは、この3色を順番に使い回すaccentCycleパターンで実装している （特定の色だけに偏らないようにするため） - グラデーションはサイト内で 1箇所だけ（ホームの見出し下の細いバー、
.gradient-rule）。 ボタン・バッジなど他の場所は意図的にすべてフラットな単色にしてある --color-borderはグレーではなく、背景色にオレンジを32%混ぜた色（color-mix()）。 ダークテーマに切り替えても自動で追従する- 角丸は控えめ（
--radius-lg: 0.85rem/--radius-md: 0.5rem）。丸いボタンの多用は避けている （再生ボタンのアイコンだけは例外的に円形）
| コマンド | 内容 |
|---|---|
npm install |
依存パッケージのインストール |
npm run dev |
開発サーバー起動（http://localhost:4321） |
npm run build |
dist/ に本番ビルドを出力 |
npm run preview |
ビルド結果をローカルで確認 |
開発サーバーを起動したまま content.config.ts（スキーマ）を変更すると、まれに
「The collection "works" does not exist or is empty」という警告が出たまま直らないことがある。
その場合は npx astro dev stop してから npm run dev で再起動すれば直る
（npm run build は毎回まっさらな状態から実行されるので、この問題は起きない）。
GitHub (LiamLech/sakura-portfolio) → Vercel の自動デプロイ構成。main に push するだけで
本番サイトが更新される。Vercel のドメインは Project Settings → Domains から変更できる
（*.vercel.app は小文字・ハイフンのみ。大文字やアンダースコアは使えない）。
独自ドメインを取得した場合は、Vercel の Domains でドメインを追加したあと、
astro.config.mjs の site と public/robots.txt の Sitemap: 行を新しいURLに更新すること
（OGPとサイトマップの生成に使われる）。
このプロジェクトは Astro のハイブリッドレンダリングにそのまま乗せ替えられる構成にしてある。
npx astro add vercelでアダプタを追加- 動的にしたいページ/APIだけ
export const prerender = false;を追加（他のページは静的のまま） src/pages/api/*.tsに API エンドポイントを追加（例: お問い合わせフォームの送信処理）- 必要に応じて Turso / Vercel Postgres / Supabase などのDBや、headless CMS を追加
サイトを作り直す必要はなく、同じリポジトリ・同じデプロイ先のまま拡張できる。
未実装だが、src/content.config.ts にコメントで雛形を残してある。
src/content/blog/ja/*.md のような Markdown コレクションを追加すれば、いつでも組み込める。