Site de uma oficina de remap e mecânica em Vila Velha
HTMLCSSJavaScriptVercelSearch Console
Passe o mouse ou foque uma peça: ela acende com as ligações.
11 peças11 ligações4 áreas
>Contexto
A Modesto Performance é uma oficina de remap e mecânica em Vila Velha (ES). O dono, Jonatam, me mandou como referência o site de um preparador de São Paulo e pediu um site para a oficina.
Medi a referência antes de começar. No Lighthouse mobile, ela tira 33 de performance e a página pesa 3.664 KiB. A home da Modesto, medida no ar em 29/10/2026 em 3 rodadas, tira de 93 a 97 (mediana 96) e transfere 331 KiB no primeiro carregamento.
O site tem intro animada com conta-giros, um simulador de ganho em forma de jogo, um portfólio com 15 carros reais tirados do Instagram da oficina, uma página que explica a reprogramação da ECU, com FAQ, e quem somos. Está no domínio próprio, modestoperformance.com, com Search Console e o perfil da empresa no Google ligados.
>Arquitetura (HLD)
Também é estático: HTML, CSS e JavaScript sem framework, servidos pela Vercel. A primeira tela carrega o conta-giros, a intro e o grid de carros. O simulador e o catálogo baixam os scripts e a tabela de estimativas (sim.json) só quando a pessoa chega até eles, e os dois leem o mesmo arquivo, então o número é igual nos dois.
O simulador vai em passos: marca, carro, versão e stage. No fim, mostra o ganho estimado com a diferença e o percentual e abre o WhatsApp da oficina com a mensagem de orçamento já preenchida com o carro e o stage. Os carros simulados ficam só no navegador, no localStorage, e nada vai para servidor.
A medição usa o Vercel Web Analytics. O domínio tem robots.txt, sitemap.xml e chave do IndexNow, e a página de reprogramação, que tem o FAQ, leva JSON-LD do tipo FAQPage.
Componentes
Intro e conta-giros :: O ponteiro se move por evento, e a oscilação da marcha lenta é só CSS, para não ocupar a thread principal.
Simulador de ganho :: Escolha em passos (marca, carro, versão, stage), um instante no dinamômetro e o resultado com diferença e percentual, que vira orçamento no WhatsApp.
Catálogo por marca :: Todas as versões de cada marca, com busca, lendo o mesmo sim.json do simulador.
Portfólio :: 15 carros reais da oficina, tirados dos posts do Instagram dela, cada um com página de projeto.
Páginas de conteúdo :: Reprogramação de ECU explicada, com FAQ em JSON-LD, e quem somos.
>Trade-offs
Site estático, sem framework.
Alternativa descartada: Um framework de front-end com bundle de JavaScript.
Por quê: A referência pesa 3.664 KiB e tira 33 no Lighthouse mobile. Sem framework, a home da Modesto transfere 331 KiB e tira 96 (mediana de 3 rodadas).
O orçamento fecha no WhatsApp.
Alternativa descartada: Formulário com backend e banco.
Por quê: A oficina já atende pelo WhatsApp. A mensagem chega com o carro e o stage escolhidos, e o site não guarda dado de cliente.
Simulador e catálogo carregam sob demanda.
Alternativa descartada: Carregar tudo na primeira tela.
Por quê: A primeira tela baixa só o que aparece nela, o que segura o LCP no celular.
>Destaques
>Lighthouse mobile de 96 em performance (mediana de 3 rodadas, de 93 a 97); a referência que o dono mandou tira 33.
>331 KiB no primeiro carregamento, contra 3.664 KiB da referência.
>Simulador em 4 passos que termina num orçamento pronto no WhatsApp.
>15 carros reais da oficina no portfólio.
>Domínio próprio com Search Console e perfil da empresa no Google ligados.
>Curiosidades
*Antes do número, o resultado do simulador segura um instante no dinamômetro.
