diff --git a/src/components/data-display/tech-details.tsx b/src/components/data-display/tech-details.tsx
index a6cb89d..ca957c5 100644
--- a/src/components/data-display/tech-details.tsx
+++ b/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>
   );
diff --git a/src/hooks/Reavel.tsx b/src/hooks/Reavel.tsx
index e429f1e..69ec8a5 100644
--- a/src/hooks/Reavel.tsx
+++ b/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>
-//     );
-// }
\ No newline at end of file
diff --git a/src/hooks/scrollAnimation.tsx b/src/hooks/scrollAnimation.tsx
index 06388fa..4205102 100644
--- a/src/hooks/scrollAnimation.tsx
+++ b/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>;
-// }
\ No newline at end of file
diff --git a/src/hooks/skillsReavel.tsx b/src/hooks/skillsReavel.tsx
deleted file mode 100644
index e60efc4..0000000
--- a/src/hooks/skillsReavel.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-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>
-    );
-}