Architectural Portfolio & Lyra AI
Portafolio interactivo de alto rendimiento que integra a 'Lyra', un asistente de IA dinámico con conciencia espacial. Diseñado con Arquitectura Hexagonal y una experiencia UI/UX inmersiva, responsiva y orientada a componentes.
Vista General del Proyecto
Este portafolio + Lyra (asistente IA). Problema: demostrar arquitectura hexagonal en el frontend. Solución: inyección dinámica de contexto, Drag & Drop con conciencia espacial. Stack: Next.js, TypeScript, Framer Motion, Gemini API. Resultado: asistente interactivo, streaming SSE, arquitectura hexagonal de punta a punta.
Módulos Core
Asistente Interactivo Lyra (UI/UX & Conciencia Espacial)
Desarrollo de un avatar de IA completamente interactivo con mecánicas Drag & Drop optimizadas para touch (móvil) y mouse (PC). Implementación de un hook personalizado (useSpatialRadar) que calcula coordenadas matriciales en tiempo real para anclar dinámicamente el widget y redirigir el escaneo en 3D, garantizando colisión cero con los bordes de cualquier pantalla.
Arquitectura Hexagonal y Componentes Reutilizables
Aplicación estricta de Clean Architecture aislando la lógica de negocio de la capa visual. Se definió una interfaz abstracta (IAIAssistant) implementada por adaptadores concretos (Gemini, DeepSeek). El frontend está modularizado de tal forma que los componentes son agnósticos al estado global, asegurando que los cambios futuros sean encapsulados y no produzcan efectos colaterales en el sistema.
Inyección de Contexto Dinámico y Anti-Alucinación
Reemplazo de bases de datos vectoriales complejas por un sistema de orquestación de contexto en memoria basado en los archivos de internacionalización (i18n). Lyra es consciente de la ruta exacta en la que navega el usuario y absorbe la información estructurada de servicios y proyectos, permitiéndole dar respuestas comerciales hiper-precisas sobre el portafolio sin inventar datos.
Motor de Streaming y Elevación de Estado
Creación de un sistema de Server-Sent Events (SSE) personalizado para renderizar respuestas de IA en tiempo real (efecto máquina de escribir) mediante Native Fetch. Se aplicaron técnicas de 'State Lifting' y programación defensiva para unificar el cerebro de la IA en un solo orquestador, previniendo bloqueos del Main Thread (UI) y asegurando 60 FPS constantes.
Diseño Escénico y Animaciones de Alto Rendimiento
Construcción de un entorno visual inmersivo ('Cosmic Background') y transiciones de elementos cuidadosamente coreografiadas. Se priorizó el rendimiento delegando la carga gráfica de las animaciones a la GPU (transform-gpu, translate3d) y aplicando técnicas de degradación elegante en móviles, demostrando que un diseño atractivo no tiene por qué sacrificar la velocidad de carga.