Profile card component - Flexbox, mobile-first, responsive

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

I'm happy that i didn't used any media queries to get responsive layout.

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

Background circles was the most tricky part of the design. They are scaled down with mobile view and placed in different position relative to viewport than the desktop view. I've used combination of min and calc functions to calculate their position for different viewport widths and decided to use only one circle size for both mobile and desktop view.

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

Since the background circles are simple gradients and serve only decorative purpose i've decided to not load svg files but use only CSS to generate gradients. I think the result is very similar to original design and users don't have to download additional files.

I would like to know what would be considered best practice in this case ?