ポートフォリオサイトをつくりました
ポートフォリオサイトを作成しました。
2023年4月から正社員として働き始めましたが、実はポートフォリオサイトがないことに気づいたんです。 WantedlyやLinkedInでも十分かなぁとも考えましたが、スキル向上も兼ねて1から作ってみることにしてみました。
制作の流れ
まずはFigmaでデザインカンプを作成し、それを元に各ページを作成することにしました。
Figmaを使うのは初めてでしたが、操作がシンプルだったので、スムーズに作業を進めることができました。 画面遷移や共通コンポーネントが作成できたりと便利な機能もあったので、使いこなせたら何かと役立ちそうです。
Figmaを使い始めるにあたって、以下の記事が参考になりました。
サイトには以下の4つのページを設けました。
- 自己紹介ページ（ホーム）
- 技術スキルページ
- プロジェクト一覧ページ
- 投稿一覧ページ（Qiita、はてなブログ、note）
デザインが決まってからは、Next.jsでサイトを実装していきました。
UIフレームワークとしてChakra UIやNextUIを試してみましたが、結局CSSの勉強も兼ねてTailwindCSSを使うことにしました。 レスポンシブ対応に苦戦してCSSの奥深さを感じました。
使用した技術は以下の通りです。
- Next.js
- TypeScript
- Tailwind CSS
- Vercel（デプロイ）
工夫した点
投稿一覧ページでは、Qiita、note、はてなブログのRSSフィードを取得して一覧表示しています。 はじめはリクエストごとにデータを取得していたので表示に時間がかかっていましたが、投稿ページをISRにして24時間おきにページを再生成することで、表示速度が向上しました。
ちなみに、ISR（Incremental Static Regeneration）とは、静的サイトの特定の部分を必要に応じて更新・再生成する技術のことです。 これにより、ページの表示速度が向上し、サーバーへの負荷も軽減されます。今回はVercelでデプロイしたため、ISRを利用できました。 （GitHub Pagesのような静的サイトのホスティングサービスだと、ISRのような動的な機能は使えません）
感想
デザインカンプから実装、デプロイまで一貫して行ったので楽しみながら作ることができました。 カンプがあることで作業がスムーズに進みましたが、予定と違うデザインになることもあり、初めから上手くはいかないんだぁと改めて実感しました。
今後はダークモード対応を始め、ちょくちょく更新していく予定です。
着手から1ヶ月ほどかかりましたが、いろいろ経験できたので作ってよかったと思います。 404ページも工夫したので（？）ぜひ見てみてください。
以下のリンクからソースコードもご覧いただけます。 github.com
