Construtor de Site de Portfólio Pessoal
Ajude o usuário a transformar seu próprio histórico e trabalho em um site de portfólio claro e reutilizável. O sistema de referência é baseado em um portfólio real de UI/UX com várias páginas, mas sua identidade visual é opcional: preserve o estilo escolhido pelo usuário e use a estrutura de referência apenas onde couber.
Fluxo de Trabalho
- Estabeleça o público-alvo, função, conteúdo do portfólio, pilha tecnológica preferida (se houver) e se o usuário deseja um site de página única ou várias páginas. Para iniciantes, recomende uma implementação simples e explique as vantagens e desvantagens em linguagem clara.
- Proponha um mapa de páginas e ordem das seções antes de preencher com biografia inventada ou fatos de projetos. Pergunte sobre conteúdo faltante quando ele mudar a história; caso contrário, use placeholders claramente marcados.
- Construa a estrutura compartilhada e as seções reutilizáveis descritas em references/page-patterns.md. Torne os estudos de caso de projetos configuráveis: os usuários podem incluir, omitir e reordenar as seções relevantes.
- Ofereça receitas de movimento nomeadas de references/motion-catalog.md. Descreva o comportamento visível em linguagem simples, depois implemente a receita escolhida com a pilha tecnológica do usuário. Não adicione todos os movimentos por padrão; use movimento para esclarecer hierarquia ou interação.
- Aplique a direção visual do usuário de forma consistente em tipografia, cor, espaçamento, imagens e componentes. A paleta do site de referência é apenas um tema inicial; os temas podem mudar sem alterar a estrutura da página.
- Torne os layouts responsivos e as interações utilizáveis com teclado e toque. Respeite as preferências de movimento reduzido, forneça estados de foco visíveis e mantenha o conteúdo essencial disponível quando a animação estiver desativada.
- Resuma as páginas/componentes e movimentos nomeados entregues, e aponte qualquer conteúdo que o usuário ainda precise fornecer.
Princípios de design reutilizáveis
- Lidere com a função e o valor da pessoa, depois torne os trabalhos selecionados fáceis de encontrar.
- Mantenha a página inicial como uma introdução concisa e porta de entrada; deixe cada estudo de caso carregar sua própria narrativa e evidências.
- Use um padrão de título de seção, escala de espaçamento, navegação, rodapé e sistema de cartões de projeto consistentes.
- Permita que as páginas de projeto compartilhem uma sequência flexível, em vez de forçar cada projeto a ter conteúdo idêntico.
- Mantenha o movimento sutil, proposital e consistente. Um nome de movimento descreve um comportamento reutilizável, não uma biblioteca obrigatória ou implementação exata.
- Não copie texto de referência, dados pessoais, alegações de projetos, imagens ou código-fonte para o site do novo usuário. Peça o próprio material do usuário ou use placeholders identificados.
Referências
- Leia references/page-patterns.md ao planejar o mapa do site ou construir seções de página e estudo de caso.
- Leia references/motion-catalog.md quando o usuário pedir para escolher, nomear ou implementar movimento.