Social links profile using Vue

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

• I made the card responsive by using a media query and by using fluid design. The card's width automatically adapts to the viewport on mobile screen sizes.
• I used semantic HTML, e.g. nav, ul.
• I implemented proper hover and focus-visible states.
• I also used the q tag to create the quote.

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

First, I centered the card with this code:

display: grid;
place-content: center;

But that caused the card to shrink. However, the card should have a bigger width on desktop (see mockup). That's why I only centered the card vertically with this code:

display: grid;
align-items: center;

and applied a max-width-wrapper class to the card to center it horizontally and to make it responsive. This technique is explained in this YouTube video.

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

I think I found a good approach to center the card and to make it responsive (see above). However, let me know if you know a better solution.