Portfólio Profissional

Sobre mim

Um pouco sobre mim

Minha trajetória na programação foi construída principalmente na prática. Em vez de apenas estudar conceitos isolados, eu fui criando projetos, enfrentando problemas reais, estudando comportamentos, corrigindo erros, ajustando interfaces e melhorando a experiência de cada página que desenvolvi.

Gosto de aprender fazendo. Quando algo não funciona, eu testo. Quando está lento, eu otimizo. Quando está confuso, eu reorganizo. Esse processo prático foi o que mais me fez evoluir como desenvolvedor.

Execução

Tenho facilidade em transformar ideias, referências e estruturas do Figma em interfaces reais usando HTML, CSS e JavaScript.

Para ser sincero, prefiro codificar um site ou landing page do zero do que ter que criar uma no Figma 😅

Atenção técnica

Me preocupo com responsividade, performance, hierarquia de conteúdo, acessibilidade e clareza de navegação.

Após uma análise técnica de comportamentos, passei a desenvolver sites pensados principalmente para Mobile.

Evolução

Reconheço meus pontos fortes e também os pontos em que ainda preciso melhorar. Uso cada projeto como uma oportunidade real de crescimento.

Documentação técnica

Evidências técnicas e performance

Além do resultado visual, também documento testes, prints e melhorias técnicas aplicadas nos projetos.

Quando finalizo ou avanço em um projeto, busco analisar pontos como carregamento, peso das imagens, experiência mobile e estrutura da página. Nesta seção, reúno prints e vídeos de testes de performance e observações técnicas feitas durante o desenvolvimento.

Pagespeed insights · 2026

Antes e depois de ajustes

Antes e depois de uma Landing page de uma massoterapeuta que já tinha um site.

Pagespeed insights · 2026

Teste de performance — Projeto 01

Resultado de performance da Landing Page de odontologia após otimização e boas práticas.

Pagespeed insights · 2026

Resultado mobile — Projeto 02

Resultado de performance de Landing Page de Dedetização após otimização e boas práticas.

squoosh + webp/avif · 2026

Otimização de imagens

Multi-projetos: Redução expressiva de peso.

lighthouse · 2026

Carregamento rápido

Simulações com conexões lentas e carregamento rápido mesmo em Slow 4G.

lqip · 2026

Carregamento progressivo

Imagem leve exibida primeiro enquanto a versão final carrega, melhorando a percepção de velocidade no mobile.

UX na prática

Experiência de usuário aplicada

Particularmente gosto muito dos pequenos detalhes. Aqui vou mostrar comparações simples mostrando como pequenos detalhes de interação tornam uma landing page mais clara, profissional e confortável de usar.

UX não está apenas em grandes decisões visuais. Muitas vezes, a diferença entre uma interface comum e uma interface profissional está em pequenos comportamentos: como um menu fecha, como um campo guia o preenchimento e como a página respeita o progresso do usuário.

Sidebar pensada em UX

Uma comparação entre uma sidebar comum e uma sidebar pensada em experiência de usuário.

Sem ux

Sidebar comum sem UX

Menu abre, mas exige mais esforço do usuário para sair ou continuar navegando.

Com ux

Sidebar pensada em UX

Fecha ao clicar fora, bloqueia o scroll do body e fecha automaticamente ao clicar em um link.

Mesmo sendo uma aplicação simples, esse comportamento melhora muito a sensação de controle. O usuário entende melhor onde está, como sair do menu e como continuar navegando sem confusão.

Reduz atrito no mobile

Evita scroll por trás do menu

Deixa a navegação mais previsível

Passa mais profissionalismo

Formulário mais claro no preenchimento

Comparação entre um campo de telefone comum e um campo com máscara automática.

Sem ux

Formulário comum sem UX

O usuário digita o número sem orientação visual clara.

Com ux

Formulário pensado em UX

O campo organiza automaticamente DDD, espaços e hífen durante a digitação.

A máscara de telefone ajuda o usuário a entender o formato esperado e revisar melhor o número antes do envio. É um detalhe simples, mas melhora a clareza e a confiança no formulário.

Guia o preenchimento

Melhora a leitura do número

Reduz erros

Deixa o formulário mais profissional

Restauração da sessão

Comparação entre perder o progresso de um formulário e permitir que o usuário continue de onde parou.

Sem ux

Formulário sem recuperação

O usuário sai ou atualiza a página e precisa preencher tudo novamente.

Com ux

Experiência com continuação

A interface identifica progresso anterior e pergunta se o usuário deseja continuar.

Quando o usuário já começou a preencher um formulário, perder esse progresso pode gerar abandono. O modal de continuação cria uma experiência mais cuidadosa e aumenta a sensação de profissionalismo. Obs: Aprendi esse sistema no desenvolvimento do projeto Advanced To-Do List.

Evita retrabalho

Reduz frustração

Valoriza o tempo do usuário

Aumenta a chance de conversão

O impacto está nos detalhes

Esses exemplos mostram que UX também está em pequenas decisões de comportamento. Uma sidebar que fecha do jeito esperado, um campo que guia o preenchimento e um formulário que preserva o progresso podem parecer detalhes simples, mas tornam a interface mais clara, mais confortável e mais profissional.

Meu foco é continuar desenvolvendo esse olhar: criar interfaces que não apenas funcionem, mas que façam sentido para quem usa.

Comportamento do usuário

Análise comportamental real

Uma parte importante da minha evolução foi começar a observar como usuários reais interagem com as interfaces que desenvolvo.

No começo, comecei utilizando o Microsoft Clarity para observar mapas de calor, cliques e padrões gerais de navegação, mas ele não atendia muito bem o meu objetivo. Depois, passei a usar o LogRocket para analisar sessões com mais profundidade, observando movimentos, pausas, cliques, rolagem, dúvidas e possíveis pontos de atrito.

Essas análises me ajudaram a enxergar que desenvolver uma interface não é apenas fazer algo bonito ou funcional. Também é entender o comportamento de quem usa, identificar confusões, perceber onde a atenção se perde e melhorar a experiência com base em evidências.

Além disso, foi essas análises que me fizeram entender que 90% dos acesso vêm diretamente do celular, o que me fez priorizar a experiência mobile.

Observação: Em todas as páginas eu incluí um aviso de consentimento explicando o uso de ferramentas de análise de navegação para melhorar a experiência do usuário.