Writing with Cursor
For a few months, sahil.ink has pointed to my Bento page, a nice no-nonsense link card page. However, just recently, I thought it was time I updated it to something at least a little more custom. I got that chance when I saw Anime.js v4 announced - well, I'm not going to pretend that I know enough to use half of it, but their SVG animations looked quite nice, their landing page was butter smooth, and there seemed to be very nice reception to its launch.
So, I put my hacking glasses on and got to work. I'd used Cursor for a few things before, but not really that much - more just "make this div vertically centered and also give it a red-green gradient with Tailwind" kind of stuff. This was going to be fully done with Cursor - with only HTML, CSS, and JS to help me out here.
About Astro
Well, it's not entirely true that I used only HTML/JS/CSS - Astro lets you package it neatly into components. Since it builds to a static folder, you can deploy it to the hosting of your choice, be that Cloudflare Pages (which I'm using right now with automatic GitHub integration), Firebase, or just a straight up VM. They also do have support for API routes, but I haven't used it in depth enough to give it the Sahil seal of approval. However, their integrations out-of-the-box for Tailwind and the Node adapter make it an easy pick no matter what I'm doing in the future, as well as the apparently quick fast development on their side.
This was supposed to be simple, since writing a single page website could hardly take longer than maybe an hour or two. One thing that slightly complicated that plan was that I didn't really know how it would look - maybe a cool little logo in the center, stuff around it? Eh whatever, vibe coding should fix that all. And fix it it did: to one inexperienced in the ways of the DOM, Cursor is absolute magic. I do still usually understand most of what it's doing, but couldn't do it at a third the speed even if I didn't need to look at the docs for every other CSS property.
It was going really quite well until I hit the Cursor block. It turns out that the CSS ends up being quite sprawling (I'm definitely swapping back to Tailwind) and sometimes conflicting. On top of that, certain media queries just refused to work entirely, which was an absolutely maddening experience. Trying to fix these issues (which I assumed were entirely CSS) just ended up creating long chats with one issue after another created in search of a solution. I prompted for maybe an hour before having to revert back to something that I could actually manually dig myself out of.
Media queries
This single-handedly cost me 3 hours debugging for such a simple problem. Some styles need to be swapped on mobile - otherwise, you get tiny text on a tiny screen. The solution? Fit to width on mobile and size everything up a little.
If only that was it.
I assumed my styles just weren't applying due to conflicts, and just kept working around it - adding !important, checking console stylesheets, and checking build output to see if it would magically fix itself.
When resizing websites on my browser window, mobile styles applied. When emulating it through Chrome devtools, they wouldn't, and on an actual phone, none of the styles would apply. That's when I realized that the media queries themselves were the culprits. After reading a couple Stack Overflow posts, I decided to check my meta viewport tags - for some reason, they only are required for media queries on mobile. Still, no luck.
After a few days, a miniature vacation an hour out, and a clear head, I decided to check again. That's when I realized that I wasn't even using the meta tags - the Layout file was entirely unused! I partially blame Cursor, since that's one of the first steps I usually do in an Astro project, but I mostly blame myself. I'm certainly not making that mistake again, at the very least.
Eventually, those issues ended up being solved. One by one, it came together, and I'm pleased with the outcome, especially for the amount invested. I'll be revisiting this eventually though, maybe to develop it a little further, or to revamp it entirely with more than just a single page.
So, what are the takeaways? Never use Cursor for something you have no clue how to use, or a broad technology you're unfamiliar with - you will not be able to fix those occasional situations where everything melts down and spaghetti code fails to unspaghettify itself. Periodically, do a full check of your code, from top to bottom, to see how every single bit of your code gets used. You should understand every single change it makes, regardless of how deep a hole you dig. And lastly, always leave yourself an out: that Restore button is there for a reason, and so is git .
Thanks for reading! You can check out the new website at sahil.ink, and the source code on GitHub.