Social links profile

This is my solution to the Social links profile challenge. A compact profile card with avatar, location, short bio, and a vertical list of social links featuring hover/focus states and accessible markup.

Table of contents

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• See hover and keyboard focus states on all interactive links
• View the component comfortably on mobile and desktop viewports

Links

• Solution URL: https://www.frontendmentor.io/solutions/social-links-profile-using-css-flex-9m0i0kN53n/

• Live Site URL: https://ankankun.github.io/Social-Links-Profile/

My process

Built with

• Semantic HTML5
• Modern CSS (flexbox, custom font, hover/focus states)
• Mobile-first thinking (single-column layout)
• Minimal footprint: no frameworks

What I learned

• Using a single flex column container with centered alignment keeps the card layout simple while allowing an independently positioned footer.
• Replacing large top margins with layout techniques (flex centering or fixed positioning for attribution) creates true vertical centering.
• Explicit :focus-visible states greatly improve keyboard accessibility for link groups.

Continued development

• Add prefers-reduced-motion handling for any future animations.
• Introduce CSS variables for color tokens and spacing scale.
• Add a dark/light toggle or theme expansion.

Useful resources

• MDN: Flexbox guide
• MDN: :focus-visible
• GitHub Docs: GitHub Pages deployment

Author

• GitHub: @Ankankun
• Frontend Mentor: @Ankankun