新しくポートフォリオサイトを作り直しました。自分のできる範囲で新しい技術を取り入れています。特にこだわったポイントは以下の４点です。

デザインはスターターキットを参考に

デザインは「Portfolio Starter Kit」から着想を得てアレンジしながら作ってみました。自分でデザインから作るとなるとなかなか大変ですが、こうしたキットを参考にすることで開発工数を下げることができました。

MUI・CSS modulesで見た目を整える

今回初めてMUIを導入してみました。MUIを選ぶ決め手になったのは、React(Next.js)と一番相性のいいCSSフレームワークかなと思ったからです。プレーンなCSSの記述に関しては、これまでだいぶ書いてきたので一通りの自信はあります。一方で、Reactで書くCSSとなると若干慣れが必要なのだろうと感じています。MUIの使えそうなコンポーネントを利用しつつ、比較的従来の記述方法と変わらないCSS modulesをベースに見た目を整えていきました。

Storybookの活用

コンポーネントも自分にとっては目新しい概念になります。Next.js(React)には他にもたくさん覚えることがあると思いますが、とりあえず今はSSGにフォーカスしてコンポーネントの理解を深めるようにしました。まだまだキャッチアップが十分ではありませんが、今後はStorybookに関しても学習を進めていきます。

APIの活用

ヘッドレスCMSをよく聞くようになったので、トップのHistoryや『/skills/』、『/works/』以下の各項目などをmicroCMSで管理して作ってみました。
また、これまではアウトプットをレンタルサーバー上のWordPressで行っていましたが、Zennに投稿して『/posts/』以下に一覧表示・詳細表示させるように変更してみました。今後のアウトプットはZennで行う予定です。※古い方のポートフォリオサイト、アウトプットのサイトも残していますので、宜しければ下のリンクからご確認ください。

サイトはこちら

Works