Blur-up loading technique for heavy file sizes (WIP)
Process
Initial
Goal is to make a CV that is as simple as possible to focus mainly on legibility with lightweight interactibility
Problems
Faced difficulties when making a scroll directed progress bar for components
Initially I made it with recognizing the window’s scroll and subtracted the origin points to separate + limiting and providing the height of the component
Fixed by properly using forwardRef on child components and framer-motion’s useScroll
Floating elements - with height as fit-content
Properly fitting the background images without hard values was confusing
Fixed using parent element as position relative!
Initially animated the appearance of boxes by using aos library
There was issue with overscroll appearing on mobile
Solved by introducing framer-motion intersection observer
Lessons
Fortified React skills
Particularly on ref management in components
Utilized Framer motion to enhance user experience
Learnt about intersection observer through aos and framer motion
Focused in producing responsive, modifiable and lightweight website