ポートフォリオ：始まり

Three.js、Vercel、高度なWeb機能に初めて取り組んだv0の概念実証。

デモリンク

概要

• 役割: 開発者（最初の試み）
• スタック: React, Three.js, Framer Motion, Vercel
• 主要な成果: 初めての3D Web開発とデプロイメントの混乱を無事に乗り越えました。
• 要約: これは私の「v0」ポートフォリオでした。Three.js、Vercel、そして重いUIアニメーションを試したのはこれが初めてでした。組み込みのチャットボットや3Dランディングカードなどの野心的な機能が含まれていましたが、UI/UXは明らかにカオスでした。私の最初の試みの、生の、フィルターのない証拠として誇らしげに機能しています。

課題

• 挑戦: 複雑な最新のWebテクノロジー（3Dレンダリング、デプロイメントパイプライン、インタラクティブウィジェット）をゼロからすべて同時に学習し、実装しようとしました。
• 対象者: 私自身。見せびらかすための洗練された作品ではなく、個人的なサンドボックスとして意図されていました。
• 制約: 大規模な学習曲線により、深刻なパフォーマンスのボトルネックと一貫したUI/UXデザインの欠如が生じました。

アプローチと決定

• アーキテクチャ: 最適化されていないFramer MotionプリミティブとアトミックCSSに大きく依存するモジュール式Reactセットアップ。
• 重要な決定: どのように機能するかを確認するためだけに、見つけられる限りのクールな機能（マグネットボタン、ドラッグ可能なドック、3Dカード）を1つのプロジェクトに詰め込むことにしました。
• トレードオフ: 生の技術的実験の名の下に、シンプルさ、パフォーマンス、ユーザーエクスペリエンスを完全に犠牲にしました。
• データフロー: 標準のReactコンテキストを介して処理されますが、重複するアニメーション状態と最適化されていない3Dレンダリングによって大幅に機能が低下しました。

主要な成果と影響

• 結果: 機能的には欠陥がありますが、現在の仕事への道を開いた非常に教育的なサンドボックスです。
• 影響: Webパフォーマンスに関してしてはいけないことを正確に教えてくれました。

技術的な詳細

• 注目すべき詳細: モーフィングトランジション、ライブ時計、カスタムカーソルを備えた高度なモーダルシステムを試し、すべてを同時に実行しました。
• 検証: テストは純粋に生の視覚的な手動チェックを介して行われました—最高の試行錯誤です。
• 最適化: ほとんど存在しません。パフォーマンスは絶え間ないジェットコースターのようでした。
• コード品質: 明らかに私の最高傑作ではありません。純粋に学習を目的としたカオスな環境でした。

振り返り

• 今後の展望: 重いアニメーションを盲目的に組み合わせるとパフォーマンスが破壊されることを学びました。私の次のイテレーションは、パフォーマンスとクリーンなUXに厳密に焦点を当てています。
• 成功体験: これは「最初の試みの証」として存在します。
• 教訓: パフォーマンスとクリーンなUXは、派手ですが最適化されていない3D機能を積み重ねるよりもはるかに価値があります。

私の貢献

• 設計とエンジニアリング: 試行錯誤を通じて、すべてのUI/UX、3D効果、およびインタラクティブ機能を設計および実装しました。
• アニメーションとインタラクティビティ: カスタムFramer Motionプリミティブを構築しました。
• コンテンツレイヤー: MDXを統合しました。
• 技術ドキュメント: 将来の参考のために、プロジェクトをアーカイブしました。

プロジェクトのアーキテクチャ

このプロジェクトでは、モジュール式ですが大幅に過負荷のReactコンポーネントシステムを利用しました。

• コンポーネント構成:
  • ui/, core/, motion-primitives/: 再利用可能なアトミックコンポーネント
  • ブログとプロジェクトのMDXコンテンツ
• 状態管理: コンテキストベースのテーマ管理。
• 統合: Framer Motion, Radix UI, Tailwind CSS, cmdk。

デモプレビュー

このページは、元のv0ビルドを文書化しています。アーカイブされたライブデモについては、archivedportfolio.franzdomingo.dev にアクセスしてください。

• プラットフォームビュー: Web（レスポンシブ）
• 機能:
  • 最適化されていない3DランディングカードとインタラクティブなUI
  • 組み込みチャットボット

ホスティングに関する注意:
ショーケースプロジェクトとしてアーカイブされています。はるかにクリーンで更新されたポートフォリオは、portfolio.franzdomingo.dev で公開されています。