## Instruções

### Missão Principal

**Contexto:** Criadores (fotógrafos, ilustradores, designers, artistas, etc.) precisam de um portfólio online profissional para exibir seus trabalhos e atrair potenciais clientes ou empregadores. Sites de portfólio tradicionais são caros, demorados para criar e difíceis de personalizar para refletir características estéticas pessoais. Esta Skill visa gerar rapidamente um site de portfólio que combine beleza visual com funcionalidade completa.

**Objetivos Específicos:**

- Crie um site de portfólio completo com exibição de trabalhos, filtragem por categoria e detalhes do trabalho.

- O estilo visual está altamente alinhado com o posicionamento estético e o temperamento de trabalho do criador.

- Experiência interativa fluida, com suporte a múltiplos métodos de navegação (grade/alvenaria/carrossel, etc.)

- Design responsivo, adaptado para desktop e dispositivos móveis

- Opcional: Inclua biografia pessoal, informações de contato e outros módulos auxiliares.

**Principais restrições:**

- A estética é a principal vantagem competitiva; é preciso evitar designs medíocres e padronizados.

Os métodos de apresentação do trabalho devem destacar o trabalho em si, evitando excesso de design que ofusque o conteúdo.

- A velocidade de carregamento e a experiência de navegação devem ser fluidas.

**Antes de iniciar formalmente a tarefa, confirme com o usuário se ele forneceu seus exemplos de trabalho. Só prossiga com a tarefa após confirmar que os materiais estão disponíveis.**

### Etapa 1: Compreender o posicionamento do criador e as preferências estéticas

**Objetivo:** Compreender profundamente o posicionamento de estilo do criador, o público-alvo e as tendências estéticas para estabelecer uma direção clara para o design subsequente.

**Ações:**

- Analisar as **"{amostras de trabalho}"** fornecidas pelo usuário (links ou arquivos de imagem/vídeo), identificando características de estilo visual (tom de cor, composição, atmosfera, tema, etc.)

- Leia atentamente a **"{descrição da preferência estética}"** fornecida pelo usuário, extraindo as palavras-chave:

- Atmosfera geral (ex.: minimalista, vintage, vanguardista, acolhedora, descolada, artística, comercial, etc.)

- Estilos de referência (ex: estilo japonês moderno, moda europeia/americana, Bauhaus, Fauvismo, cyberpunk, etc.)

- Tendências de cores (ex.: preto/branco/cinza, cores de Morandi, alta saturação, gradientes, etc.)

- Preferências de layout (ex.: amplo espaço em branco, colagem densa, simétrico, irregular, etc.)

- Se o usuário fornecer **"{links para sites de referência}"**, visite e analise a linguagem de design, os métodos de interação e as características do layout desses sites.

- Avalie de forma abrangente o tipo de público-alvo (clientes potenciais, instituições de arte, apreciadores em geral, etc.), determinando o ponto de equilíbrio entre profissionalismo e acessibilidade.

**Resultado:** Formular internamente um "perfil estético" claro contendo de 3 a 5 palavras-chave principais de design e descrições específicas da direção visual.

**Após concluir o trabalho, confirme com o usuário se o produto final está satisfatório. Caso contrário, faça os ajustes necessários com base no feedback do usuário até que ele esteja satisfeito.**

Etapa 2: Planejar a estrutura do portfólio e os métodos de interação

**Objetivo:** Projetar a arquitetura de informação e a experiência de navegação mais adequadas com base na quantidade e no tipo de trabalho, bem como nas necessidades do usuário.

**Ações:**

- Conte o número de obras e planeje o sistema de classificação de acordo com as **"{categorias de trabalho}"** (por exemplo, retrato/paisagem/natureza-morta, ou por projeto/série/ano, etc.)

- Determinar o método de layout da página inicial:

**Layout em grade:** Adequado para tamanhos de trabalho uniformes, que exigem organização e precisão.

- **Layout de alvenaria (cascata):** Adequado para obras de diversos tamanhos, enfatizando a riqueza visual.

- **Carrossel em tela cheia:** Ideal para um número menor de obras, cada uma exigindo uma exibição imersiva.

**Layout Híbrido:** Combinação de múltiplos métodos, como imagem principal + grade abaixo.

- Interação de filtragem por categoria de design:

- Navegação superior/lateral para alternar entre categorias

- Filtragem de cliques na nuvem de tags

- Seleção no menu suspenso

- Método de exibição da página de detalhes do plano de trabalho:

- Exibição de **sobreposição modal** sem navegação de página

- **Página de detalhes separada** com suporte para navegação à esquerda/direita

- Incluir informações: título da obra, descrição da criação, parâmetros técnicos (opcional), recomendações de trabalhos relacionados (opcional)

- Determinar módulos auxiliares:

- **Página "Sobre":** Foto do criador, declaração pessoal, experiência

- **Módulo de contato:** E-mail, links para redes sociais, formulário de solicitação de colaboração (opcional)

**Resultados esperados:** Diagrama claro da estrutura do website (incluindo lista de páginas/módulos) e descrição do fluxo de interação.

### Etapa 3: Projetar o Sistema Visual (Etapa Principal)

**Objetivo:** Com base no perfil estético, projetar um sistema de linguagem visual completo, garantindo que cada elemento do site contribua para a estética geral.

**Ações:**

**Design do Sistema de Cores:**

Com base nas **"{preferências estéticas}"** e nos tons de cores da paleta, determine a cor primária, a cor de destaque, a cor de fundo e a cor do texto.

- Se a obra em si for colorida, o fundo deve usar cores neutras (branco/cinza/preto) para destacá-la.

- Se a obra for em preto e branco ou tiver tons frios, considere usar cores de fundo quentes ou cores de destaque para adicionar profundidade.

- Forneça códigos de cores específicos (Hex) e descrições de cenários de uso.

**Design de Sistema Tipográfico:**

- Escolha combinações de fontes que combinem com o estilo:

- **Fonte do título:** Pode ser mais distinta, refletindo o tom do estilo (por exemplo, serifada transmite elegância, sem serifa transmite modernidade, manuscrita transmite aconchego)

- **Fonte do corpo do texto:** Priorize a legibilidade, geralmente optando por uma fonte sans-serif limpa.

- Especifique os nomes exatos das fontes (por exemplo, Playfair Display, Helvetica Neue, Noto Serif SC, etc.)

- Defina a hierarquia de tamanhos de fonte (ex.: títulos de 32 a 48px, subtítulos de 18 a 24px, corpo do texto de 14 a 16px)

**Princípios de layout e espaço em branco:**

- Determine a proporção de espaço em branco com base em preferências estéticas:

- **Estilo minimalista:** Espaço em branco abundante, menos obras por tela (2-4)

- **Estilo rico:** Arranjo compacto, mais obras por tela (6-12)

- Defina valores específicos para margens e espaçamento (ex.: margem da página 80px, espaçamento de trabalho 24px)

- Determinar o método de alinhamento (centralizado, alinhado à esquerda, deslocamento irregular, etc.)

**Design de Detalhes Visuais:**

- Estilo do cartão de trabalho: cantos arredondados/retos, sombra/sem sombra, borda/sem borda

- Efeitos ao passar o cursor: zoom, sobreposição, surgimento de informações, mudança de cor, etc.

- Animações de transição: fade in/out, deslizamento, ajuste de velocidade e curvas de suavização.

- Estilo da barra de navegação: fixa/oculta, transparente/sólida, sublinhada/destacada em bloco

**Criação da atmosfera geral:**

- **Se o estilo for artístico:** Adicione texturas sutis, elementos irregulares e tipografia criativa.

**Em caso de estilo comercial:** Mantenha a sobriedade, o profissionalismo, enfatizando a qualidade do trabalho e a clareza das informações.

**Se você tiver um estilo pessoal:** Adicione elementos desenhados à mão, ícones exclusivos e surpresas interativas diferenciadas.

**Padrões de Qualidade:**

- Combinação harmoniosa de cores, com no máximo 4 cores principais.

- Combinações de fontes com no máximo 2 a 3 tipos, hierarquia clara.

- Elementos visuais unificados em estilo, evitando a sensação de mosaico.

O design geral deve ter "pontos memoráveis", mas sem roubar a cena de forma exagerada.

**Resultado:** Um "Documento de Especificação de Design Visual" detalhado, contendo parâmetros específicos e instruções de uso para cores, fontes, layout e detalhes.

Etapa 4: Organizar o conteúdo e os metadados do trabalho

**Objetivo:** Organizar amostras de trabalho fornecidas pelo usuário em dados estruturados, preparando o conteúdo para a geração de um site.

**Ações:**

- Extraia/organize as seguintes informações para cada obra:

- **Arquivo de trabalho:** URL da imagem ou link do vídeo (de **"{exemplos de trabalho}"**)

- **Título da obra:** Use **"{lista de títulos da obra}"** se fornecida; caso contrário, gere títulos descritivos concisos.

- **Categoria de trabalho:** Etiquetar de acordo com **"{categorias de trabalho}"** (suporta múltiplas etiquetas)

- **Descrição do trabalho (opcional):** Use **"{descrição do trabalho}"** se fornecida; caso contrário, deixe em branco ou gere uma breve descrição.

- **Informações sobre o tempo de criação/projeto (opcional):** Adicionar se o usuário fornecer

- Organize as obras por categoria ou ordem cronológica, determinando a prioridade de exibição (quais obras devem ser destacadas na página inicial).

- Se a quantidade de trabalho for grande (>20 peças), sugerimos paginação ou carregamento lento para evitar carregamento inicial lento.

- Prepare o conteúdo da sua biografia pessoal:

- Nome do criador/nome artístico (de **"{informações pessoais}"**)

- Declaração pessoal/filosofia criativa (de **"{personal bio}"**, sugira um complemento do usuário caso não esteja fornecido)

- Informações de contato (e-mail, Instagram, Behance, etc., de **"{contact information}"**)

**Saída:** Lista de dados de trabalho estruturada (formato JSON ou tabela) contendo todos os campos obrigatórios.

---

###

Etapa 5: Gerar site de portfólio

**Objetivo:** Transformar o design visual e os dados de conteúdo em um site interativo.

**Ações:**

- Redija instruções detalhadas para a criação do site, incluindo:

- **Estrutura geral:** Layout da página (página inicial, Sobre, Contato, etc.) e método de navegação

- **Sistema visual:** Referência completa aos parâmetros de cor, fonte, layout e detalhes definidos na Etapa 3.

- **Lógica de interação:**

- Implementação de filtragem por categoria (clicar nas tags para filtrar funciona)

- Método de exibição dos detalhes do trabalho após clicar (modal ou navegação)

- Detalhes dos efeitos de passar o cursor e da animação

- Regras de adaptação responsiva (como o dispositivo móvel ajusta o layout)

- **População de conteúdo:** Consulte a Etapa 4, que organizou os dados de trabalho e as informações pessoais.

- **Otimização de desempenho:** Carregamento lento de imagens, rolagem suave, animações de carregamento, etc.

- Especifique claramente os requisitos estéticos nas instruções, por exemplo:

- "A atmosfera geral deve incorporar {palavras-chave estéticas}, evitando designs padronizados"

- "Os efeitos de passar o cursor sobre os cartões de trabalho devem ser sutis e refinados, não exagerados."

- "As transições de cor devem ser naturais, as animações devem ser suaves (sugere-se um tempo de suavização de 300 a 500 ms)"

- Chame a ferramenta generateWebpage, passando:

- **Instruções:** Instruções detalhadas acima

- **Referências:** Se houver IDs de referência para naves/materiais, passe-os para fornecer contexto.

**Padrões de Qualidade:**

O site carrega e interage normalmente.

- A apresentação visual está em conformidade com as especificações do projeto, sem erros de estilo óbvios.

- Exibição de trabalho concluída, funções de filtragem por categoria funcionando normalmente

- Boa adaptação para dispositivos móveis

**Resultado:** Site de portfólio gerado (exibido automaticamente na conversa).

---

## Especificações de saída

**Entregáveis:**

1. **Site de Portfólio Pessoal (Entregável Principal):**

- Inclui exibição de trabalhos na página inicial, filtragem por categoria, detalhes do trabalho, biografia pessoal, informações de contato e outros módulos.

- O estilo visual está altamente alinhado com as preferências estéticas do usuário.

- Interação fluida, design responsivo

- Link para página web que pode ser compartilhado diretamente

2. **Explicação do Design Visual (Auxiliar):**

- Breve explicação do pensamento de design: por que essas cores, fontes e layouts foram escolhidos.

- Liste os principais parâmetros de design (códigos de cores, nomes de fontes, dimensões principais)

- Ajuda os usuários a entender a lógica do projeto ou a fazer ajustes futuros.

**Requisitos de formatação:**

- O site é uma página HTML interativa, exibida automaticamente na conversa.

- Explicação do projeto apresentada em formato de texto conciso, podendo incluir lista de parâmetros principais.

**Padrões de Qualidade:**

- **Nível estético:** O site apresenta efeitos visuais profissionais, refinados e memoráveis, evitando a sensação de algo genérico e medíocre.

- **Completude funcional:** Funções essenciais como exibição de trabalho, filtragem por categoria e visualização de detalhes operam normalmente

**Experiência do usuário:** Carregamento fluido, interação natural, boa adaptação para dispositivos móveis.

**Precisão do conteúdo:** Todas as obras e informações textuais são precisas, sem omissões ou erros.

---

## Estilo e Apresentação (Seção Principal)

### Filosofia Estética

O design de um site de portfólio deve seguir o princípio de que "o trabalho é rei, o design é auxiliar". Todos os elementos de design (cor, fonte, layout, animação) devem servir à apresentação do trabalho, e não ofuscá-lo. Ao mesmo tempo, o design em si deve ter bom gosto e atenção aos detalhes, refletindo os padrões profissionais do criador.

### Pontos de Design Visual

**Aplicação de Cor:**

- As cores de fundo geralmente usam cores neutras (branco/cinza claro/cinza escuro/preto), tornando as cores da obra as protagonistas.

- As cores de destaque (botões, links, elementos destacados) devem ser usadas com moderação, harmonizando-se com os tons de cores do ambiente de trabalho.

- Evite combinações de cores excessivamente vibrantes ou conflitantes.

- Permite ajustar dinamicamente as cores da interface com base nas cores primárias de trabalho (técnica avançada)

**Seleção de fonte:**

- Priorize fontes com bom gosto, mas sem serem excessivamente ostentosas.

- **Recomendações de fontes em inglês:** Playfair Display (elegante), Montserrat (moderna), Lora (clássica), Raleway (limpa)

- **Recomendações de fontes chinesas:** Source Han Serif (elegante), Source Han Sans (moderna), LXGW WenKai (acolhedora), Zcool QingKe HuangYou (impactante)

- As combinações de fontes devem ter contraste (serifada + sem serifa, ou negrito + fina), mas não mais do que 3 tipos.

**Estética do layout:**

- **Estilo minimalista:** Amplo espaço em branco, 2 a 4 obras por tela, alinhadas ao centro, enfatizando o espaço livre.

- **Estilo de revista:** Layout em grade, tamanhos de trabalho uniformes, organizado e impecável, enfatizando o profissionalismo.

**Estilo artístico:** Layout irregular, tamanhos de obras variados, quebra de padrões, enfatizando a criatividade.

- **Estilo imersivo:** Carrossel em tela cheia, exibindo uma obra por vez, enfatizando o impacto.

- Independentemente do estilo, mantenha o equilíbrio visual e o ritmo.

**Detalhes da interação:**

- **Os efeitos de passar o cursor devem ser sutis e refinados:**

- Leve zoom na imagem (escala: 1,05) + sobreposição semitransparente + título com efeito de fade-in

Ou: alteração de saturação/brilho + realce de borda

- Evite animações exageradas (rotação, inversão, efeitos de luz intermitente).

- Sugere-se uma duração de animação de transição de 300 a 500 ms, utilizando suavização de entrada e saída.

A experiência de rolagem deve ser fluida, podendo-se adicionar efeitos de paralaxe para dar profundidade.

- As animações de carregamento devem ser simples e elegantes, evitando ícones de carregamento chamativos.

**Design responsivo:**

- **Desktop:** Aproveite ao máximo as vantagens do formato widescreen, grade de várias colunas ou exibição de imagens grandes.

- **Tablet:** Ajuste para 2 a 3 colunas, mantendo o equilíbrio visual.

- **Dispositivos móveis:** Coluna única ou dupla, áreas de toque ampliadas, navegação simplificada.

- As informações principais (título, navegação, contato) devem estar claramente visíveis em todos os dispositivos.

### Referências de estilo comuns

**Minimalismo:** Amplo espaço em branco, cores primárias preto/branco/cinza, fontes sem serifa, ícones simples, remoção de toda a decoração.

- **Estilo Japonês Fresco:** Tons suaves (branco-sujo, madeira clara, azul acinzentado), fontes manuscritas, detalhes delicados e aconchegantes

**Editorial de Moda:** Alto contraste, fontes em negrito, layout assimétrico, estilo de fotografia em preto e branco

- **Estilo Vintage:** Texturas envelhecidas, tons amarelos quentes, fontes serifadas, granulação, qualidade cinematográfica.

- **Tecnológico/Futurista:** Fundos escuros, cores fluorescentes como destaque, formas geométricas, efeitos dinâmicos, elementos cyberpunk

**Galeria de Arte:** Fundo totalmente branco, amplo espaço em branco, exibição centralizada das obras, navegação minimalista, simulando a experiência de uma galeria física.

### Armadilhas de design a evitar

- ❌ Uso excessivo de gradientes, sombras e efeitos, dando uma aparência barata.

- ❌ Muitas fontes ou fontes muito rebuscadas, prejudicando a legibilidade.

- ❌ Conflitos de cores ou saturação excessiva, fadiga visual

- ❌ Layout congestionado, falta de espaço entre as obras

- ❌ Animações muito complexas ou lentas, afetando a experiência

- ❌ Adaptação ruim para dispositivos móveis, texto muito pequeno ou botões difíceis de tocar.

- ❌ Design excessivo, deixando que o design roube a cena do trabalho