Loopstudios landing page solution using SCSS, flexbox, grid

What are you most proud of, and what would you do differently next time?

I defined a hover-underline-effect mixin to add an underline animation on hover for links

     @mixin hover-underline-effect {
         &::after {
           content: "";
           position: relative;
           display: inline-block;
           width: 100%;
           height: 2px;
           background-color: $White;
           transform: scale(0);
           transition: transform 0.3s ease-in-out;
           transform-origin: right;
           top: -12px;
         }
       
         &:hover {
           &::after {
             transform: scale(1);
             transform-origin: left;
           }
         }
     }

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

Ensuring that the correct image sizes were displayed based on the device screen size

     @HostListener('window:resize', ['$event'])
     onResize(event: any) {
       this.isMobile = window.innerWidth < 768;
     }

     ngOnInit(): void {
       this.isMobile = window.innerWidth < 768;
     }

     getImgSrc(creations: any): string {
       return this.isMobile
         ? creations.imgSrcMobile
         : creations.imgSrcDesktop;
     }

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

I would appreciate feedback on how to improve the accessibility of my project