自分のサイト【Breeze】を立ち上げた時の話。
自分用のサイトを立ち上げたのでその話について記事にまとめています。
シンプルなデザインにしあがったのでぜひ見ていってください。
🌿 Breezeの由来
特に深い意味はなく、英語でかっこよく表現ができて漢字1文字なものはないかな~と思って色々と調べてたところ、たまたま見つけてロゴ（木の葉のような感じ）との相性も良さそうだと思い決めました。
ちなみに、Breezeは日本語で「風,穏やかに」という意味らしいです。
🚀 Breezeを立ち上げた理由
サイトを立ち上げた背景には3つほど理由があり、、
まず第一に、もうそろ社会人として1年目が終わることもあり集大成として何か1つ愛着が持てる物を作りたいと思い、色々と模索した結果、ポートフォリオ兼ねた自作ブログを作ろとなり、Breezeが生まれました。
今回の開発では、いつも以上にデザインに時間を割き、シンプルかつ見やすいを意識して作りました。個人的にはかなり満足した仕上がりです。
第二に、大学生時代に作った時のデザインがあまりにもださすぎたので、改めて今の自分を表現できるものにしたいと思い刷新しました。
（以下がバージョン1のサイトです。今見てもひどい。）
https://mino-lp.vercel.app/
第三に、まだ未完成ですが、自作ブログを通じて情報を発信していきたいなーと思ったのがきっかけです。Zennやしずかなインターネットにも記事は書いていく予定ですが、それに加えて異なるジャンルの記事も書きたいと思ったので今後実装が完了次第詰め込みしていくつもりです。
（工数が多くて1ヶ月以上かかりそう😅）
✍️ デザイン
このサイトデザインはDrizzle ORMのサイトをオマージュしたもので、トップページなんかはほぼ真似て作り、他のコンポーネントも部分的に参考にしました。（それぐらいDrizzleが好きですw）
👨💻 技術スタック
今回使った技術は、新技術というより今まで実務で使ったことのあるものを組み合わせて作りました。
Next.js（フロントエンド）
ウェブアプリケーションや静的ウェブサイトを構築するためのReactベースのフレームワークで、開発体験が良きです。
Tailwind CSS × Shadcn UI（CSSフレームワーク）
カスタマイズ可能なデザインシステムを提供するユーティリティファーストのCSSフレームワークです。
Shadcn UIは、Tailwind CSSに基づいて構築されたUIコンポーネントライブラリで、デザインがシンプルで美しいです。
microCMS（ヘッドレスCMS）
ヘッドレスCMS（コンテンツ管理システム）で、ウェブサイトやアプリのコンテンツをAPI経由で管理・配信することができます。
Bun （パッケージマネージャ）
Bunは、JavaScriptおよびTypeScriptプロジェクト用の新しいパッケージマネージャで、高速です。
Jest / Testing Library（テスト）
単体テストと結合テストをするためのライブラリです。
その他（アイコン・画像）
🦭 おわり
最後まで読んでくださり、ありがとうございました！
この記事が、1人でも多くの方に見ていただけると嬉しいです。
Discussion