制作背景
ReactとNext.jsの学習のため好きな都市伝説やオカルトを題材にしたポートフォリオを作成しました。
環境・手法
環境はVscodeでnext.js,Django,Node.js,jsonをインストールし制作。headr,fotter,content,nav,cardListなどどれぞれ細かくコンポーネント化し,CSSも各コンテンツごとにモジュール化し管理しやすくしました。カードのコンテンツ自体はリスト化し、UseStateとUseRefを使用しました。お問い合わせフォームはapiでnodemailerを使用しサーバー側を作成し、フロント側から送信できるようにNext.jsのみで作成しました。
デザイン
キャラクターデザインやイラストそのものは生成AIを使用しました。カードのデザインはCanvaを使用。
使用ツール
Vscode, 生成AI, Canva
使用言語・ライブラリ・フレームワーク
HTML, CSS, Javascriput,
Next.js
制作背景
Next.js学習のため、ちょっと役立ちそうなものを作りたくて西暦を変換するツールを開発しました。
環境・手法
環境はVscodeでnext.jsをインストールし制作。mainとイベント部でコンポーネント化しました。
デザイン
ツールなので極力無駄なくシンプルにしました。
使用ツール
Vscode
使用言語・ライブラリ・フレームワーク
HTML, CSS, Javascriput,
Next.js