← Voltar ao Blog
cat case_carlino.md

Bastidores do Carlino: um portfólio que expressa identidade artística

Publicado: 25 Junho 2026 · Ian Akiles · IAN.DEV Categoria: Bastidores do Projeto

O desafio aqui não era técnico — era de linguagem visual. Um ilustrador profissional com um trabalho artístico forte estava representado por um portfólio genérico, do tipo grid-de-imagens-e-nome, que não comunicava nada sobre o estilo real do trabalho.

UX CriativaCSS AvançadoMarqueesResponsivo

Design primeiro, código depois

Antes de escrever qualquer CSS, o processo começou com referências visuais do próprio universo do ilustrador — traços, cores, ritmo. O objetivo era que o site parecesse uma extensão do trabalho artístico, não uma vitrine neutra em cima dele.

Por que marquees (faixas de texto em movimento)

Marquees horizontais em velocidades e direções opostas criam uma sensação de galeria viva, em movimento constante — em vez de uma lista estática de trabalhos. Tecnicamente, isso foi implementado com transform: translate3d e animações CSS puras, evitando JavaScript de scroll pesado que costuma travar em dispositivos mais fracos.

Carrosséis paralelos com profundidade

Diferentes faixas de conteúdo se movem em velocidades distintas, criando uma leitura de profundidade (efeito parallax) sem depender de bibliotecas externas — apenas CSS e observação de scroll nativa do navegador, mantendo o site leve mesmo com múltiplas camadas visuais simultâneas.

O maior desafio: responsividade sem perder o impacto

Efeitos assimétricos e distorções dinâmicas são naturalmente mais difíceis de adaptar para telas pequenas do que um grid tradicional. A solução foi simplificar a complexidade visual progressivamente conforme o viewport diminui, mantendo os marquees (que funcionam bem em qualquer largura) como elemento central da identidade em todos os tamanhos de tela.

Resultado

O portfólio final opera com 8 mídias ativas em rotação e reporta uma taxa de conversão de contato 5x maior que a versão anterior — o tipo de resultado que confirma que investir em linguagem visual própria, e não em template genérico, teve retorno direto.

Gostou da abordagem? Posso aplicar o mesmo nível de cuidado técnico no seu projeto.

Solicitar Diagnóstico Ver Projeto ao Vivo