こんにちは、フリーランス/フロントエンドデベロッパーのHiromiです。
TL;DR
前回ペライチのページを作成してから、かなり時間が経ってしまいましたが
やっとポートフォリオサイトが本公開できました！
使用した技術
- JavaScriptフレームワークは、Nuxt.js
- CMSは、Contentful
- ホスティングおよびフォーム機能は、Netlify
- CSSフレームワークは、tailwindcss
- アニメーションは一部でanimejs
- バージョン管理は、gitlab
をそれぞれ使用して、完全に静的ページ（Jamstackの概念）で作成しました
それぞれ選定した理由や感想
基本的には、受託案件ではすぐに使えないだろうなぁという技術を積極的に導入しました。
JSフレームワーク / Nuxt.js
https://ja.nuxtjs.org/
今回は静的ページとして作成する予定だったので、静的サイトジェネレーターとして使用しました。
Nuxt自体は案件でも今までも使用したりしてきてますが、小規模のソロ案件が多かったので
今回、あえてコンポーネントを分けたりしっかり作ってみたので、学びが多かったです。
また元々ここ２～３年ほどは特に指定がない場合や小規模案件などでは
PostCSSとPugで制作してきており、今回もそうしています。
Nuxt(Vue)ではどちらもすぐ導入出来るので、ソース書く度に愛が膨らみます（笑）
ヘッドレスCMS / Contentful
https://www.contentful.com/
元々自前のJSONファイルで実装していた実績やプロフィールなどを
せっかくなのでJamstack導入しとこうと途中、Contentfulに入れてみました。
他社サービスも検討しましたが、私のポートフォリオ規模であればContentfulで十分かなと。
CMSの比較はこちらの記事がわかりやすく、選定時に参考にしました。
JAMstack Tools and The Spectrum of Classification | CSS-Tricks
今後ブログページを作成しようかなと思っているのですが
そっちはContentfulでもありですが、せっかくなのでREST APIあたりでやろうと思っています。
ホスティング・フォーム機能 / Netlify
https://www.netlify.com/
ペライチポートフォリオから引き続きNetlify使用です。
時々サーバー速度がぐっと落ちるのが若干気になるのですが、
Netlify Formsが楽すぎるので、一旦は続投です（とはいえ実装時は苦戦しましたが＞＜ｗ
雑感
せっかく自分で自由にできるから、とデザインから自力で行い
普段の受託案件では導入しづらい技術を積極的に取り入れました。
どうしても仕事のほうが優先になってしまったのもあり、かなり時間かかりましたが
１サイトでいろいろと学習しつつ楽しく導入出来ました。
まだまだそれぞれ改善の余地はあるとは思いますが、概ね満足です