Made This Website with Astro

Chapter I

Trying a new exciting framework

You know that feeling when you stumble across something shiny and new, and suddenly you just have to try it? That’s me with Astro. I’ve been hearing whispers about this blazing-fast, lightweight, and somewhat magical framework, and my curiosity got the best of me. It was like finding a new game—at first, you’re unsure how everything works, but then boom, you’re hooked. This writing is all about how I jumped headfirst into the Astro.js world and what makes it stand out in this universe of never-ending JavaScript frameworks. Spoiler alert: I didn’t regret it.

Chapter II

How I code this

Alright, let’s dive into the juicy stuff. Think of this as a behind-the-scenes look at how the magic happens—minus the sleight of hand. Astro makes some things super simple, but of course, there were moments when I stared blankly at my screen, silently pleading for mercy. I’ll walk you through the highs, the lows, and all the caffeine breaks that got me through coding this portfolio.

A big chunk of the components I built were thanks to shadcn and the newly beta MagicUI. Let me tell you, these two are game-changers. With shadcn, I could throw together some pretty snazzy components quickly, while MagicUI was like that extra sprinkle of pixie dust that made everything more intuitive and super beautiful. Honestly, MagicUI feels like it’s reading my mind half the time. It’s like, “Oh, you want this to look great without you sweating over the details? Done.” I didn’t just fall in love—I sped through development, and the interface? Chef’s kiss.

But hey, I didn’t lean on those tools for everything. Some components, I rolled up my sleeves and coded from scratch using good ol’ Tailwind. I’ll admit, there’s something satisfying about creating your own components, watching them take shape like you’re handcrafting your own little universe. Sure, it’s a bit more work, but the payoff? So worth it. Plus, with Tailwind’s utility-first approach, it still kept things moving at a good clip.

Chapter III

The Interactivity Conundrum

Now, as much as I’m loving Astro, there was one part that almost had me questioning my life choices: interactivity. See, I could have used Astro’s Island feature, which would have made things way easier. But did I? Nope. Instead, I went down the path of writing vanilla JavaScript. Let me tell you, it was like trying to tame a wild beast compared to the smooth, civilized world of JSX.

Vanilla JS is powerful, sure, but when you’ve been spoiled by the elegance of JSX, you start missing it real quick. Every little DOM manipulation became a bit of a nightmare, and let’s not even talk about the syntax gymnastics involved. There were moments where I thought, “Why didn’t I just use Astro Islands?!” Lesson learned: sometimes, it’s okay to let the framework do the heavy lifting for you.

Chapter IV

Easiest deployment pipeline

After building something cool, the next question is, “How do I share this masterpiece with the world without breaking the internet… or my brain?” Enter: GitHub. Seriously, their docs on publishing a website using GitHub Actions? Total lifesaver. It’s like having a step-by-step guide that holds your hand and says, “Don’t worry, I got you.” I followed it, hit a couple of buttons, and boom—site deployed! The best part? GitHub’s free hosting. Not only was I able to get my site up and running without spending a dime, but the whole process was surprisingly smooth.

Honestly, I thought I’d hit a snag somewhere, but nope. Astro and GitHub were a match made in heaven, and thanks to those glorious docs, the deployment pipeline became a non-issue. It felt almost too easy. Like, “Wait, that’s it? I’m done?” kind of easy. If only all things in life were this straightforward.

Chapter V

Summaries

In conclusion: was it worth it? Did I survive? Absolutely. This final chapter wraps everything up neatly with a bow (because who doesn’t love closure?) and includes some of the key takeaways I learned along the way. If you’ve ever wondered whether jumping on the Astro.js bandwagon is worth it, you’ll want to read this.