update

src/components/data-display/tech-details.tsx

@@ -4,14 +4,14 @@ import { TechDetails } from '@/lib/types';
 import Typography from '@/components/general/typography';
 import Link from '@/components/navigation/link';
 import ImageWrapper from '@/components/data-display/image-wrapper';
-import Reavel from '@/hooks/Reavel';
 import ScrollAnimation from '@/hooks/scrollAnimation';
+import SkillsReavel from "@/hooks/skillsReavel";
 
 const TechDetails = ({ url, logo, darkModeLogo, label }: TechDetails) => {
   return (
     <div className="flex flex-col items-center gap-2">
       <ScrollAnimation>
-        <Reavel>
+        <SkillsReavel>
           <Link noCustomization href={url} externalLink>
             <ImageWrapper
               src={logo}
@@ -20,12 +20,12 @@ const TechDetails = ({ url, logo, darkModeLogo, label }: TechDetails) => {
               className="transition-transform duration-300 md:hover:scale-110"
             />
           </Link>
-        </Reavel>
+        </SkillsReavel>
       </ScrollAnimation>
       <ScrollAnimation>
-        <Reavel>
+        <SkillsReavel>
           <Typography variant="body1">{label}</Typography>
-        </Reavel>
+        </SkillsReavel>
       </ScrollAnimation>
     </div>
   );

src/components/sections/skills.tsx

@@ -11,16 +11,16 @@ const SkillsSection = () => {
     <Container id='skills'>
       <div className="flex flex-col items-center gap-4">
         <ScrollAnimation>
-        <div className="self-center">
-          <Tag label="Skills" />
-        </div>
+          <div className="self-center">
+            <Tag label="Skills" />
+          </div>
         </ScrollAnimation>
         <ScrollAnimation>
-        <Reavel>
-        <Typography variant="subtitle" className="max-w-xl text-center">
-          The tools and technologies I am explored in my life:
-        </Typography>
-        </Reavel>
+          <Reavel>
+            <Typography variant="subtitle" className="max-w-xl text-center">
+              The tools and technologies I am explored in my life:
+            </Typography>
+          </Reavel>
         </ScrollAnimation>
       </div>
 
@@ -29,6 +29,7 @@ const SkillsSection = () => {
           <TechDetails {...technology} key={index} />
         ))}
       </div>
+
     </Container>
   );
 };

src/hooks/skillsReavel.tsx

@@ -0,0 +1,57 @@
+import React, {useEffect, useRef} from "react";
+import { motion, useInView, useAnimation } from "framer-motion";
+
+interface Props {
+    children: JSX.Element;
+    width?: "fit-content" | "100%";
+}
+
+export default function Reavel({ children, width = "fit-content" }: Props){
+    const mainControls = useAnimation();
+    const slideControls = useAnimation();
+    const ref = useRef(null);
+    const isInView = useInView(ref, {once: true});
+    useEffect(() => {
+        if (isInView) {
+            mainControls.start("visible");
+            slideControls.start("visible");
+        }
+    }, [isInView])
+
+    return (
+        <div ref={ref} style={{ position: "relative", width, overflow: "hidden" }}>
+            <motion.div
+                ref={ref}
+                animate={mainControls}
+                initial="hidden"
+                transition={{ duration: .2}}
+                variants={{
+                    hidden: { opacity: 0, y: 75 },
+                    visible: { opacity: 1, y: 0 },
+                }}
+                style={{ width }}
+            >
+                {children}
+            </motion.div>
+            <motion.div 
+            variants={{
+                hidden: {left: "0"},
+                visible: {left: "100%"},
+            }}
+
+            initial="hidden"
+            animate={slideControls}
+            transition={{duration: 0.3, ease: "easeInOut"}}
+            style ={{
+                position: "absolute",
+                top: 4,
+                bottom: 4,
+                left: 0,
+                right: 0,
+                background: "#b6d3e930",
+                zIndex: 20,
+            }}
+            />
+        </div>
+    );
+}