/sunny-side-v1

Sunny side v1 project

Primary LanguageHTML

Sunnyside agency landing page solution (Frontend Mentor challenge)

This is a solution to the Sunnyside agency landing page challenge on Frontend Mentor.

Table of contents

Overview

The challenge

Users should be able to:

  • View the optimal layout for the site depending on their device's screen size
  • See hover states for all interactive elements on the page

Screenshot

Screenshot

Links

My process

Built with

What I learned

Two pieces of code I'm kinda proud of.

.gallery {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;

    @media (min-width: ${props => props.theme.breakpoints.md}) {
    & {
        grid-template-columns: 1fr 1fr 1fr 1fr;
      }
}
const NavBar = () => {
    const [isScrolled, setIsScrolled] = useState(false);
    const scrollOffset = 150;

    const throttledScrollHandler = React.useMemo(
        () => throttle(handleScroll, 50)
      , []);

    React.useEffect(() => {
        if(window.scrollY > scrollOffset) {
            setIsScrolled(true);
        }
        window.addEventListener("scroll", event => {
            throttledScrollHandler();
        })

        return () => {
            throttledScrollHandler.cancel();
            window.removeEventListener("scroll", event => {});
        }
    }, [throttledScrollHandler]);

    return (
        <>
            <Header isScrolled={isScrolled}>
        </>
    )
}

Continued development

I had the opportunity to learn to work with Styled components, something I want to learn more about. Especially the scalability and architectural choices. For example, how to handle theming and general properties (spacing, colors etc.)

This project was also an exploration into functional components of React and their lifecycle management. This is something I would like myself to improve in.

Useful resources

  • Gatsby docs - Gatsby has a great documentation, which helped me a lot getting to know Gatsby (and React).
  • Throttling event listeners in React - Amazing tutorial on how to throttle event listeners, something that confused me in how to do this in React (due to lifecycles)

Author