fix(): Fixing minor issues

Author: ar1603

src/components/GenerateText/GenerateText.tsx

@@ -0,0 +1,63 @@
+import { useEffect } from 'react';
+import { motion, stagger, useAnimate } from 'framer-motion';
+import { Text } from '@chakra-ui/react';
+
+const TextGenerateEffect = ({
+  words,
+  className,
+  filter = true,
+  duration = 0.5,
+}: {
+  words: string;
+  className?: string;
+  filter?: boolean;
+  duration?: number;
+}) => {
+  const [scope, animate] = useAnimate();
+  const wordsArray = words.split(' ');
+  useEffect(() => {
+    animate(
+      'span',
+      {
+        opacity: 1,
+        filter: filter ? 'blur(0px)' : 'none',
+      },
+      {
+        duration: duration ? duration : 1,
+        delay: stagger(0.2),
+      },
+    );
+  }, [animate, duration, filter]);
+
+  const renderWords = () => {
+    return (
+      <motion.div ref={scope}>
+        {wordsArray.map((word, idx) => {
+          return (
+            <motion.span
+              key={word + idx}
+              className="dark:text-white text-black opacity-0"
+              style={{
+                filter: filter ? 'blur(10px)' : 'none',
+              }}
+            >
+              {word}{' '}
+            </motion.span>
+          );
+        })}
+      </motion.div>
+    );
+  };
+
+  return (
+    <div className={'font-bold ' + className}>
+      <div className="mt-4">
+        <Text className=" text-white text-2xl tracking-wide" fontWeight="400">
+          {renderWords()}
+        </Text>
+      </div>
+    </div>
+  );
+};
+
+export default TextGenerateEffect;

src/components/GenerateText/index.ts

@@ -0,0 +1 @@
+export { default as TextGenerateEffect } from './GenerateText';

src/components/index.ts

@@ -12,5 +12,6 @@ export * from './SpotlightCard';
 export * from './Timeline';
 export * from './3dPin';
 export * from './TypeWriterText';
+export * from './GenerateText';
 export * from './ShinyText';
 export * from './WavyBackground';

src/screens/mainFlow/contents/AboutMe.tsx

@@ -1,8 +1,9 @@
-import { Box, Heading, HStack, Text, VStack } from '@chakra-ui/react';
+import { Heading, HStack, VStack } from '@chakra-ui/react';
 import { useCursor } from '@components';
 import { useIsIntersecting } from '@hooks';
 import { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
+import { TextGenerateEffect } from '@components';
 
 const AboutMe = () => {
   const { t } = useTranslation();
@@ -17,13 +18,18 @@ const AboutMe = () => {
   }, [isIntersecting, setCursorType]);
 
   return (
-    <VStack ref={containerRef} minH={'100vh'} id="about" paddingTop={24}>
-      <Box rowGap={10}>
-        <Heading textAlign={'start'}>{t('about.title')}</Heading>
-        <HStack>
-          <Text>{t('about.aboutMe')}</Text>
-        </HStack>
-      </Box>
+    <VStack
+      ref={containerRef}
+      minH={'100vh'}
+      id="about"
+      width={'99vw'}
+      paddingX={32}
+      paddingY={24}
+    >
+      <Heading width={'100%'} textAlign={'start'}>
+        {t('about.title')}
+      </Heading>
+      <TextGenerateEffect words={t('about.aboutMe')} />
     </VStack>
   );
 };

src/screens/mainFlow/contents/Contact.tsx

@@ -1,15 +1,13 @@
-import { Box, Heading, HStack, Text, VStack } from '@chakra-ui/react';
+import { Box, Heading, HStack } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 
 const Contact = () => {
   const { t } = useTranslation();
   return (
-    <VStack minH={'100vh'} id="contact" paddingTop={24}>
-      <Box rowGap={10} width={'full'}>
-        <Heading textAlign={'start'}>{t('contact.title')}</Heading>
-        <HStack></HStack>
-      </Box>
-    </VStack>
+    <Box minH={'100vh'} id="contact" paddingTop={24} rowGap={10}>
+      <Heading textAlign={'start'}>{t('contact.title')}</Heading>
+      <HStack></HStack>
+    </Box>
   );
 };
 

src/screens/mainFlow/contents/Work.tsx

@@ -7,12 +7,10 @@ const Work = () => {
     <Box
       zIndex={100}
       height={'100vh'}
-      width={'100vw'}
+      width={'99vw'}
       id="work"
-      position={'sticky'}
-      top={'15vh'}
       paddingX={32}
-      paddingY={{ base: 16, md: 24 }}
+      paddingY={24}
     >
       <Heading>{t('work.title')}</Heading>
     </Box>