proton-number/introsection

Frontend Mentor - Intro section with dropdown navigation solution

This is a solution to the Intro section with dropdown navigation challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• The challenge
• Screenshot
• Links
• My process
  • Built with
  • What I learned
  • Continued development

Overview

The challenge

Users should be able to:

• View the relevant dropdown menus on desktop and mobile when interacting with the navigation links
• View the optimal layout for the content depending on their device's screen size
• See hover states for all interactive elements on the page

Screenshot

Links

• Solution URL:"https://www.frontendmentor.io/challenges/intro-section-with-dropdown-navigation-ryaPetHE5/hub?share=true"
• Live Site URL: "https://introooosect.netlify.app/"

My process

This time i didn't take as much time as i'd usually do. I started with the navigation bar and that didn't take so much time to build. The only challenging part was the drop down menu. After reaserch i found the Popover element that can help with that from material ui. Pretty useful tool too. The remain part was me trying to create an animated text in which each letter of the text is animated one after the other which took a little of my time but it all worked well.

Built with

• Semantic HTML5 markup
• React - JS library
• [MaterialUI] (https://mui.com/material-ui/getting-started/installation/) -[FramerMotion] (https://www.framer.com/motion/)

What I learned

I learnt alot more about animating using framer motion, I got more used to material ui and it's components especially breaking points.

Continued development

I want to focus more on my portfolio website now using more of framer motion and material ui to build from scratch to finish.

Acknowledgments

Tbh i acknowledge myself because i've come a long way 😏