This one was not very challenging. I think got my solution to be reasonably close to the design.
What challenges did you encounter, and how did you overcome them?Using my custom image, I had to ensure that its aspect ratio was 1:1, otherwise there were weird cropping issues. I'm wondering if there is a better way to make a circular avatar from images that do not have an aspect ratio of 1:1. I was not able to get the padding 100% right. It seemed like the desktop version had more padding than the mobile version. I tried to make it responsive and get the padding right at both sizes, and while I was able to make it responsive, I was not able to get the right padding values at the mobile and desktop sizes.
What specific areas of your project would you like help with?-
Could the social links be organized using an unordered list `` for better semantic structure, considering these are grouped links?
-
Would
display: gridhave been a better choice for styling the social links card? -
Is the use of vh units in the padding (clamp(1.5rem, 3.5vh, 2.5rem)) appropriate for providing smooth responsiveness on all screen sizes? Would an alternative unit like vw provide better consistency?
-
Are the focus states (outline: 3px solid var(--clr-text-secondary)) on links clear and distinguishable enough for keyboard users?
-
Should the focus state be visually different from the hover state to better distinguish between mouse and keyboard interactions?
