Skip to content

Landing page with curved sections using react & styled components

Notifications You must be signed in to change notification settings

Kiran-M-P/huddle

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Huddle landing page with curved sections

This is a solution to the Huddle landing page with curved sections challenge on Frontend Mentor.

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

screenshot

Links

My process

Built with

What I learned

  • learnt and got proficient in styled components
  • globalStyles, ThemeProvider
  • Got better in working with react(props, state, useEffects)
  • Working with fontawesome in react
  • Passing meta tags with react-helmet
  • Dynamically rendering device specific components using windows.innerwidth.
  • CSS lazy loading
  • Creating custom utility styled components
// my custom component for wave SVGs
<WaveStyled
  src={`./images/bg-footer-top-${width <= 768 ? "mobile" : "desktop"}.svg`}
  position="top"
/>

Continued development

  • Need to focus more on clean code and folder structure
  • Web performance
  • SEO optimisations

Useful resources

Author

Releases

No releases published

Packages

No packages published