save

Author: LeoGytis

src/components/About.tsx

@@ -5,6 +5,8 @@ const About: any = () => {
   const { elementRef, inView } = useIntersectionObserver({
     threshold: 0.8,
     rootMargin: '0px',
+    mobileThreshold: 0.5,
+    mobileRootMargin: '-50px',
   });
 
   return (

src/components/Education.tsx

@@ -8,6 +8,8 @@ const Education: any = () => {
   const { elementRef, inView } = useIntersectionObserver({
     threshold: 0.8,
     rootMargin: '0px',
+    mobileThreshold: 0.5,
+    mobileRootMargin: '-50px',
   });
 
   return (

src/components/ExperienceWrapper.tsx

@@ -23,31 +23,33 @@ const ExperienceWrapper = ({
 }: ExperienceProps) => {
   const { elementRef, inView } = useIntersectionObserver({
     threshold: 0.8,
-    rootMargin: '0px',
+    rootMargin: '-150px',
+    mobileThreshold: 0.5,
+    mobileRootMargin: '-50px',
   });
 
-  console.log('🔥 : inView =>', inView);
-
   return (
     <div
       ref={elementRef}
-      className={cn(
-        'p-4 mb-12 hover:shadow-border group hover:bg-background',
-        inView && 'md:bg-transparent md:shadow-none bg-background shadow-border'
-      )}
+      className={cn('p-4 mb-12 group', inView && 'bg-background shadow-border')}
     >
       <div className="flex gap-4 mb-4">
         <Image src={imageSrc} alt={title} className="w-16 h-16 rounded" />
         <div>
           <Link
             href={link}
             className={cn(
-              'text-xl font-semibold w-fit md:whitespace-nowrap group-hover:text-secondary underline-animation',
-              inView && 'text-secondary !text-red-300'
+              'text-white flex items-center gap-1 text-xl font-semibold whitespace-nowrap underline-animation',
+              inView && 'text-secondary'
             )}
           >
             {title}
-            <BsLink45Deg className="absolute top-[6px] right-[-20px] text-secondary link-icon" />
+            <BsLink45Deg
+              className={cn(
+                'opacity-0 text-secondary transition-all duration-500 ease-out',
+                inView && 'opacity-100'
+              )}
+            />
           </Link>
           <h2>{role}</h2>
           <h5 className="text-xs">{date}</h5>

src/components/ProjectWrapper.tsx

@@ -31,7 +31,9 @@ const Project = ({
   const [open, setOpen] = useState(false);
   const { elementRef, inView } = useIntersectionObserver({
     threshold: 0.8,
-    rootMargin: '0px',
+    rootMargin: '-150px',
+    mobileThreshold: 0.5,
+    mobileRootMargin: '-50px',
   });
   const imageSrc = imageCount
     ? `/images/projects/${gallerySrc}/${gallerySrc}01.jpg`
@@ -42,16 +44,16 @@ const Project = ({
     <div
       ref={elementRef}
       className={cn(
-        'p-4 mb-12 lg:mb-24 hover:shadow-border group hover:bg-background',
-        inView && 'bg-background shadow-border md:bg-transparent md:shadow-none'
+        'p-4 mb-12 lg:mb-24 group',
+        inView && 'bg-background shadow-border'
       )}
     >
-      <div className="flex w-full gap-6 max-md:flex-col">
+      <div className="flex w-full gap-6 max-md:flex-col group">
         <div
           onClick={() => {
             setOpen(true);
           }}
-          className="h-full overflow-hidden rounded-lg cursor-pointer md:w-2/5 shadow-border"
+          className="h-full overflow-hidden rounded-lg cursor-pointer md:w-2/5 group-hover:shadow-border"
         >
           <Image
             src={imageSrc}
@@ -65,16 +67,15 @@ const Project = ({
           <Link
             href={link}
             className={cn(
-              'mb-2 text-xl font-semibold whitespace-nowrap group-hover:text-secondary underline-animation',
+              'text-white flex items-center gap-1 mb-2 text-xl font-semibold whitespace-nowrap underline-animation',
               inView && 'text-secondary'
             )}
           >
             {title}
             <BsLink45Deg
               className={cn(
-                'absolute top-[6px] right-[-20px] text-secondary link-icon group-hover:visible group-hover:underline-animation',
-                inView &&
-                  'text-secondary opacity-100 visible underline-animation'
+                'opacity-0 text-secondary transition-all duration-500 ease-out',
+                inView && 'opacity-100'
               )}
             />
           </Link>

src/styles/animations.css

@@ -30,7 +30,7 @@
   display: inline-block;
   width: min-content !important;
   position: relative;
-  transition: color 0.5s ease-in-out;
+  transition: all 0.5s ease-in-out;
   color: var(--color-secondary);
 }
 
@@ -44,41 +44,14 @@
   background-color: var(--color-secondary);
   transform: scaleX(0);
   transform-origin: bottom right;
-  transition: transform 0.3s ease-out;
+  transition: transform 0.5s ease-out;
 }
 
 .underline-animation:hover:after {
   transform: scaleX(1);
   transform-origin: bottom left;
 }
 
-@media (max-width: 768px) {
-  .underline-animation:after {
-    transform: scaleX(1);
-    transform-origin: bottom left;
-  }
-}
-
-.link-icon {
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity 0.5s ease-in-out;
-}
-
-/* @media (min-width: 1024px) {
-  .group:hover .link-icon {
-    visibility: visible;
-    opacity: 1;
-  }
-}
-
-@media (max-width: 1023px) {
-  .in-view .link-icon {
-    visibility: visible;
-    opacity: 1;
-  }
-} */
-
 /* ------ Blur Animation ----- */
 
 .blur-animation {

src/styles/globals.css

@@ -57,12 +57,10 @@ h5 {
   color: var(--color-primary);
 }
 
-.shadow-border {
-  border-radius: 8px;
-  transition: all 0.5s ease-in-out !important;
-  box-shadow: 0px 0px 12px 0px var(--color-secondary) !important;
-  &:hover {
-    box-shadow: 0px 0px 12px 0px var(--color-secondary) !important;
+@layer components {
+  .shadow-border {
+    @apply transition-all duration-500 ease-in-out rounded-lg;
+    box-shadow: 0px 0px 12px 0px var(--color-secondary);
   }
 }
 

src/utils/useIntersectionObserver.ts

@@ -1,18 +1,47 @@
 import { useEffect, useRef, useState } from 'react';
 
-export const useIntersectionObserver = (options = {}) => {
+interface IntersectionOptions {
+  threshold?: number;
+  rootMargin?: string;
+  mobileThreshold?: number;
+  mobileRootMargin?: string;
+}
+
+export const useIntersectionObserver = (options: IntersectionOptions = {}) => {
   const elementRef = useRef<HTMLDivElement>(null);
   const [inView, setInView] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768); // 768px is typical mobile breakpoint
+    };
+
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
 
   useEffect(() => {
     const element = elementRef.current;
     if (!element) return;
 
-    const observer = new IntersectionObserver((entries) => {
-      entries.forEach((entry) => {
-        setInView(entry.isIntersecting);
-      });
-    }, options);
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          setInView(entry.isIntersecting);
+        });
+      },
+      {
+        threshold: isMobile
+          ? options.mobileThreshold ?? options.threshold
+          : options.threshold,
+        rootMargin: isMobile
+          ? options.mobileRootMargin ?? options.rootMargin
+          : options.rootMargin,
+      }
+    );
 
     observer.observe(element);
 
@@ -21,7 +50,7 @@ export const useIntersectionObserver = (options = {}) => {
         observer.unobserve(element);
       }
     };
-  }, [options]);
+  }, [options, isMobile]);
 
   return { elementRef, inView };
 };