Portfolio: Ang Simula

Ang aking v0 proof-of-concept kung saan una kong hinarap ang Three.js, Vercel, at mga advanced na web features.

DEMO LINK

Pangkalahatang-ideya

• Papel: Developer (Unang Pagsubok)
• Teknolohiya: React, Three.js, Framer Motion, Vercel
• Pangunahing Resulta: Matagumpay na nalagpasan ang kalituhan ng pag-aaral ng 3D web development at deployment sa unang pagkakataon.
• Buod: Ito ang aking "v0" portfolio. Ito ang aking pinakaunang pagkakataong mag-eksperimento gamit ang Three.js, Vercel, at mabibigat na UI animations. Kahit na may kasama itong mga ambisyosong feature gaya ng embedded chatbot at 3D landing card, inaamin kong magulo ang UI/UX nito. Nagsisilbi itong kapuri-puring raw at unfiltered na patunay ng aking unang pagsubok.

Ang Problema

• Hamon: Ang pag-aaral at pagpapatupad ng mga complex na modernong web technologies (3D rendering, deployments) nang sabay-sabay mula sa simula.
• Audience: Ako mismo. Hindi ito ginawa para ipagmalaki, kundi bilang isang personal na sandbox.
• Limitasyon: Isang malaking learning curve, na humantong sa matinding problema sa performance at kakulangan sa maayos na UI/UX design.

Diskarte at mga Desisyon

• Arkitektura: Isang modular React setup na lubos na umaasa sa unoptimized Framer Motion primitives at atomic CSS.
• Pangunahing Desisyon: Nagpasyang ilagay ang lahat ng cool na feature na makikita ko sa iisang project para lang makita kung paano gumagana ang mga ito.
• Trade-offs: Ganap na isinakripisyo ang simplicity, performance, at user experience para sa raw na technical experimentation.
• Daloy ng Datos: Hinawakan via standard React context, kahit na masyadong pabigat dahil sa nagsasapawan na animation states at unoptimized na 3D renders.

Pangunahing Resulta at Epekto

• Kinalabasan: Isang sandbox na may kapintasan sa function ngunit napaka-educational na nagbigay daan para sa aking kasalukuyang trabaho.
• Epekto: Itinuro nito sa akin nang eksakto kung ano ang hindi dapat gawin pagdating sa web performance.

Malalim na Teknikal na Pagsusuri

• Kapansin-pansing Detalye: Sinubukan ang advanced modal systems, live clocks, at custom cursors na tumatakbo nang sabay-sabay.
• Pag-verify: Ginawa ang testing nang puro visual lang—trial and error.
• Mga Pag-optimize: Halos wala. Ang performance ay pabago-bago at ito ang naging pinakamalaking hadlang.
• Kalidad ng Code: Inaamin kong hindi ito ang best work ko. Ito ay isang magulong environment na purong para sa pag-aaral lang.

Mga Repleksyon

• Gagawin nang Iba: Natutunan ko na ang basta paglalagay ng mabibigat na animations ay nakakasira sa performance. Ang susunod kong version ay mahigpit na nakatutok sa performance at clean UX.
• Mga Tagumpay: Nagsisilbi itong "patunay ng aking unang pagsubok."
• Mga Aral: Ang performance at clean UX ay higit na mahalaga kaysa sa pagpapatong ng mga magagara pero unoptimized na 3D features.

Aking mga Kontribusyon

• Design & Engineering: Idinisenyo at ipinatupad ang lahat ng 3D effects via trial and error.
• Animation & Interactivity: Gumawa ng custom Framer Motion primitives.
• Content Layer: Pinagsama ang MDX.
• Technical Documentation: In-archive ang project.

Arkitektura ng Proyekto

Ang project na ito ay gumamit ng modular ngunit heavily overloaded na React component system.

• Organisasyon ng Component:
  • ui/, core/, motion-primitives/: Reusable na atomic components
  • MDX content
• State Management: Context-based.
• Integrations: Framer Motion, Radix UI, Tailwind CSS, cmdk.

Preview ng Demo

I-visit ang archivedportfolio.franzdomingo.dev para sa live na archived demo.

• Platform Views: Web (responsive)
• Functionality Shown:
  • Unoptimized 3D landing card
  • Embedded chatbot

Paalala sa Hosting:
Naka-archive. Ang mas maayos na updated portfolio ay live na ngayon sa portfolio.franzdomingo.dev.