Desenvolvimento · 2026

Portfólio de UI/UX que mostra processo, não só tela bonita

Portfólio de UI/UX com arquitetura de SPA em React: hero com cena 3D em WebGL (renderização em tempo real de uma rede neural interativa), layout em bento grid com widgets de skills e cases estruturados em problema, decisão e resultado.

DESENVOLVIMENTOUI/UXSITE3D

Cliente: Gabriel de Souza
Ano: 2026
Frente: Desenvolvimento

Site ao vivo.

gabrielsouzx.netlify.app

Abrir

Navegue pelo site real dentro da página. Alguns sites bloqueiam a exibição incorporada — nesse caso, use o botão “Abrir”.

O projeto.

O projeto inclui internacionalização (i18n) com roteamento por locale, animações de scroll com reveal progressivo, cursor customizado e otimização de performance com lazy loading de módulos pesados, mantendo a cena 3D fora do critical path de renderização.

Como foi feito

Hero com cena 3D em WebGL renderizada em tempo real, fora do critical path de carregamento
Bento grid com widgets de skills, experiência e certificações em leitura escaneável
Cases documentados em framework problema → decisão → resultado
Internacionalização (i18n) com roteamento por locale, PT-BR e EN
Animações de scroll com reveal progressivo e cursor customizado
Code splitting e lazy loading de módulos pesados pra manter o first paint rápido

Execução técnica.

Arquitetura de informação e escopo técnico

Mapeamento das jornadas prioritárias, definição da hierarquia de conteúdo e do modelo de dados antes de qualquer tela. O escopo é fechado em componentes reutilizáveis, o que reduz retrabalho e mantém o comportamento consistente entre páginas.

Design system e implementação em componentes

Tokens de cor, tipografia, espaçamento e raio definidos em CSS e consumidos por componentes — nenhum valor solto no código. Layout construído em grid responsivo com breakpoints reais de uso (mobile, tablet, desktop) e estados explícitos de hover, foco, carregamento, vazio e erro.

Performance e Core Web Vitals

Imagens servidas em formato moderno com dimensões fixas para evitar deslocamento de layout, carregamento diferido abaixo da dobra, divisão de código por rota e renderização no servidor do conteúdo crítico. Animações restritas a transform e opacity, aceleradas por GPU, para manter o scroll estável.

SEO técnico, acessibilidade e rastreio

Estrutura semântica com um H1 por página, meta e Open Graph por rota, dados estruturados em JSON-LD, sitemap e canônicas. Contraste, navegação por teclado e rótulos ARIA validados. Camada de analytics instalada com eventos de conversão nomeados por etapa da jornada.

Mensuração e ciclo de melhoria

Toda a entrega roda em ciclo fechado: definição de indicador primário, coleta em painel único, leitura semanal de variação e ajuste na semana seguinte. O critério de decisão é sempre o dado de saída — não o gosto pessoal. O acompanhamento seguiu o indicador combinado com Gabriel de Souza na abertura do projeto.

Serviços entregues.

Página de vendas

Selling page — Ruyter Poubel

Página de vendas de produto high-ticket para o empreendedor digital Ruyter Poubel. Estrutura de venda passo a passo, hierarquia visual pensada na conversão e copy integrada ao design.