作品集：起点

我的v0概念验证项目，我在这里第一次接触了Three.js、Vercel和高级Web功能。

演示链接

概述

• 角色：开发者（初次尝试）
• 技术栈：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卡片）全塞进一个项目里，只是为了看看它们是如何工作的。
• 权衡：为了纯粹的技术实验，完全牺牲了简单性、性能和用户体验。
• 数据流：通过标准的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着陆卡片
  • 嵌入式聊天机器人

托管说明：
作为一个展示项目存档。更干净、更新的作品集现在已在 portfolio.franzdomingo.dev 上线。