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
Diseñé y desarrollé mi portafolio profesional como una demostración viva de mis habilidades en arquitectura de software, integración de IA y diseño UI/UX avanzado. El núcleo de la experiencia es 'Lyra', un asistente de IA interactivo y arrastrable (Drag & Drop) que incorpora un 'Radar Espacial' matemático para evitar desbordamientos de pantalla, garantizando una fluidez absoluta tanto en dispositivos móviles como en escritorio. A nivel arquitectónico, implementé el patrón de Puertos y Adaptadores (Arquitectura Hexagonal) para crear componentes altamente reutilizables; esta separación de responsabilidades asegura que cualquier modificación pequeña sea quirúrgica y no rompa otras partes del sistema. Evolucioné el diseño alejándome de un RAG tradicional pesado hacia un motor de Inyección de Contexto Dinámico local. Esto permite a Lyra tener conocimiento en tiempo real sobre mis servicios, proyectos y trayectoria, respondiendo con precisión milimétrica y cero alucinaciones. Todo en este proyecto, desde las animaciones hasta la estructura de datos, fue planificado y diseñado con un propósito claro: demostrar dominio técnico absoluto.
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.