Como esse site foi pensado

Scrapbook: o conceito que guia o projeto

O site é construído sobre um conceito único: um scrapbook. Polaroids, post-its, fita adesiva, stickers e caligrafia formam o vocabulário visual, e os elementos da interface se comportam como objetos físicos sobre uma superfície de papel.

A escolha desses elementos remete aos anos 90, a década em que nasci. O contraste entre esse universo analógico e a tecnologia atual (as interações, a engenharia por trás das páginas) faz parte do meu trabalho e é algo de que sempre gostei. O conceito também serve de critério de projeto: um elemento só entra na interface se tiver um equivalente nesse universo, o que mantém a coerência visual do site inteiro.

Uma grade infinita arrastável

Na home, os trabalhos ficam num plano 2D arrastável em qualquer direção. Tecnicamente, os projetos preenchem um bloco sem células vazias e esse bloco se repete de forma contínua conforme o arrasto, então o espaço não termina e não aparecem buracos.

Cada polaroid recebe, na construção da página, uma inclinação, um deslocamento e um atraso de entrada aleatórios: valores pequenos, sorteados uma única vez, que quebram o alinhamento rígido da grade. O cursor do sistema permanece visível, e um rótulo o acompanha indicando a ação disponível: Drag sobre o fundo, View sobre um trabalho.

Elementos arrastáveis

Na página Sobre, os post-its, as fotos e os stickers são arrastáveis. Cada peça responde ao toque: zera a inclinação e sobe de escala enquanto está pressionada, e permanece exatamente onde for solta, sem deslizamento posterior.

Um detalhe técnico importante: o site mede a distância percorrida pelo ponteiro e só captura o gesto depois de alguns pixels de movimento. Isso impede que um arrasto dispare o clique de um link e que um clique vire arrasto por engano.

Transições entre páginas

Na troca de página, um painel sólido sobe cobrindo a tela enquanto a página atual desliza para cima na metade da velocidade. Essa razão de 2:1 cria o efeito de paralaxe. A entrada da página seguinte é um fade curto, para não atrasar o conteúdo.

Todas as animações respeitam a preferência de movimento reduzido do sistema operacional: com a opção ativada, o site funciona por completo, sem nenhuma animação.

Lightbox com páginas reais por trás

Clicar num trabalho abre um lightbox sobre a grade. O funcionamento: o site busca a página real do case, extrai o bloco de conteúdo e o injeta no modal, trocando o endereço na barra do navegador pela History API, sem recarregar a página.

Com isso, cada case continua sendo uma página independente: tem link próprio, abre sozinha, pode ser compartilhada e é indexada pelo Google. A fluidez do modal não quebra links nem SEO.

Duas famílias tipográficas, quatro cores

Cada família tem uma função definida: a Rethink Sans cobre títulos, interface e texto corrido; a Shadows Into Light Two, manuscrita, aparece apenas em legendas de polaroid, post-its e anotações, onde no mundo físico algo seria escrito à mão. Essa separação evita o excesso.

A paleta tem quatro cores, todas com função fixa: um quase-preto azulado de fundo, o verde-lima da marca e dos destaques, o amarelo dos post-its e o rosa de marca-texto. Nenhuma cor entra sem função.

Decisões de desenvolvimento

A base do site prioriza velocidade, acessibilidade e manutenção simples:

• Site estático, sem framework no navegador. As páginas chegam prontas do servidor e o JavaScript entra apenas onde há interação: o arrasto, o lightbox, a transição. Resultado: carrega rápido em qualquer conexão.
• Unidades relativas, sem breakpoints fixos. Tipografia e espaçamento escalam de forma fluida com a tela, do celular ao monitor grande, sem versões separadas do layout.
• Imagens em AVIF, formato mais eficiente que JPG e PNG: a mesma nitidez com uma fração do peso.
• HTML semântico e acessível: navegação por teclado, foco visível, textos alternativos. Sem JavaScript, a grade vira uma grade rolável comum e todo o conteúdo continua acessível.
• Conteúdo editável em painel visual. Textos, fotos e cases ficam em coleções de conteúdo estruturadas e podem ser alterados num painel, sem tocar em código.

Como isso se aplica ao seu site

Nada disso é um template. O processo começa por um conceito ligado ao seu trabalho, e as decisões técnicas (navegação, movimento, tipografia) derivam dele, com a mesma base de engenharia descrita acima. Você já tem ideias e um universo visual próprio: o meu papel é ajudar a tirar essas ideias do papel, transformando o seu conceito em decisões de interface, interação e código.

Fora da curva, para mim, é uma ideia forte executada com rigor técnico: um site que continua rápido, acessível e fácil de atualizar.