Profile Card Component with Sass

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

I'm proud of my sustained ability to replicate design briefs with a sharp eye for detail. I thank my art/design background.

This one had a bit of friction for me. There was some mind-boggling moments with the body being flex: row; and the card (section) being flex: column;. I had particular issue with the background images flexing with the viewport, the profile icon positioning and weirdly, the positioning of the footer as well. Normally, I've found these card layouts easier than this one.

Taking breaks and stepping away helped me push through. Sometimes perceptibly 'big' problems can be resolved with only a few lines of code. You just need to specify the problem to yourself rather than thinking of it as being 'broken' or 'not working' when you might be 75-80% there.

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

background-image: It was frustrating that these SVGs flexed when the viewport was adjusted, as this changed the design and I'd constantly have to reposition the circles according to X/Y values with background-position properties and I didn't enjoy this. I don't know what the best way to work with SVGs is.

For now, I've marked new positions at breakpoints but the images don't 'flow' into their size as much as I'd like. They kind of snap. This is the best I can come up with right now.

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

If anyone knows a better way to have the bg images proportionally resize compared to the viewport without changing their position in relation to the card, that'd help me. I almost wanted to 'pin' them to the corners of the card. But instead it seemed that with every position change, the size would also change and vice versa, so it felt annoying to grapple with. Should I have used specific pixel units in background-size instead of contain? Should I have only adjusted background-size instead of the position values?