NFT Card Component

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

I’m most proud of the clean and interactive design I achieved with my NFT card component. It was exciting to see how small details like hover effects, smooth transitions, and overlay elements brought life to the card.

Next time, I’d focus more on animations by using libraries like GSAP to make the interactions more dynamic and visually engaging. I’d spend more time testing the component for accessibility on different devices and with assistive technologies to ensure a more inclusive experience.

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

One of the challenges I faced was ensuring that the overlay and icon were perfectly aligned on top of the image during the hover state. It required fine-tuning the position, flexbox alignment, and z-index to make everything look seamless.

I used a combination of position: absolute and flexbox to center the overlay content and tested the layout iteratively to make sure it worked across different resolutions.

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

Although I’ve added some basic accessibility features, such as semantic HTML tags and alt text for images, I’m not entirely confident in how well the component will be understood by screen readers. I would appreciate advice on best practices for improving accessibility for users who rely on screen readers, especially with interactive elements like the hover effect and icons.