Communitygithub.com

Portfólio de Carreira Interativo

Transforme currículo, foto e URL do LinkedIn em um site de portfólio pessoal animado e interativo (arquivo HTML único) para compartilhar no LinkedIn.

O que é Portfólio de Carreira Interativo?

Esta skill cria um portfólio de carreira profissional e polido a partir de três entradas: currículo (PDF, DOCX, texto ou colado), foto profissional (opcional) e URL do perfil do LinkedIn. O design visual já está pronto e inclui animações de fundo de rede, digitação de 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, modos claro/escuro e layout responsivo para dispositivos móveis. Seu trabalho é interpretar o currículo, definir uma persona combinada que represente todas as principais experiências da pessoa, e gerar um arquivo `content.json` seguindo um esquema estrito de campos, limites de tamanho e nomes de ícones. A skill suporta a integração com ferramentas como Claude Code, Cursor e Codex, permitindo que agentes de IA automatizem a criação do site de forma eficiente. O script de build (`scripts/build.py`) mescla o conteúdo e a foto em um único arquivo HTML que pode ser publicado como artefato ou hospedado gratuitamente no GitHub Pages ou Netlify Drop. A skill enfatiza o uso apenas de fatos reais do currículo, sem inventar métricas ou resultados, e permite edições rápidas alterando o `content.json` e reconstruindo o site.

Funciona com✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/iamsachinraj/Claude-Skills/tree/HEAD/career-portfolio

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

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 normal
  • scripts/build.py: mescla content.json e a foto em um único arquivo HTML
  • references/content-schema.md: cada campo, guia de tamanho e nome de ícone
  • examples/sample-content.json: um exemplo completo e funcional

1. Coletar as três entradas

Pergunte uma vez, em conjunto, o que estiver faltando:

  1. Currículo: qualquer formato (PDF, DOCX, texto, colado). Obrigatório.
  2. Foto: uma foto profissional bem iluminada e de frente. Opcional; sem ela, o retrato exibirá as iniciais.
  3. 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.phone vazio 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.html de 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.

Habilidades Relacionadas