3D Portfolio Website

Original Portfolio / 3D Interactive Web / Archived Showcase

One-liner summary:
A fully responsive personal portfolio website featuring a high-impact 3D landing card, advanced UI effects, and interactive elements. Built from the ground up with modern web technologies to showcase technical and design capabilities.

Development Duration: June 2025

Note(s):

• Hosting/code availability disclaimer:
  Archived as a showcase project. Source code available upon request. The updated, optimized portfolio is now live at archivedportfolio.franzdomingo.tech.
• Contact for more info or demos:
  Reach out to Franz Phillip G. Domingo via franzdomingo.tech.
• Navigation note:
  This page documents the original build; the current portfolio is available at the link above.

---

Features

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

---

My Contributions (Role & Responsibilities)

Design & Engineering:

• Designed and implemented all UI/UX, 3D effects, and interactive features.

Animation & Interactivity:

• Built custom Framer Motion primitives, magnetic buttons, draggable dock, and command palette.

Performance & Accessibility:

• Tuned animations, optimized for SEO, and ensured accessibility across devices.

Content Layer:

• Integrated MDX for flexible blog and project authoring.

Technical Documentation:

• Documented architecture, challenges, and technical highlights for future reference.

---

Challenges Faced

• MDX + App Router integration:
  Manual setup for content loader, dynamic routing, and hydration in Next.js 15.

• Framer Motion performance tuning:
  Balancing animation smoothness with device GPU/CPU limits.

• iOS/Safari rendering bugs:
  Conditional workarounds for GPU texture artifacts in Safari.

• Cross-browser layout consistency:
  Ensured advanced effects rendered consistently everywhere.

• Performance tradeoffs:
  Heavy animation led to high resource use, prompting a redesign for simplicity and accessibility.

---

Project Architecture

• Architecture Style:
  Modular React component system, atomic CSS, MDX content layer.

• Component Organization:

  • ui/, core/, motion-primitives/: Reusable, atomic components
  • MDX content for blog and projects
  • Clean 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

• Screenshots/Video:
  This page documents the original build. For a live demo, visit archivedportfolio.franzdomingo.tech. The current portfolio is also available at archivedportfolio.franzdomingo.tech.

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

• Functionality Shown:

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

• Demo Instructions:
  Visit archivedportfolio.franzdomingo.techh to view the archived demo. For the latest portfolio, see portfolio.franzdomingo.tech.

---

Development Resources (Optional)

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

---

If you need further details or want to see the codebase, please contact the author directly.

---