Skip to content
Submitted about 2 years ago

Galleria slideshow site

react, vite, react-router
Roan Macmillan•820
@RoanMacmillan
A solution to the Galleria slideshow site challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello! 👋

This ended up being a lot tougher than I expected, for a few reasons.

  • Because I pulled the data from the json file it kinda added an extra layer of complexity for me as I'm still getting to grips with React, and made styling the masonry layout a bit more confusing.

  • The masonry layout was pretty tough, decided to try and use grid as I'm inexperienced with it and need the practice. Originally tried to use a masonry library but it seemed a little buggy so didn't bother with it. Not sure what the best approach would be.

Overall happy enough with what I came up with, but feel like my code and react components could have been way more structured. Any feedback is welcome! 🙂

Code

Please log in to post a comment

Log in

Community feedback

  • Allison Alencar Ribeiro•80
    @ribeiroAllison

    Hey Roan, congrats on finishing this project. It looks really nice!

    Really liked the transition effect you designed, much better than hard cuts between pages. The name being hidden until hover was a nice touch too!

    Also, the progression bar looks cool. I sure couldn't pull that off in my solution :) .

    One thing I didn't quite get was the huge black bars around the page on bigger monitors. Was it a deliberate choice so you didn't distort the art on the detail page?

    As for the slideshow, I supposed it had to roll out all the art pages automatically, at least that is how I designed it.

    Anyway, nice work! I'll be sure to check your code on how to make these beautiful transitions.

    Cheers, Allison

    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