Submitted almost 2 years ago

Art gallery website | HTML, CSS, JS

#sass/scss#typescript#webpack#gsap

Christopher Adolphe• 580

@christopher-adolphe

Preview site View code

This is a solution for...

Art gallery website

HTML
CSS

2junior

View challenge

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

@brasspetals

Posted almost 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

Christopher Adolphe• 580

@christopher-adolphe

Posted almost 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.

Rachael• 610

@RMK-creative

Posted almost 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

Christopher Adolphe• 580

@christopher-adolphe

Posted almost 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.

Christopher Adolphe• 580

@christopher-adolphe

Posted almost 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.

Francisldn• 250

@francisldn

Posted almost 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.

Christopher Adolphe• 580

@christopher-adolphe

Posted almost 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.

👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Posted almost 2 years ago

Looks awesome!

Christopher Adolphe• 580

@christopher-adolphe

Posted almost 2 years ago

Hi @catherineisonline,

Thank you. 👍

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

Please log in to post a comment

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