#まず初めに
初めてQiitaに投稿させて頂きます
shuuheiと申します。
簡単に経歴
2017.12〜2019.12 ベンチャー企業でアルバイト(HTML,CSS,jQuery,JavaScript,PHP,Wordpress)
2020.02〜 SES企業でフロントエンジニア
(Vue,Angular,PHP,Java などなど)
今回は元々github.ioで作成していたポートフォリオサイト
https://shuuheiigarashi.github.io/
こちらをReactで作り直したのでその作成過程を書いていきます。
#デザイン
こちらは元々ベンチャー企業に在籍していた際に使用しており馴染みがあった
Adobe XD
を使用しました。
SPA風にしたかったのでこんな感じになりました。
シンプルなデザインかつわかりやすさを意識してデザインしました。
Atomic Design とコンポーネント設計
Atomic Designを取り入れ、ポートフォリオサイトを
作ろうと思い下記サイトを参照しました。
あまり複雑なデザインにしなかったので
Atomic Designを取り入れる意味があったかどうかは
微妙なところですが、経験として設計もできたのでそこはよかったかなと思っています。
いざ実装
UIライブラリはChakra UIを使用しました。
デザインがシンプルなので実装はさほど
時間はかかりませんでしたが、、、、
、、、、
味気ない、、、
となったので
Framer Motionを用いてCSSアニメーションを実装いたしました。
(本当はもっと複雑なものを作りたかったが、、、力不足)
問い合わせフォームを作成する際に参考にしたのは下記
バリデーション等も含んでチュートリアルがあるので
かなり扱いやすかったのです。
作り終わったのでデプロイしてみよう
せっかくだ、githubにあげるだけじゃもったいない
と思い
AWS amplifyを使って
デプロイをしてみました。
Githubの今回のポートフォリオサイトのリポジトリと連携し
デプロイ完了。
また、独自ドメインを設定したかったので下記動画を参照しました。
手順通りに進めていったらエラーが、、、
CNAMEがこのドメインに1つ以上既に紐づいているよとのこと。
全ての設定を削除し
CloudFrontが元々何も設定していなかったので、
何も設定せずRoute53を登録しamplifyに独自ドメインを紐付けしてみたら、、、
いけました！！！
#最後にそして、これから
作成期間としては2週間ほどかかりましたが
以前のHTML/CSSのものと比べたら
とてもいいポートフォリオサイトができたかなと思っています。
逐一ブラッシュアップはしていこうとは思っておりますが、、、
公開URLはこちら
https://shuuhei.ml
今後もポートフォリオを作成していく予定です。
Reactだけでなく業務で色々な言語を扱っているので
そこに対して個人的にポートフォリオを残して行けたらと思っています！
ここまでご覧頂き有難うございました。