Social links profile

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

Here we use buttons to follow links. IMHO it's better to open these links in new tabs. There are also special indices to select items with TAB or ignore them in case of negative value. Here we also need to remove focus with blur() after button pressed.

  <div class="links">
    <a href="https://github.com/ardolynk-reborn" target="_blank" tabindex="-1">
      <button autofocus tabindex="1">GitHub</button>
    </a>
    <a href="https://www.frontendmentor.io/profile/ardolynk-reborn" target="_blank" tabindex="-1">
      <button tabindex="2">Frontend Mentor</button>
    </a>
    <a href="https://www.linkedin.com/in/michaeltikhonenko" target="_blank" tabindex="-1">
      <button tabindex="3">LinkedIn</button>
    </a>
    <a href="https://x.com/ardolynk75" target="_blank" tabindex="-1">
      <button tabindex="4">Twitter</button>
    </a>
    <a href="https://www.instagram.com/ardolynk" target="_blank" tabindex="-1">
      <button tabindex="5">Instagram</button>
    </a>
  </div>

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

1. Proper focusing sequence for keyboard navigation (used tabindex attribute).
2. Focus removal after selection (onclick="this.blur()").