Construindo Meu Portfólio — Um Estudo de Caso de Design Engineering

Antes de tocar num único pixel, eu precisava responder a uma pergunta fundamental: que história este portfólio conta? Depois de duas décadas em design, a resposta não era óbvia — exigiu uma reflexão honesta sobre onde estive e para onde estou indo.

A identidade visual precisava comunicar dualidade — ofício de design e profundidade técnica. Busquei referências além da indústria de design, encontrando as metáforas mais ressonantes no universo dos games e do cinema.

Death Stranding se tornou a âncora conceitual. No jogo, Sam Bridges literalmente constrói conexões através de uma paisagem fragmentada. É isso que um Design Engineer faz — une a distância entre design e engenharia, entre intenção e implementação. Os elementos de HUD do jogo, os efeitos de scan-line e a estética utilitária inspiraram a linguagem visual do portfólio.

The Matrix acrescentou a segunda camada. O código em cascata, a ideia de enxergar a estrutura subjacente por baixo da superfície. Como design engineer, eu opero nas duas camadas — a camada visual que os usuários experienciam e a arquitetura de código por baixo dela. O fundo de código em cascata, a tipografia monoespaçada e as interações inspiradas em terminal remontam todas a essa referência.

Essas referências se traduziram em decisões de design concretas:

• Fundo off-white (#F0EDE8) em vez de branco puro — calor com contenção
• Quase-preto (#080808) em vez de preto puro — profundidade sem dureza
• Verde bio-luminescente (#00E87A) como o accent da marca — sinal, não decoração. Combinado com uma variante mais escura (#008C50) para texto em superfícies claras (WCAG AA)
• Corner brackets e elementos de HUD como ornamentos estruturais
• Cursor customizado com anel — precisão, intencionalidade
• Tokens de código como fundo em cascata — design é código, código é design

Em vez de desenhar no Figma e traduzir para código, o design system foi construído diretamente em custom properties de CSS. Cada token, cada componente, cada decisão de espaçamento vive em código desde o início — porque é ali que importa.

O design system completo está documentado abaixo, renderizando tokens e componentes ao vivo como prova da coerência do sistema.

Este portfólio não foi construído no sentido tradicional. Não houve handoff do Figma, nem pipeline design-to-dev. Em vez disso, o processo inteiro foi uma conversa — um diálogo contínuo com o Claude, no qual decisões de design e código aconteciam simultaneamente.

Essa abordagem AI-augmented inverte o fluxo tradicional: em vez de escrever specs e traduzi-las sequencialmente, você descreve a intenção, revisa o resultado, itera em tempo real e molda o resultado por meio de feedback contínuo. A IA cuida do boilerplate; eu me concentrei nas decisões que importam — direção visual, hierarquia de informação, padrões de interação e coerência de marca.

Decisões-chave que emergiram desse processo:

• Começar com uma abordagem HTML single-file por velocidade, depois extrair um global.css quando a base de código amadureceu
• Construir o design system diretamente em custom properties de CSS, em vez de numa ferramenta de design primeiro
• Iterar em micro-interações (cursor, estados de hover, scroll reveals) por meio de loops de feedback rápidos
• Usar a IA como parceira de raciocínio para estratégia de conteúdo, não só geração de código
• Tratar cada sessão como um design sprint — definir a intenção, executar, revisar, refinar

O portfólio passou por múltiplas rodadas de refinamento. Cada iteração era guiada por uma pergunta clara: essa decisão serve à estratégia de posicionamento?

Coisas que mudaram pelo caminho:

• A estrutura inicial partiu de referências externas, mas a identidade visual divergiu por completo — as referências precisavam ser minhas, não emprestadas
• O fundo de código em cascata passou de caracteres katakana para tokens de design/UX — reforçando a narrativa de design engineering
• As escolhas tipográficas foram refinadas de opções genéricas e seguras para uma tríade deliberada: Rajdhani para impacto, Space Mono para precisão técnica, Inter para legibilidade
• A seção hero evoluiu de uma introdução padrão para uma exibição de dados inspirada em HUD — estatísticas, indicadores de status, scan lines
• Os cards de projeto saíram de uma grade uniforme para um layout featured-first com hierarquia visual
• O nome no hero ganhou uma animação de decriptação estilo Matrix — glifos especiais se embaralham antes de se resolverem nos caracteres finais, com um glitch verde sutil e persistente que mantém o nome vivo
• Os títulos de seção na landing page receberam efeitos de decode disparados por scroll com glitch contínuo; as páginas de estudo de caso usam um modo glitch-only mais leve, para manter títulos longos legíveis sem o atraso do decode
• A validação nativa de formulário do navegador foi substituída por um sistema custom com o tema do DS — as mensagens de erro usam linguagem do universo (SIGNAL_LOST, CORRUPTED_SIGNAL, DATA_NULL), com bordas em accent vermelho, animações de glitch nos inputs e validação de padrão adequada para formato de e-mail e comprimento mínimo de caracteres

Iterações posteriores trataram de escalabilidade e polimento:

• Um moodboard visual foi composto programaticamente — imagens de referência de Death Stranding, amostras da paleta de cores, espécimes de tipografia, elementos de HUD e princípios de design — tudo gerado via Python e Pillow para manter a estética escura e utilitária
• Um componente de lightbox com o tema do DS foi construído do zero: overlay a 92% de opacidade com backdrop blur, cursores zoom-in/zoom-out sobrepondo o sistema de cursor customizado, tecla Escape e clique fora para fechar, markup acessível com role="dialog"
• Uma auditoria responsiva completa em todas as seis páginas revelou um breakpoint de tablet ausente (768–1024px). Padding de seção, colunas de grid, espaçamentos de navegação, alturas de imagem e tamanhos de fonte foram todos ajustados nos três breakpoints
• Os cards de projeto na landing page evoluíram de fundos com gradiente sólido para cards com screenshot de fundo e overlays escuros, preservando os efeitos de hover existentes (escala, scan line, corner brackets) e acrescentando contexto visual

Coisas que foram mantidas intencionalmente:

• Zero frameworks externos — a restrição é o ponto central
• Cor de accent única — contenção em vez de decoração
• Abordagem performance-first — sem assets pesados, sem JavaScript desnecessário. O efeito de decode usa requestAnimationFrame durante sua execução breve e depois para por completo; o glitch contínuo dispara um único setTimeout a cada 2–5 segundos, com custo de CPU quase zero
• Inglês britânico ao longo de todo o texto original — apropriado para o posicionamento europeu