About this site｜このサイトについて
このサイトの技術スタックをご紹介します。
フレームワーク & インフラ
- Astro 5
- 静的サイトジェネレーター。ページ単位の最適化とゼロJS出力を活かして高速なサイトを構築。
- Vercel
- ホスティング・デプロイ環境。GitHub連携によるプレビューデプロイと本番デプロイを運用。
- TypeScript
- 型安全な開発環境。Astroのフロントマターやユーティリティ関数に全面採用。
スタイリング & フォント
- Tailwind CSS 3
- ユーティリティファーストのCSSフレームワーク。任意値を活用してデザインガイドラインを厳密に反映。
- Montserrat
- 欧文見出しフォント。ローカルWOFF2ファイルとして配信しパフォーマンスを最適化。
- Noto Sans JP
- 和文フォント。Google Fonts経由でプリコネクトを設定して読み込みを高速化。
コンテンツ管理
- microCMS
- Blog・PortfolioページのヘッドレスCMS。APIでコンテンツを取得してビルド時に静的生成。
- Notion
- Resumeページのコンテンツ管理。Notion APIを直接fetchしてビルド時にコンテンツを取得。 NotionのWebhookと連携して、Notion側からの更新をトリガーに再ビルドも可能。
ライブラリ
- Swiper 12
- ポートフォリオ詳細・ノートセクションのカルーセルスライダー。
- Prism.js
- ブログ記事内のシンタックスハイライト。
- rss-parser
- Note.comのRSSフィードを取得してノートスライダーのデータソースに利用。Cronで毎日自動更新。