[{"data":1,"prerenderedAt":325},["ShallowReactive",2],{"blog:\u002Fwhy-i-built-my-own-portfolio:pt-br":3,"blog:author:allan-oliveira:pt-br":303,"blog:related:\u002Fwhy-i-built-my-own-portfolio:pt-br":312,"blog:prev:\u002Fwhy-i-built-my-own-portfolio:pt-br":286,"blog:next:\u002Fwhy-i-built-my-own-portfolio:pt-br":323},{"id":4,"title":5,"author":6,"body":7,"cover":283,"date":284,"description":285,"descriptionShort":286,"extension":287,"featured":288,"meta":289,"navigation":288,"path":290,"readTime":291,"readTimeUnit":292,"related":286,"seo":293,"shortTitle":294,"stem":295,"tags":296,"updatedAt":286,"__hash__":302},"blog_ptBR\u002Fblog\u002Fwhy-i-built-my-own-portfolio.md","Seis anos programando pros outros até finalmente programar pra mim","allan-oliveira",{"type":8,"value":9,"toc":270},"minimark",[10,14,17,22,25,34,38,41,44,104,107,158,162,165,175,180,183,187,190,206,210,218,222,225,229,232,238,242,257,260,263,266],[11,12,13],"p",{},"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.",[11,15,16],{},"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.",[18,19,21],"h2",{"id":20},"o-problema-que-a-lib-de-temas-resolveu-primeiro","O problema que a lib de temas resolveu primeiro",[11,23,24],{},"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.",[11,26,27,28,33],{},"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 ",[29,30,32],"a",{"href":31},"\u002Fprojects\u002Fao-dev","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.",[18,35,37],{"id":36},"eu-implemento-mas-nem-sempre-sei-por-que","Eu implemento, mas nem sempre sei por quê",[11,39,40],{},"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.",[11,42,43],{},"Não consegui escolher um só. Todos me atraíam por um motivo diferente:",[45,46,47,60],"table",{},[48,49,50],"thead",{},[51,52,53,57],"tr",{},[54,55,56],"th",{},"Morfismo",[54,58,59],{},"Onde descobri (ou redescobri)",[61,62,63,72,80,88,96],"tbody",{},[51,64,65,69],{},[66,67,68],"td",{},"Flat",[66,70,71],{},"Desenhos animados da infância — pouca sombra, formas simples",[51,73,74,77],{},[66,75,76],{},"Skeuomorfismo",[66,78,79],{},"Nostalgia pura — sites em Flash, Cartoon Network, iG, Ben 10",[51,81,82,85],{},[66,83,84],{},"Neumorfismo",[66,86,87],{},"Um cliente da Leve Mix queria algo \"mordendo\" — fui atrás e descobri o estilo",[51,89,90,93],{},[66,91,92],{},"Glassmorfismo",[66,94,95],{},"A versão original, antes de qualquer Big Tech reaproveitar a ideia",[51,97,98,101],{},[66,99,100],{},"Liquid Glass",[66,102,103],{},"O relançamento da Apple — vi o vídeo de anúncio e fiquei de queixo caído",[11,105,106],{},"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.",[108,109,114],"pre",{"className":110,"code":111,"language":112,"meta":113,"style":113},"language-html shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003C!-- trocar de morfismo em produção é isso: uma classe -->\n\u003Chtml class=\"skeu\" data-theme=\"dark\">\n","html","",[115,116,117,126],"code",{"__ignoreMap":113},[118,119,122],"span",{"class":120,"line":121},"line",1,[118,123,125],{"class":124},"sLBg1","\u003C!-- trocar de morfismo em produção é isso: uma classe -->\n",[118,127,129,133,136,140,143,147,150,152,155],{"class":120,"line":128},2,[118,130,132],{"class":131},"suds8","\u003C",[118,134,112],{"class":135},"sne4z",[118,137,139],{"class":138},"s-5SL"," class",[118,141,142],{"class":131},"=",[118,144,146],{"class":145},"sT6z2","\"skeu\"",[118,148,149],{"class":138}," data-theme",[118,151,142],{"class":131},[118,153,154],{"class":145},"\"dark\"",[118,156,157],{"class":131},">\n",[18,159,161],{"id":160},"o-que-nao-virou-paragrafo-nenhum-no-case-tecnico","O que não virou parágrafo nenhum no case técnico",[11,163,164],{},"Tem coisa que só vira uma linha tipo \"corrigido\" no case study, mas que na hora custou dias de verdade:",[166,167,168,172],"ul",{},[169,170,171],"li",{},"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.",[169,173,174],{},"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.",[176,177,179],"h3",{"id":178},"nuxt-studio-um-dia-inteiro-que-nao-sobrou-nada","Nuxt Studio: um dia inteiro que não sobrou nada",[11,181,182],{},"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.",[18,184,186],{"id":185},"o-que-eu-nao-gosto-mas-deixei-assim-mesmo","O que eu não gosto, mas deixei assim mesmo",[11,188,189],{},"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.",[191,192,195,203],"figure",{"className":193},[194],"rehype-figure",[196,197],"img",{"alt":198,"height":199,"src":200,"title":201,"width":202},"Seção \"Feature em Destaque\" da home do ao.dev, com os cinco cards de morfismo maiores do que eu planejava originalmente",675,"\u002Fimages\u002Fpages\u002Fblog\u002Fwhy-i-built-my-own-portfolio\u002Fwhy-i-built-my-own-portfolio-home.png","Feature em Destaque — cinco morfismos",1200,[204,205,198],"figcaption",{},[18,207,209],{"id":208},"reler-a-propria-carreira-pra-escrever-21-cases","Reler a própria carreira pra escrever 21 cases",[11,211,212,213,217],{},"Pra chegar no nível de detalhe que os ",[29,214,216],{"href":215},"\u002Fprojects","cases de projeto"," 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.",[18,219,221],{"id":220},"o-morfismo-que-e-a-cara-da-minha-infancia","O morfismo que é a cara da minha infância",[11,223,224],{},"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.",[18,226,228],{"id":227},"uma-carta-pro-allan-de-2020","Uma carta pro Allan de 2020",[11,230,231],{},"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:",[233,234,235],"blockquote",{},[11,236,237],{},"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.",[18,239,241],{"id":240},"o-que-vem-depois-do-deploy","O que vem depois do deploy",[243,244,245,248,251,254],"ol",{},[169,246,247],{},"Vou respirar um pouco — mas só um pouco.",[169,249,250],{},"Já tem fix e feature pro fui-content e pro ao.dev na fila, mesmo antes do site sair do ar de dev.",[169,252,253],{},"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.",[169,255,256],{},"E também vou aplicar pra vagas em empresas — as duas frentes ao mesmo tempo, sem escolher só uma.",[11,258,259],{},"Sobre medo de crítica quando o site for público: não tenho. Pelo contrário — quero muito receber feedback de verdade.",[261,262],"hr",{},[11,264,265],{},"E é isso. Seis anos depois da primeira vez que essa ideia apareceu numa conversa de corredor, ela finalmente saiu do papel.",[267,268,269],"style",{},"html pre.shiki code .sLBg1, html code.shiki .sLBg1{--shiki-default:#66707B;--shiki-dark:#BDC4CC}html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .sne4z, html code.shiki .sne4z{--shiki-default:#024C1A;--shiki-dark:#72F088}html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html pre.shiki code .sT6z2, html code.shiki .sT6z2{--shiki-default:#032563;--shiki-dark:#ADDCFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":113,"searchDepth":128,"depth":128,"links":271},[272,273,274,278,279,280,281,282],{"id":20,"depth":128,"text":21},{"id":36,"depth":128,"text":37},{"id":160,"depth":128,"text":161,"children":275},[276],{"id":178,"depth":277,"text":179},3,{"id":185,"depth":128,"text":186},{"id":208,"depth":128,"text":209},{"id":220,"depth":128,"text":221},{"id":227,"depth":128,"text":228},{"id":240,"depth":128,"text":241},"\u002Fimages\u002Fpages\u002Fblog\u002Fwhy-i-built-my-own-portfolio\u002Fwhy-i-built-my-own-portfolio-cover.png","2026-07-12","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.",null,"md",true,{},"\u002Fblog\u002Fwhy-i-built-my-own-portfolio",8,"minute",{"title":5,"description":285},"Por que construí meu próprio portfólio","blog\u002Fwhy-i-built-my-own-portfolio",[297,298,299,300,301],"Portfólio","Design System","SCSS","Nuxt","Carreira","BRpnpVp8m8PHTPfnqxLufJqhr2Aqbas6sro3zFEeKr0",{"slug":6,"name":304,"role":305,"bio":306,"avatar":307,"socials":308},"Allan G. B. Oliveira","Engenheiro Frontend","6+ anos construindo interfaces de alta qualidade em Vue, Nuxt e React. Apaixonado por design systems, performance e DX.","\u002Fimages\u002Fpages\u002Fabout\u002Fabout-photo.png",{"linkedin":309,"github":310,"email":311},"https:\u002F\u002Flinkedin.com\u002Fin\u002Falle-oliveira","https:\u002F\u002Fgithub.com\u002FAllanGBOliveira","allebeira@gmail.com",[313],{"path":314,"title":315,"description":316,"date":317,"readTime":318,"readTimeUnit":292,"tags":319,"cover":322},"\u002Fblog\u002Fabout-change-and-humanity","Além das telas: o que aprendi sobre carreira e humanidade","Uma reflexão honesta sobre sete anos de carreira em tecnologia, a experiência do desemprego e a importância de não confundir ambição com ganância.","2026-07-17",4,[301,320,321],"Reflexão","Vida Profissional","\u002Fimages\u002Fpages\u002Fblog\u002Fabout-change-and-humanity\u002Fabout-change-and-humanity-cover.png",{"path":314,"title":315,"shortTitle":324,"date":317},"O que aprendi no hortifruti",1784312151075]