This is a solution to the Huddle landing page with curved sections 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: frontendmentor.io/solutions/...
- Live Site URL: kiran-m-p.github.io/huddle/
- React - JS library
- Styled Components - For styles
- Font Awesome React component - For icons
- React Helmet -For meta tags
- Firefox Browser Developer Edition -For its awesome Responsive Design Mode
- Desktop-first workflow
- 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"
/>- Need to focus more on clean code and folder structure
- Web performance
- SEO optimisations
- White gap between SVG and div - This is a life saver when your working with wave sections.
- Styled Components Crash Course & Project by Traversy Media. It's reason I started this project.Since he used this challege to teach styled components.
- IconScout - This helped me to change the colors of SVG assets quickly.
- Svg Crop - This is an amazing tool helped to to crop SVGs assets instantly without any manual work.
- How to Add Font Awesome Icons in React JS - Another life saver. I struggled a lot to with fontawesome documentation to add Font Awesome React component
- Twitter - @ItsKiranMp
- LinkedIn - @kiran-m-p
- Instagram - @itskiranmp
- Frontend Mentor - @Kiran-M-P