3D Portfolio Website

Original Portfolio / 3D Interactive Web / Archived Showcase

One-liner summary:
Isang fully responsive na personal portfolio website na nagtatampok ng high-impact 3D landing card, advanced na UI effects, at interactive elements. Binuo mula sa simula gamit ang mga modernong teknolohiya sa web upang ipakita ang mga teknikal at disenyo na kakayahan.

Tagal ng Pag-develop: Hunyo 2025

Mga Tala:

• Disclaimer sa Hosting/Availability ng Code:
  Naka-archive bilang isang showcase project. Ang source code ay available kapag hiniling. Ang na-update at na-optimize na portfolio ay live na ngayon sa archivedportfolio.franzdomingo.tech.
• Makipag-ugnayan para sa karagdagang impormasyon o mga demo:
  Makipag-ugnayan kay Franz Phillip G. Domingo sa pamamagitan ng franzdomingo.tech.
• Tala sa Pag-navigate:
  Idodokumento ng pahinang ito ang orihinal na build; ang kasalukuyang portfolio ay available sa link sa itaas.

---

Mga Tampok

• 3D landing card na may real-time rotation at glassmorphism
• MDX-driven na blog at project content
• Responsive, mobile-first na layout
• Theme toggle na may persistence
• Advanced modal system na may morphing transitions
• Framer Motion-driven na mga animation at page transitions
• Command palette (CMD+K) para sa navigation
• Draggable dock UI na may localStorage persistence
• Magnetic buttons na may animated effects
• Live clock at embedded AI chatbot
• Glassmorphism, neon accents, animated backgrounds
• Custom cursor system
• PWA enabled, SEO optimized, accessibility-first
• Custom error boundaries

---

Ang Aking Mga Kontribusyon (Tungkulin at Responsibilidad)

Disenyo at Inhenyeriya:

• Dinisenyo at ipinatupad ang lahat ng UI/UX, 3D effects, at interactive features.

Animation at Interactivity:

• Binuo ang mga custom na Framer Motion primitives, magnetic buttons, draggable dock, at command palette.

Performance at Accessibility:

• Ni-tune ang mga animation, na-optimize para sa SEO, at sinigurado ang accessibility sa lahat ng device.

Content Layer:

• In-integrate ang MDX para sa flexible na paggawa ng blog at proyekto.

Teknikal na Dokumentasyon:

• Idonokumento ang arkitektura, mga hamon, at teknikal na highlight para sa sanggunian sa hinaharap.

---

Mga Hamon na Kinaharap

• MDX + App Router integration:
  Manual na pag-set up para sa content loader, dynamic routing, at hydration sa Next.js 15.

• Framer Motion performance tuning:
  Pagbabalanse ng kinis ng animation sa mga limitasyon ng GPU/CPU ng device.

• iOS/Safari rendering bugs:
  Conditional workarounds para sa mga GPU texture artifacts sa Safari.

• Cross-browser layout consistency:
  Sinigurado na ang mga advanced effects ay nag-render nang pare-pareho kahit saan.

• Performance tradeoffs:
  Ang mabigat na animation ay humantong sa mataas na paggamit ng resource, na nag-udyok sa isang muling pagdidisenyo para sa pagiging simple at accessibility.

---

Arkitektura ng Proyekto

• Estilo ng Arkitektura:
  Modular React component system, atomic CSS, MDX content layer.

• Organisasyon ng Component:

  • ui/, core/, motion-primitives/: Reusable, atomic components
  • MDX content para sa blog at mga proyekto
  • Malinis na routing sa ilalim ng app/projects/, app/blog/, dynamic [slug] routes

• State Management:
  Context-based theme management, localStorage para sa dock/cursor state

• Mga Integrasyon:
  Framer Motion, Radix UI, Tailwind CSS, cmdk, embla-carousel, lucide-react

---

Demo Preview

• Mga Screenshot/Video:
  Idonokumento ng pahinang ito ang orihinal na build. Para sa isang live demo, bisitahin ang archivedportfolio.franzdomingo.tech. Ang kasalukuyang portfolio ay available din sa archivedportfolio.franzdomingo.tech.

• Platform Views:
  Web (responsive, mobile-first)

• Functionality na Ipinakita:

  • 3D landing card at interactive UI
  • Animated transitions, modals, at backgrounds
  • Command palette, dock, magnetic buttons
  • MDX-driven content, live clock, embedded chatbot

• Mga Instruksyon sa Demo:
  Bisitahin ang archivedportfolio.franzdomingo.tech upang tingnan ang naka-archive na demo. Para sa pinakabagong portfolio, tingnan ang portfolio.franzdomingo.tech.

---

Mga Resource sa Pag-develop (Opsyonal)

• Mga Guide/Docs:
  • Framer Motion, Tailwind CSS, Radix UI, MDX documentation

---

Kung kailangan mo ng karagdagang detalye o gustong makita ang codebase, mangyaring makipag-ugnayan nang direkta sa may-akda.

---