Skip to content
Submitted about 2 years ago

Responsive Design Portfolio with a Carousel

accessibility, bem, react, styled-components, vite
Bogdan Kim•780
@semperprimum
A solution to the Single-page design portfolio challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I would greatly appreciate your feedback!

This was a tough one..

  • It was my first time building a carousel, and I used Swiper JS for it. The experience was quite challenging. I encountered numerous issues, such as flickering, and the carousel occasionally skipping some items. However, after investing several hours into it, I managed to fix the problems, and now it seems to be working properly.

  • The grid part, on the other hand, wasn't as difficult as i thought it would be. It was my first time incorporating grid-areas in the project, and I found them incredibly helpful. Using media queries with them was a breeze!

Code

Please log in to post a comment

Log in

Community feedback

  • Aman Singh Bhogal•1,010
    @asbhogal

    Hi Bogdan,

    This is a great solution - well done! You've used grid well here, as documented, as well as rem values and a reset, and its responsive. Nice. Just a few things I thought I'd mention which is more from a management/maintainability perspective:

    • With the Skills.jsx, to avoid repeated code, you can declare an array of objects with key-value pairs for the icon, text and classname (instead of using them as props) then map() over this array and render a <Card /> component for each, passing in the array index for the key prop and the respective three properties.
    • You've separated your variables, reset and utility classes, but I'd also recommend splitting your App.scss into individual components for easier management and debugging - it reduces cognitive load, as isolating a single element from a long stylesheet can take some time. You can search for it, but I t think its better to approach component styling the way you approach component logic and split them.
    • Locally host your Google Fonts for privacy and performance reasons. You can use the fontsource npm package to install the typefaces you need and then import the weights required, then declare the font-family where required. Here's their documentation. Link. I use this a lot and find it incredibly easy to work with. They install in the web-recommended woff2 format and you only end up with what you've used in your production build, and you can import them into config files for UI Component libraries too, making it very versatile.
    • In terms of SEO you're missing the meta description for crawlers to index your site page. While this is just a project, it's good practice to get into from the start so it becomes natural

    Also, from a personal perspective, I think using either styled components or SASS in a project is best, instead of combining them. While there isn't a hard rule for this and some would argue against it, having one approach (either coupled for single management or separated concerns) means it'll be easier to locate and debug styling and possible prevent code clashes. That's just my two cents.

    Hope this helps!

    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