Portfolio: The Beginning

My v0 proof-of-concept where I first tackled Three.js, Vercel, and advanced web features.

DEMO LINK

Overview

• Role: Developer (First Attempt)
• Stack: React, Three.js, Framer Motion, Vercel
• Key Result: Successfully pushed through the confusion of learning 3D web development and deployment for the first time.
• Summary: This was my "v0" portfolio. It was my very first time experimenting with Three.js, Vercel, and heavy UI animations. While it included ambitious features like an embedded chatbot and a 3D landing card, the UI/UX was admittedly chaotic. It serves proudly as my raw, unfiltered proof of first try.

The Problem

• Challenge: Trying to learn and implement complex modern web technologies (3D rendering, deployment pipelines, interactive widgets) all at once from scratch.
• Audience: Myself. It was never meant to be a polished piece for showing off, but rather a personal sandbox.
• Constraints: A massive learning curve, leading to severe performance bottlenecks and a lack of cohesive UI/UX design.

Approach & Decisions

• Architecture: A modular React setup heavily reliant on unoptimized Framer Motion primitives and atomic CSS.
• Key Decisions: Decided to throw every cool feature I could find (magnetic buttons, draggable docks, 3D cards) into one project just to see how they worked.
• Trade-offs: Completely sacrificed simplicity, performance, and user experience in the name of raw technical experimentation.
• Data Flow: Handled via standard React context, though heavily bogged down by overlapping animation states and unoptimized 3D renders.

Key Results & Impact

• Outcome: A functionally flawed but highly educational sandbox that paved the way for my current work.
• Impact: It taught me exactly what not to do regarding web performance, directly inspiring my much cleaner "v1" iteration.

Technical Deep Dive

• Notable Details: Attempted advanced modal systems with morphing transitions, live clocks, and custom cursors, all running concurrently.
• Verification: Testing was done purely via raw, manual visual checks—trial and error at its finest.
• Optimizations: Practically nonexistent. Performance was a constant rollercoaster going up and down, which became the project's biggest hurdle.
• Code Quality: Admittedly not my best work. It was a chaotic environment meant purely for learning.

Reflections

• Differently: I learned that throwing heavy animations together blindly destroys performance. My next iteration focuses strictly on performance and clean UX (see my active Portfolio project).
• Successes: It stands as my "proof of first try." It proved I was willing to dive into confusing, difficult technologies headfirst.
• Lessons: Performance and clean UX are infinitely more valuable than stacking flashy but unoptimized 3D features.

My Contributions

• Design & Engineering: Designed and implemented all UI/UX, 3D effects, and interactive features via trial and error.
• Animation & Interactivity: Built custom Framer Motion primitives, magnetic buttons, draggable dock, and command palette.
• Content Layer: Integrated MDX for flexible blog and project authoring.
• Technical Documentation: Archived the project to document my initial architecture challenges and technical hurdles for future reference.

Project Architecture

This project utilized a modular but heavily overloaded React component system.

• Component Organization:
  • ui/, core/, motion-primitives/: Reusable, atomic components
  • MDX content for blog and projects
  • Routing under app/projects/, app/blog/, dynamic [slug] routes
• State Management: Context-based theme management, localStorage for dock/cursor state.
• Integrations: Framer Motion, Radix UI, Tailwind CSS, cmdk, embla-carousel, lucide-react.

Demo Preview

This page documents the original v0 build. For the live archived demo, visit archivedportfolio.franzdomingo.dev.

• Platform Views: Web (responsive, mobile-first)
• Functionality Shown:
  • Unoptimized 3D landing card and interactive UI
  • Animated transitions, modals, and backgrounds
  • Command palette, dock, magnetic buttons
  • Embedded chatbot

Hosting Note:
Archived as a showcase project. The much cleaner, updated portfolio is now live at portfolio.franzdomingo.dev.