Personal Portfolio Website

Astro + TypeScript + Tailwind CSS で構築した静的ポートフォリオサイトです。
経歴・経験・資格、ポートフォリオ、ブログなどが含まれており、日英表示も可能としています。

技術スタック

• Framework: Astro 4.15.7
• Language: TypeScript 5.6.3
• Styling: Tailwind CSS 3.4.17
• Blog: Astro Content Collections + Markdown
• Deploy: GitHub Actions → GitHub Pages
• Form: Formspree

実装のポイント

テーマ

• 無料・速い・どの端末からでも見やすい・見たいページに飛びやすい・かっこいい

UI/UX

• ダークテーマ + 蛍光水色アクセント: 黒基調でshadcn/ui風のアクセント
• 宇宙風グラデーション背景: 固定背景のradial/linearグラデーション
• スクロールアニメーション: Intersection Observer によるフェードイン
• レスポンシブ:
  • スマホ: 横スクロール＋スナップのカード
  • PC: 3列グリッド
• タブUI: 経歴・経験・資格の切り替え
• 画像: 1920×1080想定のアスペクト比(16:9)

技術

• URLベースi18n: /ja と /en で言語切り替え
• 静的サイト生成: getStaticPaths による事前レンダリング
• コンポーネント化: Card / Section / ProfileSection の再利用
• 型安全性: TypeScript の厳密な型チェック
• パフォーマンス: 固定背景、CSSアニメーションの整理
• アクセシビリティ: セマンティックHTML、ARIAの利用

ライセンス

MIT