This is a solution to the Sunnyside agency landing page challenge on Frontend Mentor.
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
- Solution URL: Github
- Live Site URL: Demo @ jan-wagenaar.nl
- Semantic HTML5 markup
- Flexbox
- CSS Grid
- React - JS library
- Gatsby - React framework
- Styled Components - For styles
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}>
</>
)
}
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.
- 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)
- Website - Jan-wagenaar.nl
- Frontend Mentor - @jan-wagenaar
- LinkedIn - Jan Wagenaar