Reactを使ってポートフォリオサイトを完成させるまでの道のり
実際のポートフォリオサイト
https://www.kuwaharu.com (opens in a new tab)
GitHub Pagesで公開してます。
なぜポートフォリオサイトを作ろうと思ったか
少し前にHTML,CSS,JavaScriptで簡単に作成したポートフォリオがあったのですが、デザイン等ほぼChatGPT任せということもあり、気に入らない点があり作り直したいと思っていたということと、 来年には三年生になり就活に向けてそろそろ動き出す時期にもなってきたのでとりあえずポートフォリオの基盤だけでも作っておきたいという理由で作りました。
なぜReactを使ったのか
一番はちょうど学んでいたからなのですが、CSS,JavaScriptなどについてそこまで詳しいわけではないのでコンポーネント等活用すれば自分がイメージしているものが作れるのではないかと思い、Reactの勉強がてら使うことにしました。現状、学びたての初心者が書いたのでファイル構成やコードの書き方など拙いところがたくさんあるのでいつかリファクタリングしようと思ってます。
作成過程
作成過程① デザインを決める
まずは様々な人のポートフォリオサイトをたくさんみてどのような構造、デザインにするかを考えました。
特に参考にさせていただいたサイト
- https://it-tsumugi.github.io/reactPortfolio/ (opens in a new tab)
- https://hodalab.com/portfolio/ (opens in a new tab)
- https://nsuzuki7713.github.io/portfolio/ (opens in a new tab)
ある程度構想が決まったところで、ちょうど学校の授業の方でFigmaの使い方を学習していたのでFigmaを使用してデザインを決めました。
実際に作成したものがこちらです。(実際にできたものと少し違います)
作成過程② ViteでReactの環境構築
こちら (opens in a new tab)の記事を参考にReactの環境構築&GitHub Pagesでの公開の方法を学びました。
作成過程③ ヘッダーとフッターの作成
まず、どのページでも共通で使うであろうヘッダーとフッターの作成から手をつけました。フッターはとてもシンプルなのですぐ終わりました。そのうちもう少し情報を増やす予定です。
苦労したのがヘッダーの方で、デスクトップ用に関してはすぐ終わりましたが、モバイル用にハンバーガーメニューを実装するのにかなり苦労しました。一からハンバーガーメニューを作成するのは大変なのでreact-burger-menuというライブライを使用しました。こちら (opens in a new tab)の記事を参考になんとか実装できました。
作成過程⑤ ファーストビューの作成
制作最初の段階でファーストビューについてはどのようにするか決めていなかったのでとりあえず真ん中に文字だけで実装しました。
その後、やっぱり文字だけだと寂しいので背景を自分ができる技術のアイコンをスライドで流すことにしました。スライドのアニメーションはswiper (opens in a new tab)を使用しました。こちら (opens in a new tab)のデモのコードを見ながら実装しました。
作成過程⑥ プロフィール部分の作成
こちらはレスポンシブデザインにするのにやや苦戦しましたが、そこまで苦労することなく完成しました。
作成過程⑦ 経歴部分の作成
経歴だと大体題名はcareerになると思いますが、学生のキャリアだと少し違和感があったため、エンジニアになるための旅という意味合いを込めてjourneyとうタイトルにしました。この部分では特にCSSに苦労しました。
一本線を引いてその中心に円が来るようにするのが特に難しく、他の人のポートフォリをサイトの構造などをみて参考にしながらなんとか実装できました。今後経歴の追加とできればここにもアニメーションを追加したいですね。
今後について
サイトのヘッダー部分を見ていただければ分かる通り、SkillとStudyという項目がまだ実装できていません。まだデザインすら決めていないので時間がある時に実装したいと思います。
最後まで見てくださりありがとうございます。
まだいいねやコメント機能をこのブログには実装していないので、この記事について何かありましたらX(@kuwaharu_it (opens in a new tab))のDMにてお願いします。