All solutions

This is my first time using the Fetch API so if there is anything I can do better or if you have any tips I'd be happy to hear them!

I used this challenge to learn how to use CSS Grid and grid-areas. I had to scrap the CSS and start over 3 times but finally got it to a place where I was happy with it. If anyone has any tips on using grid with React let me know.

I was able to get the animation on the drop down to work but it isn't perfect and isn't consistent if the line amounts are different so if anyone has any tips for making the animation work better in react let me know.

I ended up setting the img behind the profile pic as a background-img with background-size: contain; and then just adding margin-top to adjust for the background image. Not sure if this was really the best approach. I am terrible with images and background-images so any advice to deal with them and positioning would be super helpful. Also had lot of trouble on the background svgs had to find someone else's solution to figure that one out (article here: https://dev.to/lismaria/profile-card-challenge-frontendmentor-io-3d51). not sure I totally understand why vh and vw make it work better so I'll have to think back on that one as I was using -vh and -vw values that didn't have the same effect.

If anyone could please give me some advise on how to get the background image to show up correctly on the mobile size. I somehow got the desktop to work fine but kept getting stuck because you can't use height % on an empty div and had no clue how to do it responsively. Ended up hard coding some heights to try and make it work the best I could but would love some tips on how to do it better and more responsive.