Testimonials Grid Section (with Testimonial Filtering)

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

Built with. 🔨

• React.
• Vanilla CSS.
• React Router (For testimonial filtering).
• Framer Motion.
• Vite.

Notes. 📌

• The font sizes in the design file were going as low as 11px and 13px, which I think is too small. Instead I used 14px and 16px, making the text easier for users to read. Because of that, my solution is bit larger than the original design, but I think it's better than forcing the user to read very small text.
• I also used a background blend mode on the background image of the first testimonial, so that it’s more subtle and doesn’t interfere with the text that is in front of it.

Features. ✨

• Added two buttons to filter testimonials based on whether they are from a verified graduate or a student.
• Added some view based animations using Framer Motion.
• Used the useReducedMotion hook to make sure that users who have reduced motion setting enabled don't see the animations.

New Things Learned. 🎓

• useSearchParams hook in React Router.
• Using the Framer Motion Library.

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

Would love some overall feedback on any areas where I can improve. Any mistakes I have done, use of HTML semantic elements, feedback on the animations, any thing you would have done differently etc.