A nova identidade visual do meu website e blog: Minimalismo Futurista + IA Agentic

Se você acompanha meu trabalho há um tempo, provavelmente percebeu que o site mudou bastante.

Não foi apenas um refresh visual. Foi uma mudança de linguagem.

Eu queria que o website e o blog comunicassem com mais precisão o momento atual da minha carreira: AI Product Engineer, construção de produtos com agentes, e uma mistura de engenharia pragmática com visão de produto.

O resultado foi uma direção que chamei de:

Minimalismo Futurista + IA Agentic

O problema que eu queria resolver

A versão anterior funcionava bem em conteúdo e estrutura, mas ainda passava uma sensação de tema técnico "limpo" demais, sem identidade forte.

Em outras palavras:

boa base funcional;
pouca assinatura visual;
baixa percepção de "sistema vivo";
contraste fraco entre camada institucional e camada editorial.

Eu não queria cair no visual genérico de landing page SaaS.

Também não queria fazer algo só "bonito" que piorasse leitura, performance ou manutenção.

A direção visual em uma frase

Dark theatre + technical density + editorial soul.

Essa frase guiou quase todas as decisões:

dark theatre: fundo rico, profundo, com halos e atmosfera;
technical density: sinais de sistema (mono uppercase, status pills, telemetry);
editorial soul: leitura longa com ritmo tipográfico de publicação.

Paleta: menos cores, mais intenção

A base ficou no espectro escuro com acentos elétricos.

#05060a como canvas principal;
ciano elétrico (#22d3ee) como cor de ação;
magenta suave (#d946ef) como contraponto;
bordas com opacidade baixa para manter sofisticação.

A regra que mais ajudou: uma palavra de destaque por headline.
Quando tudo brilha, nada brilha.

Tipografia: duas vozes no mesmo sistema

Outra decisão importante foi separar papéis tipográficos:

Geist para UI e corpo de interface;
Manrope para títulos e chamadas;
JetBrains Mono para metadados e linguagem "de sistema";
Fraunces + Source Serif 4 para leitura longa dentro dos posts.

Essa combinação cria duas vozes complementares:

a voz futurista/técnica do produto;
a voz editorial/reflexiva do conteúdo.

Componentes que definem a nova estética

O redesign ganhou primitivos visuais reutilizáveis que viram vocabulário comum. O hero da home evoluiu depois da primeira versão: em vez de um único liquid orb como peça central, a coluna direita virou um morph de retrato—três renders com fundo transparente em ciclo vai‑e‑volta (human → hybrid → agent). Cada troca repete um “materialize” suave de cima para baixo, uma linha de costura neon e um chip HUD em mono (MODE · human / MODE · hybrid / MODE · agent). O frame hybrid é o centro emocional da narrativa: ainda humano, já aumentado.

Os três frames exportados para o morph (mesma iluminação, gradação crescente entre humano, híbrido e agente):

`MODE · human`	`MODE · hybrid`	`MODE · agent`

Em volta desse foco e no restante da página:

Particle Field (Canvas2D) para sensação de fluxo e rede;
Buraco negro decorativo (desktop), ancorado perto do headline como um poço de gravidade cósmica;
Lançamento de foguete (desktop), um passe vertical periódico pela viewport;
Glow Card com spotlight seguindo o cursor;
Cursor Aurora com halo global suave.

Um anel cônico em órbita continua atrás da pilha de retratos—mais leve que o orb isolado antigo, mas na mesma linguagem ciano/magenta.

Mais do que efeitos, isso é vocabulário. Qualquer seção nova que componha esses blocos já “fala” a linguagem do site.

Blog: contraste intencional entre interface e leitura

No blog, eu busquei um equilíbrio:

index com grid assimétrico e cards com profundidade;
artigo com coluna de leitura confortável;
tipografia editorial com mais respiro;
drop-cap no primeiro parágrafo;
metadados discretos em mono para manter consistência com o resto do sistema.

Esse contraste foi proposital: a navegação parece uma interface viva; o texto parece uma publicação.

Engenharia por trás do visual

O redesign foi pensado para manter previsibilidade técnica:

sem dependência pesada de 3D;
animações suaves e controladas;
respeito a prefers-reduced-motion;
estrutura componentizada para evoluir sem retrabalho.

Grande parte da identidade veio de CSS, SVG e Canvas2D, sem comprometer o tempo de carregamento.

O que melhorou na prática

Depois da mudança, os ganhos mais claros foram:

percepção de marca mais forte;
narrativa visual mais alinhada com IA e engenharia;
melhor separação entre "site institucional" e "experiência de leitura";
consistência maior entre páginas (/about, /projects, /contact, /community, /cv);
base visual reaproveitável para próximas evoluções.

O que vem na próxima iteração

Ainda quero evoluir:

imagens Open Graph mais alinhadas ao novo sistema (e aos modos do retrato);
refinamentos de microinteração em mobile;
ajustes contínuos de tipografia e ritmo editorial.

Mas o principal já aconteceu:

o site deixou de ser apenas um lugar para publicar conteúdo e virou um produto de identidade.

Se você também está redesenhando seu espaço digital, minha dica é simples:

comece menos pela estética da moda e mais por uma pergunta de posicionamento:

"Que tipo de profissional esse site precisa parecer, antes mesmo de alguém ler meu texto?"