Chuvisco
O sistema de identidade desse site, feito a partir da nova identidade visual que criei para mim e dos meus estudos com o Claude Code.
Contexto
Até pouco tempo atrás eu usava o Adobe Portfolio para mostrar meus trabalhos, mas quando comecei a trabalhar como freelancer eu entendi que era o momento de complementar minhas habilidades com a Inteligência Artificial, não generativa, mas na parte de programação. Para isso, resolvi criar um novo portfolio hospedado no Netlify e com domínio próprio, com cases mais focados e com o auxílio do Claude Code. O nome Chuvisco vem do ruído de TVs CRT, a mesma textura que o filtro do site reproduz.
CRT
As TVs CRT, chamadas de TVs de tubo aqui no Brasil, eram os dispositivos usados na época que nasci, do final dos anos 90 e início dos 2000. Dentre os artefatos visuais que essas TVs produziam estavam a aberração cromática (deslocamento dos canais RGB, criando franjas coloridas nas bordas dos elementos), os scanlines (linhas de varredura horizontais, que dão a impressão da tela ter listras finas mais escuras), o bloom (brilho que vaza dos elementos mais claros para o seu entorno, criando um halo de luz) e a vinheta (já que a TV de tubo não é plana, os cantos tendem a parecer mais escuros que o centro da tela).
Esse efeito teve vários testes em outro projeto pessoal meu e foi trazido para esse projeto do site de forma refinada. Ele pode ser desligado a qualquer momento com um botão no canto da tela.
Adesivos
Os adesivos representam minha intervenção manual por cima do digital, minha personalidade através dos meus hobbies e gostos. Eles têm a intenção de estarem "colados" por cima do vidro da TV, por isso não são afetados pelo filtro CRT. Ao arrastá-los é possível ver a luz incidindo de maneiras distintas de acordo com a posição deles na tela.
No mobile essa camada de adesivos não está presente, uma decisão deliberada pra manter a leitura no celular leve e sem obstrução. No mobile os adesivos só aparecem nessa página, para mostrar o efeito.
No resto do site essa camada é exclusiva do desktop, uma decisão deliberada pra manter a leitura mobile leve e sem obstrução. Sinta-se à vontade para voltar no site depois numa tela maior para interagir com os elementos!
Pode arrastar os adesivos!
Pode segurar e arrastar os adesivos!
Processo
O processo de construção do portfolio partiu dessa intenção de renovar a identidade visual. Comecei com o padrão de qualquer identidade, pensando em logo, tipografia, paleta cromática, texturas e elementos, o que me levou ao sistema de design e também à estrutura do site. Depois de criada a base, alguns outros elementos entraram no meio, como o cursor customizado em pixel art (que é sutil mas ajuda a vender a ideia retrô), e também as interações com os adesivos e o logo na home, a barra lateral em gradiente, entre outros detalhes.
Cowork com IA
O Claude Code entrou nesse projeto para complementar minhas habilidades, escrevendo o código do site a partir das minhas ideias e dos meus prompts. Todos os textos foram escritos por mim através de um documento base que eu ia atualizando durante o processo e ele substituía no código.
Desde o início do projeto eu fui perguntando como poderíamos hospedar o site, a melhor maneira de escrever o código, entre outras coisas que estão fora da minha alçada, mas sempre pedindo pra ele explicar o processo para que eu saísse desse portfolio entendendo mais de programação do que eu entrei. Ele também me ajudou a encontrar bugs, deixar o site responsivo, reduzir o tamanho de arquivos e no geral tornar o código limpo e direto.
