Eduardo — Personal Trainer

01 Visão geral

Um site de personal trainer que não parece um site de personal trainer

Eduardo é personal trainer em Divinópolis/MG, com atuação presencial e online, especialização em Musculação e Condicionamento Físico e mais de 5 anos de experiência. O objetivo do projeto era uma landing page de conversão que se diferenciasse do modelo genérico do nicho — formulário, foto de banner, lista de serviços — sem abrir mão de performance nem de simplicidade de manutenção.

A decisão estratégica de maior impacto no projeto foi arquitetural, não visual: o site inteiro é HTML, CSS e JavaScript estáticos, sem framework, sem etapa de build e sem dependência de npm em tempo de execução. Isso significa deploy imediato, superfície de ataque mínima e zero risco de quebra por dependência desatualizada — um site que continua funcionando daqui a cinco anos exatamente como funciona hoje.

A peça central da experiência é uma técnica pouco comum em sites do setor: em vez de vídeo de fundo tocando em loop, cada seção principal é controlada pelo próprio gesto de rolagem do visitante — o vídeo "anda" junto com o dedo ou o mouse, para exatamente onde a pessoa parar.

02 Stack técnica

Sem framework, sem build, sem dependência de runtime

Toda a stack foi escolhida para minimizar peças móveis. Não há React, Vue, bundler ou pipeline de compilação — o que está no repositório é exatamente o que é servido ao visitante.

03 A técnica central

Vídeo controlado pelo scroll, não pelo autoplay

Cada seção com vídeo não é um arquivo .mp4 — é uma sequência de centenas de frames WebP, gerados a partir de vídeo produzido por IA e desenhados um a um num <canvas> conforme o GSAP ScrollTrigger reporta o progresso da rolagem.

O resultado prático: o vídeo nunca "corre sozinho". Ele avança, para e até volta exatamente na velocidade que o visitante rola a página — sem autoplay bloqueado por navegador, sem tela de carregamento de vídeo, sem buffering perceptível, porque cada frame já é uma imagem estática comum.

04 Arquitetura de performance

Carregar 29 MB de vídeo sem pesar 29 MB

A técnica de scroll-vídeo só é viável em produção com uma arquitetura de carregamento agressiva. A regra do projeto: nenhuma seção carrega frames antes de precisar deles, e nenhuma seção fica na memória depois que deixa de precisar.

Regras de carregamento

• Janela simétrica de uma seção. Um IntersectionObserver por seção decide o que carregar e o que descarregar — nunca mais que 3 sequências de vídeo na memória ao mesmo tempo.
• Transição sem corte perceptível. Ao se aproximar do fim de uma seção, o primeiro frame da próxima já está pronto para um crossfade suave — sem precisar da sequência inteira carregada.
• Sistema de tiers com fallback automático. Conexão lenta, hardware fraco ou prefers-reduced-motion ativo fazem o site cair para uma imagem estática por seção — zero JavaScript de vídeo é executado nesses casos.
• Fallback inteligente e simulação de ambiente. O sistema conta com detecção dinâmica de hardware e velocidade de rede para alternar entre os modos de exibição, permitindo testes rigorosos de garantia de qualidade (QA) e de performance web em múltiplos cenários de acesso — do 4G instável ao desktop de ponta.

05 Sistema de marca em código

O manual de identidade, não uma interpretação livre dele

A paleta e a tipografia do site seguem o manual de identidade oficial do cliente — incluindo as regras de uso, não só as cores.

Tipografia: Montserrat (display, caixa alta, tracking positivo) + Inter (corpo), ambas self-hosted como variable fonts. Forma: raio de 3px em todo o sistema — o "canto vivo" herdado do monograma da marca.

Um detalhe de rigor: o grafismo que não podia animar duas vezes

O manual define um grafismo de apoio — uma "régua de anilhas" (blocos em progressão simétrica) — e restringe explicitamente onde ele pode animar: só na barra de progresso de treino do aplicativo. O site usa o mesmo grafismo como divisor de seção, estático, em respeito a essa regra.

Ao desenhar um indicador de progresso de leitura para o site, a solução óbvia seria reaproveitar essa régua e animá-la — o que teria violado a regra do manual. Em vez disso, o indicador de progresso de scroll do site foi desenhado como uma peça nova, usando o mesmo vocabulário visual (blocos discretos em bronze), mas como uma aplicação própria e compatível com a marca, não uma reutilização fora de contexto.

06 Funcionalidades

Peças construídas ao longo do projeto

07 Auditoria de performance

Medido com PageSpeed Insights, não estimado

Resultado da auditoria de desktop após a rodada de otimização — acessibilidade, práticas recomendadas e SEO no máximo:

Otimização de imagens

A auditoria de mobile identificou dois arquivos de logo desproporcionalmente grandes para o que exibiam em tela — a causa mais provável de um LCP (Largest Contentful Paint) acima de 8 segundos. Ambos foram redimensionados com folga para telas retina e convertidos para WebP sem perda de qualidade:

Outras correções aplicadas

• Scripts sem defer. GSAP e ScrollTrigger bloqueavam a renderização; passaram a carregar em paralelo ao parsing do HTML.
• Estratégia granular de cache na borda (Edge). Aplicação de políticas diferenciadas de Cache-Control no nível de CDN: ativos imutáveis de alto peso — como sequências de frame e fontes — recebem cache de longa duração, enquanto arquivos de marcação e estilo mantêm revalidação frequente, garantindo performance extrema sem comprometer atualizações do site.
• Imagens sem dimensões declaradas. Atributos width/height adicionados para eliminar o risco de deslocamento de layout (CLS) durante o carregamento.

08 Engenharia & depuração

Três bugs que só aparecem em produção

Registro honesto de problemas reais encontrados durante o desenvolvimento — o tipo de detalhe que separa "funciona no meu navegador" de "funciona".

09 Conformidade & responsabilidade

Um personal trainer não é um médico — e a copy respeita isso

O cliente possui formação complementar em Farmacologia Hormonal Aplicada, usada para adaptar treinos de alunos em acompanhamento hormonal. A copy foi escrita para deixar claro que esse conhecimento apoia decisões de treino, sempre em conjunto com o médico responsável — nunca em substituição a ele, respeitando os limites de atuação de um profissional de Educação Física registrado no CREF.

• LGPD. Os 8 depoimentos publicados usam identificação genérica (ex.: "Aluno(a) — Divinópolis/MG") até a confirmação de consentimento explícito de cada aluno para uso do nome real.
• Acessibilidade. prefers-reduced-motion respeitado em toda a experiência de scroll, foco de teclado visível em todos os elementos interativos, texto alternativo em imagens informativas.
• SEO técnico. Nota 100/100 na auditoria — meta description, hierarquia de heading única, HTML semântico.

10 Deploy

Do commit ao ar, sem etapa intermediária

Infraestrutura serverless edge: o projeto é hospedado na rede global da Cloudflare via Workers, com distribuição geográfica de ativos estáticos (Edge Assets) — sem build, sem runtime de servidor e sem infraestrutura tradicional para manter.

O fluxo de publicação é 100% automatizado por scripts de integração contínua (CI/CD): cada alteração aprovada vai do commit ao ar em segundos, com zero downtime durante o processo. A política de cache em cada tipo de ativo segue a estratégia de borda (Edge) descrita na seção 07.