Expertise aplicada no comando da IA: como construí este site sem escrever uma linha de código

Este site é um case. Não apenas de marketing digital ou SEO — mas de como expertise humana e IA generativa se complementam quando bem combinadas. Cada decisão estratégica aqui foi minha: o posicionamento, a arquitetura, o conteúdo, a hierarquia. A IA executou. E a diferença entre IA sozinha e IA pilotada por 20 anos de experiência em Marketing Digital e Produto é exatamente o que você vê neste projeto — construído em menos de 15 horas de trabalho ativo.

Neste artigo, conto como foi esse processo: as decisões que tomei, as estratégias que apliquei, o que a IA trouxe por iniciativa própria — e o que aprendi sobre liderar um projeto digital de ponta usando IA como parceira de execução. Não é um tutorial técnico. É um relato de como um profissional experiente pensa e constrói na era da IA.

🎯 O objetivo e a premissa

Precisava de um site pessoal que fosse simultaneamente três coisas: uma vitrine profissional para recrutadores, uma plataforma de autoridade para SEO e conteúdo — e, acima de tudo, um case vivo do que é IA aplicada com expertise digital humana no comando. Não um site sobre inovação. Um site que é inovação.

A tese central é simples: IA generativa acelera exponencialmente quando pilotada por quem tem domínio do território. Sem a experiência de 20 anos em Marketing Digital, Produto e SEO por trás dos prompts, o resultado seria um site genérico. É a combinação — expertise humana definindo o que e por quê, IA executando o como — que gera um produto diferenciado.

A premissa operacional era clara desde o início: nenhuma linha de código seria escrita por mim. Eu atuaria como líder de produto — definindo objetivos, tomando decisões estratégicas, revisando entregas e iterando com direcionamento preciso. A IA executaria com velocidade e consistência impossíveis manualmente.

🤝 Humano e IA: quem fez o quê

Esta é a parte mais honesta e mais reveladora do case. Ao longo do projeto, ficou evidente uma divisão natural de papéis — não planejada, mas orgânica — entre o que eu trouxe e o que a IA executou. E também o que a IA implementou por iniciativa própria, sem que eu pedisse.

O que veio da minha expertise:

• Construir um site único em três idiomas — português, inglês e espanhol — para alcançar os mercados em que estou apto a atuar e maximizar o alcance do meu posicionamento profissional.
• Definir o que comunicar em cada seção, para qual público, com qual tom e em qual ordem — a hierarquia de informação que conduz o recrutador pela leitura sem que ele perceba.
• A decisão de ir além do SEO tradicional e otimizar o site também para mecanismos de resposta — como o Google quando gera resumos automáticos — e para sistemas de inteligência artificial que hoje respondem perguntas e recomendam profissionais, como o ChatGPT e o Perplexity.
• Seguir padrões internacionais e brasileiros de acessibilidade digital — não por obrigação, mas porque acessibilidade melhora a experiência de todos os usuários, eleva a pontuação técnica do site em ferramentas de avaliação e é um sinal de qualidade reconhecido por buscadores.
• Todo o conteúdo: textos, narrativa, cases e números — nada foi publicado sem minha leitura, julgamento e aprovação. A IA não tem como avaliar se um resultado é estrategicamente verdadeiro para o meu perfil.
• A identidade visual: o tema escuro com acentos em ciano e roxo, a tipografia que equilibra autoridade editorial e leitura corporativa, a linguagem visual dos cards e elementos de navegação.
• Cada decisão de experiência do usuário: o que aparece primeiro na tela, como o menu se comporta no celular, onde fica o seletor de idioma, o que o visitante vê em 3 segundos — tudo definido com base em anos de prática em produto digital.

O que a IA implementou por iniciativa — sem eu pedir explicitamente:

• Dados estruturados completos e aninhados — a IA aplicou automaticamente um conjunto de marcações invisíveis no código que dizem aos buscadores quem sou, o que faço, onde trabalhei, quais certificações tenho e quais projetos liderei. Isso é o que permite ao Google exibir informações ricas nos resultados de busca.
• Identificação de idioma em termos estrangeiros — cada termo técnico em inglês dentro do texto em português recebeu uma marcação de idioma, para que tecnologias de leitura de tela pronunciem corretamente cada palavra — requisito do padrão brasileiro de acessibilidade.
• Respeito à preferência do usuário por menos movimento — quando um visitante configura seu sistema operacional para reduzir animações (comum em pessoas com epilepsia ou sensibilidade a movimento), o site detecta automaticamente e desativa todos os efeitos visuais.
• Proteção do endereço de e-mail — o e-mail de contato foi codificado de forma que robôs que varrem a web em busca de endereços não consigam capturá-lo, enquanto o visitante humano o vê normalmente ao clicar.
• Compatibilidade com a área segura do iPhone — em iPhones com barra de navegação inferior, o menu do site é posicionado automaticamente acima dela, sem sobrepor os controles do sistema.
• Segurança em todos os links externos — todo link que abre uma página externa recebeu automaticamente configurações de segurança que impedem que o site de destino acesse informações da página de origem.
• Cor da barra do navegador adaptada ao tema — no celular, a barra superior do navegador muda de cor acompanhando o tema escuro ou claro escolhido pelo visitante, mantendo a coerência visual mesmo fora da página.
• Navegação por teclado sem obstáculos — ao navegar pelo site usando apenas o teclado, o menu fixo do topo nunca cobre o elemento selecionado, garantindo que pessoas que não usam mouse consigam navegar sem perder o contexto visual.

🏗️ Arquitetura e decisões técnicas

A primeira grande decisão foi estrutural: uma página única ou várias páginas separadas? Optei por uma página única com navegação por seções — toda a força do domínio concentrada em um único endereço, mais fácil de manter e mais rápida de carregar. Do ponto de vista do Google, isso significa que cada visita reforça a relevância da mesma URL.

A segunda decisão foi sobre o multilíngue. Em vez de criar três sites separados — com toda a complexidade de manutenção que isso gera — desenvolvemos um sistema onde todos os textos em português, inglês e espanhol convivem em um único arquivo. O visitante troca de idioma instantaneamente, sem recarregar a página.

As escolhas de tecnologia foram deliberadamente simples — priorizando velocidade, independência e facilidade de atualização:

Elemento	Solução	Motivo
Estrutura	Código HTML puro e semântico	Leitura facilitada por buscadores, sem dependências externas
Visual	Folhas de estilo com variáveis	Permite alternar entre tema escuro e claro com uma linha
Interatividade	JavaScript sem frameworks	Carregamento instantâneo, sem bibliotecas pesadas
Tipografia	Playfair Display + Plus Jakarta Sans	Equilíbrio entre autoridade e leitura confortável
Hospedagem	Netlify / Vercel	Publicação automática, certificado de segurança grátis e entrega global

🔍 SEO, AEO e GEO — três camadas de visibilidade

Esta foi a parte mais estratégica do projeto. Não me contentei apenas em aparecer no Google — queria que o site fosse encontrado e citado também por ferramentas de inteligência artificial como ChatGPT, Perplexity e pelo próprio Google quando gera resumos automáticos de busca. Para isso, trabalhamos em três frentes simultaneamente.

SEO — otimização para mecanismos de busca tradicionais — foi a base. Isso envolve configurações que a maioria dos visitantes nunca vê: título da página no tamanho certo, descrição resumida, endereço canônico (que evita conteúdo duplicado), mapa do site para os robôs do Google, e diversas instruções que orientam como o site deve ser indexado e apresentado nos resultados.

AEO — otimização para mecanismos de resposta — focou em fazer o site aparecer nas respostas diretas que o Google exibe antes dos links, e nos resumos falados de assistentes como Alexa e Google Assistant. Para isso, estruturamos uma seção de perguntas e respostas frequentes sobre meu perfil — desde "Quem é Julio Quartarolo?" até "Em quais setores ele tem experiência?" — em um formato que os buscadores conseguem ler e reproduzir diretamente.

GEO — otimização para motores de inteligência artificial generativa — foi o diferencial. Para que sistemas como o ChatGPT me citem como referência ao responder perguntas sobre marketing digital, o site precisa demonstrar autoridade de forma estruturada. Isso significa informar, em linguagem que as IAs entendem, quem sou, o que faço, onde trabalhei, quais projetos liderei e quais certificações possuo.

♿ Acessibilidade — WCAG 2.2 AA e eMAG

Acessibilidade foi uma escolha estratégica, não apenas ética. Sites acessíveis obtêm pontuação mais alta nas ferramentas de avaliação do Google, são lidos com mais qualidade pelos robôs de busca e transmitem credibilidade técnica — algo especialmente relevante num site que se propõe a demonstrar competência digital.

Seguimos dois padrões reconhecidos simultaneamente: o WCAG 2.2 — o mais recente padrão internacional de acessibilidade digital, hoje obrigatório em sites governamentais do Reino Unido e referência global — e o eMAG, o modelo oficial brasileiro adotado pelo governo eletrônico. Juntos, eles cobrem as exigências de acessibilidade da maioria dos países onde posso atuar.

Os principais itens implementados:

• Estrutura de página clara para leitores de tela — tecnologias usadas por pessoas com deficiência visual conseguem identificar e anunciar cada seção do site corretamente
• Link "Pular para o conteúdo" — invisível para quem usa mouse, mas essencial para quem navega apenas com o teclado, permitindo ir direto ao conteúdo sem percorrer o menu inteiro
• Destaque visual ao navegar por teclado — cada elemento clicável exibe um contorno visível quando selecionado, indicando claramente onde o usuário está na página
• Respeito à preferência por menos movimento — o site detecta automaticamente quando o sistema operacional do visitante está configurado para reduzir animações e desativa todos os efeitos visuais
• Teclas de atalho padrão brasileiro — combinações de teclado que permitem navegar entre as seções principais sem usar o mouse, seguindo o padrão eMAG
• Barra de acessibilidade no topo — atalhos de navegação visíveis e selos que declaram publicamente a conformidade com os padrões adotados
• Identificação de idioma em termos estrangeiros — cada palavra em inglês dentro do texto em português é marcada, para que tecnologias de leitura de tela pronunciem corretamente
• Botões com tamanho mínimo garantido — todos os elementos clicáveis têm área de toque suficiente para uso confortável em dispositivos móveis

🌓 Dark mode e Light mode com persistência

A alternância entre tema escuro e claro não foi uma escolha puramente estética. Pesquisas apontam que a maioria dos usuários prefere tela escura no celular, enquanto ambientes corporativos — onde recrutadores costumam trabalhar — tendem ao tema claro. Oferecer os dois garante que o site entregue a melhor experiência independente de quem visita e de onde.

O site memoriza a preferência do visitante: quem escolhe o tema escuro volta ao tema escuro na próxima visita. E para quem nunca escolheu, o site detecta automaticamente a configuração do sistema operacional — se o computador ou celular está em modo escuro, o site já abre assim.

🤖 Como foi trabalhar com IA como parceira de execução

O maior aprendizado deste projeto não foi sobre tecnologia — foi sobre como conduzir o diálogo com a IA para extrair o melhor resultado. Algumas descobertas práticas:

Decisão humana, execução por IA. Cada escolha relevante — cores, estrutura de conteúdo, estratégia de visibilidade, padrão de acessibilidade — foi tomada por mim. A IA executou com precisão e consistência impossíveis de replicar manualmente. Quando tentei delegar decisões estratégicas, os resultados foram genéricos. Quando cheguei com a decisão clara e pedi execução, os resultados foram excelentes.

A instrução é o produto. A qualidade do que a IA entrega é diretamente proporcional à qualidade do que você pede. Saber descrever o problema, o contexto e o que não pode acontecer é a competência central desta era — muito mais do que saber programar.

Velocidade de ajuste como vantagem real. O que com uma agência levaria semanas de briefing, reuniões e aprovações, aqui levou horas. Testei opções de visual antes de implementar, revisei textos em tempo real e fiz ajustes pontuais em minutos. Essa velocidade muda completamente a dinâmica de um projeto.

A IA erra — e corrige sem atrito. Houve momentos em que o resultado não foi exatamente o que eu imaginava. A diferença: a correção foi imediata. Sem nova reunião, sem novo briefing — uma instrução precisa e o ajuste estava feito.

📋 A stack de IAs utilizada

Ferramenta	Função no projeto
Claude (Anthropic)	Estrutura do site, código, estratégia de visibilidade, acessibilidade e revisão estratégica — o núcleo de todo o projeto
Gemini / ChatGPT	Geração de variações de texto e comparação de abordagens de conteúdo
Canva / Adobe Firefly	Criação de imagens e elementos visuais para os artigos
Netlify	Publicação, hospedagem com certificado de segurança automático e entrega global do site

🏆 O que este projeto demonstra

Este site não é apenas minha apresentação profissional. É a demonstração prática de uma tese que defendo há anos: liderança digital no século XXI significa saber orquestrar inteligências — humana e artificial — para criar produtos relevantes, acessíveis e encontráveis.

Se você é um profissional experiente, que sabe comunicar sua visão estratégica, dar direcionais táticos assertivos, fazer as perguntas certas e coordenar a execução com IA como projeto, você conseguirá extrair o máximo do SEU potencial com IAs. IAs são ótimas em fazer — mas só você sabe o "Por que fazer", e muito do "Como fazer".

Claude.ai (Anthropic) · HTML5 · CSS3 · JavaScript · Schema.org · WCAG 2.2 · eMAG · Netlify