Architectural Portfolio & Lyra AI
High-performance interactive portfolio featuring 'Lyra', a dynamic AI assistant with spatial awareness. Built with Hexagonal Architecture and an immersive, responsive, component-driven UI/UX.
Project Overview
I designed and developed my professional portfolio as a live demonstration of my skills in software architecture, AI integration, and advanced UI/UX design. The core of the experience is 'Lyra', an interactive and draggable AI assistant (Drag & Drop) that incorporates a mathematical 'Spatial Radar' to prevent screen overflow, ensuring absolute fluidity on both mobile and desktop devices. At the architectural level, I implemented the Ports and Adapters pattern (Hexagonal Architecture) to create highly reusable components; this separation of concerns ensures that any small modification is surgical and won't break other parts of the system. I evolved the design away from a heavy traditional RAG toward a local Dynamic Context Injection engine. This gives Lyra real-time awareness of my services, projects, and background, allowing it to respond with pinpoint accuracy and zero hallucinations. Everything in this project — from animations to data structure — was planned and designed with a clear purpose: to demonstrate absolute technical mastery.
Core Modules
Interactive Lyra Assistant (UI/UX & Spatial Awareness)
Fully interactive AI avatar with Drag & Drop mechanics optimized for both touch (mobile) and mouse (desktop). Implements a custom hook (useSpatialRadar) that calculates matrix coordinates in real time to dynamically anchor the widget and redirect 3D scanning, guaranteeing zero collision with screen edges on any device.
Hexagonal Architecture & Reusable Components
Strict application of Clean Architecture, isolating business logic from the visual layer. An abstract interface (IAIAssistant) is defined and implemented by concrete adapters (Gemini, DeepSeek). The frontend is modularized so components are agnostic to global state, ensuring future changes are encapsulated and produce no side effects across the system.
Dynamic Context Injection & Anti-Hallucination
Replacement of complex vector databases with an in-memory context orchestration system based on i18n (internationalization) files. Lyra is aware of the exact route the user is navigating and absorbs structured data about services and projects, enabling hyper-precise commercial responses about the portfolio without fabricating any information.
Streaming Engine & State Lifting
Custom Server-Sent Events (SSE) system for rendering AI responses in real time (typewriter effect) via Native Fetch. State Lifting techniques and defensive programming were applied to unify the AI brain in a single orchestrator, preventing Main Thread (UI) blocking and ensuring consistent 60 FPS.
Scenic Design & High-Performance Animations
Built an immersive visual environment ('Cosmic Background') and carefully choreographed element transitions. Performance was prioritized by offloading animation rendering to the GPU (transform-gpu, translate3d) and applying graceful degradation techniques on mobile, proving that a great-looking design doesn't have to sacrifice load speed.