//hamburger menu

Mobile First Responsive Product preview card component

Table of contents

• Overview
  • The challenge
  • Built with
  • Links
  • Screenshots
• My process
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

This challenge was to make a portfolio website with a minimalist design. Currently using React, NextJs and Css Modules for styling. I used a Mobile first approach for a responsive site.

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover and focus states for interactive elements

Built with

• Semantic HTML5 markup
• NextJS
• Typescript
• CSS modules
• Flexbox
• Grid
• Mobile-first workflow

Screenshots

Links

• Solution URL: Github
• Live Site URL: Website

My process

What I learned

NextJs will actually optimize your images for you with their Image component which uses browser native lazy loading.

The Image component will optimize images based on screen sizes as well!

At one point I ended up getting a warning stating Hydration had failed.

After looking through the error message I noticed that certain elements are not allowed to be nested.

In this case it was a button element being nested inside another button element. Looking through my code I did see a button nested inside another button.

I ended up changing the button element to a span and it fixed the problem right away! If you end up with a hydration error, read the error message and check for unwanted nesting of elements.

Trying to get the form to validate with the correct focus states and messages was trickier than I thought. After hours of bashing my head against the wall and reading different articles I finally stumbled upon an approach by Thomas Findlay whom had the perfect approach. Validate React Form w/ Hooks

Continued development

Useful resources

• Hamburger Menu Research - A good overview how to go about implementing a hamburger menu in react.

• Importing Fonts for NextJs - NextJs docs on next/font and how to apply custom fonts to your documents.

• Netflify Page Deployment - I use Netlify for deploment because I found github pages can sometimes be buggy.

• Active Link Colors - Great for setting active link colors using the useRouter hook with nextjs.

• React Form Validation - Thomas Findlay's Form Validation Approach

• clsx - Finding a way to add classes in react is a little challenging but clsx offers an easy solution.

Author

• GitHub - @NicholasAnich
• LinkedIn - @NicholasAnich
• Frontend Mentor - @NicholasAnich

Acknowledgments