Sitio Web de Portafolio 3D

Portafolio Original / Web Interactiva 3D / Vitrina Archivada

Resumen rápido:
Un sitio web de portafolio personal totalmente responsivo que presenta una tarjeta de aterrizaje 3D de alto impacto, efectos de interfaz de usuario avanzados y elementos interactivos. Construido desde cero con tecnologías web modernas para mostrar capacidades técnicas y de diseño.

Duración del Desarrollo: Junio 2025

Nota(s):

• Descargo de responsabilidad sobre alojamiento/disponibilidad de código:
  Archivado como proyecto de exhibición. Código fuente disponible bajo petición. El portafolio actualizado y optimizado ya está en vivo en archivedportfolio.franzdomingo.tech.
• Contacto para más información o demostraciones:
  Comuníquese con Franz Phillip G. Domingo a través de franzdomingo.tech.
• Nota de navegación:
  Esta página documenta la construcción original; el portafolio actual está disponible en el enlace de arriba.

---

Características

• Tarjeta de aterrizaje 3D con rotación en tiempo real y glassmorphism
• Contenido de blog y proyectos impulsado por MDX
• Diseño responsivo, mobile-first
• Cambio de tema con persistencia
• Sistema de modales avanzado con transiciones de transformación (morphing)
• Animaciones y transiciones de página impulsadas por Framer Motion
• Paleta de comandos (CMD+K) para navegación
• Interfaz de dock arrastrable con persistencia en localStorage
• Botones magnéticos con efectos animados
• Reloj en vivo y chatbot de IA integrado
• Glassmorphism, acentos de neón, fondos animados
• Sistema de cursor personalizado
• PWA habilitada, optimizada para SEO, prioridad en accesibilidad
• Límites de error (error boundaries) personalizados

---

Mis Contribuciones (Rol y Responsabilidades)

Diseño e Ingeniería:

• Diseñé e implementé toda la interfaz de usuario (UI/UX), efectos 3D y funciones interactivas.

Animación e Interactividad:

• Construí primitivas personalizadas de Framer Motion, botones magnéticos, dock arrastrable y paleta de comandos.

Rendimiento y Accesibilidad:

• Ajusté animaciones, optimicé para SEO y aseguré la accesibilidad en todos los dispositivos.

Capa de Contenido:

• Integré MDX para la creación flexible de blogs y proyectos.

Documentación Técnica:

• Documenté la arquitectura, los desafíos y los aspectos técnicos destacados para referencia futura.

---

Desafíos Enfrentados

• Integración de MDX + App Router:
  Configuración manual para el cargador de contenido, enrutamiento dinámico y hidratación en Next.js 15.

• Ajuste de rendimiento de Framer Motion:
  Equilibrio entre la fluidez de la animación y los límites de GPU/CPU del dispositivo.

• Errores de renderizado en iOS/Safari:
  Soluciones condicionales para artefactos de textura de GPU en Safari.

• Consistencia del diseño entre navegadores:
  Aseguré que los efectos avanzados se renderizaran de manera consistente en todas partes.

• Compromisos de rendimiento:
  La animación pesada llevó a un alto uso de recursos, lo que motivó un rediseño para mayor simplicidad y accesibilidad.

---

Arquitectura del Proyecto

• Estilo de Arquitectura:
  Sistema de componentes React modular, CSS atómico, capa de contenido MDX.

• Organización de Componentes:

  • ui/, core/, motion-primitives/: Componentes atómicos reutilizables
  • Contenido MDX para blog y proyectos
  • Enrutamiento limpio bajo app/projects/, app/blog/, rutas dinámicas [slug]

• Gestión de Estado:
  Gestión de temas basada en Context, localStorage para el estado del dock/cursor

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

---

Vista Previa de la Demo

• Capturas de pantalla/Video:
  Esta página documenta la construcción original. Para una demostración en vivo, visite archivedportfolio.franzdomingo.tech. El portafolio actual también está disponible en archivedportfolio.franzdomingo.tech.

• Vistas de Plataforma:
  Web (responsivo, mobile-first)

• Funcionalidad Mostrada:

  • Tarjeta de aterrizaje 3D e interfaz interactiva
  • Transiciones animadas, modales y fondos
  • Paleta de comandos, dock, botones magnéticos
  • Contenido impulsado por MDX, reloj en vivo, chatbot integrado

• Instrucciones de la Demo:
  Visite archivedportfolio.franzdomingo.tech para ver la demostración archivada. Para el portafolio más reciente, vea portfolio.franzdomingo.tech.

---

Recursos de Desarrollo (Opcional)

• Guías/Docs:
  • Documentación de Framer Motion, Tailwind CSS, Radix UI, MDX

---

Si necesita más detalles o desea ver el código base, póngase en contacto con el autor directamente.

---