Architecture & AI-First Workflow

Welcome to the Under the Hood section. This page serves as technical documentation of how this portfolio was designed, engineered, and deployed.

1. The Stack

This application utilizes a hybrid architecture, combining a lightweight monolithic core with decoupled micro-frontends:

Core Backend: Python FastAPI. Handles routing, Jinja2 rendering, and proxying requests for the main portfolio.
Core Frontend: Pure HTML5, CSS3, and Vanilla JS to maximize load speed and control rendering.
AI Interface: A decoupled React 18 SPA deployed independently on a subdomain, communicating via REST API.
Visuals: Custom HTML5 Canvas implementation for the interactive particle network background.

2. AI-First Development Workflow

In the spirit of modern engineering, this entire UI was prototyped and built using an AI-first approach with Cursor and Claude.

            // System Prompt utilized for scaffolding:

            > "Act as a Senior Frontend Engineer. Build a minimalist, dark-mode-first portfolio UI. Use raw CSS variables for theming. Implement a dynamic canvas particle network..."

Instead of manually writing boilerplate CSS and managing standard DOM events, I leveraged LLMs to rapidly scaffold the responsive grid, implement the translation state logic, and fine-tune the canvas math. This allowed me to focus my time on backend architecture and vector database integration.

3. RAG Copilot & Decoupled Architecture

The crown jewel of this portfolio is the Engineering RAG Copilot, which demonstrates a modern AI-integrated architecture:

Frontend (React/Vite): A dedicated Single Page Application hosted on a separate subdomain (ragchat.skuriatin.com). It handles session management via LocalStorage, dynamic state animations, and complex FormData payloads for PDF uploads.
Backend (FastAPI): The main API Gateway securely routes incoming documents to an isolated Python RAG pipeline.
AI Pipeline: Documents are chunked and vectorized into a ChromaDB store. When queried, the LLM synthesizes an answer directly from the vector store, returning the explicit source file and page numbers to the React client.

4. Performance Optimizations & Features

To ensure a flawless user experience:

Canvas Optimization: The particle network uses spatial partitioning concepts. Distance calculations are only performed for nearby nodes to maintain 60 FPS even on mobile devices.
Client-side i18n & Dynamic Assets: Multilingual support (EN, UK, ES) is handled entirely via a lightweight JS dictionary, eliminating server round-trips. Furthermore, the i18n script dynamically manipulates the DOM to serve localized static assets—automatically updating the "Resume" download link to fetch the correct localized PDF and altering the download filename based on the active state.
Theme Persistence: Dark/Light mode preferences are stored locally and applied instantly via CSS variables (:root to [data-theme="dark"] state swaps).