portifolio-evandrodevbr/DESIGN.md

DESIGN.md

Registro das decisões de desenho do evandro.dev.br. O código (app/globals.css, componentes) é a fonte dos valores; este arquivo diz o porquê.

Conceito

Ideia:      os blocos da marca são as peças com que se monta o site ou o sistema de cada cliente
Metáfora:   kit de blocos de encaixe, como uma maquete
Assinatura: no hero, os blocos da marca se soltam e se remontam com a rolagem em tela, integrações e dados
Emoção:     nos três primeiros segundos, "isto foi montado peça por peça"
Verbo:      encaixar: chega rápido, assenta curto, sem quique
Quadro:     a marca em porcelana com os quatro cubos verdes ao lado do título

Âncora: o símbolo é feito de blocos (public/brand/mark-dark.svg); o conceito não serve para outra marca.

Paleta

Papel	Token	Valor
Fundo escuro, tinta	--ink	#0a0a0a
Fundo claro	--paper	#f4f2ed
Fundo claro, segundo plano	--paper-dark	#eceae4
Acento	--slash	#ccff00
Texto secundário	--meta	#4a4a4a
Controles que abrem o WhatsApp	--whatsapp	#25d366

O acento aparece em pouca área: um trecho do título, um botão, os cubos da marca. Verde sobre preto é a identidade da marca desde 2026-09, não uma escolha de tendência.

Tipografia

• Display e corpo: Space Grotesk (--font-display).
• Rótulos, números e código: Geist Mono (--font-mono), 13 px, sem caixa alta, letter-spacing de 0,02em.

Forma

Cantos retos por padrão (blocos, molduras, botões do hero). Raio aparece em poucos lugares: formulário de contato, botão do WhatsApp e indicadores circulares.

Movimento

Só CSS e Three.js direto. Sem biblioteca de animação (GSAP, Motion e React Three Fiber saíram em 2026-10-14 por desempenho).

Uso	Duração	Curva
Entrada de componente	280 ms	--ease-out
Saída de componente	180 ms	--ease-in
Entrada do título e do hero	850 a 1100 ms	--ease-out
Troca de página	600 ms; a capa compartilhada viaja em 500 ms	cortina em degraus de 8 colunas; --ease-out na capa
Detalhes de bloco (cursor, cortina)	conforme o caso	steps()

Regras:

• Animam só transform (e translate, scale), opacity, clip-path e mask. Única exceção: a altura das perguntas frequentes ao abrir e fechar.
• O texto está no HTML desde o primeiro quadro; a animação nunca esconde conteúdo de quem não a recebe.
• Coisa grande se move devagar, detalhe se move rápido; escalonamento entre 20 e 80 ms.
• Com prefers-reduced-motion: reduce não há cena, rolagem suave nem animação; o conteúdo aparece inteiro.

Resposta ao ponteiro e ao foco

Um tratamento por papel, sempre entrando pela esquerda em 280 ms com --ease-out; com movimento reduzido a troca é instantânea.

Papel	Tratamento
Botão verde	um bloco cor de papel cobre o botão e o texto continua escuro; sobre fundo claro o bloco é escuro e o texto inverte
Botão de contorno	o mesmo bloco: translúcido no fundo escuro, escuro no fundo claro (o texto inverte)
Link de texto e item do menu	uma barra de 2 px cresce sob o texto
Item da vitrine	uma barra verde entra pela esquerda
Tocar vídeo	o círculo cresce e fica verde
Logo	os quatro quadrados verdes sobem em sequência e assentam

"Falar sobre meu projeto" sempre leva ao formulário. Controle que abre o WhatsApp se chama "Chamar no WhatsApp".

Cena 3D

Fonte em 3d/blocos.py (Blender), saída em public/3d/. Um bloco chanfrado, repetido, com quatro estados: marca, tela, integracoes, dados.

Nível (sceneTier() em lib/device.ts)	Quem recebe	O que recebe
full	computador com GPU, mais de 4 núcleos e mais de 4 GB	cena em tempo real guiada pela rolagem
lite	celular com 6 núcleos ou mais e 4 GB ou mais	cena em tempo real leve, que troca de estado sozinha
static	o resto, movimento reduzido, economia de dados, ou quem não segura 28 ms por quadro	pôster renderizado no Blender

O pôster é o primeiro quadro de todos os níveis e o LCP continua sendo o título.