[{"data":1,"prerenderedAt":303},["ShallowReactive",2],{"tag-ts":3},[4,91,173],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":10,"tags":11,"body":17,"_type":84,"_id":85,"_source":86,"_file":87,"_stem":88,"_extension":89,"sitemap":90},"/project/muddy","project",false,"","Muddy","A small web app that was created to use the Spotify recommendation API to get better, and more recommendations.",[12,13,14,15,16],"Nuxt","Tailwind","OAuth2","Spotify API","ts",{"type":18,"children":19,"toc":80},"root",[20,28,33,37,44],{"type":21,"tag":22,"props":23,"children":25},"element","h1",{"id":24},"muddy",[26],{"type":27,"value":9},"text",{"type":21,"tag":29,"props":30,"children":31},"p",{},[32],{"type":27,"value":10},{"type":21,"tag":34,"props":35,"children":36},"tags",{},[],{"type":21,"tag":38,"props":39,"children":41},"h2",{"id":40},"technical-details",[42],{"type":27,"value":43},"Technical details",{"type":21,"tag":45,"props":46,"children":47},"ul",{},[48,60,70],{"type":21,"tag":49,"props":50,"children":51},"li",{},[52,58],{"type":21,"tag":53,"props":54,"children":55},"strong",{},[56],{"type":27,"value":57},"Nuxt:",{"type":27,"value":59}," A framework I'm intimately familiar with making it quick and easy to bootstrap the project.",{"type":21,"tag":49,"props":61,"children":62},{},[63,68],{"type":21,"tag":53,"props":64,"children":65},{},[66],{"type":27,"value":67},"Tailwind:",{"type":27,"value":69}," For projects I create myself I value function way more than form. However I can't let it be entirely ugly either, so I use tailwind and make it easy for myself.",{"type":21,"tag":49,"props":71,"children":72},{},[73,78],{"type":21,"tag":53,"props":74,"children":75},{},[76],{"type":27,"value":77},"Spotify API:",{"type":27,"value":79}," To use Spotify its official developer REST API is used, which is protected behind OAuth2 to interact with the account of the user. This way the project can keep recommending songs to listen to while you're listening.",{"title":8,"searchDepth":81,"depth":81,"links":82},2,[83],{"id":40,"depth":81,"text":43},"markdown","content:project:muddy.md","content","project/muddy.md","project/muddy","md",{"loc":5},{"_path":92,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":93,"description":94,"tags":95,"body":99,"_type":84,"_id":169,"_source":86,"_file":170,"_stem":171,"_extension":89,"sitemap":172},"/project/zendilemmav3","Zendilemmav3","A personal project to keep track of my art and to edit videos using ffmpeg wasm, a predecessor to the zenmuseum. A hobby project that helped make my life easier and to play with technologies I hadn't before.",[96,97,98,16,13],"Sveltekit","Supabase","Prisma",{"type":18,"children":100,"toc":166},[101,106,120,124],{"type":21,"tag":22,"props":102,"children":104},{"id":103},"zendilemmav3",[105],{"type":27,"value":93},{"type":21,"tag":29,"props":107,"children":108},{},[109,111,118],{"type":27,"value":110},"A personal project to keep track of my art and to edit videos using ffmpeg wasm, a predecessor to ",{"type":21,"tag":112,"props":113,"children":115},"a",{"href":114},"/project/zenmuseum",[116],{"type":27,"value":117},"the zenmuseum",{"type":27,"value":119},". A hobby project that helped make my life easier and to play with technologies I hadn't before.",{"type":21,"tag":38,"props":121,"children":122},{"id":40},[123],{"type":27,"value":43},{"type":21,"tag":45,"props":125,"children":126},{},[127,137,147,157],{"type":21,"tag":49,"props":128,"children":129},{},[130,135],{"type":21,"tag":53,"props":131,"children":132},{},[133],{"type":27,"value":134},"Sveltekit:",{"type":27,"value":136}," I fell in love with svelte the first time I used it. Though it's immaturity compared to react/vue and it's decreased popularity makes it difficult to justify using it, but this was the perfect project.",{"type":21,"tag":49,"props":138,"children":139},{},[140,145],{"type":21,"tag":53,"props":141,"children":142},{},[143],{"type":27,"value":144},"Supabase:",{"type":27,"value":146}," Used for auth and storage of my art.",{"type":21,"tag":49,"props":148,"children":149},{},[150,155],{"type":21,"tag":53,"props":151,"children":152},{},[153],{"type":27,"value":154},"Prisma:",{"type":27,"value":156}," Used as a client to interact with the database.",{"type":21,"tag":49,"props":158,"children":159},{},[160,164],{"type":21,"tag":53,"props":161,"children":162},{},[163],{"type":27,"value":67},{"type":27,"value":165}," For making everything pretty.",{"title":8,"searchDepth":81,"depth":81,"links":167},[168],{"id":40,"depth":81,"text":43},"content:project:zendilemmav3.md","project/zendilemmav3.md","project/zendilemmav3",{"loc":92},{"_path":114,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":174,"description":8,"card_image":175,"tags":176,"featured":187,"body":188,"_type":84,"_id":299,"_source":86,"_file":300,"_stem":301,"_extension":89,"sitemap":302},"Zenmuseum","https://images.zenmuseum.com/684/picture.jpg",[177,178,179,180,181,182,183,184,185,186],"Nextjs","SSG/SSR","Tinacms","Sendgrid","SEO","Cloudflare","AWS","Google Search Console","Vercel","TS",true,{"type":18,"children":189,"toc":296},[190,195,198,203,213,219],{"type":21,"tag":22,"props":191,"children":193},{"id":192},"zenmuseum",[194],{"type":27,"value":174},{"type":21,"tag":34,"props":196,"children":197},{},[],{"type":21,"tag":29,"props":199,"children":200},{},[201],{"type":27,"value":202},"A custom-made website for showcasing my art. Made for performance and to optimally showcase, and sell, my art.",{"type":21,"tag":204,"props":205,"children":207},"link-button",{"href":206},"https://www.zenmuseum.com",[208],{"type":21,"tag":29,"props":209,"children":210},{},[211],{"type":27,"value":212},"You can find it here",{"type":21,"tag":38,"props":214,"children":216},{"id":215},"technical-aspects",[217],{"type":27,"value":218},"Technical aspects",{"type":21,"tag":45,"props":220,"children":221},{},[222,232,242,250,260,268,276,286],{"type":21,"tag":49,"props":223,"children":224},{},[225,230],{"type":21,"tag":53,"props":226,"children":227},{},[228],{"type":27,"value":229},"Created with nextjs:",{"type":27,"value":231}," I've mostly used Vue or Nuxt in frontend projects of my job, so I like using different frameworks in my personal projects to be able to better compare and understand them. For instance, the next/image module is much more mature and easy to use than the nuxt equivalent",{"type":21,"tag":49,"props":233,"children":234},{},[235,240],{"type":21,"tag":53,"props":236,"children":237},{},[238],{"type":27,"value":239},"Using TinaCMS to manage content:",{"type":27,"value":241}," Tinacms is a headless CMS that can be used entirely locally. Only recently have I decided to use the cloud options to take advantage of a server-side rendered search page to increase performance.",{"type":21,"tag":49,"props":243,"children":244},{},[245],{"type":21,"tag":53,"props":246,"children":247},{},[248],{"type":27,"value":249},"Using Sendgrid for sending emails",{"type":21,"tag":49,"props":251,"children":252},{},[253,258],{"type":21,"tag":53,"props":254,"children":255},{},[256],{"type":27,"value":257},"SEO/performance focus:",{"type":27,"value":259}," I want people to see my art. Of course, I also want to show my art in the best way possible, but to be able to get people to visit the site I put a lot of effort into SEO and performance.",{"type":21,"tag":49,"props":261,"children":262},{},[263],{"type":21,"tag":53,"props":264,"children":265},{},[266],{"type":27,"value":267},"Cloudflare for caching images",{"type":21,"tag":49,"props":269,"children":270},{},[271],{"type":21,"tag":53,"props":272,"children":273},{},[274],{"type":27,"value":275},"AWS S3 for image storage",{"type":21,"tag":49,"props":277,"children":278},{},[279,284],{"type":21,"tag":53,"props":280,"children":281},{},[282],{"type":27,"value":283},"Google Search Console:",{"type":27,"value":285}," Used for just that, keeping track of the Google search performance",{"type":21,"tag":49,"props":287,"children":288},{},[289,294],{"type":21,"tag":53,"props":290,"children":291},{},[292],{"type":27,"value":293},"Vercel for hosting:",{"type":27,"value":295}," Vercel is a quick and easy option to get something hosted for free.",{"title":8,"searchDepth":81,"depth":81,"links":297},[298],{"id":215,"depth":81,"text":218},"content:project:zenmuseum.md","project/zenmuseum.md","project/zenmuseum",{"loc":114},1737552097166]