feat(): Fixing other things

Author: ar1603

src/components/WavyBackground/WavyBackground.tsx

@@ -6,7 +6,7 @@ const WavyBackground = ({
   colors,
   waveWidth,
   backgroundFill,
-  blur = 10,
+  blur = 8,
   speed = 'fast',
   waveOpacity = 0.5,
 }: {
@@ -45,12 +45,12 @@ const WavyBackground = ({
     canvas = canvasRef.current;
     ctx = canvas.getContext('2d');
     w = ctx.canvas.width = window.innerWidth;
-    h = ctx.canvas.height = window.innerHeight;
+    h = ctx.canvas.height = window.innerHeight / 2;
     ctx.filter = `blur(${blur}px)`;
     nt = 0;
     window.onresize = function () {
       w = ctx.canvas.width = window.innerWidth;
-      h = ctx.canvas.height = window.innerHeight;
+      h = ctx.canvas.height = window.innerHeight / 2;
       ctx.filter = `blur(${blur}px)`;
     };
     render();
@@ -108,11 +108,10 @@ const WavyBackground = ({
 
   return (
     <div
-      className={'flex flex-col items-center justify-center mx-auto pb-20'}
+      className={'flex flex-col items-center justify-center mx-auto'}
       style={{
-        height: '20vh',
+        height: '15vh',
         zIndex: 0,
-        top: 0,
         overflowX: 'clip',
         mixBlendMode: 'lighten',
       }}
@@ -122,6 +121,8 @@ const WavyBackground = ({
         ref={canvasRef}
         id="canvas"
         style={{
+          height: '100vh',
+          width: '100%',
           ...(isSafari ? { filter: `blur(${blur}px)` } : {}),
         }}
       ></canvas>

src/screens/mainFlow/contents/Work.tsx

@@ -9,6 +9,8 @@ const Work = () => {
       height={'100vh'}
       width={'100vw'}
       id="work"
+      position={'sticky'}
+      top={'15vh'}
       paddingX={32}
       paddingY={{ base: 16, md: 24 }}
     >

src/screens/mainFlow/contents/projects/HeroText.tsx

@@ -1,18 +1,25 @@
 import { Box, Text } from '@chakra-ui/react';
+import { motion, MotionValue } from 'framer-motion';
 import { useTranslation } from 'react-i18next';
 
-const HeroText = () => {
+const HeroText = ({ opacity }: { opacity: MotionValue<number> }) => {
   const { t } = useTranslation();
 
   return (
-    <Box
-      zIndex={100}
-      position={'sticky'}
-      top={'8vh'}
-      overflowX={'hidden'}
-      fontSize={{ base: '2xl', md: '3xl', lg: '5xl' }}
+    <motion.div
+      style={{
+        opacity,
+        zIndex: 100,
+        position: 'sticky',
+        top: '8vh',
+        overflowX: 'hidden',
+        fontSize: '5xl',
+      }}
     >
-      <Text className=" text-white font-bold inter-var text-center">
+      <Text
+        className=" text-white font-bold inter-var text-center"
+        fontSize={{ base: '2xl', md: '3xl', lg: '5xl' }}
+      >
         {t('about.quoteHeading')}
       </Text>
       <Text
@@ -21,7 +28,7 @@ const HeroText = () => {
       >
         {t('about.quoteSubheading')}
       </Text>
-    </Box>
+    </motion.div>
   );
 };
 

src/screens/mainFlow/contents/projects/Projects.tsx

@@ -1,29 +1,59 @@
-import { motion } from 'framer-motion';
+import { motion, useScroll, useTransform } from 'framer-motion';
 import { Box, VStack } from '@chakra-ui/react';
 import { ProjectsData } from '@data';
 import 'react-responsive-carousel/lib/styles/carousel.min.css';
 import ProjectItem from './ProjectItem';
 import { WavyBackground } from '@components';
 import HeroText from './HeroText';
+import { useRef } from 'react';
 
 const Projects = () => {
+  const ref = useRef(null);
+  const base = [400, 600, 1000, 1400];
+  const project1Ref = useRef<HTMLDivElement>(null);
+  const { scrollY } = useScroll({ target: ref });
+  const opacity1 = useTransform(scrollY, base, [0, 1, 1, 0]);
+  const height1 = project1Ref.current?.clientHeight;
+  const opacity2 = useTransform(
+    scrollY,
+    base.map((i) => i + (height1 ?? 550)),
+    [0, 1, 1, 0],
+  );
+
+  const heroOpacity = useTransform(
+    scrollY,
+    base.map((i) => i + 550),
+    [1, 1, 1, 0],
+  );
+
+  const project1 = ProjectsData[0];
+  const project2 = ProjectsData[1];
+
   return (
-    <VStack minH={'100vh'} width={'100vw'} id="projects" rowGap={20}>
-      <HeroText />
-      <Box position={'sticky'} top={'0'}>
+    <VStack minH={'100vh'} width={'99vw'} id="projects" rowGap={20} ref={ref}>
+      <HeroText opacity={heroOpacity} />
+      <Box position={'sticky'} top={'15vh'} transform={'translateY(-120px)'}>
         <WavyBackground />
       </Box>
-      {ProjectsData.map((project) => (
-        <motion.div
-          style={{
-            position: 'sticky',
-            top: '25vh',
-          }}
-          key={project.title}
-        >
-          <ProjectItem {...project} />
-        </motion.div>
-      ))}
+      <motion.div
+        style={{
+          opacity: opacity1,
+          position: 'sticky',
+          top: '25vh',
+        }}
+      >
+        <ProjectItem {...project1} />
+      </motion.div>
+      <motion.div
+        style={{
+          opacity: opacity2,
+          position: 'sticky',
+          top: '25vh',
+        }}
+      >
+        <ProjectItem {...project2} />
+      </motion.div>
+      );
     </VStack>
   );
 };