Blog preview card using Astro

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

I am most proud of turning this into a reusable component. A main point driving my interest in Astro is being able to use basic web dev tools (HTML, CSS, JS) to create reusable components. Next time I would make the category tag ("Learning") a list so that multiple categories could be used, generating a new category button for each entry. This would make the component that much more modular for future use.

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

Even though I used dynamic images within my QR code component, I struggled to get that working here. I still don't know if it was an undiscovered typo or another issue but it took several attempts to get the image path properties of my card component to work as intended. When I ran into issues, I scaled back what I was trying to do at once to find the issue. I created a new alternative test component without type safety and that didn't limit the types of images. Once I had a basic version working as I started adding back in the other features.

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

Nothing in particular but feedback is appreciated. My overall focus is to prioritize responsive, reusable components without employing media queries. I am new to JavaScript/TypeScript so let me know if something regarding the frontmatter scripts or type safety seems off. Those are mostly from adapting examples in the Astro docs.