Blog Preview Card

What are you most proud of, and what would you do differently next time?

Was happy to do this small project using astro build environment. The documentation provided clear steps on getting a gitlab pages build automatically. Although the project did not require many of the features astro provided, at least this experience will help with future attempts

What challenges did you encounter, and how did you overcome them?

Was not able to perfectly match the mobile design. In particular, the image will truncate when in the mobile view while preserving the rounded edges.

To get the truncating behaviour, I thought I would need to put the image inside of a div with rounded border that changes size, and use overflow: hidden to visually truncate the image on mobile.

However, when I tried this approach, I could not get the rounded border of the surrounding div to perfectly match the height of the image. Unfortunately I decided the rounded corner on the image was more important than the truncation

What specific areas of your project would you like help with?

If anyone has any hints on how to truncate the edges of the image, I would like to hear the secret behind the magic trick :)

Thanks for reading!