Portfólio v1 → v2

O ponto de partida

Quando decidi me reposicionar como Product Designer com olhar de Design Experience Engineering, percebi que o primeiro produto a ser auditado era o meu próprio portfólio.

A v1 tinha nascido de um experimento: gerei o site com Figma Make e publiquei no GitHub Pages, em helloraboff.github.io. Foi uma prova rápida de que a ideia parava em pé, e me apaixonei por boa parte dela, o conceito de estrategista T-shaped, alguns recortes de layout, a energia do primeiro rascunho. Mas quando voltei a ela com olhos de produto, a lista de dívidas apareceu: sem controle real de SEO, contrastes abaixo do padrão de acessibilidade, imagens pesadas, um só idioma e nenhuma estrutura para crescer com cases escritos por mim.

O ponto mais difícil não foi técnico, foi editorial: separar o que eu queria manter por apego do que precisava evoluir para a v1 virar um portfólio que abrisse portas de verdade. Eu estava em busca de uma nova oportunidade, e isso me deu o critério: fica o que comunica quem eu sou hoje e ajuda a me contratar, sai o que era só carinho pela primeira versão. A v1 segue publicada e intocada em helloraboff.github.io, de propósito, para qualquer um comparar as duas versões lado a lado.

O desafio

Um portfólio que promete entrega de ponta a ponta precisa ser, ele mesmo, a prova da promessa. O desafio não era refazer um site bonito, era construir um produto que sustentasse o discurso: bilíngue de verdade, acessível no padrão AA, rápido no mobile, encontrável no Google e sem cara de site gerado por IA. E fazer tudo isso sendo minha própria cliente, com o brief mudando na minha cabeça a cada semana.

Por que Next.js e Claude Code

O Figma Make me deu velocidade na v1, mas me deixou sem controle sobre o que importa em um produto de longo prazo: metadados, performance de imagem, rotas por idioma, semântica do HTML. Escolhi Next.js 16 com Tailwind porque me devolve esse controle com geração estática e otimização de imagem nativas. E escolhi trabalhar com Claude Code porque é assim que eu entrego hoje: a estratégia, o critério e cada decisão de design são meus, e a IA acelera a construção do que eu já defini.

A jornada: da cópia fiel ao reposicionamento

Lado a lado, as duas versões contam a distância percorrida: da UX/UI Designer estrategista T-shaped da v1 à Design Experience Engineer da v2.

A v2 nasceu em maio de 2026 e passou por três estágios claros. Primeiro, fidelidade: reconstruí o site fiel à v1 e corrigi os problemas de heurística que a auditoria tinha apontado, para separar o que era dívida técnica do que era decisão de design. Depois, reposicionamento: reescrevi o conteúdo com a narrativa DXE, estruturei a internacionalização PT/EN com inglês nativo revisado com meu professor, e criei a base de cases em MDX para escrever textos como este.

O terceiro estágio foi a lapidação, e foi onde o trabalho de verdade apareceu. Uma sequência de oito commits dedicados só a remover cacoetes visuais de IA que eu mesma tinha deixado passar: blobs decorativos em toda seção, gradientes em excesso, ghost numbers, cinco estrelinhas nos depoimentos. Uma saga de compatibilidade com o Safari do iOS, em que o menu mobile só funcionou depois de eu testar no aparelho real e não no emulador. E uma rodada em que naveguei o site como usuária exigente e mapeei 11 ajustes de hierarquia, respiro e voz, do indicador de scroll colado no CTA até o rodapé que hoje assume: desenhado e construído por mim, com Next.js e Claude Code.

A onda final de julho fechou o ciclo com pesquisa de referências guiando uma reforma de narrativa, depoimentos padronizados com foto real, data e origem identificada, og-image própria para compartilhamento e um pacote editorial de animações de entrada que respeita quem prefere movimento reduzido.

Processo e papel

1. Auditoria da v1. Avaliei o site que eu mesma tinha publicado com o mesmo rigor que aplicaria ao produto de um cliente: heurísticas de usabilidade, contraste, performance de imagens, SEO e estrutura de conteúdo.

2. Fundação técnica com critério de design. Defini a stack, os tokens de cor com tema claro e escuro desde a fundação, a tipografia e a arquitetura de rotas por idioma. A IA escreveu rápido, mas escreveu o que eu especifiquei.

3. Conteúdo bilíngue nativo. Reescrevi todo o texto em português e em inglês como versões irmãs, não como tradução espelhada. A voz em inglês passou por revisão humana para soar como eu falo.

4. Validação em contexto real. Testei no iPhone, no desktop e no modo claro e escuro, gerei PDF para revisão de copy e transformei cada incômodo em item de backlog com prioridade.

5. Curadoria contra o design genérico. Fiz a limpeza deliberada dos padrões visuais que denunciam site feito por IA sem direção. Sobrou o que tem função; saiu o que era enfeite.

A entrega

A v2 está no ar em hellora-portfolio-v2.vercel.app: bilíngue com hreflang e troca de idioma por página, acessibilidade no padrão WCAG AA, imagens otimizadas com next/image, og-image própria para compartilhamento, sitemap e robots configurados, CV hospedado no próprio site em PT e EN, e depoimentos reais com foto, data e origem identificada.

Os números contam a parte mensurável. A parte estratégica é que o site virou infraestrutura: a base de cases em MDX permite publicar um case novo em dois arquivos, com SEO e layout resolvidos, sem depender de plataforma externa.

Aprendizados

1. Ser minha própria cliente foi mais difícil do que parece. Sem prazo externo, o escopo cresce e o critério afrouxa. O que destravou o projeto foi me tratar como cliente formal: auditoria documentada, backlog priorizado e rodadas de validação com lista fechada.

2. Emulador não substitui aparelho real. O menu mobile quebrava só no Safari do iOS, e levou uma sequência longa de tentativas até eu testar no telefone de verdade e encontrar a causa. Hoje nenhuma entrega minha sai sem passar pelo dispositivo físico.

3. IA acelera a produção, mas o repertório é que decide. Os cacoetes visuais de IA entraram no projeto pelas minhas próprias mãos, aceitando defaults sem questionar. Removê-los exigiu olhar treinado e oito commits de curadoria. A ferramenta amplifica o critério de quem a usa, para o bem e para o mal.

4. Manter a v1 no ar foi a decisão editorial mais barata e mais valiosa. O comparativo real entre as duas versões comunica evolução melhor do que qualquer parágrafo sobre crescimento profissional.