Desktop Solution using CSS grid, flexbox and hover

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

Getting the design as close as possible to the provided figma file. Probably to help more with the spacing next time, to set the margin and padding to 0 in the body tag to help deal with spacing issues and remember to use a flexbox when dealing with inline elements that have whitespace between them.

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

Once again spacing was an issue and figuring out how to prevent whitespace from the h1 tag from triggering the hover function. Setting the main tag as a flexbox and setting its direction to column seemed to help with the spacing issues. The whitespace issue was resolved by just reducing the width of the h1 tag.

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

-Did I write semantically correct html?

-For my "Greg" id, was it good to use a 12px margin-right for the spacing?

-For my "name" id, was it good to use a grid and an align content to get it to center with the image at the bottom?