はじめに
なぜ作ったのか
今の時代色んなサービスが溢れていており、持っているアカウントも非常に多く、初対面の人に全部紹介するは大変です。
ですが、カジュアル面談前に企業側に見て欲しいものも多いはずです。
以下のリストは私がカジュアル面談受けるなら、企業に紹介したいものです。
- Portfolio
- Twitter（X）
- GitHub
- 日記
- Zenn
- 連絡先
- 作成物
これらのリンクをいい感じに配信したいですが、既存ではいいのがなかったので作りました。
オープンソースのMITライセンスなので好きにご利用ください。
pagespeedのスコアはこんな感じ
オフラインイベントにも対応できるようになっており、アイコンを押すとQRコードで共有可能です。
デジタル名刺的な感じで使えると思います。
/works の部分もQRコードで共有可能です。
フロントはNext.js、microCMSでコンテンツを管理してます。
UIライブラリはshadcn-ui、CSSはTailwindです。
コンポーネント管理にStorybookを使っています。
パッケージ管理はbun、デプロイ先はVercelを使っています。
選定理由
Next.js
自分が一番好きなフレームワークで、一番使い慣れているからです。
それ以外に理由はありません。
I love Next.js.
microCMS
国産で、シンプルなUIで使いやすいため選びました。
他にも色々使ってみましたが、個人的にはmicroCMSが一番使いやすかったです。
(結局ビルドしたら静的サイトになるので、ぶっちゃけバックエンドはどこでもいいです)
shadcn-ui
UIライブラリはshadcn-uiを使っています。
(正確にはライブラリではなく、コンポーネント集ですが)
カスタマイズ性の高さと、シンプルなデザインが気に入っています。
Tailwind
CSSはTailwindを使っています。
使いにくいという意見もありますが、私は好きです。
ファイルを移動せずに、コンポーネント内で完結するのが良いです。
shadcn-uiもTailwindを使っているので、統一感が出ていい感じです。
Storybook
コンポーネント管理にStorybookを使っています。
定番ですね。
bun
パッケージ管理にbunを使っています。
とにかく速い！
私はビルド時間を1msでも短くしたい派なので、bunを使っています。
Vercel
デプロイ先はVercelを使っています。
Next.jsとの相性が良く、デプロイも簡単です。
ほぼ放置するようなサイトなので、無駄なコストをかけたくないです。
こだわりポイント
デザイン
デザインはシンプルにしました。
背景は #111729 で落ち着いた感じにしています。
結構気に入っている色です。
レスポンシブ
もちろんレスポンシブにも対応しています。
Chromeとシュミレーターで複数のデバイスで確認してどれで見ても崩れないようにしました。
iPhoneSEが個人的に結構小さくて、苦戦しました。
さいごに
以上リンク集を作った話でした。
個人的には結構気に入っているので、これからも使っていきたいと思います。
無かったから作ったand自分の好きなものを詰め込んだ感じです。
おまけ
デザインで苦労したところ
Workの部分でうまくカードの幅が広がらずに苦労しました。
空のdivを入れて、widthを指定することで解決しました。
<div class="max-lg:hidden" style="width: 60rem;"></div>
デザインで苦労したところ2
iPhoneの実機で確認すると、アドレスバーが原因でレイアウトが崩れることがわかりました。
最初は absolute で固定していたのですが、fixed に変更することで解決しました。
何回もデプロイし直すのは大変なので、Macの場合は Xcode のシミュレーターを使ってほぼ実機と同じ動作を確認できます。
Discussion