Skip to content
Submitted over 2 years ago

Art gallery website | HTML, CSS, JS

#sass/scss#typescript#webpack#gsap
Christopher Adolphe•600
@christopher-adolphe
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Art gallery website
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hello frontend friends! 👋

This was long overdue but I finally completed my 2nd challenge on Frontend Mentor. 🎉 This project was an opportunity for me to test new approaches on the way I write my CSS.

Major challenge(s):

  • I started using Sass maps with @each rules to generate helper classes easily. It is not perfect but I think is a good start.
  • I started using custom CSS properties to better organise my CSS and reduce repetition.
  • Getting the grid as per the design was more challenging than I thought. I initially started with by defining the height of each row for the main content for different viewport widths but I soon realised that this was difficult to maintain. I finally found an efficient solution by using the minmax() function with the grid-template-columns and grid-template-rows properties.

Your feedback would be much appreciated, especially if you have other ideas about how to better implement custom CSS properties in your workflow.

Thanks in advance. 🙏

Community feedback

  • Anna Leigh•5,135
    @brasspetalsPosted over 2 years ago

    Hi, Christopher - Awesome job on this solution! 🙌 The GSAP animations on this are simply fantastic! Between you and ApplePieGiraffe, I think I'm finally convinced to start using it rather than just keyframes. 😄

    The only small thing I noticed is that from 769-800px the text in the header overflows and gets cut off. Tweaking the transform: translateX() might be the simplest solution. 🤔

    Again, great job on this one - looking forward to seeing your next solution!

    Marked as helpful
    0
    Christopher Adolphe•600
    @christopher-adolphePosted over 2 years ago

    Hi @brasspetals,

    Thank you 🙂. Animating with keyframes is good for simple animations but when you want to orchestrate multiple animations, GSAP definitely makes things much easier. You should give it a try on your next challenge. 😉

    As for the responsive issue, it is now fixed. I usually try to use as less media queries as possible and I tend to apply them for the most common devices. Thanks for notifying me. 👍

    See you on the next one.

    Best regards.

    0
  • Rachael•610
    @RMK-creativePosted over 2 years ago

    Wow Christopher, well done on this challenge! I plan to spend some time reading your code because I think I can learn a lot of new things from you - thanks for sharing! I've been wanting to try out GSAP and seeing your work has inspired me to jump in and give it a go :)

    Just one thing I came across - the leaflet map is blank on loading, I get the location pin but the actual map is empty so maybe something worth looking into. I tried on 3 different browsers with and got the same issue on each.

    Marked as helpful
    0
    Christopher Adolphe•600
    @christopher-adolphePosted over 2 years ago

    Hi @RMK-creative

    The leaflet map issue is now fixed. It seems that the URL to the mapbox API was cached with the previous access token. I have cleared the cache and triggered a new deployment.

    I plan to add a fallback for the map should this happen again.

    Best regards.

    0
  • Christopher Adolphe•600
    @christopher-adolphePosted over 2 years ago

    Hi @RMK-creative,

    Thank you. 😉

    Yeah feel free to go through the git repo, you'll hopefully find something useful. As for GSAP, I recently started using it as well and I can tell you that you can do awesome stuff with that.

    As for the interactive map, this morning I did some changes to move the mapbox access token to an environnement variable on Netlify. I must have done something wrong. Thanks for notifying. I'll check it out.

    Best regards.

    0
  • Francisldn•250
    @francisldnPosted over 2 years ago

    Well done @christopher-adolphe, love your solution, so many learning points for me. Cool animation with GSAP. I'm gonna start using it in my project.

    0
    Christopher Adolphe•600
    @christopher-adolphePosted over 2 years ago

    Hi @francisldn

    I'm glad to hear you are learning something out of this solution. GSAP is definitely a great way to enhance any project with animations.

    See you on the next one.

    Best regards.

    0
  • 👾 Ekaterine Mitagvaria 👾•7,600
    @catherineisonlinePosted over 2 years ago

    Looks awesome!

    0
    Christopher Adolphe•600
    @christopher-adolphePosted over 2 years ago

    Hi @catherineisonline,

    Thank you. 👍

    The Perfect Pixel extension was really helpful on this one. 😉

    0

Please log in to post a comment

Log in with GitHub

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