Next.jsでポートフォリオサイトを作成してみた

Next.jsとReactでポートフォリオサイトを作成してみました。

概要

• 開発言語：TypeScript
• フレームワーク
  • Next.js
  • React
  • styled components
• デプロイ：Vercel

• リポジトリのurl：https://github.com/kentakom1213/portfolio-nextjs
• デプロイ先のurl：https://kenta-komoto.vercel.app

デザイン

Figmaでデザインをしました。ポートフォリオサイトらしく、

• 自己紹介
• スキル
• 経験
• お問い合わせ

ページを追加。デザインはこんな感じです。

なるべくシンプルかつかわいいデザインになるように腐心しました。

コーディング

ページ作成をReact、スタイルはstyled componentsで行いました。 最近はスタイル作成にtailwind CSSを使う例が多いようですが、個人的に tailwind CSSを含んだコードの見た目があまり好きではないため、 styled componentsを利用しています。 （ただ、レスポンシブ対応を1から書くのがキツかったので今後はそっちを採用したい気持ちです）

aboutページ

どの写真を使うか結構悩みました。

skillsページ

並べるデザインのレスポンシブ対応にちょっと苦労しました。 このあたりの面倒臭さを考えると、素直にtailwind CSSを使うのがいいのかも。

experienceページ

このページに一番手がかかっています。 cssのgridの使い方の勉強にもなりました。

contactページ

formspreeというサービスを利用しました。 Googleフォームの埋め込みとは違い、自分で見た目をカスタマイズできるので便利です。

デプロイ

Vercelにアカウントを作って、GitHubのリポジトリを紐付けるだけで 勝手にデプロイしてくれます！Vercel便利！

まとめ

デザインを含めて1から一人で手作りしたのは初めてだったのですが、なかなかいい経験になりました。 我ながらいい感じにできたと思います。

次はフロントNext.js、バックエンドAxumとかのアプリを作ってみようかな