Back to [A]rticles
Jan 02, 2025
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.
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#/.NET. So, I never touched JavaScript/TypeScript—until now!
My goals for this site were to:
TL;DR I chose Vue.js/Nuxt, TailwindCSS, TypeScript, and Markdown, and I deployed everything to Vercel.
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/framework. I also tend to over-research, and I didn’t want to delay the actual coding.
I initially looked at Next.js (since that’s what all the “cool kids” use). After some Reddit diving and doc-browsing, I stumbled upon Vue.js/Nuxt. I compared them for my needs and discovered that, as a Vue beginner, the Nuxt ecosystem felt more straightforward. Nuxt also offers Nuxt Content, which promised an easy way to integrate a blog. That sealed the deal for me.
I went with TailwindCSS 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.
I briefly considered Bun and Deno but opted for Node for stability over speed. The last thing I wanted was to wrestle with a bleeding-edge runtime and weird bugs.
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.
Lastly, I deployed to Vercel. 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.
I drew design inspiration from portfolios I admire, such as nexxel.dev, paco.me, brittanychiang.com, and zenorocha.com.
From there, I built the index page from scratch, starting with simple components like Navigation, About, and Career. After getting the main structure in place, I integrated Nuxt Content for the blog portion and migrated some of my existing articles.
Overall, Vue.js/Nuxt 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.
A Note on Challenges
• File-Based Routing: Learning how Nuxt handles routing automatically (based on the /pages directory) was a bit of a mental shift, but once I understood it, it was actually really convenient.
• 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.
• 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.
I used VS Code with GitHub Copilot and the official extensions recommended by the Vue/Nuxt teams. Much of the initial boilerplate came from Copilot, which I treated like a tutor by giving it the prompt: "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 / Tailwind docs are fantastic).
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 why certain edits were being made which I don't think is optimal when your goal is to 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.
I also bounced between 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.
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.
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.
Key Takeaways
• Don’t Over-Research: Because the site was simple, time-boxing prevented analysis paralysis.
• Vue/Nuxt Is Friendly: Coming from a Python + Flask background, Nuxt felt relatively straightforward.
• Tailwind Makes Styling Easier: No more fiddling with custom CSS classes; the utility classes were a quick start.
• Markdown Blogging: Writing in Markdown felt natural, especially with my existing Obsidian workflow.
• Use AI wisely: AI is an extremely effective learning tool but don't let these tools do everything for you—Ask why at every step so you can build intuition as well.
• Vercel for Deployment: Fast to set up, and real-time logs made debugging easier.
Building my first JavaScript-based site using Vue/Nuxt 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!
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.
Thanks for reading and don't forget to just do things.