Melhorias de UX, formulario de contato funcional e otimizacao de imagens

[DevAlissu]

Resumo

Melhorias de UX/acessibilidade, integração real do formulário de contato e otimização de imagens.

Formulário de contato

• Passa a enviar de verdade via Web3Forms (antes apenas simulava sucesso)
• Erros exibidos em todos os campos (antes só o email), com role="alert" e aria-describedby
• Labels associados (htmlFor/id), autocomplete, validação no blur, foco no primeiro campo inválido
• Estado de envio (botão desabilitado + "enviando...") e tratamento de erro de rede
• Requer o secret VITE_WEB3FORMS_KEY (já configurado no repo e no workflow de deploy)

Navegação / deep-linking

• Filtros de tecnologia na URL (?tech=), botão de limpar filtros funcional
• Modal de projeto na URL (?p=<id>): voltar do navegador fecha o modal e o projeto vira link compartilhável
• Aba ativa do sobre-mim na URL (?f=<arquivo>)

Acessibilidade / UX

• Foco movido para o conteúdo principal ao trocar de rota
• Fallback de carregamento no lazy load (antes tela em branco)
• Typewriter do hero respeita prefers-reduced-motion; comentário do jogo oculto no mobile
• Correção de contraste, tabular-nums em contadores/placar e touch targets de 44px

Imagens

• Screenshots convertidas para webp e ícones recomprimidos: public/ de 4.6M para 2.1M
• Script reutilizável em scripts/optimize-images.mjs (sharp)

CI

• deploy.yml injeta VITE_WEB3FORMS_KEY no build