my first portfolio project built with react

---

Dependencies I used:

• Dynamic Routing: React Router Dom
• Animating elements: gsap
• Animating elements: framer motion
• CSS styling: sass
• Animations: lottieFiles
• Icons: FontAwesome

---

Youtube tutorials I used:

• Create lovely React 3D Animated Card. Beginner REACT.JS Animation with framer-motion by Coder One
• Code an Animated Menu using React and GSAP Tutorial by Wrong Akram
• How To Code Animations in React.js with Greensock (GSAP). Hero Section by Wrong Akram
• Awwwards Rebuilt Mini | Building a Hamburger Menu using Gatsby and Framer Motion by Wrong Akram

---

Things I learned while working on the project:

• good idea to disable menu button after clicking on it for ~1.2seconds and then enable it again (better user experience)
• z-indexes don't work unless you define a position
• in order for Header element to have an access to props.history we can use withRouter
• use ::selection CSS selector for customizing text highlight color
• use CSS ::placeholder Selector to give a styling to a placeholder text
• add punctuation to your alt text:

we should always finish our alt text with punctuation, such as a full stop/period. This makes the screen reader voice pause slightly before announcing the next words in the sequence, which feels a lot more natural.

---

gsap:

• in terms of easing use Power3
• TimelineLite allows to add the timeline to animations. (in my hero section first come the photos, only then the content to the left)
• 'to' - defines final state, 'from' defines initial state
• TweenMax is for animating just 1 item (in my case the whole hero section, with TweenMax we make the section visible)

---

framer-motion:

• drag effect(https://www.framer.com/api/motion/gestures/#drag)
• the way to use @keyframes in framer-motion: initial={{height: 0}} animate={{height: [0, window.innerHeight,0]}} the array means the beginning, then half-way,,then a final animation

---

Issues:

• Home Page was completetely disappearing as soon as I moved the mouseafter I added a custom cursor to the App. Decided not to add Custom Cursor to the project.

// for deployment add to json: // "homepage": ".", // "predeploy": "npm run build", // "deploy": "gh-pages -d build"