Site de Portfólio de Carreira
Constrói um portfólio de uma página polido a partir de três entradas: um currículo, uma foto profissional e um URL do perfil do LinkedIn. O design é fixo e já está finalizado (fundo animado em rede, nome letra por letra, cargos sendo digitados, cartões de estudo de caso empilháveis, habilidades clicáveis que acendem uma linha do tempo da carreira, modo claro/escuro, layout para dispositivos móveis). Seu trabalho é o conteúdo: ler o currículo, escrever um content.json e executar o script de build.
Arquivos desta skill:
assets/template.html: o design finalizado; não edite para uso normalscripts/build.py: mesclacontent.jsone a foto em um único arquivo HTMLreferences/content-schema.md: cada campo, guia de tamanho e nome de íconeexamples/sample-content.json: um exemplo completo e funcional
1. Coletar as três entradas
Pergunte uma vez, em conjunto, o que estiver faltando:
- Currículo: qualquer formato (PDF, DOCX, texto, colado). Obrigatório.
- Foto: uma foto profissional bem iluminada e de frente. Opcional; sem ela, o retrato exibirá as iniciais.
- URL do LinkedIn: usado para os links de contato.
Não solicite mais nada de imediato. As páginas do LinkedIn geralmente bloqueiam leitura automatizada, portanto trate o URL como um link, não como fonte de dados; o currículo é a fonte da verdade. Se você puder ler o perfil e ele adicionar fatos, use-os.
2. Ler o currículo e encontrar a persona
Leia o currículo inteiro. Depois, antes de escrever qualquer coisa, decida a persona combinada: uma identidade que abranja todos os papéis importantes que a pessoa já exerceu, não apenas o cargo mais recente. Exemplo: "líder de sucesso do cliente que projeta onboarding, gerencia operações de CS com dados e constrói equipes engajadas", em vez de "Chefe de CS". As pessoas raramente querem um site sobre um único cargo; elas querem a linha condutora de sua carreira.
Selecione:
- as 4–8 identidades que elas trazem (essas se tornarão a linha de digitação)
- o fio condutor entre os cargos (se torna o título de liderança e os pilares)
- 3–5 histórias com um problema, ação e resultado claros (estudos de caso)
- cada número mencionado (estatísticas, medidores, destaques)
- ferramentas, plataformas, certificações, educação
3. Escrever content.json
Siga references/content-schema.md; espelhe a estrutura de examples/sample-content.json. Regras:
- Apenas fatos do currículo. Nunca invente métricas, empregadores, datas, tamanhos de equipe ou resultados. Se um estudo de caso não tiver resultado declarado, descreva o desfecho qualitativamente. Use o medidor apenas para uma porcentagem real declarada.
- Primeira pessoa, simples e confiante. Frases curtas, sem empilhamento de jargões, sem "apaixonado", "orientado a resultados" ou "dinâmico".
- Respeite os guias de tamanho; texto longo quebra o ritmo do layout.
- Habilidades devem apontar para IDs de cargos reais, e cada habilidade deve mapear para todos os cargos onde o currículo a exibe.
- Ordene os cargos do mais recente para o mais antigo; marque o cargo atual como
current: true. - Deixe
contact.phonevazio a menos que a pessoa peça para incluí-lo.
Salve como content.json no diretório de trabalho.
4. Construir
python3 <skill-dir>/scripts/build.py --content content.json --photo <caminho-da-foto> --out portfolio.html
Pillow (pip install pillow) corta e comprime a foto; sem ela, a foto é incorporada como está. Corrija todo ERROR; leia cada WARNING e corrija a menos que seja intencional.
5. Verificar
Se você puder abrir um navegador ou tirar screenshots, veja o cabeçalho em larguras de desktop e celular, role a página inteira uma vez e alterne o modo escuro. Verifique se o corte da foto mostra o rosto (ajuste person.photoPosition) e se nenhum texto transborda. Caso contrário, releia o content.json em comparação com os guias de tamanho.
6. Entregar
- Se você puder publicar um artefato ou página web, publique
portfolio.htmlde forma privada e forneça o link, explicando que a pessoa escolhe quando compartilhá-lo. - Caso contrário, envie o arquivo.
Depois, informe brevemente:
- em torno de qual persona você construiu o site, para que ela possa redirecioná-lo
- que ela pode solicitar qualquer alteração de texto e você reconstruirá
- como compartilhá-lo: publique/compartilhe o link do artefato, ou hospede o arquivo único gratuitamente no GitHub Pages ou Netlify Drop, depois adicione o link à seção Em Destaque do perfil do LinkedIn
Edições
Para alterações de texto, edite content.json e reconstrua; nunca edite manualmente o HTML construído. Mudanças de design (cores, fontes, seções) vão em assets/template.html; mantenha os placeholders /*__PORTFOLIO_DATA__*/null, "/*__PHOTO__*/", __TITLE__ e __DESCRIPTION__ intactos.