Bootstrapped by AI

I’ve been meaning to upgrade my personal website from Bootstrap 4 to Bootstrap 5, but I’ve not had the time. Recently, it occurred to me that this could be a fun way to test out AI coding. I installed Ampcode in my VS Code and asked it to help upgrade my Hugo static site to the newest Bootstrap.

It did a near perfect job. There were a few things I had to ask it to correct or address. I also had to provide a bit of knowledge on why some things it was trying didn’t work. But in general, I was able to get this done in minutes and for less than $1.

What started as a simple Bootstrap upgrade turned into a comprehensive website overhaul. The initial goal was straightforward - upgrade from Bootstrap 4 to Bootstrap 5. But as these things go, one thing led to another. Amp helped me modernize the entire build pipeline by switching from Netlify’s hosted Bootstrap CDN to a fully local SCSS Bootstrap rendering using Hugo modules. This gave me much more control over the styling and reduced external dependencies.

With Bootstrap 5 in place, we tackled the visual design. Amp helped me implement a proper dark theme with enhanced styling, upgraded the typography to the Inter font with optimized weights, and modernized the overall design system. The navbar got updated for dark theme compatibility, and mobile spacing was improved using Bootstrap utilities.

One of the bigger wins was implementing responsive images using WebP format. Amp helped me set up proper Hugo resource caching and create a system that serves optimized images across different breakpoints. This significantly improved page load times, especially on mobile devices. The post list layout got a major overhaul with better thumbnails and responsive design. Featured images on mobile posts were repositioned to the bottom for better readability. Even small touches like fixing the visible screenreader navigation and adding proper padding to the navbar branding were addressed.

Amp also helped me update the Makefile to be more flexible with configurable server ports and improved build processes. It even helped me create proper documentation and testing procedures for the responsive design, including Playwright testing configurations for different viewport sizes.

The Experience

I’m now sold on using AI for personal projects. Not letting AI be in the driver seat, but using it to help optimize things. I still need enough knowledge to help guide and conduct what it is doing, and to ensure it doesn’t make a pile of spaghetti. But this was an amazing experience.

The key was treating Amp as a highly skilled pair programmer rather than a replacement for my own judgment. When it suggested changes that didn’t quite fit my vision or wouldn’t work with my setup, I could course-correct and it would adapt quickly. When I needed to understand why something wasn’t working, it could explain the technical details and suggest alternatives.

With the foundation now solid, I’m looking forward to actually writing more content instead of constantly tweaking the underlying technology. Though knowing me, I’ll probably find some other technical rabbit hole to explore soon enough. The entire experience cost less than a coffee and saved me hours of manual work. For personal projects like this, AI coding tools are a game-changer - they handle the tedious parts so you can focus on the creative decisions.