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
This portfolio + Lyra (AI assistant). Problem: proving hexagonal architecture on the frontend. Solution: dynamic context injection, Drag & Drop with spatial awareness. Stack: Next.js, TypeScript, Framer Motion, Gemini API. Result: interactive assistant, SSE streaming, hexagonal architecture end to end.
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.