Kit de Portfólio Neo-brutalista

O que Kit de Portfólio Neo-brutalista faz?

Um modelo de portfólio completo e testado, extraído de um site de produção. Tudo está em assets/ — copie para um novo projeto Vite + React, substitua os dados de placeholder pelos do proprietário e publique. O kit foi verificado para executar vite build do zero e renderizar sem erros no console.

O que você obtém

• Sistema de design — cores planas e saturadas, bordas de 3px, sombras offset sólidas, tiles inclinados (assets/src/brutal/brutal.css, escopo sob .nb).
• Seções — carregador · nav fixa (scroll-spy, alternadores de tema + idioma + som, folha móvel) · hero com hover por letra · sobre · grade de trabalhos com overlay de estudo de caso em tela cheia (anterior/próximo, teclado, restauração de foco) · pilha · acordeão de experiência · formulário de contato · rodapé com relógio local ao vivo.
• Bilíngue + RTL — Inglês/Árabe com propriedades CSS lógicas; claro/escuro sem flash.
• Som — loop synthwave generativo de 124 BPM e efeitos de hover/clique (cada letra do hero toca uma nota pentatônica). Sem arquivos de áudio, sem licenciamento.
• Assistente — chat flutuante apoiado por api/chat.js: RAG sobre os dados do próprio proprietário (BM25 consciente de Árabe + embeddings Gemini), respostas fundamentadas, fallback de modelo, mesma origem + limitação de taxa. A chave da API nunca chega ao navegador.
• Configuração de deploy — vercel.json (SPA rewrites), .vercelignore.

Início rápido (novo projeto)

1. npm create vite@latest my-portfolio -- --template react e instale as dependências listadas em assets/package.deps.json (i18next react-i18next lenis framer-motion lucide-react @emailjs/browser @google/genai).
2. Copie o conteúdo de assets/ para a raiz do projeto (mescle src/, substitua index.html e vite.config.js, adicione api/, vercel.json, .vercelignore). Exclua as importações padrão de src/App.css/index.css — o kit traz seu próprio CSS via brutal.css.
3. Preencha os dados do proprietário (veja O que personalizar).
4. Adicione o retrato em src/Imgs/portrait.jpg e capturas de tela dos projetos em public/projects/ (WebP, largura ≤1280px).
5. npm run dev → verifique claro/escuro, EN/AR, 375px e 1440px. npx vite build deve passar.
6. Deploy: veja references/deploy-and-secrets.md.

O que personalizar (os únicos arquivos que contêm conteúdo)

Arquivo	O que colocar nele
src/data/siteFacts.js	nome (EN/AR), divisão do nome hero, iniciais da nav, localização, fuso horário, links de contato, IDs públicos do EmailJS, colunas da pilha de tecnologia, ferramentas
src/data/projectsMeta.js	projetos: título, tags, URL ao vivo (ou null), order, i18nIndex
src/data/projectImages.js	capturas de tela por projeto; a primeira imagem é a capa do card
src/i18n/locales/{en,ar}.json	todo o texto — declaração hero, texto/estatísticas sobre, destaques, experiência, subtítulo/descrição/rótulos de tela por projeto, "tipos" de projeto, texto de contato, prompts do assistente
index.html	<title>, descrição, favicon

Regras ao preencher: escreva apenas fatos que o proprietário possa confirmar; nunca invente clientes, números, datas ou links; mantenha os nomes de tecnologia em Inglês em ambos os idiomas; projects.items[i] nos arquivos de localidade deve corresponder ao i18nIndex.

Linguagem de design (resumo — valores exatos em references/design-system-spec.md)

• Apenas cor plana. Sem gradientes, brilho, desfoque, vidro ou aparência "AI" roxa. Profundidade = borda + sombra dura.
• Bordas 3px solid var(--nb-line) · sombras offset sólidas (5px/8px 8px 0, 12–14px no hover) · inclinação -2°…2°, endireitar no hover.
• Tipografia: Bricolage Grotesque 800 maiúsculo para display, Space Grotesk para corpo, JetBrains Mono maiúsculo para rótulos. Árabe: Cairo 700–900, sem tracking, sem maiúsculas.
• Regra de contraste: texto sobre um preenchimento saturado é sempre #111 com bordas #111 em ambos os temas; apenas superfícies neutras alternam com o tema.
• Ritmo das seções: hero amarelo → sobre papel → trabalho azul → pilha papel → experiência lilás → contato rosa → rodapé preto. Recolora alterando os tokens --nb-*; mantenha o ritmo.

Regras de engenharia (mantenha ao editar)

• Revele o estado em um atributo de dados (data-reveal → data-in), nunca em uma classe — as re-renderizações do React sobrescrevem classes.
• O overlay de caso precisa de data-lenis-prevent, caso contrário, o Lenis bloqueia a roda dentro dele. O mesmo para qualquer overlay rolável (chat do assistente, folha móvel).
• Use CSS lógico (inline-start/end, margin-inline), inverta setas em RTL, envolva contadores numéricos em dir="ltr", nunca aplique espaçamento entre letras no Árabe.
• Nunca chame localhost do código de produção — os navegadores pedem permissão de rede local aos visitantes. Chame uma API somente quando sua URL de variável de ambiente estiver definida.
• Performance: lazy-load de seções abaixo da dobra; imagens WebP com loading="lazy"; anime apenas transform/opacity; respeite prefers-reduced-motion; sem bibliotecas 3D/UI pesadas no caminho público.
• Segredos: chaves de API vivem apenas em variáveis de ambiente do servidor (GEMINI_API_KEY). Nunca prefixe um segredo com VITE_ (ele é empacotado no navegador). IDs públicos do EmailJS são seguros no código do cliente.
• Acessibilidade: anel de foco visível, link de pular, aria-pressed em alternadores, role="dialog" + restauração de foco em overlays, suporte a movimento reduzido.

Verifique antes de dizer "pronto"

1. npx vite build passa.
2. Claro + escuro, EN + AR (RTL), 375px e 1440px; sem overflow horizontal.
3. Abra um estudo de caso → Anterior/Próximo/Esc, role dentro dele com a roda do mouse.
4. Passe o mouse no nome hero e controles (após um clique) para confirmar sons; alternadores persistem.
5. Se o assistente estiver implantado: faça uma pergunta de contato, uma pergunta de listar todos os projetos e algo que não está nos dados (ele deve dizer que não sabe).
6. O painel de pré-visualização pode estar oculto (animações pausadas) — confirme movimento com uma segunda captura de tela ou um navegador real.

Artefatos do sistema de design

• DESIGN-SYSTEM.md — visão geral + tabela de paleta/regras com links.
• design-system/tokens.css e tokens.json — os tokens para uso fora do kit React.
• design-system/styleguide.html — guia de estilo vivo (abra em um navegador): paleta com contraste, escala tipográfica, escalas de sombra/inclinação, cada componente, movimento, faça/não faça.

Referências (leia quando necessário)

• references/design-system-spec.md — o sistema de design exato: princípios, cada cor e onde vai, números de contraste, escala tipográfica, espaçamento, escalas de sombra/borda/inclinação, tokens de movimento, z-index, breakpoints, anatomia e estados dos componentes.
• references/design-system.md — catálogo de classes, receitas de seções, como recolorir ou adicionar uma seção.
• references/interaction-and-sound.md — comportamento de hover/clique, sistema de revelação, arquitetura e ajuste de música + SFX.
• references/i18n-and-rtl.md — estrutura de localidade, mapa de chaves, tipografia árabe, checklist RTL.
• references/assistant-rag.md — como o endpoint de chat funciona, partes de conhecimento, ajuste de recuperação e do prompt.
• references/deploy-and-secrets.md — passos do GitHub + Vercel, variáveis de ambiente, rotação de chaves, solução de problemas.