自己紹介するためのPortfolioサイトを作りました。

はじめ

会社のカジュアル面接でPPTを使って自己紹介をする姿を見て感銘を受けて自分を視覚化したサイトを通じて自己紹介をしたらいいと思って作りました。

一つ目のアイデア

このサイトを見た途端に作りたいと思って、何が必要なのか悩みながらMac os styleをReactで作りました。

作っている途中もう一度考えたんですが、申し1000人のポートフォリオを見る担当の立場だと何度もクリックしなければならないサイトを好むでしょうか？と考えた。
私なら嫌いと思ってあらためて考え直すことにしました。

二つ目のアイデア

この記事の中でアイデアを得ました。

記事のサイト見たいにスクロールだけで見るのができるよう作ろと考えました。

技術スタック

前提

tailwindではなくSassを使いたかったです。
jotai、recoilの使用が不可能な状況なので、zustandに対する学習をするためにzustand選びました。

• Next.js
• TypeScript
• React
• animejs
• emailjs
• eslint
• zustand
• Sass

実装紹介

HeroSection

コンポーネント :

• Navigation :
  Home, About, Projects, Contact, Languageを現在のsectionに該当する場合は、赤色で表示されるようにしました。
  Languageもここでステータス変更します。

• MouseTracker :
  マウスをグローバルに追跡するため、使用しました。

• CanvasDot :
  パーティクルを作成し、マウスとパーティクル間の相互作用できるようにしました。
  相互作用はマウスとパーティクル間の距離が近いとパーティクルとパーティクルが線を作ります。

• Hero :
  紹介する短い文とAbout buttonを作ります。
  button hoverしriple効果を栗化します。

AboutSection

• About
  自分紹介と今まで使った技術スタックをrow形に表現しました。

Projects Section

• Projects
  今まで参加したプロジェクトを配置し、childによってイメージを方向を配置しました。
  この部分のchildは多くないので別にコンポーネントを作らずにハードコーディングしました。😅

他に勉強するためのプロジェクトと必要なものを作ったものをgridを使って、widthによって変更できるようにしました。

Contact Section

メールで連絡ができるようにしたかったので、formを使用しました。
なお、emailjsを使ってメールを転送できるようしました。

テストしました

転送を押すと...

メールが転送を確認できます。

※ emailjsについては下のご確認してください。

Footer

Footerではsnsをしなのでgithubとメールだけ追加しました。
homeに戻るbuttonを作って上と下に動くアニメーションを追加しました。

作りながら発生した問題

Q. : react19にアップデートによる問題があってCRAを使用できない問題が発生しました。
A. : 現在アップデートが止まっているのでCRAよりViteの使うとこをおすすめします。

Link

Q. : マウスと相互作用する背景を作りましたが、マウスがglobal状態の変数ではなく、Heroセッションにのみあったため、座標に対する問題が発生しました。
A. : Zustandを使用してマウスをstoreで管理し、globalで使用できるようにし、clinet基準ではなくpage基準で相互作用を設定し、解決しました。

Q. : Footerをfooterにしたため途中で名前を変更することになり、Gitで大文字の区分ができない問題でDeployの失敗しました。
A. : Gitでは大文字と小文字の両方を同じファイルとして認識するので、名前を変更しても適用されない問題だったので、Gitでfooter->Footerに変更して問題を解決しました。

※変更した理由はReactではコンポーネント作るとき大文字でするのが規則です。
Link

最後に

ポートフォリオサイトをVercelでdeployしました。

最後まで読んでいただき、ありがとうございました。