概要

自分の作品をまとめたポートフォリオサイトを作りました。
Next.jsに挑戦し、本を参考に環境構築から始めて制作をしました。

制作の流れ

デザイン

今回、制作期間が1週間というとても短い期間だったため、デザインの制作も大変でした。そして私は、今回初めてNext.jsでの開発に挑戦しようと思っていたので、複雑なデザインにはせずに、割り切ってシンプルでスタイリッシュなデザインを目指しました。
自分自身丸みのある可愛らしいデザインが好みなのですが、今回は直線的なデザインを意識しました。

コーディング

今回一番頑張って、一番大変だった部分がコーディングです。
Next.jsでの開発を本を読みながら制作したのですが、まずはディレクトリ構造を理解するところから始まり、トップページから少しずつ制作しました。参考にした本にとてもわかりやすく解説が書いてあったことと、春休みの内からNext.jsの勉強をしていたことから、なんとか1週間で作ることができました。

下記に参考にした本のリンクを貼っているので、気になった方はご覧ください。
https://microcms.co.jp/news/orzxoa0y7q

ファーストビューには、タイトルにアニメーションをつけたり、背景にラインを流すなど、今まで挑戦してこなかったアニメーションを取り入れました。デザインの時点で今回はブログや進級展の作品とは違う感じのサイトにしたかったので、アニメーションもそれに合わせて自分がかっこいいと感じたものを取り入れています。

苦労した部分

苦労した部分は、Next.jsでの開発です。
思い通りにレイアウトが組めなかったり、意図したアニメーションが動かないこともありましたが、その都度解決方法を調べて試しながら改善を繰り返すことで、確実に力をつけることができたと感じています。制作期間も今までに比べて短かったので、スケジュール管理も大変でした。デザインとコーディングを同時進行で作っていったりしてなんとか完成させることができました。

制作を通して

先生からNext.jsは今後必須になる知識だと言われ、今回のポートフォリオ制作で挑戦しようと考えました。
難しいことばかりで大変でしたが、完成できたことがとても嬉しかったです。そして何より、自分が知らない技術を触ってみる楽しさをとても感じることができました。今後もどんどん新しい技術が出てくると思うので、もっとたくさんの知識を吸収していきたいです。