Static QR code component page using CSS Flexbox

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

I'm most proud of using Tailwind CSS to successfully and easily style the static page.

I'd try to use a framework that would be unnecessarily complex for this project just to see how I can replicate static pages in it, such as in Next.js (particularly the React.js part of it) or Vike, or using APIs to retrieve the content such as with Elysia.js.

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

• At one point, I couldn't figure out how to allow myself to change the boldness of text at any given point in the code. Turns out that I didn't have to make more custom classes and just combine the font-normal and font-bold Tailwind classes with the font-[Outfit] class.
• Deciding how to place the margins around the texts and images was a bit of a dilemma since I was considering either splitting the margins between the elements or just placing the margin only on one side for each element.

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

I'd like to know if semantic tags would make the website more accessible, and if so, I'd like to know where they should go on the code.

Edit 2025-02-07 9:42 UTC+0: I'd also like to learn how to improve my styling; for example, I was initially not sure how to apply the margins and ended up with the mb-* classes in the image and text elements.