Skip to content
Submitted 2 months ago

Responsive Social links profile | Vanilla JS

Renita M•40
@renitam
A solution to the Social links profile challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

Built with semantic HTML, custom CSS, and Vanilla JavaScript to meet the challenge specs. No frameworks—just clean, lightweight code. Deployed via GitHub Pages for quick and easy access. Focused on responsive design and functionality using native JavaScript.

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

I had some trouble with my @media css statements. I forgot they go after the original css, not before. Also, I was trying to implement color variables for easier coding and realized too late into the challenge that I had to store variables under :root {}, so there was some repetition there.

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

I wanted to make the cursor match the Figma without substituting it for an image file, because I feel like that's doing a lot. Any suggestions?

Update

I went ahead and used the cursor: url(), pointer property, but there's some lag in how it renders. As if the cursor is glitching from one spot to another upon hover. Any advice on how to fix?

Code

Please log in to post a comment

Log in

Community feedback

  • Muskan Fatima•160
    @muskan-fatim

    Hey! Awesome job on your solution! 👏

    I noticed you mentioned wanting to make the cursor match your Figma design without using an image file (which I agree is a great idea to keep things clean and lightweight).

    Here’s a suggestion you might find helpful:

    Instead of using an image, you can create a custom cursor using just HTML, CSS, and JavaScript. For example:

    <!-- HTML -->
<div id="custom-cursor"></div>

    /* CSS */
#custom-cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  border: 2px solid #000; /* Adjust to match your Figma design */
  border-radius: 50%; /* You can customize this with clip-path for unique shapes */
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.1s ease;
}

    // JavaScript
const cursor = document.getElementById('custom-cursor');
document.addEventListener('mousemove', (e) => {
  cursor.style.left = `${e.clientX}px`;
  cursor.style.top = `${e.clientY}px`;
});

    This lets you style your cursor however you want without needing to import any image files. You can even add hover effects or animations if you like. Let me know if you’d like help customizing it to match your Figma style exactly!

    Keep up the great work 💻✨

    Marked as helpful
  • Renita M•40
    @renitam

    Thank you, Muskan! I ended up opting for the svg url() option, but I love the attention to detail. I'm wondering how I'd go about calculating the performance difference between solutions. Happy Coding!

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord