Social Links Profile Main

Community feedback

• 

  P

  Bruno Banoczi-Cs•40

  @L4r4TWPosted 2 months ago

  Hi Christian! I love your solution😍

  Here are some tips:

  • Try to use semantic HTML tags instead of <div>-s because ti makes your work more professional

  • The buttons in this project aren't real buttons, they are links that looks like buttons. Using links makes it much easyer to redirect to the given page, and if you hoover the cursor, it will automatically change to pointer, which is a small thing, but increases strongly the user experience.

  Here is an example:

   <a
      href="https://linkedin.com"
      class="button-link"
      target="_blank"
      aria-label="Twitter"
  >Twitter</a>
  

  .button-link {
    display: flex;
    justify-content: center;
    align-items: center; /* Centers vertically */
    width: 304px;
    height: 45px;
    margin-bottom: var(--spacing-lg);
    font-size: 16px; /* Set font size */
    color: #fff; /* Text color */
    background-color: var(--grey-700); /* Background color (blue) */
    text-align: center; /* Center text inside button */
    text-decoration: none; /* Remove underline */
    border-radius: 8px; /* Rounded corners */
  }
  

  • Hoovering over your buttons has a good looking color changing effect. You can make it better by changing the lenght of the effect:

  .button-link{
      transition: background-color 2s ease; /* Smooth color transition */
  }
  

  • If you want to give a function that makes it able to use the arrow keys to navigate between the social media links you can use this small JavaScript code:

  // script.js
  
  document.addEventListener("keydown", function (event) {
    // List of buttons
    const buttons = document.querySelectorAll(".button-link");
  
    // Get the index of the currently focused button
    const focusedButtonIndex = Array.from(buttons).indexOf(
      document.activeElement
    );
  
    if (event.key === "ArrowDown") {
      // Move to the next button (down arrow key)
      const nextIndex = (focusedButtonIndex + 1) % buttons.length;
      buttons[nextIndex].focus();
      event.preventDefault(); // Prevent default behavior (scrolling, etc.)
    } else if (event.key === "ArrowUp") {
      // Move to the previous button (up arrow key)
      const prevIndex =
        (focusedButtonIndex - 1 + buttons.length) % buttons.length;
      buttons[prevIndex].focus();
      event.preventDefault(); // Prevent default behavior
    }
  });
  

  Hope I gave you some helpful information, not just bullshit☺️ and wish you a lot of fun with the future projects!!

  0