New Astro webpage
You have probably already opened your browser dev tools and started inspecting how this page is built. To save you from the digging, here is a short description of the process and the tech behind it.
Even if I was happy with my old Gatsby.js based page, I had heard a lot great things about Astro lately. I’ve always found that the best way to learn new tech is to actually use it. As usual when learning something new, I started reading the official documentation. Astro has a great tutorial that I completed, simultaneously reading more in depth in the docs. By the time I was finished, I had an understanding of Astro’s component-based logic and a great foundation to build my own website on.
UI
I added Tailwind CSS to handle the styling. For the layout, I had already imagined a sidebar menu on the desktop, that collapses into a bottom menu on smaller devices. Instead of building this from scratch, I researched a few free templates that already had this menu setup. I ended up mixing parts from several different ones until the navigation functioned exactly how I imagined it. And of course I needed to add dark mode support🖤
Testing Antigravtiy IDE
I decided to test the new agent-first IDE named Antigravtiy from Google. It worked great with Astro fundation I had already built myself. I’ll be the first to admit that CSS nitpicking is not my strongest side, so using AI agents to handle the fine-tuning of the UI was a great experience. The interaction was smooth, and it saved me a lot of time on the visual polish. I also used it to convert my old blog posts into the new format, and it did a great job adding a customizable slug support for my blog posts.
Deployment
The site is deployed to Cloudflare Pages as a static website. It’s fast, lightweight, and easy to maintain, exactly what I was looking for.