Meu Portifólio CMS com Agentes de IA

Contexto e Desafio de Engenharia

Plataformas tradicionais de gestão de portfólio e Sistemas de Gerenciamento de Conteúdo (CMS) costumam sofrer com arquiteturas estáticas acopladas, redundância taxonômica crônica (tags duplicadas ou semânticas idênticas criadas de forma desordenada) e falta de resiliência no processamento assíncrono de dados.

O desafio no desenvolvimento deste ecossistema bilingue de altíssimo desempenho foi unificar o gerenciamento de conteúdo dinâmico (projetos, artigos técnicos, currículos estruturados) a barramentos de Inteligência Artificial Generativa e esteiras de hiperautomação. Para tal, era imperativo sanar problemas críticos de engenharia de software: isolamento rigoroso de sessões administrativas, sincronização de cookies no Edge, latência de renderização de gráficos estruturados complexos, gerenciamento de estado de cache na borda e evitação de duplicação taxonômica por agentes de IA operando de forma concorrente em bancos relacionais.

Engenharia da Arquitetura e Divisão de Camadas

1. Apresentação, Rendering e Animações de Baixa CPU (Client-side & Edge)

• Core Framework: Construído sobre o Next.js 16 utilizando React 19 Server Components e o modelo de App Router. A interface apresenta uma arquitetura bilingue nativa governada pelo next-intl diretamente no nível de roteamento. O estado do lado do cliente é otimizado através do TanStack Query para gerenciar estados complexos de servidor e mutações assíncronas de dados.
• Design System & Canvas 2D: A estética ultra-premium implementa variáveis HSL customizadas sob o Tailwind CSS 4 e animações fluidas via Framer Motion. O plano de fundo generativo imersivo (FlowingLights) é executado diretamente em um elemento HTML5 Canvas 2D. O algoritmo calcula trajetórias de partículas ao longo de curvas cúbicas de Bezier tridimensionais (getBezierXY), utilizando um loop otimizado por requestAnimationFrame com decaimento alfa programático e filtros de ruído SVG para mitigar custos de CPU, entregando uma excelente métrica de Largest Contentful Paint (LCP).
• LRE (Localization & Rendering Engine): Incorporação de um componente customizado MermaidRenderer para processar diagramas de arquitetura de software complexos sob demanda. O renderizador utiliza portais do React (createPortal) para visualização imersiva em tela cheia, controle de zoom físico dinâmico, pan bidimensional via mouse/teclado com manipulação do viewBox do SVG e exportação em fluxo binário nativo para downloads.

2. Persistência Baseada em RLS e Modelagem Relacional (Supabase & PostgreSQL)

• Modelagem de Internacionalização: A persistência é estruturada sob um banco PostgreSQL gerenciado no Supabase, utilizando modelagem relacional normalizada com isolamento de metadados em tabelas satélites de internacionalização (project_translations, article_translations, category_translations, tag_translations) vinculadas por restrições de integridade referencial ON DELETE CASCADE.
• Zero-Trust Data Isolation: A governança de dados adota Row-Level Security (RLS) habilitada nativamente em todas as tabelas (como profiles, projects e articles). A segurança é aplicada através de políticas SQL estritas que distinguem o acesso público anônimo das operações transacionais de mutação restritas a perfis autenticados (TO authenticated USING (auth.uid() = author_id)).
• Mutação e Atomicidade: Transações de concorrência de leitura e escrita (como incremento de acessos globais) são delegadas a rotinas armazenadas no banco (RPCs) como increment_project_views e increment_article_views, garantindo consistência atômica.

3. Camada de IA & Automação Distribuída (LangChain & n8n)

• Motor Cognitivo: A esteira de inteligência artificial é orquestrada na API Route administrativamente protegida /api/admin/ai/route.ts integrada ao módulo core de agentes autônomos src/lib/ai/agent.ts. O ecossistema implementa um agente de tomadas de decisão cognitivas baseada em LangChain (ChatOpenAI gpt-4o-mini). Este agente é dotado de ferramentas programáticas especializadas (create_technology, create_tag) tipadas via Zod para inspecionar, criar e traduzir dinamicamente taxonomias no banco de dados.
• Loop de Execução Autônomo: O fluxo de raciocínio é gerenciado por um loop de execução com tolerância de até 10 iterações assíncronas para chamadas de ferramentas concorrentes (while (response.tool_calls ... iterations < 10)), consolidando os resultados em um JSON estruturado estrito. Integrações transacionais orientadas a eventos (como o formulário de contato do usuário final) são desacopladas da camada principal do Next.js via chamadas assíncronas assinaladas a webhooks distribuídos no n8n (WEBHOOK_CONTACT_URL), garantindo resiliência operacional e escalabilidade elástica.

Destaques Técnicos e Desafios Superados

• Taxonomia Autônoma via Agente de IA (runSuggestTagsAgent): Desenvolvimento de um mecanismo de prevenção de duplicação taxonômica. Antes de gerar novas associações para um projeto ou artigo, o agente LangChain consome um dump contextualizado do banco de dados em tempo real. Se uma tecnologia ou tag relevante já possuir um slug cadastrado no Supabase, o agente adota o ID correspondente. Caso contrário, invoca as ferramentas em segundo plano para realizar a inserção atômica, gerando simultaneamente as traduções correspondentes na tabela tag_translations.
• Resiliência do Estado de Caching no Next.js (ISR): Implementação de cache com granularidade fina através da API nativa unstable_cache. Consultas de leitura de alto custo (como as junções relacionais) são retidas em memória sob tags declarativas ('projects', 'articles', 'resume_data'). A invalidação de cache opera em tempo real e de forma segura por meio da API Route /api/revalidate/route.ts, que recebe requisições autenticadas pós-mutações no painel administrativo e aciona o método revalidateTag(tag), garantindo propagação instantânea de dados com zero desperdício de requisições ao PostgreSQL.
• Visualizador Mermaid com Interatividade Avançada (Portals & Viewport Math): Criação de um visualizador interativo complexo (MermaidRenderer) capaz de higienizar a sintaxe de diagramas de arquitetura, renderizar SVGs vetoriais dinamicamente no lado do cliente e encapsulá-los em um contêiner customizado com suporte a zoom in/out inercial via transformações matemáticas (scaledWidth/scaledHeight). A UI resolve quebras de layout usando Portais React, o que isola o fluxo HTML original da viewport global e evita oscilações de layout (Cumulative Layout Shift - CLS).
• Gerenciador de Galeria com Drag-and-Drop Inercial & Upload Concorrente: Desenvolvimento do componente GalleryManager integrando as bibliotecas @dnd-kit/core e @dnd-kit/sortable. O gerenciador oferece ordenação visual e por teclado acessível baseada em sensores físicos (PointerSensor, KeyboardSensor), atualizando o campo sequencial display_order no banco por meio de mutações atômicas estruturadas. O fluxo é integrado a um barramento de upload paralelo com validação de MIME-type e restrição de arquivos na borda (max 5MB), direcionando os blobs em tempo real para os buckets do Supabase Storage.
• Edge Middleware de Segurança e Sincronização de Sessões (middleware.ts): Implementação de um middleware em nível de Edge que intercepta requisições protegidas /admin de forma otimizada. O interceptor sincroniza cookies de autenticação do cliente e do servidor (createServerClient da suíte @supabase/ssr), atualizando o payload de cookies da requisição e da resposta simultaneamente via cookies.setAll, resolvendo conflitos de internacionalização ao extrair o locale dinamicamente através do matcher e protegendo rotas contra acessos não autorizados por meio de redirecionamentos transparentes com parâmetros de retorno redirectTo.

Resultados e Impacto de Engenharia

• Eficiência Operacional Extrema: Redução de 99% no tempo gasto na gestão e formatação manual de taxonomia e mídias de projetos graças ao agente autônomo e ao painel integrado com drag-and-drop.
• Latência de Leitura Sub-Milissegundo: As páginas públicas são pré-renderizadas e servidas a partir de caches otimizados na borda com invalidação ISR atômica sob demanda, mitigando drasticamente os custos transacionais de banco de dados.
• Acessibilidade e Experiência Premium: Obtenção de scores excelentes em auditorias de Core Web Vitals através de micro-interações fluidas a 60fps, animações otimizadas em Canvas 2D e total adaptabilidade responsiva bilingue.
• Robustez de Segurança de Nível Enterprise: Vazamento zero de credenciais administrativas devido ao isolamento total promovido pelo Edge Middleware e políticas de RLS Zero-Trust no banco de dados.