Salve, moçada, tudo na paz? Por aqui as coisas tão um pouco mais animadas. Sábado passado fui a um aniversário e preciso dizer que tomei muitas cervejas a mais do que deveria – o que às vezes é bom, ainda mais pra mim, que reduzi substancialmente meu consumo de álcool nos últimos dois anos.

Bora fazer seu site

Por mais críticas que você possa ter aos novos produtos de inteligência artificial (eu certamente tenho várias), não dá pra negar que muitas vezes eles podem ser bastante úteis.

Usado com moderação e responsabilidade, esse tipo de recurso vai ajudar você em tarefas que antes seriam bem mais complexas.

Construir uma landing page é um bom exemplo. Antes precisava saber um pouco de programação, precisava entender como funciona um servidor, precisava contratar um WordPress na Locaweb ou um Squarespace caríssimo só pra colocar seu rostinho bonito numa página pessoal.

Eu vou mostrar aqui como aliar o poder de programação via IA (que alguns chamam de vibe coding) com serviços gratuitos na internet.

Preparando os arquivos

Para fazer esse tutorial comigo, certifique-se de ter todo o material separado e arrumado, pra facilitar. Se preparem para copia e colar muito.

Você vai precisar:

• Uma conta no Glitch - https://glitch.com/
• Google Fonts (pra escolher uma fonte legal) pessoal - https://fonts.google.com/
• Color Picker (pra escolher as cores) - https://imagecolorpicker.com/
• Uma imagem de destaque (se não tem, pegue do unsplash) - https://unsplash.com/pt-br
• Seu currículo (se seu LinkedIn estiver atualizado, pode usar ele)
• Uma foto sua, de preferência retrato

Iniciando o comando

Com todos os elementos em mãos, vamos dar o comando para que o Chatbot de IA faça o trabalho pesado por nós.

Eu estou usando o Claude, mas você pode escolher o que quiser – ChatGPT, DeepSeek e Mistral vão dar conta do recado. Nunca testei Gemini e Llama para isso, se você usar, me conte o que achou.

Eu criei o prompt abaixo, e você pode customizá-lo com o que achar melhor, colocando suas cores, fontes e outros detalhes. Eu não vou mostrar aqui como usar Google Fonts nem o Color Picker, são fáceis de navegar e você vai matar no peito, só olhar meu código abaixo.

Lembre-se de anexar o arquivo do seu currículo ao chatbot, pra ele já cuspir o resultado com suas informações.

Crie uma landing page simples e elegante com meu currículo anexo utilizando apenas HTML/CSS/JAVASCRIPT, certificando-se de incluir:

1. Sidebar com informações de contato e uma foto minha
2. Fonte principal é Gidole e fonte de metadados é Space Mono (código Google Fontes abaixo)
3. Crie meta tags para redes sociais (protocolo Open Graph)
4. Certifique-se de que o site é 100% responsivo para mobile
5. Utilize bem os espaços em braço, e coloca detalhes em Laranja (hex #eab676) (links) e azul #abdbe3 (borders). O background-color precisa ser branco ou cinza bem clarinho.
6. Adicione âncoras e smooth scrolling
7. Dê uma cara mais de site pessoal do que de currículo, resuma minha experiência em alguns parágrafos, com foco nas coisas mais recentes
8. Não inclua outras imagens no html a não ser que eu diga para incluir

CÓDIGO DO GOOGLE FONTS
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gidole&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

O resultado pra mim foi esse abaixo. Tem alguns elementos faltando (tipo a minha foto), mas não se preocupe que é algo que podemos arrumar depois.

Copiar e colar é o jogo agora

Seu chatbot vai cuspir um monte de código em HTML (a estrutura da página), CSS (os estilos) e Javascript (interatividade, se houver).

Faça login no Glitch, e logo na página principal você vai ver algumas opções do que usar.

Selecione essa aqui Static site > Blank website

Depois de uns segundos, ele vai basicamente carregar um terminal, onde você vai poder jogar seu código. O arquivo padrão aberto deve ser o README.md, que nada mais é do que uma documentação do site. Não se preocupe com ele.

Os arquivos que vamos usar são index.html, script.js, style.css. Apenas esses.

É possível que seu chatbot de IA tenha dado todo o site pra você em um único arquivo (como foi o meu caso), mas se você quiser pode pedir pra IA desmembrar os arquivos.

Um comando como: coloque o site em arquivos separados index.html, style.css, script.js deve fazer o truque. Isso ajuda você a conseguir editar melhor o código depois, pra não ficar um código muito confuso apenas em um arquivo.

O arquivo principal é o index.html. Copie o código do seu chatbot para dentro dele. Não se preocupe se já tiver algo lá, pode apagar à vontade.

Se seu código tiver apenas um arquivo, é só isso. Mas se tiver os outros dois, copie e cole nas abas correspondentes.

Voilá! Clique lá embaixo em Preview, como na imagem abaixo. O grosso do seu site foi criado, agora você vai poder fazer ajustes neles, caso se proponha meter a mão no código.

Lembrando que o que eu mandei é apenas um exemplo, você pode pedir para ele fazer mais um monte de coisa (podemos falar mais disso em uma futura newsletter).

Imagens e customizações

Agora a última coisa que falta é customizar a imagem do seu site, com a sua foto e sua imagem de escolha.

Isso acontece porque suas fotos precisam estar hospedadas em algum servidor, e os chatbots não fazem isso. Precisa hospedar no Glitch mesmo.

Há duas formas de fazer isso. Uma é fazendo uma pequena alteração, nem simples, diretamente no HTML. Outra é subindo a foto no Glitch, pegar o link dela e dar pro chatbot gerar o código de novo.

Eu vou explicar das duas formas, mas, antes disso, vamos fazer o upload das fotos no Glitch, pois nos dois cenários você vai precisar dos links delas.

No menu à esquerda, clique em Assets. Selecione então as fotos que quer incluir lá, e até mesmo o seu CV em pdf caso queira colocar. Você pode arrastar as imagens pra tela, ou clicar em Upload an asset.

FORMA 1 - via chatbot

Ao clicar nas imagens, elas terão links associados a elas, e então faça esse prompt (substituindo pelos seus próprios links):

No html, adicione a minha foto de perfil ao site e a minha imagem de destaque ao OG:image das meta tags.
- foto de perfil: https://cdn.glitch.global/fotoperfil
- imagem de destaque: https://cdn.glitch.global/linkdaimagededestaque

FORMA 2 - via código

Copie a URL da sua foto de perfil e vá para o arquivo index.html. Faça uma busca (CTRL+F) pela tag <img src= relativa ao seu perfil e cole a URL dentro das aspas do src, como no meu exemplo abaixo.

_{<img src="https://cdn.glitch.global/fotoperfil" alt="Sérgio Spagnuolo" class="profile-img">}

Faça a mesma coisa com a tag <meta property="og:image" para sua imagem de destaque (que será o thumbnail para redes sociais e tal).

É tetra

É só isso, não tem mais nada: 20 minutos é tudo o que você precisa.

Mas dá pra fazer mais: agora que você já sabe a estrutura e os prompts, vá à loucura pedindo as modificações que você quiser.

Que tal falar pra IA Gostaria que o background do meu site fosse degradê de vermelho e azul, ou Crie uma versão em inglês. Dá pra fazer qualquer coisa (nem sempre vai ficar perfeito, mas você pode ir usando prompt pra melhorar.)

E, por favor, enviem pra mim seus sites, estou muito curioso. Os mais legais posso colocar na newsletter da semana que vem, pra quem me permitir. É só clicar em Share e me mandar os dois links.

Para ver meu site pronto: clique aqui

Para ver meu projeto no Glitch: clique aqui

DICA PRO
Você pode customizar sua URL de diferentes formas. Se tiver uma URL própria comprada, use este tutorial explicativo, passo a passo (em inglês)

Se quiser deixar na URL do Glitch, clique em Settings > Edit project details e dê um nome novo e descrição.