Faça o vibe coding do seu portfólio de fotógrafo

01Como isto é diferente de um seletor de templates

As galerias de templates mostram um design pronto e perguntam se você gosta ou não. Esta ferramenta vai uma camada mais fundo: cada uma das seis direções abaixo se baseia em um portfólio de fotógrafo real e em funcionamento, que foi realmente inspecionado (capturas de tela, layout ao vivo, cores computadas, fontes computadas), e não numa paleta que alguém inventou para ficar bonita num amostrador. A direção Editorial, por exemplo, usa EB Garamond porque é literalmente a fonte do site de um fotógrafo de moda de verdade, identificada ao inspecionar a página diretamente.

Dois padrões apareceram em quase todos os sites reais usados como base, e estão embutidos em todas as direções aqui: a navegação escondida atrás de um único ícone de hambúrguer, sem lista de links visível, até no desktop, e uma imagem grande por vez em vez de uma grade. A cor da interface fica perto de zero em tudo: quem fornece a cor é a fotografia, não a interface.

02O que você recebe no final

Um único prompt estruturado cobrindo a direção geral, cores hex exatas, nomes e combinação de fontes, lista de páginas, comportamento da navegação, layout da galeria e enquadramento das imagens, quais recursos incluir, uma recomendação de hospedagem com custos reais e um conjunto fixo de requisitos de qualidade de construção (texto alternativo acessível, breakpoints responsivos, nenhum segredo fixo no código, imagens com carregamento lento). Cole no app de programação com IA que preferir e ele terá tudo de que precisa para começar.

03Do prompt a um site no ar: o passo a passo completo

O prompt é o briefing de design, não a linha de chegada. Aqui está cada etapa entre copiá-lo e ter uma URL de verdade que você pode pôr num cartão de visita, de graça ou quase.

Copie o prompt e abra um app de programação com IA

Claude, Cursor, Claude Code, Windsurf ou o agente de IA do Replit funcionam, qualquer um que consiga escrever e salvar arquivos por você, e não só conversar. Se você nunca usou nenhum, uma opção no navegador como o claude.ai ou o Replit não exige instalação: cole o prompt como primeira mensagem.

Deixe construir e depois olhe de verdade o que ele fez

Peça que ele construa o site em HTML/CSS/JS estático (ou o que a seção de hospedagem do prompt especificou) e mostre uma prévia. Confira as seis coisas que o prompt pediu (cores, fontes, comportamento da galeria, navegação, enquadramento, páginas) antes de seguir. É muito mais barato corrigir uma cor de destaque errada agora do que depois de as fotos estarem ligadas.

Troque pelas suas fotos, biografia e dados de contato reais

Substitua cada imagem provisória e cada linha de texto de enchimento. Peça ao seu app de IA que escreva um atributo alt real e específico para cada foto à medida que avança, e não “image1.jpg”, e sim uma descrição de verdade, já que isso é ao mesmo tempo um requisito de acessibilidade e um pequeno ganho de SEO. É também o momento de conferir se o formulário de contato realmente aponta para um e-mail que você consulta.

Publique numa hospedagem grátis

Se você escolheu o nível “Estático & grátis”, peça ao seu app de IA que te guie para conectar a pasta do projeto ou o repositório do GitHub a uma das hospedagens da página Hospedagem do menu acima. As quatro compilam e publicam automaticamente toda vez que você envia uma alteração; depois de conectado, não há etapa manual de upload.

Conecte um domínio próprio (opcional, mas vale a pena)

Um subdomínio grátis (como yourname.netlify.app) funciona bem para começar. Quando você estiver pronto para yourname.com, é a compra de um domínio mais uma alteração de DNS, explicada em detalhe mais abaixo.

04Qual hospedagem grátis você deve usar?

Qualquer uma delas coloca um site estático no ar sem custo, com HTTPS grátis e um plano gratuito que cobre com folga o tráfego de um portfólio pessoal. Os limites dos planos gratuitos mudam com bastante frequência, então trate os números da página Hospedagem como uma ideia geral, e não como valores exatos atuais, e confira a página de preços de cada provedor antes de se comprometer.

Peça ao seu app de programação com IA que faça com você os passos de publicação: “conecte este projeto à Netlify” é algo perfeitamente normal de pedir, e ele costuma conseguir te guiar na criação da conta e na primeira publicação em poucos minutos.

05Conectando um domínio próprio

Um domínio custa uma pequena taxa anual (em geral de $10 a 20 por ano, dependendo da extensão), separada da hospedagem, que continua grátis. As três peças:

1. Compre o domínio. Namecheap, Cloudflare Registrar ou o sucessor do Google Domains (Squarespace Domains).
2. Adicione um registro DNS. Um CNAME (ou registro A) apontando seu domínio para a sua hospedagem, adicionado no painel do registrador. São duas linhas na tabela do registrador: um CNAME para www apontando para o endereço que a sua hospedagem fornece, como your-portfolio.netlify.app, e um registro A para o domínio raiz apontando para o IP da hospedagem.
3. Adicione na sua hospedagem. Cole o mesmo domínio nas configurações de “domínio personalizado” da hospedagem; o HTTPS é provisionado sozinho.

Toda hospedagem da página Hospedagem tem uma aba “Custom domain” ou “Domains” que mostra o registro exato a adicionar: copie, adicione no seu registrador e espere. As alterações de DNS costumam levar de minutos a algumas horas para valer, e às vezes até 24 a 48 horas. Seu app de programação com IA pode te guiar pelo painel do seu registrador específico se você travar; tire uma captura da página de configurações e pergunte onde clicar. Cadeado aparecendo, sem aviso de “não seguro”: essa é a linha de chegada.

06Checklist antes do lançamento

Cinco minutos com esta lista pegam a maior parte do que faz um portfólio parecer inacabado. As verificações estão na página Antes do lançamento do menu acima; vá marcando conforme avança.

07Perguntas frequentes