3年くらい「ポートフォリオ作りたい」って言ってた気がします．お盆休みの2週間でとりあえず作ってみました．

ページ構成とデザインで参考にさせてもらったのが以下のサイトです．

• 1heisuzuki.com
• https://ittetsumatsuoka.com

技術構成

• Next.js
• TypeScript
• react-markdown
• React Syntax Highlighter
• Framer Motion

スタイルはCSS ModulesでSass(SCSS)を書きました．シンプルなサイトにしたかったし，特にTailwindに造詣もなかったのでscopedなCSSならええかということで．

恥ずかしながら個人開発でTypeScriptを採用するのは初めてだったので，環境構築に一番力を入れました．

[2023年]Next.js + eslint周りの設定を参考に，汚いコードがリモートに上がらないように徹底しました（誰がみても分かりやすいですコードを心がけたい（未達））．Next.jsの開発もあまり慣れていなかったが，ただのSSGのポートフォリオサイトなのでさほど苦労はなかった．

苦労したところ

圧倒的Imageコンポーネント，最適化やってくれる故に少々めんどくさいなぁと思うのが，layout=fillとobjectFit=containの設定で，縦横比バラバラの画像のギャラリーをよしなにしようとすると，画像の幅を超えて親要素の幅でクリッカブルになってしまって困った．ので，Imageコンポーネントのラッパーを書いて最適化しました．

まとめ

シンプルが好きとはいえミニマムすぎるので，ちょこちょこ整えていきます．レイアウト崩れとかUI/UXも洗練していきたいですね．変なところを見つけたら，TwitterじゃなかったX(@AnoTensai)までご連絡ください．