ポートフォリオサイト
概要
JAMstackを活用してポートフォリオサイトを構築しました。 microCMSで登録したコンテンツをもとに、ホームページと開発実績ページの2画面で構成されています。
開発に至った経緯
もともと、簡易的なポートフォリオサイトを作っていましたが、クライアントレンダリングでパフォーマンスが悪い、プロジェクト内のJSONファイルにコンテンツを保存しているためコンテンツ更新が手間という課題があり、より満足度の高いポートフォリオサイトを作ろうと思い、開発に至りました。
開発人数・開発期間
1人で、 2カ月
使用言語など
Next.jsTypescriptreact-image-galleryreact-vertical-timelinemicrocmsTailwind CSSVercelEmailJSReact.jsThree.js
工夫した点
統一感のある配色とレイアウト
サイトのテーマカラーは読みやすさを鑑みて水色にし、それ以外はモノトーンにすることで、統一感のあるデザインにした。
印象的なファーストビュー
全体的にシンプルで統一感のあるデザインのため、ファーストビューは、Three.jsを使用して印象的な見た目にしました。
microCMSでのコンテンツ管理
インターネットに繋がっていれば、パソコン、タブレット、スマホなど、デバイスを問わずにどこからでもコンテンツを追加、更新できるようにしました。
パフォーマンスの高さ
事前にmicroCMSのコンテンツを取得し、生成した静的ページを配信することで表示パフォーマンスを高くしました。
更新をWebサイトに即時反映
On-demand ISRというレンダリング手法を採用することで、micro CMSでコンテンツ更新を行ったタイミングでVercelにWeb hook通知が送られ、再ビルドが走るようにしました。