[{"data":1,"prerenderedAt":334},["ShallowReactive",2],{"lastUpdated":3,"blog-nuxt4-alicerce-pt-BR":4},"2025-05-26",{"post":5,"displayLang":333,"isFallback":323,"hasOtherLang":323},{"id":6,"title":7,"body":8,"category":317,"date":318,"description":319,"extension":320,"featured":321,"meta":322,"navigation":321,"path":324,"seo":325,"stem":326,"tags":327,"__hash__":332},"blog/blog/nuxt4-alicerce.md","Welcome to my first blog post! And my site is finally live!",{"type":9,"value":10,"toc":309},"minimark",[11,16,20,28,33,41,48,51,55,65,77,86,91,94,129,228,232,239,242,267,275,279,286,302,305],[12,13,15],"h1",{"id":14},"construindo-meu-portfólio-com-nuxt-4-e-nuxt-content","Construindo meu Portfólio com Nuxt 4 e Nuxt Content",[17,18,19],"p",{},"Fazia muito tempo que eu não tinha um site pessoal. Se a memória não me falha, a última vez foi há anos — talvez hospedado no saudoso GitHub Pages? Era algo bem simples, servia apenas para exibir meu currículo e nada mais.",[17,21,22,23,27],{},"Recentemente, me peguei pensando: ",[24,25,26],"em",{},"\"Por que não fazer um novo? Mas, dessa vez, algo sério?\""," Decidi voltar a estudar (fazer uma pós graduação), ganhar mais espaço no mercado, me atualizar e, claro, me expor mais ao mundo. O primeiro passo óbvio era ter um espaço meu na internet.",[29,30,32],"h2",{"id":31},"o-desafio-simplicidade-vs-funcionalidade","O Desafio: Simplicidade vs. Funcionalidade",[17,34,35,36,40],{},"A premissa era clara: o site precisava ser ",[37,38,39],"strong",{},"simples de manter",", mas eu queria que ele funcionasse como um CMS (Content Management System).",[17,42,43,44,47],{},"Fazer um do zero, construindo banco de dados, API e painel administrativo? Claro! IA na veia! Mas, cinco minutos depois, a realidade bateu: ",[24,45,46],{},"\"Espera... que trabalheira. Tem que ser simples!\"",".",[17,49,50],{},"A alternativa clássica seria o WordPress. Porém, eu queria usar o ecossistema e as tecnologias com as quais já trabalho no meu dia a dia como Software Engineer. Comecei então a debater com ferramentas de Inteligência Artificial (mais específicamente o Gemini) para explorar ideias de arquitetura, mas nenhuma sugestão brilhava aos olhos. Eu queria uma página inicial estilo CV vivo, um espaço para portfólio e um \"Techbrain/Blog\".",[29,52,54],{"id":53},"a-descoberta-do-nuxt-content","A Descoberta do Nuxt Content",[17,56,57,58,61,62],{},"Até que me lembrei vagamente de uma extensão ou biblioteca do ",[37,59,60],{},"Nuxt"," que havia visto no passado. Perguntei novamente para a IA sobre isso e a resposta foi imediata: ",[37,63,64],{},"Nuxt Content!",[17,66,67,68,71,72,76],{},"Entrei na documentação e vi que a ferramenta fazia ",[37,69,70],{},"exatamente"," o que eu queria: transformava arquivos Markdown (",[73,74,75],"code",{},".md",") e Frontmatter YAML em HTML altamente otimizado. Era o casamento perfeito entre a experiência de desenvolvedor (DX) que eu buscava e a simplicidade de publicação que eu precisava.",[78,79,80],"blockquote",{},[17,81,82,85],{},[37,83,84],{},"💡 O Pulo do Gato:"," Com o Nuxt Content v3, o site se comporta como um CMS estático completo. Zero banco de dados, zero dor de cabeça. O conteúdo é processado no tempo de build (SSG), garantindo performance nota 100 no Lighthouse.",[87,88,90],"h3",{"id":89},"o-stack-técnico-que-escolhi","O Stack Técnico que Escolhi",[17,92,93],{},"Para dar vida a essa ideia, o alicerce foi construído com as melhores ferramentas do ecossistema Vue:",[95,96,97,108,117,123],"ul",{},[98,99,100,103,104,107],"li",{},[37,101,102],{},"Nuxt 4:"," Aproveitando a nova estrutura de pastas (",[73,105,106],{},"app/",") que separa logicamente o código da aplicação das configurações.",[98,109,110,113,114,116],{},[37,111,112],{},"Nuxt Content v3:"," O motor que lê os arquivos ",[73,115,75],{}," e os entrega tipados (Type Safety total) para os componentes Vue.",[98,118,119,122],{},[37,120,121],{},"Tailwind CSS + Typography Plugin:"," Para garantir que o HTML gerado pelo Markdown ficasse bonito, responsivo e adaptado ao Dark Mode sem esforço manual.",[98,124,125,128],{},[37,126,127],{},"Shiki:"," Syntax highlighting de alta qualidade para os blocos de código.",[130,131,136],"pre",{"className":132,"code":133,"language":134,"meta":135,"style":135},"language-typescript shiki shiki-themes github-light github-dark","// Exemplo de como o código fica bonito no post!\nconst techStack: string[] = ['Nuxt 4', 'Nuxt Content', 'Tailwind', 'Shiki'];\nconst isHappy = techStack.every(tech => tech.isAwesome);\n","typescript","",[73,137,138,147,197],{"__ignoreMap":135},[139,140,143],"span",{"class":141,"line":142},"line",1,[139,144,146],{"class":145},"sJ8bj","// Exemplo de como o código fica bonito no post!\n",[139,148,150,154,158,161,164,168,171,174,178,181,184,186,189,191,194],{"class":141,"line":149},2,[139,151,153],{"class":152},"szBVR","const",[139,155,157],{"class":156},"sj4cs"," techStack",[139,159,160],{"class":152},":",[139,162,163],{"class":156}," string",[139,165,167],{"class":166},"sVt8B","[] ",[139,169,170],{"class":152},"=",[139,172,173],{"class":166}," [",[139,175,177],{"class":176},"sZZnC","'Nuxt 4'",[139,179,180],{"class":166},", ",[139,182,183],{"class":176},"'Nuxt Content'",[139,185,180],{"class":166},[139,187,188],{"class":176},"'Tailwind'",[139,190,180],{"class":166},[139,192,193],{"class":176},"'Shiki'",[139,195,196],{"class":166},"];\n",[139,198,200,202,205,208,211,215,218,222,225],{"class":141,"line":199},3,[139,201,153],{"class":152},[139,203,204],{"class":156}," isHappy",[139,206,207],{"class":152}," =",[139,209,210],{"class":166}," techStack.",[139,212,214],{"class":213},"sScJk","every",[139,216,217],{"class":166},"(",[139,219,221],{"class":220},"s4XuR","tech",[139,223,224],{"class":152}," =>",[139,226,227],{"class":166}," tech.isAwesome);\n",[29,229,231],{"id":230},"sobre-o-desenvolvimento","Sobre o Desenvolvimento",[17,233,234,235,238],{},"A parte mais interessante dessa jornada é que ela não foi tão longa no sentido de escrever código complexo ou integrar APIs obscuras. O verdadeiro desafio foi ",[37,236,237],{},"organizar as informações",", pensar na estrutura dos dados (quais campos o Frontmatter do Markdown precisava ter) e desenhar a Arquitetura de Informação do site.",[17,240,241],{},"Hoje, meu fluxo de trabalho para publicar um novo artigo ou projeto é simplesmente maravilhoso:",[243,244,245,251,254,264],"ol",{},[98,246,247,248,250],{},"Copio e colo um template ",[73,249,75],{}," que deixei pronto.",[98,252,253],{},"Escrevo o conteúdo como se fosse um texto comum no meu editor favorito.",[98,255,256,257,260,261,47],{},"Dou um ",[73,258,259],{},"git commit"," e ",[73,262,263],{},"git push",[98,265,266],{},"O CI/CD do meu Home Lab local intercepta o push e faz o build/deploy automático.",[78,268,269],{},[17,270,271,274],{},[37,272,273],{},"⚠️ Alerta de Spoiler:"," A configuração desse meu Home Lab com GitLab CI e Node é uma história longa e que, com certeza, vai render um post dedicado no futuro!",[29,276,278],{"id":277},"conclusão","Conclusão",[17,280,281,282,285],{},"Estou extremamente satisfeito com o resultado. Construí exatamente o que eu queria, usando as ferramentas que eu adoro, e o processo de manutenção agora é fluido e indolor. Este portfólio não é apenas um site; é um ",[24,283,284],{},"living lab"," onde posso testar e mostrar um pouco de mim e do meu trabalho.",[17,287,288,289,296,297,301],{},"Espero que tenha gostado do site e da fluidez da navegação! Me dê um feedback depois. Entre em contato pelo ",[290,291,295],"a",{"href":292,"rel":293},"https://www.linkedin.com/in/rafadpedrosa",[294],"nofollow","LinkedIn"," ou me mande um email (",[290,298,300],{"href":299},"mailto:rafadpedrosa@gmail.com","rafadpedrosa@gmail.com",").",[17,303,304],{},"Um abraço!",[306,307,308],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}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":135,"searchDepth":149,"depth":149,"links":310},[311,312,315,316],{"id":31,"depth":149,"text":32},{"id":53,"depth":149,"text":54,"children":313},[314],{"id":89,"depth":199,"text":90},{"id":230,"depth":149,"text":231},{"id":277,"depth":149,"text":278},"Web Development","2026-02-25","Criando meu site \"CMS\" usando Markdown, Nuxt 4 e Tailwind CSS.","md",true,{"isOnReview":323},false,"/blog/nuxt4-alicerce",{"title":7,"description":319},"blog/nuxt4-alicerce",[60,328,329,330,331],"Vue","Frontend","Static site","CMS","7wlOgv06z28U6diu-YH2gZA_WnK_qlIzfqNKbAfxxsU","pt-BR",1779800308596]