HuanEnzie/cinematic-portfolio

Portfólio Cinematográfico

Página de portfólio de página única, tom escuro, inspirada nos portfólios de editores e artistas VFX: uma palavra gigante afundada atrás da foto, nome na frente, título bicolor (branco e uma cor de destaque). Ao entrar na página, há o efeito de 30 agentes construindo cada bloco (skill agent-build-effect, já incluído em template/vendor/).

template/
  index.html        estrutura da página, não precisa editar
  data.js           TODO o conteúdo, edite apenas este arquivo
  styles.css        interface; a cor é alterada via variáveis ou `accent` em data.js
  portfolio.js      constrói a página a partir de data.js e inicia o efeito dos agentes
  vendor/           agent-build.js + .css
  assets/           foto com fundo removido + imagens dos cards de habilidades (exemplo: 6 imagens escuras/vermelhas)
scripts/cutout.py   remove fundo da foto (rembg)
references/image-prompts.md   prompts para imagens dos cards, mesmo estilo

Processo

1. Pergunte informações suficientes antes de começar

Pergunte de forma concisa em uma única vez, o que o usuário ainda não forneceu:

• Nome curto para exibir grande (uma palavra é o ideal), nome completo, cargo, uma frase de apresentação.
• Foto: foto do joelho para cima ou corpo inteiro, fundo não muito poluído, ligeiramente inclinado. Foto real ou 3D são aceitas.
• 3 a 6 habilidades ou projetos que deseja mostrar (nome, uma frase de descrição, tecnologias). Se tiver projeto real com link, defina href no card.
• Jornada (trabalho, formação), habilidades, processo de trabalho, citação.
• Reconhecimentos ou imprensa (se não tiver, remova toda a seção).
• Contato: e-mail, região, botão de call to action.
• Idioma da página, cor de destaque (padrão vermelho #ff3b30), texto de fundo (padrão PORTFOLIO).

Não invente números, prêmios ou menções na imprensa. Se o usuário não tiver uma seção, remova-a de data.js; a página automaticamente omitirá essa parte.

2. Copie o template

Copie toda a pasta template/ para o local desejado (ex.: ./meu-portfolio/). Não altere o template original dentro do skill.

3. Remova o fundo da foto

pip install rembg pillow
python -I <skill>/scripts/cutout.py foto-original.jpg meu-portfolio/assets/photo.webp

O modelo padrão isnet-general-use é leve (~180 MB, baixado uma vez). Teste birefnet-portrait apenas se o computador tiver bastante RAM: este modelo pesa ~1 GB e já ficou sem memória com imagens de 1440px. Verifique uma vez sobre um fundo cinza (componha com PIL e depois leia a imagem). Deve preservar cabelo, óculos e objetos segurados. Defina hero.photo como assets/photo.webp.

4. Imagens para os cards de habilidades

O template já inclui 6 imagens escuras/vermelhas (agente, automação, web, chatbot, planilha, vídeo). Reutilize se o conteúdo do card corresponder. Para imagens exclusivas, siga references/image-prompts.md: mantenha o final do prompt com o mesmo estilo, apenas mude o assunto. Se mudar a cor de destaque, altere também o código de cor no prompt. Pergunte ao usuário antes de chamar a geração em lote (consome o limite da conta dele).

Se não houver imagem correspondente, remova o campo image do card; o card ainda será exibido de forma bonita sem imagem. Não use a mesma imagem para dois cards com conteúdos diferentes.

5. Preencha data.js

• hero.name: uma palavra, maiúscula automática. Se o nome tiver mais de 7 caracteres, reduza o tamanho em .pf-name.
• hero.stats: apenas números reais (número de habilidades, anos, tecnologias...).
• Título da seção: composto por title (branco) e accent (cor de destaque). Duas partes curtas e impactantes: "Não é só código." / "Soluções que rodam."
• agents.labels: traduza conforme o idioma da página. Exemplo em português: { status: "{agents} agente · {edits} edições", building: "Construindo página", done: "Pronto", skip: "Pular" }.
• O texto é inserido via textContent, portanto não se pode injetar HTML (intencional, por segurança).

6. Teste (primeiro os números, depois as imagens)

Abra index.html diretamente no navegador (file:// funciona) ou execute um servidor estático qualquer. Use Playwright em 1440×900 e 390×844 com ?agents:

({
  sections: document.querySelectorAll(".pf-section").length,
  overflowX: document.documentElement.scrollWidth > innerWidth,   // deve ser false
  photo: document.querySelector(".pf-photo img")?.naturalWidth,    // > 0
  waiting: document.querySelectorAll('[data-ab="wait"]').length,   // deve ser 0 após rolar até o final
})

Role com window.scrollTo em passos de 600px, cada passo aguarde cerca de 1 segundo, depois verifique se waiting chegou a 0 e não há erros no console. Tire uma captura de tela da seção hero em cada tamanho para avaliar o visual. Atenção: a frase de apresentação não deve sobrepor a pessoa, e no celular o rosto não pode ficar coberto pelo texto.

7. Publique online

A pasta é um site estático: arraste e solte no Netlify Drop, vercel deploy, GitHub Pages ou Cloudflare Pages. Não precisa de build.

Integrar em projeto Next.js / React existente

Reutilize styles.css, altere :root para .pf. Reescreva a parte de renderização como componente server, mantendo os nomes das classes. Adicione o efeito usando AgentBuild.tsx do skill agent-build-effect, com a mesma lista de targets que em portfolio.js. Pontos já encontrados ao fazer a versão Next:

• Cabeçalho flutuante: dê à página uma margem superior negativa igual à altura do cabeçalho para que o hero fique por baixo do cabeçalho.
• Imagem next/image com fill precisa de um container pai com position: relative; caso contrário, a imagem cobre a página inteira.
• A fonte Anton possui caracteres para português. Ao hospedar localmente, baixe os 3 subsets: latin, latin-ext, vietnamese.
• O servidor de desenvolvimento Turbopack às vezes perde alterações CSS feitas com sed. Edite com ferramenta de edição ou regrave o arquivo para que ele detecte as mudanças.