[{"data":1,"prerenderedAt":178},["ShallowReactive",2],{"latestPosts":3},[4,77,135],{"title":5,"description":6,"date":7,"tags":8,"author":15,"thumbnail":19,"path":22,"body":23},"Building a personal portfolio with Nuxt 4","How to craft a personal site that doubles as a blog using Nuxt UI, Tailwind, and content-driven pages.","2026-03-14",[9,12],{"name":10,"slug":11},"Nuxt","nuxt",{"name":13,"slug":14},"Portfolio","portfolio",{"name":16,"avatar":17},"0x00webs",{"src":18,"alt":16},"https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F178827097",{"src":20,"alt":21},"\u002Fdefault-og-image.png","Nuxt portfolio","\u002Farticles\u002F2026-03-14-nuxt-portfolio",{"type":24,"value":25,"toc":70},"minimark",[26,30,35,43,47,67],[27,28,29],"p",{},"Creating a single project that serves as both a portfolio and a blog is one of the best ways to stay motivated while building in public.",[31,32,34],"h2",{"id":33},"why-nuxt","Why Nuxt?",[27,36,37,38,42],{},"Nuxt gives you server-side rendering, automatic routing, and a smooth developer experience out of the box. With ",[39,40,41],"code",{},"@nuxt\u002Fui",", you get a set of accessible UI primitives that are ready to use.",[31,44,46],{"id":45},"whats-in-this-site","What’s in this site",[48,49,50,54,61,64],"ul",{},[51,52,53],"li",{},"✅ A responsive header, theme toggle, and smooth transitions.",[51,55,56,57,60],{},"✅ Content driven by Markdown files in ",[39,58,59],{},"content\u002Farticles",".",[51,62,63],{},"✅ Search-friendly SEO and social previews.",[51,65,66],{},"✅ Nice defaults for dark mode, animations, and responsiveness.",[27,68,69],{},"Stay tuned for more posts as I keep building this site and sharing what I learn.",{"title":71,"searchDepth":72,"depth":72,"links":73},"",3,[74,76],{"id":33,"depth":75,"text":34},2,{"id":45,"depth":75,"text":46},{"title":78,"description":79,"date":80,"tags":81,"author":88,"thumbnail":90,"path":92,"body":93},"Animating UI with motion-v + AOS","Combine motion-v and AOS to create smooth entrance animations, scroll effects, and view transitions.","2026-02-28",[82,85],{"name":83,"slug":84},"Animations","animations",{"name":86,"slug":87},"UX","ux",{"name":16,"avatar":89},{"src":18,"alt":16},{"src":20,"alt":91},"motion-v animations","\u002Farticles\u002F2026-02-28-motion-v",{"type":24,"value":94,"toc":131},[95,98,103,106,110,125],[27,96,97],{},"Motion can make interfaces feel alive, but it should never get in the way.",[99,100,102],"h3",{"id":101},"quick-tip","Quick tip",[27,104,105],{},"Use small, purposeful motion—like slight elevation on hover and gentle fade-ins—to guide attention without overwhelming.",[99,107,109],{"id":108},"setup","Setup",[48,111,112,119],{},[51,113,114,115,118],{},"Use ",[39,116,117],{},"motion-v"," for component-based animations.",[51,120,114,121,124],{},[39,122,123],{},"aos"," for scroll-based entry animations.",[27,126,127,128,60],{},"Keep your motions consistent and respect ",[39,129,130],{},"prefers-reduced-motion",{"title":71,"searchDepth":72,"depth":72,"links":132},[133,134],{"id":101,"depth":72,"text":102},{"id":108,"depth":72,"text":109},{"title":136,"description":137,"date":138,"tags":139,"author":146,"thumbnail":148,"path":150,"body":151},"Design tokens with Tailwind CSS","How to keep a consistent look by treating Tailwind as your design token system.","2026-01-10",[140,143],{"name":141,"slug":142},"Design","design",{"name":144,"slug":145},"Tailwind","tailwind",{"name":16,"avatar":147},{"src":18,"alt":16},{"src":20,"alt":149},"tailwind design tokens","\u002Farticles\u002F2026-01-10-tailwind-tokens",{"type":24,"value":152,"toc":175},[153,156,160],[27,154,155],{},"Tailwind is more than just utility classes—it can be the foundation of your design system.",[99,157,159],{"id":158},"keep-it-consistent","Keep it consistent",[48,161,162,169,172],{},[51,163,164,165,168],{},"Use named ",[39,166,167],{},"--tw"," custom properties.",[51,170,171],{},"Define base font sizes and spacing tokens.",[51,173,174],{},"Build reusable components that reference your token set.",{"title":71,"searchDepth":72,"depth":72,"links":176},[177],{"id":158,"depth":72,"text":159},1773510778898]