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"