Me not being a frontend web dev, yet with basic understanding about the HTML DOM Tree and CSS but limited experience with frontend frameworks and the usage of CSS Stylesheet classes, I want to try to migrate away from my Hugo-based blog stack to an all new free Astro JS-based theme.

The scenario: I want migrate while keeping something that I like before in the legacy framework. Hence, I want to render my profile picture in the same circular style as in my Hugo theme, but in Astro I don’t find the proper CSS class yet.

Starting a Chat Session

I started by sharing a screenshot of the current rendering from my Hugo site together with a description of the problem (in free tier mode).

ChatGPT immediately recognized the circular border styling and suggested a CSS class with border-radius: 50% to achieve the same look in Astro.

Impressive — without even seeing the code, only based on the framework names, it guessed the content of my current CSS class and suggested a fix based on that guess. It is able to read the current image format, the target image, and impressively is able to compare both.

I applied the suggestion but the result was not quite it. The image was still rendering as an oval rather than a perfect circle.

ChatGPT suggested wrapping the image in a container div with equal width and height, and applying the border-radius to the container instead. Getting closer.

Still not perfectly round. So it refined the solution further, making the container a flex element to center the image and adjusting the image sizing to maintain aspect ratio with object-fit: cover.

Takeaway

Even though it was not fully able to provide the final fix, it was able to point my nose to the right CSS properties that helped me to find the solution myself. Hard to say in hindsight how the scenario would have unfolded without, but a huge timesaver compared to my normal learning path where I dig into the documentation of the framework, then try to find examples on Stack Overflow or some other blog post, dig into the GitHub projects, search the issues and discussions in the repo.

The only potential downside I could see. Taking the shortcut, I did not learn much about the usage of the new framework. Me using this more often will unfold like Google Maps where my brain is now limited to phone navigation in this GTA-style bird perspective point on a map?

Refs: