[{"data":1,"prerenderedAt":335},["ShallowReactive",2],{"content:\u002Fbuilding-this-site":3},{"id":4,"title":5,"body":6,"date":325,"description":326,"extension":327,"meta":328,"navigation":329,"path":330,"seo":331,"stem":332,"year":333,"__hash__":334},"content\u002Fbuilding-this-site.md","Building marcbaiza.com v1",{"type":7,"value":8,"toc":315},"minimark",[9,12,16,19,24,27,40,44,70,73,87,93,108,111,117,121,146,162,168,173,180,186,192,196,216,227,234,240,246,251,257,263,269,275,288,294,297,303,306,312],[10,11],"br",{},[13,14,15],"p",{},"For those techies out there, it may be surprising to learn that I have a Computer Science degree and have worked in tech for about four years (including internships)—yet I never once used JavaScript.",[13,17,18],{},"I know, right? My initial web dev courses were in PHP, and my cloud courses (where we developed and deployed web applications) were based on Python + Flask. In my first SWE internship, the web app stack was in C#\u002F.NET. So, I never touched JavaScript\u002FTypeScript—until now!",[20,21,23],"h3",{"id":22},"setting-my-requirements","Setting My Requirements",[13,25,26],{},"My goals for this site were to:",[28,29,30,34,37],"ol",{},[31,32,33],"li",{},"Have a simple portfolio page that displays some information about myself.",[31,35,36],{},"Create an area where I can upload written articles.",[31,38,39],{},"Finally learn some JavaScript\u002FTypeScript.",[20,41,43],{"id":42},"choosing-my-tech-stack","Choosing My Tech Stack",[13,45,46,50,51,54,55,54,58,61,62,65,66,69],{},[47,48,49],"strong",{},"TL;DR"," I chose ",[47,52,53],{},"Vue.js\u002FNuxt",", ",[47,56,57],{},"TailwindCSS",[47,59,60],{},"TypeScript",", and ",[47,63,64],{},"Markdown",", and I deployed everything to ",[47,67,68],{},"Vercel",".",[13,71,72],{},"I time-boxed my decision-making to about three hours during a flight because, realistically, I could build this simple site using almost any language\u002Fframework. I also tend to over-research, and I didn’t want to delay the actual coding.",[13,74,75,76,79,80,82,83,86],{},"I initially looked at ",[47,77,78],{},"Next.js"," (since that’s what all the “cool kids” use). After some Reddit diving and doc-browsing, I stumbled upon ",[47,81,53],{},". I compared them for my needs and discovered that, as a Vue beginner, the Nuxt ecosystem felt more straightforward. Nuxt also offers ",[47,84,85],{},"Nuxt Content",", which promised an easy way to integrate a blog. That sealed the deal for me.",[13,88,89,90,92],{},"I went with ",[47,91,57],{}," mainly because I’d heard it simplifies styling. I didn’t spend much time researching alternatives; I just installed it and figured I’d learn as I went.",[13,94,95,96,99,100,103,104,107],{},"I briefly considered ",[47,97,98],{},"Bun"," and ",[47,101,102],{},"Deno"," but opted for ",[47,105,106],{},"Node"," for stability over speed. The last thing I wanted was to wrestle with a bleeding-edge runtime and weird bugs.",[13,109,110],{},"I knew I wanted to write my blog posts in Markdown (I already use Obsidian.md for notes and writing), so that was a no-brainer.",[13,112,113,114,116],{},"Lastly, I deployed to ",[47,115,68],{},". Although I work for Microsoft and often deploy to Azure, I wanted to try something new. Vercel was quick to set up and provided helpful observability—so helpful, in fact, that it helped me catch a small routing bug during deployment.",[20,118,120],{"id":119},"building-the-app","Building the App",[13,122,123,124,54,131,54,136,61,141,69],{},"I drew design inspiration from portfolios I admire, such as ",[125,126,130],"a",{"href":127,"rel":128},"https:\u002F\u002Fwww.nexxel.dev",[129],"nofollow","nexxel.dev",[125,132,135],{"href":133,"rel":134},"https:\u002F\u002Fpaco.me",[129],"paco.me",[125,137,140],{"href":138,"rel":139},"https:\u002F\u002Fbrittanychiang.com",[129],"brittanychiang.com",[125,142,145],{"href":143,"rel":144},"https:\u002F\u002Fzenorocha.com",[129],"zenorocha.com",[13,147,148,149,54,152,61,155,158,159,161],{},"From there, I built the index page from scratch, starting with simple components like ",[47,150,151],{},"Navigation",[47,153,154],{},"About",[47,156,157],{},"Career",". After getting the main structure in place, I integrated ",[47,160,85],{}," for the blog portion and migrated some of my existing articles.",[13,163,164,165,167],{},"Overall, ",[47,166,53],{}," and the other tools were beginner-friendly. My biggest hurdles were at the start, figuring out how to properly organize a Nuxt project, structure my components, and separate out pages and content. But that was part of the natural learning curve, and the docs were excellent resources.",[13,169,170],{},[47,171,172],{},"A Note on Challenges",[13,174,175,176,179],{},"• ",[47,177,178],{},"File-Based Routing",": Learning how Nuxt handles routing automatically (based on the \u002Fpages directory) was a bit of a mental shift, but once I understood it, it was actually really convenient.",[13,181,175,182,185],{},[47,183,184],{},"Tailwind Setup",": Getting Tailwind to work seamlessly with Nuxt required following some specific setup steps (like adding the plugin and configuring tailwind.config.js), but the docs made this pretty smooth.",[13,187,175,188,191],{},[47,189,190],{},"Observability on Vercel",": When I deployed, I noticed an odd 500 error on one of my routes. Vercel’s logs helped me pinpoint that my navigation hotkeys were pointing to a route that didn't exist. A quick logic adjustment that called scrollIntoView() instead of routing to a non-existent route fixed this.",[20,193,195],{"id":194},"tools-i-used","Tools I Used",[13,197,198,199,202,203,206,207,211,212,215],{},"I used ",[47,200,201],{},"VS Code"," with ",[47,204,205],{},"GitHub Copilot"," and the official extensions recommended by the Vue\u002FNuxt teams. Much of the initial boilerplate came from Copilot, which I treated like a tutor by giving it the prompt: ",[208,209,210],"em",{},"\"You are a developer that is helping teach me about building a web application using Vue, Nuxt, and Tailwind\"",". It was a quick way to get up to speed without diving into every line of documentation first (though the Nuxt \u002F Tailwind docs are ",[208,213,214],{},"fantastic",").",[13,217,218,219,222,223,226],{},"I mostly used the Copilot \"Chat\" feature sparingly using the \"Edits.\" I found that with \"Chat\" it was easier for me to review the threads and conversations to understand how I got to where I was, this was optimal for learning. With \"Edits\" it was more effective for situations that needed multi-file context, but I found that it was a lot harder to keep track of the changes that were being made. There was also no context behind ",[208,220,221],{},"why"," certain edits were being made which I don't think is optimal when your goal is to ",[208,224,225],{},"learn",". Even if my goal was speed I still think that building an app purely using \"Edits\" or something like Composer in Cursor would eventually bite you when you run into a complex bug, but maybe that is a boomer-take.",[13,228,229,230,233],{},"I also bounced between ",[47,231,232],{},"ChatGPT"," and Copilot. Sometimes, having an LLM start from zero context (like ChatGPT) offered a fresh perspective on a tricky issue. I defaulted to O1 for most tasks and only switched models when necessary (rate limited), but overall, I had enough daily uses of O1 to cover my usage.",[13,235,236,239],{},[47,237,238],{},"These AI tools are not perfect."," I ran into instances where I would ask a design question like how would you do \"X with Nuxt and Tailwind\" and the tool would provide an incorrect implementation. The good thing is that I wasn't necessarily looking for the tool to code for me, but by asking follow up questions I was usually able to explore threads that led me in the right direction.",[13,241,242,245],{},[47,243,244],{},"These tools help keep momentum."," I found myself coming back to this project excited. Mainly because I knew that if I wanted to I could avoid tedious syntax errors and focus on design and implementation details.",[13,247,248],{},[47,249,250],{},"Key Takeaways",[13,252,175,253,256],{},[47,254,255],{},"Don’t Over-Research",": Because the site was simple, time-boxing prevented analysis paralysis.",[13,258,175,259,262],{},[47,260,261],{},"Vue\u002FNuxt Is Friendly",": Coming from a Python + Flask background, Nuxt felt relatively straightforward.",[13,264,175,265,268],{},[47,266,267],{},"Tailwind Makes Styling Easier",": No more fiddling with custom CSS classes; the utility classes were a quick start.",[13,270,175,271,274],{},[47,272,273],{},"Markdown Blogging",": Writing in Markdown felt natural, especially with my existing Obsidian workflow.",[13,276,175,277,280,281,284,285,287],{},[47,278,279],{},"Use AI wisely",": AI is an ",[208,282,283],{},"extremely"," effective learning tool but don't let these tools do everything for you—Ask ",[208,286,221],{}," at every step  so you can build intuition as well.",[13,289,175,290,293],{},[47,291,292],{},"Vercel for Deployment",": Fast to set up, and real-time logs made debugging easier.",[295,296],"hr",{},[20,298,300],{"id":299},"conclusion",[47,301,302],{},"Conclusion",[13,304,305],{},"Building my first JavaScript-based site using Vue\u002FNuxt has been a great learning experience. I realized that choosing the “right” stack sometimes boils down to personal preference, documentation clarity, and the project’s scope. My main advice: just dive in and start coding!",[13,307,308,311],{},[47,309,310],{},"Future Plans",": This site will probably change drastically overtime as I create more content and my taste changes, but will keep an archive of this v1 version for nostalgia.",[13,313,314],{},"Thanks for reading and don't forget to just do things.",{"title":316,"searchDepth":317,"depth":317,"links":318},"",2,[319,321,322,323,324],{"id":22,"depth":320,"text":23},3,{"id":42,"depth":320,"text":43},{"id":119,"depth":320,"text":120},{"id":194,"depth":320,"text":195},{"id":299,"depth":320,"text":302},"Jan 02","Overview on how I went about building this site","md",{},true,"\u002Fbuilding-this-site",{"title":5,"description":326},"building-this-site","2025","lyYrWoLE9U1N2TlDMph-IMo2H0RzAz2q5O0SQCCJYqg",1785649713743]