grilodeveloper, este portfólio

O desafio

Mostrar o meu trabalho sem cair no portfólio genérico de grade de cards. O site precisava ter personalidade e, ao mesmo tempo, ser direto: explicar o que eu faço e levar a conversa para o WhatsApp sem atrito.

A solução

• —Avatar vivo: separei as pupilas e a boca do desenho original e redesenhei em SVG. Ele segue o cursor, pisca, sorri nos botões de contato, fala por um balão, reage a cliques e cochila se a página fica parada.
• —Rabiscos no mesmo traço do avatar (sublinhado, seta, círculo e ícones) que se desenham quando aparecem na tela.
• —Orçamento em três cliques que vira uma mensagem pronta no WhatsApp, para quem chega não precisar pensar no que escrever.
• —Detalhes que quase ninguém nota: a cordinha que apaga a luz e faz o avatar bocejar, o grilo que pula no rodapé e faz cri-cri, a assinatura escrita à mão e tudo em minúsculas.

A entrega

• —Sem biblioteca de animação: tudo com CSS, SVG e React, e o som do grilo gerado pelo próprio navegador.
• —Quem pede menos movimento no sistema vê tudo parado, e o site continua navegável pelo teclado.
• —Prévia de link com a fonte e o traço da página, favicon em todos os tamanhos e dados estruturados para o Google.
• —Medição de visitas e de cliques no contato para saber o que realmente traz conversa.

Tecnologias

• Next.js 16
• React 19
• TypeScript
• Tailwind CSS 4
• SVG
• Web Audio API
• Vercel