Front End Mentor - Project 032 - Huddle Landing Page with Curved Sections

This is a solution to the Huddle Landing Page with Curved Sections challenge on Frontend Mentor.

Table of contents

• Overview
  • Screenshot + Video
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

Screenshot + Video

• Desktop

video-desktop.mp4

• Mobile

video-mobile.mp4

Links

• Solution URL: https://github.com/rashidshamloo/fem_032_huddle-landing-page-with-curved-sections/
• Live Site URL: https://rashidshamloo.github.io/fem_032_huddle-landing-page-with-curved-sections/

My process

Built with

• Vite / React.js
• TypeScript
• Tailwind CSS
• Framer Motion

What I learned

• Setting the color of an image to white using filter: brightness(0) invert(1); in CSS
• Using react-email-validator package for email validation in React.js
• Using setInterval() function and useEffect() and useInView() hooks to implement a count up when in view component.
• Using useAnimation() hook in Framer Motion and triggering different animations using it
• Using useMediaQuery() hook from react-responsive package to apply different settings for different screen sizes
• Different ways of applying animations to elements when in view using Framer Motion

Useful resources

• Framer Motion - The animation library i used in this challenge
• react-email-validator - The email validator package i used in this challenge
• react-responsive - The package i used for detecting screen sizes (useMediaQuery() hook)

Author

• Portfolio - rashidshamloo.ir
• Linkedin - rashid-shamloo
• Frontend Mentor - @rashidshamloo
• Twitter - @rashidshamloo