ポートフォリオサイトを作りました

初めに

最近Typescript勉強会があったので、復習を兼ねて成果物などをまとめておくポートフォリオサイト(このサイト)を制作しました。

github:https://github.com/neco75/neco-portfolio-site

使用した主な技術スタック

• Typescript
• Next.js 13.5.4 (appRouterを使用)
• chakraUI, scss
• framer-motion (各ページの遷移アニメーション)
• microCMS (記事作成)
• Netlify
• html-react-parser
• Github

  ---

実装ページ

デプロイ

Netlifyを使用してデプロイしています。NetlifyとmicroCMSをwebhookを使って連携することで、記事を更新した際にNetlify側でデプロイが始まります。初期設定だとキャッシュが残って記事が更新されなかったので、クエリパラメータにキャッシュ削除の文字列を渡しています。

工夫した点

• 以前microCMSを使用してブログを作成した際、取得したhtml文字列をdangerouslySetInnerHTMLで埋め込んでいましたが、今回はhtml-react-parserを使用しています。
• 全ページでウィンドウサイズごとにレイアウトを変えています。
• ギャラリーページで画面が見辛くならないようにモーダルにしました。
• metaタグを使ってTwitterに対応しています。

課題点

• デザインがとてもシンプルなものになってしまった。
• まだ一部のデザインがウィンドウサイズによって若干崩れている
• あまりコンポーネント化を使えていない。特にblogページはかなりコードが見辛いものになっている。
• ページ遷移の際、ラグや一部の文字列が遅れて表示される。
• ギャラリーのモーダル画面のサイズが統一されていない。
• blogやskillのページで、文字列によってカードの高さが変わってしまう。それに伴って列によって高さが違う。
• まだお問い合わせフォームができていない。Nodemailerを使う予定。(SSGformを使用して機能追加済)
• loading, not-found, error時の画面も作ったが、かなり簡易的。

感想

初めてNext.jsに触れたが最低限形になって嬉しい。しかし、githubCopilotにかなり頼りながらの実装だったので、TypescriptやNext.jsの記述や機能理解がかなり怪しい。今後は少しずつ覚えていきたい。また、前から気になっていたchakraUIを使用したが、個人的には使いにくかった気がした。次回からは普段使っているbootstrapやtailwindなどに戻したい(tailwindフレームワーク系統のcssが気になっている)。まだまだ改善点は多いので少しずつ良いものにしていきたい。