Portfolio
ポートフォリオサイトです。
学習記事の公開と、実務のプロジェクトをご紹介します。
学習・デモ
技術学習の記録とデモサイトをまとめています。
※只今、項目を随時追加中です。
Tursoの検証（Next.js × Turso × Better Auth）
SNS風タイムラインの実装です。
nuqsの検証
nuqsライブラリを活用し、URL状態とReactステートを同期させた検索・フィルタリング機能を実装。直感的なUXを実現。
Nextjsでgsapアニメーションの検証
GSAPのScrollTriggerを用いたスクロール連動型UIの実装デモ。実案件を想定したパフォーマンスとUX設計を検証。
Next.js + Googleスプレッドシート（API）でSSRデモ
Google Apps ScriptをバックエンドAPIとして活用し、スプレッドシートのデータをNext.jsのSSRで動的レンダリングする実装検証。
Next.js + Googleスプレッドシート（API）でSSGデモ
Google Apps ScriptをバックエンドAPIとして活用し、スプレッドシートのデータをNext.jsのSSGで静的生成する実装検証。
WebGL × GLSL カスタムシェーダーによる画像トランジションの検証
生のWebGL(RawShaderMaterial)とGLSLカスタムシェーダーによる画像トランジションエフェクトの実装検証。スクロール進行度に応じた動的な視覚表現を実現。
制作サイト・実績
実務で携わったプロジェクトをご紹介します。
アカウントを発行しますので、お問い合わせください。
このポートフォリオで使用した主な技術スタック
このポートフォリオの主な仕様
▸コンテンツ管理
microCMSをヘッドレスCMSとして採用。学習記事や制作実績を管理画面から簡単に追加・編集でき、APIを通じてコンテンツを取得しています。
▸認証・権限管理
Better Authを使用した認証システムを実装。管理者権限のアカウントだけが新規ユーザーを作成でき、実績情報へのアクセスを制御しています。
▸認証状態による表示制御
ログイン状態によって表示されるコンテンツを動的に切り替え。未認証ユーザーには学習・デモのみを表示し、認証済みユーザーには実務の制作実績も閲覧可能にしています。
▸データベース設計
Supabaseを採用。Drizzleで型安全なスキーマ定義とマイグレーション管理を行い、認証情報を安全に保存しています。
▸お問い合わせフォーム
Resendを使用したメール送信機能を実装。Zodによるバリデーションで入力内容をチェックし、管理者への通知メールと送信者への確認メールを自動送信します。