[{"data":1,"prerenderedAt":148},["ShallowReactive",2],{"recent-blogs-id":3},[4],{"id":5,"title":6,"_path":7,"author":8,"body":9,"category":133,"coverImage":134,"date":135,"description":136,"extension":137,"meta":138,"navigation":139,"path":140,"readTime":141,"seo":142,"stem":143,"tags":144,"__hash__":147},"blog\u002Fblog\u002Fid\u002Fmembangun-portofolio-modern.md","Membangun Portofolio Web Modern dengan Nuxt 4 dan Nuxt UI",null,"Ilham Kurniawan",{"type":10,"value":11,"toc":127},"minimark",[12,17,26,38,43,54,80,86,90,104,124],[13,14,16],"h1",{"id":15},"membangun-portofolio-web-modern","Membangun Portofolio Web Modern",[18,19,20,21,25],"p",{},"Pada era digital yang serba cepat ini, memiliki portofolio yang interaktif dan ",[22,23,24],"em",{},"eye-catching"," adalah sebuah kewajiban bagi seorang developer maupun desainer.",[18,27,28,29,33,34,37],{},"Di artikel ini, saya ingin membagikan sedikit perjalanan bagaimana saya membangun portofolio menggunakan ",[30,31,32],"strong",{},"Nuxt 4"," dan ",[30,35,36],{},"Nuxt UI",".",[39,40,42],"h2",{"id":41},"mengapa-nuxt-4","Mengapa Nuxt 4?",[18,44,45,46,49,50,53],{},"Nuxt 4 menawarkan performa yang luar biasa dengan ",[22,47,48],{},"Vue 3"," sebagai basisnya, serta menghadirkan fitur ",[22,51,52],{},"Server-Side Rendering"," (SSR) yang memberikan optimasi SEO sangat baik.",[55,56,57,64,74],"ul",{},[58,59,60,63],"li",{},[30,61,62],{},"Cepat:"," Berkat arsitektur Nitro server.",[58,65,66,69,70,73],{},[30,67,68],{},"Developer Experience:"," Konfigurasi ",[22,71,72],{},"auto-imports"," membuat pengembangan lebih intuitif.",[58,75,76,79],{},[30,77,78],{},"Fleksibel:"," Dapat dengan mudah diintegrasikan dengan modul dari ekosistem yang luas.",[81,82,83],"blockquote",{},[18,84,85],{},"\"A great framework gets out of your way and lets you focus on building exactly what you imagine.\"",[39,87,89],{"id":88},"keindahan-dari-nuxt-ui","Keindahan dari Nuxt UI",[18,91,92,93,95,96,99,100,103],{},"Desain bukan sekadar apa yang terlihat, namun bagaimana pengguna merasakannya. Memilih ",[22,94,36],{}," memberi saya struktur ",[22,97,98],{},"Tailwind CSS"," yang konsisten dengan estetika tema yang ",[22,101,102],{},"modern",". Secara khusus:",[105,106,107,114,121],"ol",{},[58,108,109,110,113],{},"Kemudahan mengubah tema secara mendasar lewat CSS Variable (seperti ",[22,111,112],{},"Amber",").",[58,115,116,117,120],{},"Tampilan ",[22,118,119],{},"dark mode"," bawaan yang elegan.",[58,122,123],{},"Kumpulan komponen responsif yang memanjakan mata.",[18,125,126],{},"Apakah Anda sudah beralih menggunakan Nuxt 4? Bagikan pemikiran Anda!",{"title":128,"searchDepth":129,"depth":129,"links":130},"",2,[131,132],{"id":41,"depth":129,"text":42},{"id":88,"depth":129,"text":89},"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":6,"description":136},"blog\u002Fid\u002Fmembangun-portofolio-modern",[32,145,146],"Vue.js","Web Design","cWOCFwh0tqbl8OHgeiZwwGSpr5r6jcZae_gsyfUn59c",1781763413056]