CSS variables and organized folder structure

Well done on getting this far! You’re clearly putting in the effort, and it shows. Just a few things I noticed that could enhance your solution…

• I would put these into a <ul> <li>, and the text should be wrapped with a <a> so it is accessible with a keyboard using the tab key, Using an <a> tag for navigation is semantically correct, improves accessibility for screen readers, and ensures consistent behavior across browsers, unlike a <button> or a <div> not intended for links.

  <div class="profile-card__links">
                <a href="#" class="profile-card__link">GitHub</a>
                <a href="#" class="profile-card__link">Frontend Mentor</a>
                <a href="#" class="profile-card__link">LinkedIn</a>
                <a href="#" class="profile-card__link">Twitter</a>
                <a href="#" class="profile-card__link">Instagram</a>
            </div>

• This needs to have a tag with semantic meaning <span class="profile-card__text">"Front-end developer and avid reader."</span> Problem is <span> has no semantic meaning just like a <div>.

• Using font-display: swap in your @font-face rule improves performance by showing fallback text until the custom font loads, preventing a blank screen (flash of invisible text). The downside is a brief flash when the font switches, but it’s usually better than waiting for text to appear.

• Still using px in some locations when you should use rem for consistency.

I hope you found this advice helpful! Keep up the great work, and don’t forget to dive deeper into the details. You’re doing amazing, and I can’t wait to see what you create next. Happy coding! 🚀