update

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

@@ -5,27 +5,22 @@ import Typography from '@/components/general/typography';
 import Link from '@/components/navigation/link';
 import ImageWrapper from '@/components/data-display/image-wrapper';
 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>
-        <SkillsReavel>
-          <Link noCustomization href={url} externalLink>
-            <ImageWrapper
-              src={logo}
-              srcForDarkMode={darkModeLogo}
-              alt={label}
-              className="transition-transform duration-300 md:hover:scale-110"
-            />
-          </Link>
-        </SkillsReavel>
+        <Link noCustomization href={url} externalLink>
+          <ImageWrapper
+            src={logo}
+            srcForDarkMode={darkModeLogo}
+            alt={label}
+            className="transition-transform duration-300 md:hover:scale-110"
+          />
+        </Link>
       </ScrollAnimation>
       <ScrollAnimation>
-        <SkillsReavel>
-          <Typography variant="body1">{label}</Typography>
-        </SkillsReavel>
+        <Typography variant="body1">{label}</Typography>
       </ScrollAnimation>
     </div>
   );

src/hooks/Reavel.tsx

@@ -55,54 +55,3 @@ export default function Reavel({ children, width = "fit-content" }: Props){
         </div>
     );
 }
-
-
-// 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: 0.5, delay: 0.25}}
-//                 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.5, ease: "easeIn", delay: 0.1}}
-//             style ={{
-//                 position: "absolute",
-//                 top: 4,
-//                 bottom: 4,
-//                 left: 0,
-//                 right: 0,
-//                 background: "#b6d3e9",
-//                 zIndex: 20,
-//             }}
-//             />
-//         </div>
-//     );
-// }

src/hooks/scrollAnimation.tsx

@@ -30,32 +30,3 @@ const ScrollAnimation = ({ children }: any) => {
     )
 }
 export default ScrollAnimation;
-
-// import React, { useRef, useEffect } from "react";
-
-// interface Props {
-//     children: JSX.Element;
-// }
-
-// export default function ScrollAnimation({ children }: Props) {
-//     const ref = useRef<HTMLDivElement>(null);
-
-//     useEffect(() => {
-//         const element = ref.current;
-//         if (element) {
-//             const handleScroll = () => {
-//                 const scrollTop = window.pageYOffset + window.innerHeight;
-//                 const elementTop = element.offsetTop + element.offsetHeight / 2;
-//                 if (scrollTop > elementTop) {
-//                     element.classList.add("animate");
-//                 } else {
-//                     element.classList.remove("animate");
-//                 }
-//             };
-//             window.addEventListener("scroll", handleScroll);
-//             return () => window.removeEventListener("scroll", handleScroll);
-//         }
-//     }, [ref]);
-
-//     return <div ref={ref}>{children}</div>;
-// }