mohammadNafia/portfolio

Esta é a pasta original, mantida para fins de proveniência. Não é a cópia de trabalho.

O sistema autoritativo reside em docs/pixel-portfolio-style/, com seus quatro arquivos de referência e assets/base.css. Leia aquele.

Este arquivo antecede duas adições das quais a construção depende: regra #0 (aplique o sistema no lugar; nunca reescreva um aplicativo funcional e testado para adotar uma aparência — a regra que decidiu toda a reformulação) e regra #9 mais o ponteiro references/rtl-and-locales.md. Seguir esta cópia faria você perder ambas.

Pixel Portfolio Style

Um sistema visual + de movimento completo. Siga-o literalmente. Quando algo não estiver coberto aqui, escolha a opção que for mais suave, mais arredondada e mais geométrica — nunca introduza uma nova cor, uma nova fonte, um novo raio ou uma nova curva de easing.

Inegociáveis (leia sempre)

1. Apenas duas fontes. Fonte pixel display para títulos de seção + palavra do hero. Sem geométrica para todo o resto.
2. Apenas uma cor de destaque. Azul #0B8DF8. Preto #111 para botões secundários. Nada mais.
3. Cada título de seção é: fonte pixel em maiúsculas + sublinhado ondulado SVG desenhado à mão, centralizado.
4. Cada seção revela ao scroll com a mesma transição de desfoque (consulte references/motion.md).
5. Os raios são pílula ou 20px. Nunca 4px, nunca 8px, nunca cantos vivos (exceto o divisor em zigue-zague).
6. Sem bordas. A separação vem dos preenchimentos #F2F2F2 e sombras suaves, não de linhas de 1px.
7. Coluna de conteúdo centralizada, máximo 1080px. Ritmo vertical generoso (120–160px entre seções).
8. O texto é amigável a minúsculas e autodepreciativo/humano, nunca corporativo. Frases curtas.

Fluxo de trabalho ao adicionar algo novo

1. Leia references/design-tokens.md → use as variáveis CSS, nunca hex bruto.
2. Leia references/components.md → verifique se a coisa já existe como um padrão (pílula, tag, cartão, cabeçalho de seção, marquee, carrossel, campo de formulário). Reutilize-o. Não invente um segundo estilo de cartão.
3. Leia references/motion.md → anexe o comportamento padrão de revelação + hover.
4. Se for uma seção totalmente nova, leia references/section-recipes.md e siga o "modelo de nova seção" exatamente (espaçamento, cabeçalho, revelação, container).
5. Alterne os fundos de seção --bg / --bg-hero. Se duas seções adjacentes tiverem fundos diferentes, coloque um divisor em zigue-zague entre elas (nunca uma linha reta).
6. Registre o id da seção nos links de navegação em pílula apenas se for um destino de nível superior (máx. 4 links de navegação; se adicionar um 5º, pergunte ao usuário qual descartar).
7. Adicione qualquer novo slot de imagem a assets/IMAGES.md com a proporção exata necessária, para que o usuário saiba o que fornecer.

Autoverificação antes de finalizar

• Cada novo título usa a fonte pixel + sublinhado ondulado?
• Algum código hex fora da lista de tokens? Remova-o.
• Algum raio que não seja 999px ou 20px / 16px / 14px? Corrija-o.
• O novo bloco aparece com blur(10px) → 0 e y: 30px → 0?
• Os estados de hover usam scale(1.03) + elevação de sombra + 250ms?
• Mobile: o leque/carrossel/grid colapsa conforme as regras mobile em references/components.md?
• Eu mantive o padding vertical da seção em clamp(80px, 10vw, 160px)?

Arquivos de referência

Arquivo	Leia quando
references/design-tokens.md	Sempre — cores, escala tipográfica, espaçamento, sombras, fontes
references/components.md	Construindo qualquer elemento de UI (nav, cartões, tags, formulário, marquee, carrossel, divisor)
references/motion.md	Qualquer animação, revelação, hover ou coreografia de carregamento de página
references/section-recipes.md	Adicionando uma seção ou página totalmente nova
assets/base.css	Folha de estilo pronta para uso com todos os tokens + primitivos já implementados
assets/IMAGES.md	Quais imagens o site precisa e em qual proporção