Portal Studway
Portal e catálogo comercial da minha empresa, bilíngue e sem dependência de UI
O desafio
A Studway existia como canal no YouTube desde 2020 e como empresa formal desde março de 2025, mas nunca teve site próprio — o que existia era um esqueleto de janeiro de 2025, parado no primeiro commit.
O problema imediato era comercial: eu não tinha um link para mandar a um cliente em potencial. Contar o que a empresa já entregou por WhatsApp, projeto a projeto, não escala e não convence.
O problema de médio prazo era outro: a marca sempre se definiu como um guarda-chuva de projetos — canal, cursos, portal de estudos, jogos. Um site feito só como cartão de visitas precisaria ser jogado fora quando esse conteúdo existisse.
Resultados
O que eu fiz
Arquitetura pensada para o segundo uso
Projetos e conteúdos compartilham a mesma modelagem. Os formatos que ainda não existem — estudo escrito, jogo jogável — já estão tipados e aparecem no site como trilhas anunciadas. Quando o material existir, muda a fonte dos dados, não a estrutura nem os componentes.
Design system do zero
Paleta derivada da marca, com base neutra em ~85% da tela, azul como acento primário e laranja restrito a pontos de ênfase. Contraste medido e documentado nos próprios tokens: todo par de texto e fundo passa AA.
Curadoria do catálogo
A parte mais difícil não foi técnica. Escolhi dez projetos entre quase quarenta pastas e defini uma ordem editorial explícita: o primeiro card é o caso com métrica de negócio auditada, não o commit mais recente.
Conteúdo bilíngue integral
Português e inglês em toda a superfície, incluindo descrições de projeto e serviço. Nenhum texto mora dentro de componente — dado fica em src/data, moldura fica no dicionário.
Galeria
Decisões técnicas
Revelação sem depender de JavaScript
A animação de entrada é CSS puro; o React só aplica uma classe. Se a hidratação falhar — rede ruim, bundle bloqueado, extensão do navegador — uma animação de segurança revela tudo após 2,4 s. Uma animação em JS deixaria a página em branco no mesmo cenário.
Idioma como store externo
A preferência vive no localStorage e é lida por useSyncExternalStore. Com useState mais useEffect, o cliente renderizaria uma vez em português antes de corrigir; aqui o valor certo chega na primeira renderização, e a troca numa aba reflete nas outras de graça.
O degradê que não podia ser usado em texto
Azul e laranja são quase complementares: a interpolação entre eles passa por um cinza dessaturado. Em um fio de 1px ninguém nota, mas no título de 70px a sílaba do meio sumia. Separei em dois degradês — um para fios e bordas, outro para texto, que fica dentro da família do azul.
Placeholder de imagem que sobrevive à hidratação
O erro de download de uma imagem dispara durante o parse do HTML, antes do React hidratar, então o onError sozinho perde o evento e o card fica com o ícone de imagem quebrada. O componente checa complete e naturalWidth depois da montagem para pegar esse caso.
É o projeto onde fui, ao mesmo tempo, cliente e desenvolvedor — e isso mudou as decisões. Sem prazo externo, dava para levar a sério coisas que normalmente ficam para depois: acessibilidade, degradação sem JavaScript e uma modelagem que aguenta o próximo uso do produto.