[{"data":1,"prerenderedAt":222},["ShallowReactive",2],{"blog-id-membangun-portofolio-modern":3,"blog-all-id":147},{"id":4,"title":5,"_path":6,"author":7,"body":8,"category":132,"coverImage":133,"date":134,"description":135,"extension":136,"meta":137,"navigation":138,"path":139,"readTime":140,"seo":141,"stem":142,"tags":143,"__hash__":146},"blog\u002Fblog\u002Fid\u002Fmembangun-portofolio-modern.md","Membangun Portofolio Web Modern dengan Nuxt 4 dan Nuxt UI",null,"Ilham Kurniawan",{"type":9,"value":10,"toc":126},"minimark",[11,16,25,37,42,53,79,85,89,103,123],[12,13,15],"h1",{"id":14},"membangun-portofolio-web-modern","Membangun Portofolio Web Modern",[17,18,19,20,24],"p",{},"Pada era digital yang serba cepat ini, memiliki portofolio yang interaktif dan ",[21,22,23],"em",{},"eye-catching"," adalah sebuah kewajiban bagi seorang developer maupun desainer.",[17,26,27,28,32,33,36],{},"Di artikel ini, saya ingin membagikan sedikit perjalanan bagaimana saya membangun portofolio menggunakan ",[29,30,31],"strong",{},"Nuxt 4"," dan ",[29,34,35],{},"Nuxt UI",".",[38,39,41],"h2",{"id":40},"mengapa-nuxt-4","Mengapa Nuxt 4?",[17,43,44,45,48,49,52],{},"Nuxt 4 menawarkan performa yang luar biasa dengan ",[21,46,47],{},"Vue 3"," sebagai basisnya, serta menghadirkan fitur ",[21,50,51],{},"Server-Side Rendering"," (SSR) yang memberikan optimasi SEO sangat baik.",[54,55,56,63,73],"ul",{},[57,58,59,62],"li",{},[29,60,61],{},"Cepat:"," Berkat arsitektur Nitro server.",[57,64,65,68,69,72],{},[29,66,67],{},"Developer Experience:"," Konfigurasi ",[21,70,71],{},"auto-imports"," membuat pengembangan lebih intuitif.",[57,74,75,78],{},[29,76,77],{},"Fleksibel:"," Dapat dengan mudah diintegrasikan dengan modul dari ekosistem yang luas.",[80,81,82],"blockquote",{},[17,83,84],{},"\"A great framework gets out of your way and lets you focus on building exactly what you imagine.\"",[38,86,88],{"id":87},"keindahan-dari-nuxt-ui","Keindahan dari Nuxt UI",[17,90,91,92,94,95,98,99,102],{},"Desain bukan sekadar apa yang terlihat, namun bagaimana pengguna merasakannya. Memilih ",[21,93,35],{}," memberi saya struktur ",[21,96,97],{},"Tailwind CSS"," yang konsisten dengan estetika tema yang ",[21,100,101],{},"modern",". Secara khusus:",[104,105,106,113,120],"ol",{},[57,107,108,109,112],{},"Kemudahan mengubah tema secara mendasar lewat CSS Variable (seperti ",[21,110,111],{},"Amber",").",[57,114,115,116,119],{},"Tampilan ",[21,117,118],{},"dark mode"," bawaan yang elegan.",[57,121,122],{},"Kumpulan komponen responsif yang memanjakan mata.",[17,124,125],{},"Apakah Anda sudah beralih menggunakan Nuxt 4? Bagikan pemikiran Anda!",{"title":127,"searchDepth":128,"depth":128,"links":129},"",2,[130,131],{"id":40,"depth":128,"text":41},{"id":87,"depth":128,"text":88},"Web Development","\u002Fblog\u002Fmembangun-portofolio\u002Fcover.avif","2026-04-06T10:00:00.000Z","Panduan dan pengalaman saya dalam menyusun ulang portofolio interaktif menggunakan kemampuan Nuxt 4 dan komponen elegan dari Nuxt UI.","md",{},true,"\u002Fblog\u002Fid\u002Fmembangun-portofolio-modern","4 min read",{"title":5,"description":135},"blog\u002Fid\u002Fmembangun-portofolio-modern",[31,144,145],"Vue.js","Web Design","cWOCFwh0tqbl8OHgeiZwwGSpr5r6jcZae_gsyfUn59c",[148],{"id":4,"title":5,"_path":6,"author":7,"body":149,"category":132,"coverImage":133,"date":134,"description":135,"extension":136,"meta":219,"navigation":138,"path":139,"readTime":140,"seo":220,"stem":142,"tags":221,"__hash__":146},{"type":9,"value":150,"toc":215},[151,153,157,163,165,171,187,191,193,201,213],[12,152,15],{"id":14},[17,154,19,155,24],{},[21,156,23],{},[17,158,27,159,32,161,36],{},[29,160,31],{},[29,162,35],{},[38,164,41],{"id":40},[17,166,44,167,48,169,52],{},[21,168,47],{},[21,170,51],{},[54,172,173,177,183],{},[57,174,175,62],{},[29,176,61],{},[57,178,179,68,181,72],{},[29,180,67],{},[21,182,71],{},[57,184,185,78],{},[29,186,77],{},[80,188,189],{},[17,190,84],{},[38,192,88],{"id":87},[17,194,91,195,94,197,98,199,102],{},[21,196,35],{},[21,198,97],{},[21,200,101],{},[104,202,203,207,211],{},[57,204,108,205,112],{},[21,206,111],{},[57,208,115,209,119],{},[21,210,118],{},[57,212,122],{},[17,214,125],{},{"title":127,"searchDepth":128,"depth":128,"links":216},[217,218],{"id":40,"depth":128,"text":41},{"id":87,"depth":128,"text":88},{},{"title":5,"description":135},[31,144,145],1781763413991]