My CMS Portfolio with AI Agents

Context and Engineering Challenge

Traditional portfolio management platforms and Content Management Systems (CMS) often struggle with tightly coupled static architectures, chronic taxonomic redundancy (duplicate tags or identical semantics created haphazardly), and a lack of resilience in asynchronous data processing.

The challenge in developing this high-performance bilingual ecosystem was to unify the management of dynamic content (projects, technical articles, structured resumes) with Generative Artificial Intelligence pipelines and hyperautomation workflows. To achieve this, it was imperative to address critical software engineering issues: strict isolation of administrative sessions, cookie synchronization on the Edge, latency in rendering complex structured graphics, edge cache state management, and avoidance of taxonomic duplication by AI agents operating concurrently in relational databases.

Architecture Engineering and Layer Division

1. Presentation, Rendering, and Low CPU Animations (Client-side & Edge)

• Core Framework: Built on Next.js 16 using React 19 Server Components and the App Router model. The interface features a native bilingual architecture governed by next-intl directly at the routing level. Client-side state is optimized through TanStack Query to manage complex server states and asynchronous data mutations.
• Design System & 2D Canvas: The ultra-premium aesthetic implements custom HSL variables under Tailwind CSS 4 and fluid animations via Framer Motion. The immersive generative background (FlowingLights) runs directly on an HTML5 2D Canvas element. The algorithm calculates particle trajectories along three-dimensional cubic Bezier curves (getBezierXY), utilizing an optimized loop via requestAnimationFrame with programmatic alpha decay and SVG noise filters to mitigate CPU costs, delivering an excellent Largest Contentful Paint (LCP) metric.
• LRE (Localization & Rendering Engine): Incorporation of a custom MermaidRenderer component to process complex software architecture diagrams on demand. The renderer uses React portals (createPortal) for immersive full-screen visualization, dynamic physical zoom control, two-dimensional panning via mouse/keyboard with manipulation of the SVG viewBox, and native binary stream export for downloads.

2. RLS-Based Persistence and Relational Modeling (Supabase & PostgreSQL)

• Internationalization Modeling: Persistence is structured under a PostgreSQL database managed in Supabase, utilizing normalized relational modeling with metadata isolation in internationalization satellite tables (project_translations, article_translations, category_translations, tag_translations) linked by referential integrity constraints ON DELETE CASCADE.
• Zero-Trust Data Isolation: Data governance adopts Row-Level Security (RLS) natively enabled on all tables (such as profiles, projects, and articles). Security is enforced through strict SQL policies that distinguish anonymous public access from transactional mutation operations restricted to authenticated profiles (TO authenticated USING (auth.uid() = author_id)).
• Mutation and Atomicity: Read and write concurrency transactions (such as global view increments) are delegated to stored routines in the database (RPCs) like increment_project_views and increment_article_views, ensuring atomic consistency.

3. AI Layer & Distributed Automation (LangChain & n8n)

• Cognitive Engine: The artificial intelligence pipeline is orchestrated in the administratively protected API Route /api/admin/ai/route.ts integrated with the core module of autonomous agents src/lib/ai/agent.ts. The ecosystem implements a cognitive decision-making agent based on LangChain (ChatOpenAI gpt-4o-mini). This agent is equipped with specialized programmatic tools (create_technology, create_tag) typed via Zod to dynamically inspect, create, and translate taxonomies in the database.
• Autonomous Execution Loop: The reasoning flow is managed by an execution loop with tolerance for up to 10 asynchronous iterations for concurrent tool calls (while (response.tool_calls ... iterations < 10)), consolidating results into a strict structured JSON. Event-driven transactional integrations (such as the end-user contact form) are decoupled from the main Next.js layer via asynchronous calls routed to distributed webhooks in n8n (WEBHOOK_CONTACT_URL), ensuring operational resilience and elastic scalability.

Technical Highlights and Challenges Overcome

• Autonomous Taxonomy via AI Agent (runSuggestTagsAgent): Development of a mechanism to prevent taxonomic duplication. Before generating new associations for a project or article, the LangChain agent consumes a contextualized dump of the database in real-time. If a relevant technology or tag already has a registered slug in Supabase, the agent adopts the corresponding ID. Otherwise, it invokes background tools to perform atomic insertion, simultaneously generating the corresponding translations in the tag_translations table.
• Caching State Resilience in Next.js (ISR): Implementation of fine-grained caching through the native unstable_cache API. High-cost read queries (such as relational joins) are retained in memory under declarative tags ('projects', 'articles', 'resume_data'). Cache invalidation operates in real-time and securely through the API Route /api/revalidate/route.ts, which receives authenticated requests post-mutations in the admin panel and triggers the revalidateTag(tag) method, ensuring instant data propagation with zero waste of requests to PostgreSQL.
• Mermaid Viewer with Advanced Interactivity (Portals & Viewport Math): Creation of a complex interactive viewer (MermaidRenderer) capable of sanitizing architecture diagram syntax, dynamically rendering vector SVGs on the client side, and encapsulating them in a custom container with support for inertial zoom in/out via mathematical transformations (scaledWidth/scaledHeight). The UI resolves layout breaks using React Portals, isolating the original HTML flow from the global viewport and avoiding layout shifts (Cumulative Layout Shift - CLS).
• Gallery Manager with Inertial Drag-and-Drop & Concurrent Upload: Development of the GalleryManager component integrating the libraries @dnd-kit/core and @dnd-kit/sortable. The manager offers accessible visual and keyboard-based sorting based on physical sensors (PointerSensor, KeyboardSensor), updating the sequential display_order field in the database through structured atomic mutations. The flow is integrated with a parallel upload bus with MIME-type validation and file size restrictions at the edge (max 5MB), directing blobs in real-time to Supabase Storage buckets.
• Edge Security Middleware and Session Synchronization (middleware.ts): Implementation of an Edge-level middleware that intercepts protected requests to /admin in an optimized manner. The interceptor synchronizes client and server authentication cookies (createServerClient from the @supabase/ssr suite), updating the request and response cookie payload simultaneously via cookies.setAll, resolving internationalization conflicts by dynamically extracting the locale through the matcher and protecting routes against unauthorized access through transparent redirects with return parameters redirectTo.

Engineering Results and Impact

• Extreme Operational Efficiency: 99% reduction in time spent on manual management and formatting of taxonomy and project media thanks to the autonomous agent and the integrated drag-and-drop panel.
• Sub-Millisecond Read Latency: Public pages are pre-rendered and served from optimized edge caches with atomic ISR invalidation on demand, drastically mitigating transactional database costs.
• Accessibility and Premium Experience: Achieving excellent scores in Core Web Vitals audits through fluid micro-interactions at 60fps, optimized animations in 2D Canvas, and total bilingual responsive adaptability.
• Enterprise-Level Security Robustness: Zero leakage of administrative credentials due to total isolation promoted by Edge Middleware and Zero-Trust RLS policies in the database.