Burst Style
Overview
「Burst Style」は、没入感あふれるビジュアル体験と堅牢なバックエンド設計を融合させたポートフォリオサイトです。「宇宙への旅」をテーマにしたThree.jsによる3D演出やシームレスな遷移アニメーションに加え、実用的な機能面も徹底しました。特にフロントエンドでは、Zustandを用いた軽量な状態管理により「ハンガードア」の開閉とページ遷移を完全に同期。左右非対称（シアン＆パープル）のドアが閉まることでローディングを隠し、シームレスに宇宙船内部へと移動する演出を実現しています。バックエンドでは、Cloudflare Turnstileによるスパム対策やResend APIを用いた自動返信メールなど、見えない部分の体験設計（User Experience）にもこだわっています。
Challenges & Solutions
[PROBLEM_1] シームレスな遷移と状態管理
「ドアが閉まってからページが移動し、移動先でドアが開く」という一連のシーケンスを実現するために、Zustandを用いたグローバルな状態管理（`transition-store`）を導入しました。Next.jsの`router.push`による遷移タイミングとCSSアニメーションを厳密に同期させることで、ブラウザのロードを感じさせない没入感のある移動体験を作り出しています。
[PROBLEM_2] 物語性のあるAPI/コンタクト機能
単なる「送信完了」ではなく、物語の一部としてのコンタクト機能を実装しました。Next.jsのサーバーレス関数内で、Turnstile認証（セキュリティ）、Formspree転送（通知）、Resend送信（自動返信）を一連のフローとして処理。特に自動返信メールは宇宙船のコンソールを模したHTMLデザインを採用し、サイトを離れた後も世界観が続くよう設計されています。
[PROBLEM_3] パフォーマンスとビジュアルの両立
Three.jsによるパーティクル描画と高解像度の背景動画を併用するため、描画負荷が課題となりました。コンポーネントの再レンダリング抑制に加え、初回アクセス時のみ「Boot Sequence」を実行するようセッションストレージで制御することで、リピート訪問時の快適性を向上させています。
Future Improvements
インタラクティブ性の向上
現在は背景演出がメインですが、ユーザーのマウス操作やスクロールに合わせて3D空間がよりダイナミックに反応するようなインタラクションの追加を検討しています。
国際化（i18n）対応
海外のビジターにもポートフォリオを見てもらえるよう、英語対応を含めた多言語化サポートの実装を計画しています。
Tech Stack
- Framework: Next.js 16 (App Router)
- 3D Library: Three.js / @react-three/fiber
- State Management: Zustand
- Backend: Next.js API Routes
- Security: Cloudflare Turnstile
- Email: Resend API
- Asset: Video & Generated AI Images