zhaoqqiu299/portfólio-3d-interativo

Portfólio 3D Interativo

Ajude uma pessoa a construir um portfólio que as pessoas exploram como uma sala: um quadro-negro para Sobre, um laptop para Projetos, uma estante para habilidades, uma caixa de correio para Contato. A pessoa geralmente não sabe programar. Você constrói; eles olham, julgam e redirecionam. A maior parte da qualidade vem de várias rodadas curtas de feedback, então faça cada rodada rápida e visível.

O processo tem 13 estágios em 4 fases. Siga a ordem na primeira vez; pedidos posteriores geralmente caem em um estágio (mais frequentemente no Estágio 8).

Fase	Estágios	Leia
Planejar e construir	1 Planejar · 2 Primeiro prompt · 3 Imagem de referência · 4 Construção 3D · 5 Interações emprestadas	references/build-patterns.md
Preencher	6 Conteúdo e notas de design · 7 Arquivos Google	references/content-and-docs.md
Polir	8 Iterar · 9 Testar	este arquivo, depois scripts/screenshot_site.js
Lançar e proteger	10 Implantar · 11 Domínio · 12 Atualizar GitHub automaticamente · 13 Proteger	references/launch-and-protect.md

Trabalhando com a pessoa

• Espere solicitações em linguagem simples, em qualquer idioma. "Os livros deitados parecem tábuas compridas" é um briefing completo. Traduza isso para a mudança você mesmo. Responda no idioma da pessoa; mantenha o texto do site no idioma do site.
• Lide com solicitações numeradas uma por uma e reporte usando os mesmos números, para que nada seja ignorado silenciosamente.
• Mostre, não descreva. Após uma mudança visual, tire uma captura de tela e olhe para ela antes de dizer que está pronto. Envie a captura de tela para a pessoa quando a mudança for sobre layout ou aparência. O WebGL do software é lento, então dê timeouts generosos para as capturas de tela (veja o Estágio 9).
• Explique as compensações brevemente e recomende uma opção quando houver uma escolha real ("Depoimentos" vs "Testemunho": recomende o primeiro e diga o porquê em uma frase). Não faça perguntas que você pode responder pelo contexto.
• Quando a pessoa não tiver certeza do significado de uma palavra (DNS, commit, repositório), explique em uma linha e depois continue.

Honestidade e cuidado

Um portfólio é lido por pessoas que decidem se vão contratar alguém, portanto deve ser verdadeiro.

• Não adicione habilidades, ferramentas, resultados, testes ou colaboradores que a pessoa não confirmou. Se eles pedirem para você listar ferramentas que não usaram ("finja que sei Blender"), diga claramente que um entrevistador pode perguntar sobre isso, ofereça o enquadramento verdadeiro e muitas vezes mais forte (por exemplo, "cada objeto modelado em código") e sugira listar habilidades reais em uma seção de Habilidades.
• Ao escrever justificativas de design, baseie cada afirmação no que o artefato realmente faz. O uso planejado vai sob um título como "Como eu usaria na aula", nunca como algo que aconteceu.
• Sinalize qualquer frase que você inferiu em vez de lhe foi dita, e peça à pessoa para verificá-la.
• Proteja os alunos: remova nomes, IDs, notas e comentários privados; desfoque rostos (incluindo pessoas ao fundo) antes de publicar fotos; mantenha dados de pesquisa e código privados, a menos que um supervisor aprove. Veja o Estágio 13.

Estágio 1 · Planeje antes de criar o prompt

Combine três coisas antes de construir: o público e seu objetivo (por exemplo, "equipes de contratação para estágios em design de aprendizagem, 3 a 5 minutos por candidato"), a lista de seções e um mapa da sala onde a função cotidiana de cada objeto corresponda à sua seção. Se um objeto e seu significado discordarem, mude o objeto (uma mala sugere partir; uma caixa de correio sugere escrever). Cada seção também deve ser acessível a partir de um menu simples.

Estágios 2 a 5 · Construa a sala

Leia references/build-patterns.md antes de escrever a cena. Arquitetura padrão:

• Um index.html com Three.js carregado de uma versão CDN fixada via import map, cada objeto modelado em código a partir de primitivas (sem arquivos de modelo), texturas geradas por canvas e um menu no canto superior esquerdo.
• Conteúdo que muda com frequência (pastas de projetos, itens de galeria) reside em pequenos arquivos JSON ao lado de index.html, para que a pessoa possa adicionar um projeto ou foto sem tocar no código 3D.
• Se a pessoa trouxer uma imagem de referência (Estágio 3), combine seu layout, paleta e luz primeiro; detalhes de estilo vêm depois. Se trouxerem um exemplo de interação (React Bits, Codrops), construa uma versão original no estilo próprio do site e não cole código licenciado.

Checklist da primeira construção: cada seção tem um objeto que brilha ao passar o mouse com um rótulo; um clique move a câmera para lá e abre a seção; o menu funciona sem a sala 3D; carrega em cerca de 5 segundos; funciona na largura de um telefone.

Estágio 6 e 7 · Preencha com trabalho real

Leia references/content-and-docs.md. Resumindo: peça material real (CV, texto do LinkedIn, arquivos de projeto), faça um rascunho a partir disso e deixe a pessoa corrigi-lo. Coloque os artefatos reais primeiro e o raciocínio ao lado deles como notas de design numeradas, nomeando a decisão e a teoria de aprendizagem por trás dela. Corte datas desatualizadas, a menos que sejam importantes. Para links do Google, verifique se o compartilhamento está como "Qualquer um com o link, Visualizador"; se um arquivo precisar de login universitário, hospede-o no site.

Estágio 8 · Itere

É aqui que a maior parte do trabalho acontece. Regras aprendidas de rodadas reais:

• Um único sinal para "clicável". Tudo que é clicável brilha ao passar o mouse; nada decorativo brilha ou parece clicável. Remova sinais falsos (papéis brilhantes, fórmulas flutuantes, notas adesivas soltas).
• Sinalize interações ocultas. Se os visitantes podem desenhar em um quadro, transforme o ponteiro em giz sobre ele, coloque as ferramentas bem abaixo dele e deixe-as brilhar até o primeiro uso. Se uma galeria rolar, mostre uma pequena legenda (teclas de seta, roda, swipe com dois dedos, arrastar no toque). Quando uma seção estiver aberta, faça a próxima coisa clicável nela brilhar suavemente (um contorno pulsante) para que as pessoas percebam.
• Mantenha as coisas interativas perto de onde as pessoas olham. Quando um painel abre à direita, coloque os objetos com os quais você pode interagir no lado direito da cena.
• Proporções reais. Livros, canecas e móveis em escala real parecem corretos; formas esticadas parecem erradas imediatamente.
• Som apenas após um clique (os navegadores bloqueiam reprodução automática): um botão "Entrar" que inicia a música, além de uma opção silenciosa.
• Ordene o conteúdo pela história. Em depoimentos, palavras (cartas, notas, mensagens) antes de fotos; o item mais pessoal primeiro.
• Nomeie as seções de forma simples. Um rótulo de menu deve dizer o que há dentro ("Pesquisa", não "Próximo capítulo").
• Verifique o que bloqueia cliques. Objetos Line e LineSegments do Three.js capturam raios a cerca de um metro de distância por padrão; defina obj.raycast = () => {} em wireframes decorativos, ou cliques perto deles vão para o objeto errado.

Após cada rodada, tire uma captura de tela das visualizações alteradas, corrija o que está visivelmente errado uma vez e reporte o que mudou em palavras simples.

Estágio 9 · Teste

Execute scripts/screenshot_site.js <site_dir> <out_dir> sobre projetos contato (os IDs das seções são os valores data-go dos botões do menu) para capturar visualizações de desktop e telefone e imprimir erros de página. Em seguida, guie a pessoa pelas verificações manuais: cada objeto e item de menu abre, cada link funciona em uma janela privada, o formulário de contato chega (FormSubmit precisa de um e-mail de ativação única), o som desligado ainda funciona, a navegação apenas por teclado funciona e um amigo visita sem ajuda.

Estágios 10 a 13 · Lance e proteja

Leia references/launch-and-protect.md. Ele cobre implantação no GitHub e Vercel (a página principal deve ser index.html no nível superior; o upload do site do GitHub aceita no máximo 100 arquivos por vez), domínios personalizados, envio de alterações através do Claude GitHub App e proteção: um repositório privado, assets/robots.txt e assets/vercel.json para rastreadores de IA, o bloqueio de bots de IA da Vercel e uma linha de direitos autorais. Seja honesto de que nada público é à prova de cópia.

Entregáveis opcionais

Pessoas que terminam geralmente querem ensinar o processo. Um folheto e uma apresentação de slides podem seguir os 13 estágios; use capturas de tela reais do site deles (antes e depois) em vez de imagens de banco de imagens e escreva notas do orador na voz deles. scripts/html_to_docx.py transforma um documento de projeto com notas de design em Word.

Falhas comuns

Sintoma	Causa	Correção
404 no Vercel	Arquivo principal não é index.html, ou está dentro de uma pasta	Renomeie e mova para o nível superior
Pastas de laptop ou galeria vazias online	Pastas projects/ ou outras nunca foram enviadas	Envie-as ao lado de index.html
Versão antiga sendo exibida	Cache ou implantação ainda em execução	Aguarde o Ready, depois atualize forçadamente
"Cannot access X before initialization"	Uma função ou textura usada antes de sua linha const	Eleve-a (uma declaração function) ou mova o uso para depois
Clicar em um objeto abre um vizinho	Objeto de linha decorativo capturando raios	obj.raycast = () => {}
Push para o GitHub recusado	Claude GitHub App não instalado no repositório	Instale-o para esse repositório; uma nova sessão pode ser necessária