Skip to content
Submitted over 1 year ago

Social Links Card with vite, ts, react, styled-components

react, styled-components, vite, typescript
ha308ing•240
@ha308ing
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?

I'm proud that I didn't lose my sight while differentiating black pixels from black pixels. Next time I should take a spare pair of eyes.

Child components depend on the card context, hence not much reusable I guess

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

Avatar url had absolute url and didn't load, took a while to find it out 🤪

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

I'd like to find out, how to make a child component (like avatar, links list) kind of dual, so it could work with whole card context and without context?

Code

Please log in to post a comment

Log in

Community feedback

  • W. Brett Egbert•80
    @crossinguard

    Nearly identical, great job!

    Small detail but the location and links are slightly off for the font weight (bold/700 vs semi-bold/600). Both are used in the card design, which a fun treat on top of the black pixel adventure you just went through.

    One other consideration is the font size being fixed in place. Your card looks great at all sizes, has the correct font sizes, and handles browser zoom just fine. However, changing the font size in the browser settings does not interact with your card. Another small detail but worth thinking about.

    Marked as helpful

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