Poster primeiro
A composição começa com um poster estável e previsível. WebM é usado quando disponível, com MP4 como fallback explícito para navegadores que não carregarem o codec principal.
- poster
- WebM
- MP4
Notas de engenharia
Como esta landing foi construída.
Uma página editorial sobre as decisões que sustentam esta experiência: mídia progressiva, navegação com contexto, conteúdo localizado e uma rotina de qualidade antes de publicar.
Progressive enhancement no hero
O vídeo enriquece a apresentação sem ser a única forma de entender a página.
Movimento sob controle
O scrub acompanha a posição do scroll, os loops só entram nos estados necessários e a preferência de movimento reduzido interrompe a mídia em runtime.
- scroll
- reduced motion
- visibilitychange
Interface que não esconde o estado
Trabalhos, Sobre e Contato funcionam como painéis compartilháveis, navegáveis e fecháveis.
Deep links previsíveis
Cada painel tem um hash próprio. Isso mantém o contexto no histórico e permite compartilhar diretamente a área de Trabalhos sem criar uma tela paralela.
- #work
- #about
- #contact
Foco e contexto
Ao abrir um painel, o foco entra no conteúdo, o Tab permanece dentro do dialog, Escape fecha e o fundo fica inerte enquanto a decisão está em andamento.
- focus trap
- inert
- aria-modal
Conteúdo localizado e verificável
A experiência mantém a mesma estrutura em três idiomas sem transformar tradução em cópia automática.
Um contrato, três vozes
Os dicionários de PT-BR, EN e ES compartilham a mesma forma tipada. Assim, uma nova label não entra em produção em um idioma e desaparece nos outros.
- PT-BR
- EN
- ES
Evidência antes de adjetivo
Cases e notas usam links públicos e decisões que podem ser conferidas no código. Métricas não são inventadas para preencher espaço editorial.
- public work
- evidence
- honest copy
Quality gate
Publicar só depois de checar o essencial.
Cada mudança passa pela mesma sequência local antes de chegar ao repositório: tipos, regras, testes e build de produção.
- 01Type-check
- 02Lint
- 03Vitest
- 04Next build
Estas notas descrevem decisões já presentes no código. Elas não são métricas de performance nem uma promessa de disponibilidade.