Como construímos douglasvilar.com.br do zero

// MÓDULO 01 · 15 MINFundamentos: GitHub, Claude Code e HTML puro

Antes de colocar a mão na massa, três conceitos precisam ficar claros. Sem decorar — basta entender o papel de cada um.

GitHub é o cofre do seu código

Pense no GitHub como o Google Drive dos programadores: cada alteração fica registrada, com data, autor e possibilidade de voltar no tempo. Para o site, ele também faz o papel de servidor de hospedagem gratuito através do GitHub Pages.

• repositório = a pasta do projeto na nuvem
• commit = uma fotografia do projeto num momento do tempo
• branch main = a linha principal, é o que vai ao ar
• GitHub Pages = transforma o repositório em site público

Claude Code é o co-programador

Claude Code é um terminal inteligente: você conversa em português, ele lê arquivos, escreve código, roda comandos e faz deploy. Para o advogado que não programa, o fluxo é sempre o mesmo: descrever o que quer → revisar o que o Claude fez → aprovar o commit.

HTML puro, sem framework

O site inteiro é construído com três tecnologias nascidas nos anos 90:

• HTML — estrutura (parágrafos, títulos, listas)
• CSS — aparência (cores, fontes, espaçamentos)
• JavaScript — interatividade (toggle de tema, busca, formulário)

Por que não usamos React, Next.js, WordPress? Porque HTML puro carrega em 100ms, não tem backend para invadir, não depende de plugin para atualizar, e o GitHub Pages hospeda de graça para sempre.

// MÓDULO 02 · 15 MINSetup: instalação, login, primeiro repositório

Passo-a-passo de instalação

npm install -g @anthropic-ai/claude-code

gh auth login

cd C:\Users\seunome\meusite
claude

// MÓDULO 03 · 15 MINA arquitetura do site: pastas, páginas, design tokens

Estrutura de pastas

Todo site é apenas uma pasta com arquivos index.html. Cada subpasta vira uma URL.

douglasvilar-site/
├── index.html              → douglasvilar.com.br/
├── ia/index.html           → douglasvilar.com.br/ia/
├── mentoria/index.html     → douglasvilar.com.br/mentoria/
├── inscricao/index.html    → douglasvilar.com.br/inscricao/
├── noticias/
│   ├── index.html          → /noticias/ (agregador)
│   └── contrato-corretor-associado/index.html
├── curso/aula-site/index.html
└── CNAME                   → arquivo com o domínio

Design tokens — o segredo da consistência

Em vez de escrever a cor #C8322C em 100 lugares, declaramos uma vez no topo e reutilizamos:

/* variáveis reutilizáveis */
:root{
  --ink:     #08080A;   /* preto */
  --paper:   #F4EFE6;   /* bege claro */
  --blood:   #C8322C;   /* vermelho sangue */
  --cyan:    #00E5FF;   /* destaque tech */
  --radius:  14px;      /* arredondamento */
}

/* uso em qualquer lugar */
.botao { background: var(--blood); color: var(--paper); }

Para mudar a identidade visual do site inteiro, basta mexer nessas 5 linhas. Foi isso que permitiu criar o tema CLÁSSICO em uma tarde.

Tipografia fluida

A fonte cresce e encolhe sozinha conforme a tela:

h1 { font-size: clamp(2.4rem, 6vw, 4.8rem); }
/* mínimo 2.4rem | ideal 6% da tela | máximo 4.8rem */

Resultado: no celular fica legível sem quebrar, no desktop preenche com impacto editorial.

// MÓDULO 04 · 20 MINConstruindo a home: hero, áreas, podcasts, contato

O prompt que usamos com o Claude Code foi literalmente este:

As 6 seções da home

1. Hero — nome, posicionamento, 2 CTAs (WhatsApp + Mentoria)
2. Áreas — cards com imobiliário, construção civil, IA, contratos
3. Curadoria + IA — 3 cards explicando o diferencial
4. Podcasts — 1 em destaque + 4 secundários, com lazy-load
5. Sobre — mini-currículo com Comissão de IA da OAB/PR
6. Contato — botão WhatsApp, sem formulário (fricção zero)

Podcast com lazy-load (não carrega até clicar)

YouTube pesa. Em vez de carregar 4 iframes direto, exibimos uma miniatura e só ativamos o player ao clique:

<div class="pod" onclick="playPod(this,'BfLaR8YL_g0')">
  <img src="https://i.ytimg.com/vi/BfLaR8YL_g0/hqdefault.jpg">
  <button>▶</button>
</div>

<script>
function playPod(el, id){
  el.innerHTML = `<iframe src="https://www.youtube-nocookie.com/embed/${id}?autoplay=1" allow="autoplay"></iframe>`;
}
</script>

// MÓDULO 05 · 15 MINSubpáginas: /ia/, /mentoria/, /inscricao/ sem backend

O truque do formulário sem servidor

A inscrição do curso é um formulário 100% funcional que não precisa de servidor, banco de dados nem backend. Como?

1. Usuário preenche os campos
2. Ao enviar, JavaScript monta uma mensagem pronta
3. Abre o WhatsApp com a mensagem pré-escrita
4. Salva cópia em localStorage (histórico local)
5. Dispara evento no Google Analytics

function enviar(){
  const msg = `Olá Douglas, quero me inscrever!
Nome: ${nome.value}
Modalidade: ${modalidade.value}
Telefone: ${tel.value}`;

  // abre WhatsApp com mensagem pré-escrita
  window.open(`https://wa.me/5541991234567?text=${encodeURIComponent(msg)}`);

  // salva cópia local e dispara evento
  localStorage.setItem('inscricao_'+Date.now(), msg);
  gtag('event', 'enrollment_submit');
}

Por que funciona? Porque o "servidor" que recebe a inscrição é o próprio WhatsApp. Zero custo, zero manutenção, zero LGPD complicada.

Pré-seleção por parâmetro na URL

Se alguém clica em "Mentoria em Grupo" na página da mentoria, o link leva para /inscricao/?modalidade=grupo e o formulário já chega com a opção marcada:

const params = new URLSearchParams(location.search);
if(params.get('modalidade')){
  document.querySelector(`input[value="${params.get('modalidade')}"]`).checked = true;
}

// MÓDULO 06 · 15 MINNotícias: agregador de 30 fontes com hot-score

A página /noticias/ agrega 30 fontes gratuitas (Conjur, Migalhas, JOTA, G1, Folha, Valor, STF, STJ, CNJ, TJ-PR, Gazeta do Povo, Estadão...) sem backend. Como?

Os 3 ingredientes

• Feed RSS — quase todo portal tem um (/feed, /rss)
• AllOrigins — proxy CORS gratuito que busca o RSS sem bloqueio
• DOMParser — transforma o XML em lista de notícias direto no navegador

const FEEDS = [
  { nome:'Conjur', url:'https://www.conjur.com.br/rss.xml', peso:3 },
  { nome:'STF',    url:'https://portal.stf.jus.br/rss/noticias.asp', peso:3 },
  /* ...mais 28 fontes */
];

async function buscar(feed){
  const r = await fetch(`https://api.allorigins.win/get?url=${encodeURIComponent(feed.url)}`);
  const xml = new DOMParser().parseFromString((await r.json()).contents, 'text/xml');
  return [...xml.querySelectorAll('item')].map(i => ({
    titulo: i.querySelector('title').textContent,
    link:   i.querySelector('link').textContent,
    data:   new Date(i.querySelector('pubDate').textContent),
    fonte:  feed.nome, peso: feed.peso
  }));
}

Hot-score: qual notícia está bombando?

Pontuamos cada notícia por 3 fatores e ranqueamos:

function hotScore(item){
  const horas     = (Date.now() - item.data) / 3600000;
  const frescor  = Math.max(0, 48 - horas) / 48;          // últimas 48h
  const hits     = HOT_WORDS.filter(w => item.titulo.toLowerCase().includes(w)).length;
  return (frescor * 3) + (hits * 0.5) + (item.peso * 0.3);
}

Palavras-quentes: stf, stj, cnj, lei, selic, ia, distrato, corretor, ministro... Resultado: as manchetes jurídicas relevantes sobem para o topo automaticamente.

// MÓDULO 07 · 15 MINArtigo jurídico: Schema.org, TL;DR, FAQ, disclaimer

Um artigo jurídico publicado de qualquer jeito não aparece no Google. Um artigo seguindo o padrão E-E-A-T (Experience, Expertise, Authoritativeness, Trustworthiness) sobe nos resultados e ainda aparece com o rich snippet do FAQ. Foi o que fizemos com o artigo de corretor associado.

Os 10 elementos obrigatórios de um artigo jurídico

1. Título descritivo com palavra-chave principal no início
2. Datas visíveis: publicado em / atualizado em
3. Tempo de leitura (⏱ 9 min)
4. TL;DR — resumo em 30 segundos, bullets
5. Sumário navegável com âncoras HTML
6. Links para fontes oficiais (Planalto, COFECI, CNJ)
7. FAQ estruturada em <details>/<summary>
8. Disclaimer jurídico ("não substitui consulta com advogado")
9. Caixa de autor com credenciais (OAB, Comissão, anos de estrada)
10. Schema.org JSON-LD — a mágica do SEO

Schema.org — o selo invisível que o Google lê

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Article",
      "headline": "Contrato de corretor associado...",
      "author": { "@type":"Person", "name":"Douglas Vilar" },
      "datePublished": "2026-04-20",
      "dateModified": "2026-04-20"
    },
    { "@type": "FAQPage", "mainEntity": [ /* perguntas */ ] },
    { "@type": "BreadcrumbList", "itemListElement": [ /* trilha */ ] }
  ]
}
</script>

Esses 3 tipos (Article + FAQPage + BreadcrumbList) fazem o Google exibir seu artigo com caixa expansível de perguntas no resultado da busca. Tráfego orgânico praticamente dobra.

// MÓDULO 08 · 10 MINAcessibilidade, tema clássico, deploy e versionamento

Tema clássico: um toggle, dois mundos

Adicionamos um botão que alterna entre o visual "moderno" (dark editorial com neon) e "clássico" (papel creme, tipografia serifa). A lógica é absurdamente simples:

<button onclick="toggleTheme()">◐ CLÁSSICO</button>

<script>
function toggleTheme(){
  const atual = document.documentElement.dataset.theme;
  const novo = atual === 'classic' ? '' : 'classic';
  document.documentElement.dataset.theme = novo;
  localStorage.setItem('dv_theme', novo);
}
</script>

<style>
[data-theme="classic"]{
  --paper: #FAF7F0;
  --ink:   #1A1D21;
  /* sobrescreve apenas os tokens que mudam */
}
</style>

Como usamos design tokens, mudar 4 variáveis CSS reidentifica o site inteiro. Escolha do usuário fica salva no navegador.

Acessibilidade: letras maiores para quem precisa

• Base de 17px (padrão web é 16px) — +6% de legibilidade
• Botões com altura mínima de 48px (alvo de toque confortável)
• Contraste WCAG AA em todas as paletas
• scroll-margin-top para âncoras não ficarem embaixo do menu fixo

Deploy via gh api — uma linha de comando

Para subir qualquer alteração ao ar, o fluxo é esse:

# 1. pegar o SHA do arquivo atual (necessário para update)
gh api repos/USUARIO/REPO/contents/index.html --jq '.sha'

# 2. enviar o arquivo novo (via Python ajuda a encodar em base64)
python -c "
import base64, json
c = open('index.html','rb').read()
open('up.json','w').write(json.dumps({
  'message':'feat: atualiza home',
  'content': base64.b64encode(c).decode(),
  'branch':'main',
  'sha':'COLAR_O_SHA_AQUI'
}))"

# 3. PUT no GitHub
gh api -X PUT repos/USUARIO/REPO/contents/index.html --input up.json

Em produção real, o Claude Code faz esse ciclo inteiro para você — você só aprova. Em 30 segundos o site está no ar.

Versionamento: volte no tempo sempre que precisar

Todo commit é uma fotografia. Se o site quebrar ou você se arrepender de um texto, gh api traz qualquer versão anterior de volta. Nunca trabalhe sem essa rede de segurança.

Encerramento: você não está reinventando nada

Tudo o que você viu nessas 2 horas usa tecnologia com mais de 20 anos. HTML é de 1993. CSS de 1996. JavaScript de 1995. RSS de 1999. O novo é o Claude Code fazendo a ponte entre o seu português e o código — e o GitHub Pages transformando um repositório em site público de graça.

O site douglasvilar.com.br inteiro foi construído seguindo exatamente esse roteiro. Cada página que você vê pode ser inspecionada (Ctrl+U no navegador) para ver como foi feita. Nada é segredo.

Próximo passo: abra o terminal, instale o Claude Code e comece pelo seu index.html. Em uma tarde você tem um site no ar com seu nome de domínio.