概要
irohamo site は、自分の制作物、技術的な取り組み、三味線を含む活動を一つの場所に整理するために作っているポートフォリオサイトです。
単に作品を並べるだけではなく、「何を作ったか」「なぜ作ったか」「どこを担当したか」が伝わるように、Works / Articles / Mentions をコンテンツとして管理できる構成にしています。
目的
- 制作物を継続的に追加できる場所を作る
- ハッカソン、アプリ開発、低レイヤー学習などの活動を横断して見せる
- GitHub や SNS だけでは伝わりにくい、制作背景や担当領域を補足する
- 技術者としての側面と、三味線プレイヤーとしての側面を同じサイト上で自然に扱う
実装
Astro の Content Collections を使い、作品ページを Markdown / MDX で管理しています。各 work は frontmatter にタイトル、説明、公開日、タグ、画像を持ち、一覧ページと詳細ページの両方で再利用されます。
トップページは以下のセクションで構成しています。
- Hero: プロフィール画像、ロール、SNS 導線
- Background: 学歴・所属・現在取り組んでいること
- Works: 制作物一覧
- Articles: 技術記事・メモ
- Mentions: 外部で言及された活動や実績
- Contact: 連絡導線
こだわったこと
コンテンツを増やしやすい構造
ポートフォリオは一度作って終わりではなく、作品が増えるたびに更新されるべきものだと考えています。そのため、ページを直接増やすのではなく、src/content/works に Markdown / MDX を追加するだけで作品ページとして表示できるようにしています。
作品の文脈を伝えること
一覧カードでは短く、詳細ページでは背景・担当・技術・結果まで書けるようにしています。ハッカソン作品、個人開発、音楽関連ツールなど、種類の違う制作物でも同じフォーマットで読みやすくなることを意識しました。
軽く、静的に、保守しやすく
Astro を採用することで、基本は静的サイトとして高速に配信しつつ、必要に応じて Preact や MDX コンポーネントを使える構成にしています。今後インタラクティブなデモや埋め込みを追加しても、サイト全体を複雑にしすぎない設計です。
使用技術
- Astro
- Markdown / MDX
- Content Collections
- HTML / CSS
- Preact
今後追加したいこと
- 各作品ページへのスクリーンショットやデモ動画の追加
- 制作物ごとの GitHub / App Store / デモリンク整理
- Articles の拡充
- ShamiScore など長期開発プロジェクトの進捗ログ
- レスポンシブ表示とアクセシビリティの細部改善