# Seis anos programando pros outros até finalmente programar pra mim > A história real por trás do ao.dev e do fui-content — de uma piada de corredor que nunca saiu do papel até um portfólio inteiro construído do zero, com uma lib de temas própria no meio do caminho. Toda empresa que passei teve uma versão da mesma conversa. Na K13, com o designer: "cara, você desenha, eu implemento, colocamos a foto dos dois no site." Na 3C, anos depois, com outro designer, a mesma ideia. Nunca saiu do papel nas duas vezes — eu sempre tive vontade de ter algo meu, mas sempre dei meu tempo inteiro pro trabalho dos outros e nunca sobrou nada pra mim. O que finalmente destravou isso foi, ironicamente, ficar sem trabalho. Saí da 3C e comecei a construir algo pessoal — uma lib de componentes em Lit pra e-commerce. Foi indo bem, até eu parar e pensar: mesmo terminando, como eu ia me apresentar com isso? Simplesmente colocar um e-commerce genérico no ar, sem contexto nenhum? Foi aí que lembrei da vontade antiga e decidi: desta vez o portfólio sai do papel. ## O problema que a lib de temas resolveu primeiro Minha lib de componentes em e-commerce precisava de alguma forma de estilo. E eu não queria instalar dependência atrás de dependência — Bootstrap, Vuetify, Tailwind — queria algo meu, do jeito que eu gosto de codar. Abri a documentação do Bootstrap (a que eu mais tenho experiência, já modifiquei e customizei várias vezes) e comecei a construir a minha própria versão em SCSS, puxando bastante de lá, mas com zero dependência de JavaScript pra começar. Só que aí percebi outra coisa: eu também precisava estilizar o próprio portfólio. Então por que não a mesma lib? Quando eu terminar o [ao.dev](/projects/ao-dev) e voltar pros meus componentes de e-commerce em Lit, já vou ter algo pronto pra estilizá-los com a minha cara — a mesma identidade visual entre o portfólio e o e-commerce, sem reinventar nada. ## Eu implemento, mas nem sempre sei por quê Aqui vem a parte mais honesta: mais de seis anos programando frontend todo santo dia, e eu nunca tinha estudado design a fundo. Sei implementar. Nem sempre sei explicar o porquê daquela decisão visual específica. Então resolvi estudar de verdade — fui atrás das diferenças entre os estilos de design que existem, tentando decidir qual seguir. Não consegui escolher um só. Todos me atraíam por um motivo diferente:
Morfismo Onde descobri (ou redescobri)
Flat Desenhos animados da infância — pouca sombra, formas simples
Skeuomorfismo Nostalgia pura — sites em Flash, Cartoon Network, iG, Ben 10
Neumorfismo Um cliente da Leve Mix queria algo "mordendo" — fui atrás e descobri o estilo
Glassmorfismo A versão original, antes de qualquer Big Tech reaproveitar a ideia
Liquid Glass O relançamento da Apple — vi o vídeo de anúncio e fiquei de queixo caído
Resolvi ter todos os cinco. Um toggle no próprio site pra trocar entre eles ao vivo — não só pra mostrar as opções, mas pra literalmente contar a história da evolução do design de interface, do jeito que eu fui descobrindo ela. ```html ``` ## O que não virou parágrafo nenhum no case técnico Tem coisa que só vira uma linha tipo "corrigido" no case study, mas que na hora custou dias de verdade: - Fazer cada morfismo funcionar direito em dark mode, sem quebrar contraste — só isso, sem contar as variantes, levou de dois a três dias pra ficar redondo. - Toda configuração inicial de projeto novo — eu já conhecia as ferramentas, mas começar sempre toma mais tempo que codar em si: ir de lib em lib lendo doc, opção de config, decidindo o que faz sentido. ### Nuxt Studio: um dia inteiro que não sobrou nada Testei o Nuxt Studio querendo integrar como editor visual de conteúdo. Passei um dia inteiro configurando, sabendo que podia ser revertido. E foi — ele precisa de rotas SSR pra autenticação, e isso não encaixa na arquitetura atual do site. Deixei de fora por enquanto. Assim que sobrar orçamento pra investir em mim mesmo, pretendo montar rotas SSR e testar de novo. ## O que eu não gosto, mas deixei assim mesmo Sinceridade total: na home, a seção "Feature em Destaque" com os cinco cards de morfismo deveria ser bem menor — uns 100px no máximo, no que eu tinha em mente originalmente. Mas entre isso e manter o HTML semântico do jeito certo, escolhi o semântico. Visualmente não ficou como o wireframe previa, nem como eu imaginei — mas resolve o problema, e isso importa mais.
![Seção "Feature em Destaque" da home do ao.dev, com os cinco cards de morfismo maiores do que eu planejava originalmente](/images/pages/blog/why-i-built-my-own-portfolio/why-i-built-my-own-portfolio-home.png)
Seção "Feature em Destaque" da home do ao.dev, com os cinco cards de morfismo maiores do que eu planejava originalmente
## Reler a própria carreira pra escrever 21 cases Pra chegar no nível de detalhe que os [cases de projeto](/projects) deste site têm, precisei reler e reescrever a história de 21 projetos reais da minha carreira — TriPagamentos, K13, Avanti, 3C, os freelas, tudo. Foi um processo estranho de fazer: cada projeto trouxe lembrança, algumas mais fortes que outras. Teve projeto que eu redescobri no meio da apuração — tinha certeza que existia, não lembrava mais o nome nem os detalhes, e foi só navegando pelo site de novo que voltou tudo: os mapas, as fichas técnicas, os bugs de legado. Revisitar alguns deles trouxe de volta lembranças fortes de colegas de trabalho e de uma fase bem difícil da minha carreira — não foi só nostalgia boa, teve peso ali também. ## O morfismo que é a cara da minha infância Se me perguntar qual dos cinco eu mais amei construir, é o skeuomorfismo, sem dúvida. Ele me lembra sites em Flash, Cartoon Network, iG, Ben 10, KND — a estética inteira da minha infância na internet. O card skeu especificamente ficou com cara de papel pautado de verdade, e isso me deixou genuinamente orgulhoso. ## Uma carta pro Allan de 2020 Se eu pudesse voltar e falar com a versão de mim que tinha acabado de entrar na Let's, sem saber nada de desenvolvimento web: > Não desista, não largue, erga a cabeça — você é mais forte do que pensa. Esse medo que você está sentindo agora, você consegue atravessar. Não fuja, continua dando duro, uma hora você vai ser recompensado. E não perde contato com quem te ajudou a chegar até aqui — essas pessoas vão valer mais do que qualquer stack nova que você aprender. ## O que vem depois do deploy 1. Vou respirar um pouco — mas só um pouco. 2. Já tem fix e feature pro fui-content e pro ao.dev na fila, mesmo antes do site sair do ar de dev. 3. Vou abrir o Workana e me aprofundar em freelance de verdade — agora que consigo entregar front e fazer o deploy sozinho, isso muda o tipo de trabalho que consigo pegar. 4. E também vou aplicar pra vagas em empresas — as duas frentes ao mesmo tempo, sem escolher só uma. Sobre medo de crítica quando o site for público: não tenho. Pelo contrário — quero muito receber feedback de verdade. --- E é isso. Seis anos depois da primeira vez que essa ideia apareceu numa conversa de corredor, ela finalmente saiu do papel.