Portfólio Pessoal — Site & Painel Administrativo

Um site de portfólio que também é uma aplicação full-stack completa, com CMS próprio, autenticação e suporte bilíngue.

O que é

Este é o site que você está vendo agora: uma aplicação Next.js construída do zero para apresentar projetos, artigos, currículo e formas de contato — mas com um diferencial: todo o conteúdo é gerenciado por um painel administrativo próprio, sem depender de nenhum CMS externo. Projetos, textos, imagens, tecnologias e mensagens recebidas são editados direto pelo navegador, sem tocar em código ou fazer novo deploy.

Como funciona

A aplicação usa o App Router do Next.js com duas grandes áreas: as páginas públicas do site e um /admin protegido por autenticação, onde o conteúdo é criado e editado. Os dados vivem no Supabase (Postgres), com um schema versionado por migrations SQL. Um middleware customizado cuida de duas coisas ao mesmo tempo: proteger as rotas administrativas e detectar automaticamente o idioma do visitante (português ou inglês) via cabeçalho do navegador e cookie, servindo o conteúdo já traduzido. As imagens do site são hospedadas no Google Drive e servidas por endpoints próprios, sem expor nenhuma chave de API no cliente.

Stack técnica

• Next.js 16 (App Router) + React 19 + TypeScript
• Tailwind CSS 4 + shadcn/ui + Framer Motion
• Supabase (Postgres + Auth)
• Google Drive API como galeria de imagens
• react-markdown para os artigos do blog

Destaques técnicos

• CMS próprio embutido no admin, cobrindo projetos, artigos, currículo, mensagens de contato e personalização visual do site
• Suporte bilíngue construído sob medida: detecção automática de idioma e campos de conteúdo espelhados (ex.: hero_title / hero_title_en)
• SEO cuidado desde o início: JSON-LD estruturado, sitemap, robots.txt e Open Graph dinâmico
• Testes unitários cobrindo as partes mais sensíveis do sistema: autenticação, detecção de idioma e processamento de markdown
• Busca híbrida (full-text + IA local) e servidor MCP para edição de conteúdo por uma IA, com permissões granulares

Busca híbrida e conexões MCP

Além do CMS, o site tem dois diferenciais que vão além do portfólio comum:

• Busca híbrida (/busca, atalho ⌘K): combina full-text nativo do Postgres com busca semântica via um modelo de embeddings rodando localmente no servidor (@huggingface/transformers, sem custo de API externa), fundindo os dois rankings com Reciprocal Rank Fusion.
• Servidor MCP (/api/mcp): expõe o conteúdo do site como tools do Model Context Protocol, com permissão de leitura/escrita configurável por recurso e por conexão, criada e gerenciada pelo painel admin. Isso permite que uma IA (como o Claude) leia e edite projetos, artigos, SEO e outros textos do site diretamente, sob controle granular do dono — inclusive este próprio parágrafo foi adicionado usando essa conexão.