技術スタック

アナリティクス

Umami(オープンソース)

アナリティクスのサービスは、企業向けのものが多く、またアナリティクスを収集するスクリプトをTypeScript用に書き換えたり、XSS対策をしないといけなかったりする必要があるので、使えるサービスが限られていました。
その中で、導入しやすかったうちの一つが、Umamiだったので、採用しました。
Umami 公式サイト
Umami リポジトリ

フレームワーク

Next.js(オープンソース)

ポートフォリオにはあまり適していないかもしれませんが、採用した理由としては使ってみたかったという単純な理由です。
Next.js 公式サイト
Next.js リポジトリ

Tailwind CSS(オープンソース)

Tailwind CSSは、CSSのフレームワークで、HTMLのタグのクラスに直接CSSを割り当てられるので、便利です。
ただ、可読性が減るので、大規模なチームでの開発など使うのにはあまり適していません。
Tailwind CSS 公式サイト
Tailwind CSS リポジトリ

ライブラリ

Lucide(オープンソース)

Lucideは、リンクに飛ぶアイコンや、バッテリーのアイコンなどがReactなどのJavaScriptライブラリで使えるアイコンライブラリです。
Wappalyzer(ブラウザの拡張機能)を使って色々なサイトを見ていた時に見つけたので導入してみました。
自分のポートフォリオでどこで使っているかは容易に分かると思うので、当ててみてください。
Lucide 公式サイト
Lucide リポジトリ
Wappalyzer -Chromeウェブストア-

Motion(旧Framer Motion)

Motionは、ReactやVueなどに使えるアニメーションライブラリで、色々なアニメーションを実装できます。
このポートフォリオでは、ハンバーガーメニューを開いた時のアニメーションに使いました。
ほぼすべてAIに書いてもらった。
Motion 公式サイト
Motion リポジトリ