feat(): Adding the project screen feature

Author: ar1603

public/hourcoding/Hourcoding_Main1.png

@@ -106,7 +106,7 @@ const HoverBorderGradientBase = ({
       }}
       onMouseLeave={() => setHovered(false)}
       className={
-        'relative flex rounded-full border border-gray-900  content-center bg-black/20 hover:bg-black/10 transition duration-500 dark:bg-white/20 items-center flex-col flex-nowrap gap-10 h-min justify-center overflow-visible p-px decoration-clone w-fit'
+        'relative flex rounded-full border border-gray-900  content-center bg-black/20 hover:bg-black/10 transition duration-500 dark:bg-white/20 items-center flex-col flex-nowrap h-min justify-center overflow-visible  decoration-clone w-fit'
       }
       {...props}
     >

public/hourcoding/Hourcoding_Main2.png

@@ -19,7 +19,10 @@ const Footer = () => {
       width={'100%'}
       overflowX={'hidden'}
       bg={'black'}
+      height={'10vh'}
       color={'white'}
+      display={'flex'}
+      justifyContent={'center'}
     >
       <HoverBorderGradient>
         <FooterEndText />

public/hourcoding/Hourcoding_Main3.png

@@ -1,3 +1,7 @@
+import { useEffect, useState } from 'react';
+import { motion, useScroll, useTransform } from 'framer-motion';
+import { Carousel } from 'react-responsive-carousel';
+
 import { PROJECT_NAME_ICON_MAP, StarIcon, StarTrekIcon } from '@assets';
 import {
   HStack,
@@ -11,8 +15,8 @@ import {
 } from '@chakra-ui/react';
 import { AnimatedModal, Chip, CardSpotlight } from '@components';
 import { ProjectItemType } from '@data';
-import { Carousel } from 'react-responsive-carousel';
 import CustomIconButton from './CustomIconButton';
+import { useMoveToTop } from '@hooks';
 
 const ProjectItem = ({
   title,
@@ -25,13 +29,29 @@ const ProjectItem = ({
   tags,
   demoVideo,
 }: ProjectItemType & { index: number }) => {
-  const handleClick = () => {
-    const element = document.getElementById('project-images');
-    element?.scrollIntoView({
-      behavior: 'smooth',
-      block: 'end',
-    });
-  };
+  const handleClick = useMoveToTop();
+  const { scrollY } = useScroll();
+  const top = useTransform(scrollY, [300, 1000], [0, 50]);
+  const [blur, setBlur] = useState<boolean>(false);
+
+  useEffect(() => {
+    window.scrollTo({ top: 700 });
+  }, [scrollY]);
+
+  useEffect(() => {
+    // Add scroll event listener without using framer-motion
+    const handleScroll = () => {
+      if (window.scrollY > 300) {
+        setBlur(false);
+      } else {
+        setBlur(true);
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [scrollY]);
 
   return (
     <VStack
@@ -40,14 +60,76 @@ const ProjectItem = ({
       zIndex={1}
       position={'sticky'}
       top={'15vh'}
-      gap={20}
       overflowX={'hidden'}
     >
+      {image ? (
+        <motion.div
+          animate={blur ? 'visible' : 'hidden'}
+          variants={{
+            hidden: {
+              filter: 'blur(5px)',
+              opacity: 0.5,
+            },
+            visible: {
+              filter: 'blur(0px)',
+              opacity: 1,
+            },
+          }}
+          transition={{ duration: 1 }}
+          style={{
+            width: '100%',
+            position: 'fixed',
+            top: top,
+          }}
+          id="project-images"
+        >
+          <Carousel
+            dynamicHeight={false}
+            axis="horizontal"
+            showStatus={false}
+            emulateTouch
+            autoPlay
+            showThumbs={false}
+            infiniteLoop
+            interval={5000}
+            showArrows={true}
+            showIndicators={false}
+            // renderIndicator={(clickHandler, isSelected) => (
+            //   <Box
+            //     h={2}
+            //     w={2}
+            //     top={0}
+            //     marginX={1}
+            //     display={'inline-block'}
+            //     bg={isSelected ? 'violet' : 'white'}
+            //     borderRadius={'50%'}
+            //     _hover={{ bg: 'black' }}
+            //     onClick={clickHandler}
+            //   />
+            // )}
+            stopOnHover
+            width={'100%'}
+          >
+            {image.map((img) => (
+              <Img
+                width={'80vh'}
+                key={img}
+                src={'../../' + img}
+                alt={title}
+                loading="lazy"
+              />
+            ))}
+          </Carousel>
+        </motion.div>
+      ) : null}
       <Box
         style={{
           width: '100%',
           overflowX: 'hidden',
+          marginTop: '100vh',
         }}
+        my={2}
+        shadow={' 0 0 10px 1px #FFFFFFfA'}
       >
         <CardSpotlight>
           <VStack
@@ -104,47 +186,6 @@ const ProjectItem = ({
           </VStack>
         </CardSpotlight>
       </Box>
-      {image ? (
-        <Box width={'100%'} id="project-images">
-          <Carousel
-            axis="horizontal"
-            centerMode
-            dynamicHeight
-            showStatus={false}
-            emulateTouch
-            autoPlay
-            showThumbs={false}
-            infiniteLoop
-            interval={3000}
-            showArrows={false}
-            renderIndicator={(clickHandler, isSelected) => (
-              <Box
-                h={2}
-                w={2}
-                top={0}
-                marginX={1}
-                display={'inline-block'}
-                bg={isSelected ? 'violet' : 'white'}
-                borderRadius={'50%'}
-                _hover={{ bg: 'black' }}
-                onClick={clickHandler}
-              />
-            )}
-            stopOnHover
-            width={'100%'}
-          >
-            {image.map((img) => (
-              <Img
-                width={'80vh'}
-                key={img}
-                src={'../../' + img}
-                alt={title}
-                loading="lazy"
-              />
-            ))}
-          </Carousel>
-        </Box>
-      ) : null}
     </VStack>
   );
 };