ポートフォリオサイトを作った話。
自分のポートフォリオサイトを作成しました。
ここでいうポートフォリオというのは自分の紹介ページという意味で、俗に言われる転職時に提出するサービスサイトとかのことではないです。
この記事では作った理由、作る過程など書いてみようかと思います。
これから作る予定の方の参考になれば幸いです。
作った理由
主に作った理由としては、いくつかあります。
1.仕事でしか作ったものを世に出したことがなかったので、個人で作ったものを世に出してみたかった
2.自分の紹介をする時、毎回1から話をするのも大変なので、話を少しでも省くため
3.話のネタにするため
4.使ってみたいサービスがあった
主にこの4つが大きかったです。
実際作ってみた結果、即席チームで開発をする事になった時など、チームメンバーにポートフォリオを渡すだけである程度話を省く事ができて、経歴とは別のところの話をしやすくなった気がします。
作る過程
制作期間
制作期間は1週間くらいでした。
仕事終わりにちょこちょこやっていたのと、土日に軽くまとめてコミットすれば1週間程で作れる程度のポートフォリオサイトだったので、気軽に開発できました。
技術
技術構成は以下になります。
・Next.js
・Chakra UI
・TailwindCSS
・React Hook Form
・SendGrid
自分が一番慣れているNext.jsにし、
全体的なヘッドレスUIとしてChakraを使いました。
主にライト/ダーク切り替えや、Drawer、Form周りをChakraにお任せしました。
Chakraで全体のレイアウトを作るのは、個人的に少し抵抗感があったので、
デザイン面のレイアウトの余白や色合いなどに関してはTailwindを使いました。
React Hook FormとSendGridに関しては、このポートフォリオを作るに当たって使ってみたかったサービスに当たります。
React Hook Formは、人気なライブラリですが使用した事がなかったので使ってみました。
SendGridは、昔自分でメールサーバを経由したものをWordPressサイトで作るような仕事をしていたのですが、SaaSを使ってメール機能を作るという事にすごい面白みがあり、フロントエンドだけでできるという点で使ってみたかったのです。
デザイン
デザインの参考としては、某サービスを開発しているYoutubeなども運営しているフリーランスのポートフォリオサイトを参考にしました。
とてもシンプルなデザインなので、レイアウトだけ参考にさせていただき、色合いや内容などは自分で決めました。
自分自身デザインセンスはないので、ある程度の間隔センスと、色合いだけ合わせて作成しました。
基本的な余白はコンポーネントを統一する事で同じ幅にし、
最小限のコンポーネントに抑える事で統一性を出しつつ、工数を減らす事にしました。
白黒を基調にするととても楽にそこまで変な感じにもならないのでお手軽でした。
ホスティング
Next.jsを使う理由の一つに、Vercelとの相性が良いというのもあります。
Vercelと連携すると簡単にデプロイパイプラインを作る事ができるためでもありました。
無料で使うにはいくつか条件がありますが、個人でポートフォリオくらいの規模のものであれば無料枠で使えたので問題なかったです。
ドメイン
ドメインもVercelだと簡単に紐付けすることができたので、
Google Domainsで購入して、Vercelに設定することで簡単にできました。
こちらを参考にしました。
これから
一先ず作った、という段階なので
まだまだこれからいろいろ追加したり、ポートフォリオに載せられるようなサービスも作っていきたいなと思っています。
ポートフォリオを作ることでサービスを作るモチベーションにも繋がってきたので、良い作用が早速生まれてきてる気がします。
最後に、コッソリとサイトを置いておきます😂
Discussion