Tutorial completo de como criar um site pessoal cinematográfico e…

INEMA

Aqui vai o passo a passo direto :

1. Gerar 2 imagens-chave (frames)

• Abra Google Whisk
• Gere a imagem de abertura (frame inicial)
• Gere a imagem de fechamento (frame final)
• Baixe as duas imagens

2. Transformar as 2 imagens em animação

• Abra Google Flow (Field 3.1)
• Modo Frames → Video
• Envie o frame inicial + frame final
• Gere a animação (transição suave)
• Baixe o vídeo gerado

3. Converter o vídeo em WebP + frames

• Abra EZGIF (site)
• “Video to WebP” → envie o vídeo

• Configure:

• Resolution: Original

• FPS: o mais próximo do nativo
• Quality: 85
• Converta para WebP
• Clique em Split para virar sequência de frames
• Baixe o .zip com todos os frames

4. Hospedar os frames (para o site puxar)

• Abra Supabase
• Crie um Project
• Vá em Storage
• Crie um Bucket (marque como Public)
• Envie a sequência de frames (zip/arquivos)
• Copie a URL do primeiro frame

5. Montar o site automaticamente

• Abra Firebase Studio
• Cole o prompt do site (layout/estilo)
• No prompt, cole a URL do 1º frame (do Supabase)
• Clique em Prototype / gerar site
• Ajuste com prompts (espaçamento, seções, tipografia, etc.)

6. Exportar o código

• No Firebase Studio, mude para Code Editor
• Selecione os arquivos → Zip / Download
• Pronto: código exportado para hospedar onde quiser

7. Conectar domínio

• Configure o domínio no provedor + Firebase/hosting
• Aguarde a propagação (o vídeo menciona até 24h)

As **ferramentas usadas ** são:

1. Google Gemini – IA base que ajuda na geração de ideias, prompts e lógica do projeto.
2. Nano Banana – cria a identidade visual inicial (estilo, estética e direção visual).
3. Google Whisk – gera imagens estáticas (frames inicial e final) que definem o visual do site.
4. Google Flow (Field 3.1) – transforma imagens estáticas em animações fluidas e cinematográficas.
5. EC GIF – converte o vídeo em WebP e divide em frames para uso em animações por scroll.
6. Supabase – armazena os arquivos (sequência WebP) para o site acessar online.
7. Firebase Studio – constrói o site final (layout, scroll, parallax, interações e deploy).
8. Domínio personalizado – conexão final do site a um endereço próprio (ex: .com).

dublado

youtube.com/watch ↗

Aqui vai um resumo em 7 pontos :

1. Objetivo: Mostrar como criar um site pessoal moderno, cinematográfico e profissional (com animações, parallax e microinterações) usando ferramentas gratuitas de IA do Google, sem precisar programar.

2. Importância do site pessoal: O site é a primeira impressão da sua marca pessoal; design, movimento e fluidez comunicam profissionalismo, criatividade e identidade.

3. Ferramentas principais:

• Nano Banana + Google Whisk: definem a identidade visual (frames inicial e final, estilo e estética).
• Google Flow (Field 3.1): transforma imagens estáticas em animações suaves e cinematográficas.
• Firebase Studio: monta o site final com layout, scroll, parallax, interações e deploy.

4. Criação da identidade visual: São gerados dois frames-chave (abertura e fechamento) que funcionam como “bookends”, definindo todo o visual e a narrativa do site.

5. Animação e interatividade: As animações criadas no Google Flow são convertidas em sequência WebP, permitindo animações controladas por scroll, leves e eficientes para a web.

6. Armazenamento dos assets: As sequências WebP são hospedadas no Supabase, facilitando o acesso organizado dos arquivos pelo site.

7. Build, exportação e domínio: No Firebase Studio, o site é gerado e refinado por prompts; o código pode ser exportado em ZIP, hospedado em qualquer lugar e conectado a um domínio próprio em poucas horas.

👉 Conclusão: O que antes exigia equipe, código e semanas de trabalho agora pode ser feito em poucas horas com um fluxo claro, repetível e acessível, criando sites pessoais modernos que realmente se destacam.

junto tem ter uma foto sua, veja onde fala isso

Criando um WebSite Pessoal - Prompts

1