Responsive social links profile using CSS Flexbox and clamp()

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

I’m proud of how closely I followed the design provided by Frontend Mentor. I focused on creating a clean, responsive layout with attention to detail—especially the spacing, hover states, and typography. I also used clamp() for fluid font sizes and paddings, which helped make the layout adaptable to various screen sizes without relying heavily on media queries.

Next time, I would:

• Focus more on accessibility—such as using aria-labels, improving focus styles, and ensuring proper contrast.
• Add SEO-friendly tags like <meta name="description"> and Open Graph tags.
• Optimize the image using modern formats like WebP.
• Try implementing dark/light mode using JavaScript and CSS variables to go beyond the base challenge.

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

One challenge was achieving a consistent layout that looks good across different devices, especially since the design relies on centered alignment and spacing. I overcame this by using flexbox and clamp() to handle responsive spacing and typography smoothly.

Another challenge was deciding how to structure the HTML semantically, keeping it clean while matching the visual design. I kept it simple but used clear class names and hierarchy to keep the code readable and maintainable.

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

Since this is a Frontend Mentor challenge, I’d appreciate feedback in these areas:

• Accessibility improvements – how to better support screen readers and keyboard navigation.
• CSS best practices – any suggestions to make my styles more efficient or scalable.
• Design accuracy – feedback on how close I got to the original design, especially spacing, colors, and responsiveness.
• Interactivity ideas – ways I could take the challenge further with simple JavaScript additions (like theme toggling or animations).