Refactor components for improved animations and layout consistency

dacrab · dacrab · commit 5b771d495d6f · 2025-06-12T12:34:51.000+03:00
- Updated About, Contact, Experience, Projects, and Hero components to enhance scroll-based animations and layout responsiveness.
- Replaced motion.div with div in several components for better performance and simplified structure.
- Adjusted ParallaxLayer speeds and transform values for smoother visual effects.
- Streamlined code by removing unused imports and optimizing animation settings across components.
diff --git a/src/components/About.tsx b/src/components/About.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useRef } from "react";
-import { motion, useScroll, useTransform } from "framer-motion";
+import { useScroll, useTransform } from "framer-motion";
 import BioSection from "./About/BioSection";
 import ProfileImage from "./About/ProfileImage";
 import SwissMotion from "./SwissMotion";
@@ -19,7 +19,8 @@ export default function About() {
     offset: ["start end", "end start"]
   });
 
-  const contentY = useTransform(scrollYProgress, [0, 1], [30, -30]);
+  const bioY = useTransform(scrollYProgress, [0, 1], [50, -50]);
+  const profileY = useTransform(scrollYProgress, [0, 1], [10, -10]);
   
   // Signature "About" section animations - multiple diagonal lines
   const diagonalCount = 5;
@@ -32,7 +33,7 @@ export default function About() {
       className="py-24 md:py-32 relative overflow-hidden"
     >
       {/* Swiss style accent elements with unique About section animations */}
-      <ParallaxLayer speed={0.15} direction="left" className="absolute right-0 top-1/4 z-0">
+      <ParallaxLayer speed={0.35} direction="left" className="absolute right-0 top-1/4 z-0">
         <ShapeAnimation 
           type="line" 
           color="var(--accent)" 
@@ -48,7 +49,7 @@ export default function About() {
       {diagonals.map((_, i) => (
         <ParallaxLayer 
           key={`diagonal-${i}`} 
-          speed={0.05 + (i * 0.02)} 
+          speed={0.1 + (i * 0.04)} 
           direction="right" 
           className={`absolute left-1/4 z-0`}
           style={{ top: `${20 + (i * 12)}%` }}
@@ -65,7 +66,7 @@ export default function About() {
         </ParallaxLayer>
       ))}
       
-      <ParallaxLayer speed={0.2} direction="up" className="absolute left-16 top-16 z-0">
+      <ParallaxLayer speed={0.4} direction="up" className="absolute left-16 top-16 z-0">
         <ShapeAnimation 
           type="square" 
           color="var(--accent-tertiary)" 
@@ -87,15 +88,13 @@ export default function About() {
         />
 
         {/* Content with Swiss style grid and alternating animations */}
-        <motion.div 
-          className="swiss-grid"
-          style={{ y: contentY }}
-        >
+        <div className="swiss-grid">
           <SwissMotion 
             type="slide" 
             delay={0.3} 
             duration={0.7}
             className="swiss-asymmetric-left"
+            style={{ y: bioY }}
           >
             <BioSection />
           </SwissMotion>
@@ -105,10 +104,11 @@ export default function About() {
             delay={0.5} 
             duration={0.8}
             className="swiss-asymmetric-right mt-12 md:mt-0"
+            style={{ y: profileY }}
           >
             <ProfileImage />
           </SwissMotion>
-        </motion.div>
+        </div>
         
         {/* About section signature: Staggered grid of squares at the bottom */}
         <SwissMotion type="stagger" staggerChildren={0.05} delay={0.7} className="mt-16 grid grid-cols-6 md:grid-cols-12 gap-2 max-w-4xl mx-auto">
diff --git a/src/components/Contact.tsx b/src/components/Contact.tsx
@@ -17,7 +17,8 @@ export default function Contact() {
     offset: ["start end", "end start"]
   });
 
-  const contentY = useTransform(scrollYProgress, [0, 1], [20, -20]);
+  const contactInfoY = useTransform(scrollYProgress, [0, 1], [-10, 30]);
+  const socialLinksY = useTransform(scrollYProgress, [0, 1], [10, -30]);
 
   return (
     <section
@@ -28,7 +29,7 @@ export default function Contact() {
       {/* Simplified background elements */}
       <div className="absolute inset-0 z-0 overflow-hidden">
         {/* Single horizontal line animation */}
-        <ParallaxLayer speed={0.1} direction="right" className="absolute left-0 top-1/3 z-0">
+        <ParallaxLayer speed={0.25} direction="right" className="absolute left-0 top-1/3 z-0">
           <ShapeAnimation 
             type="line" 
             color="var(--accent)" 
@@ -41,7 +42,7 @@ export default function Contact() {
         </ParallaxLayer>
         
         {/* Single clean geometric shape */}
-        <ParallaxLayer speed={0.08} direction="up" className="absolute right-16 bottom-1/4 z-0">
+        <ParallaxLayer speed={0.35} direction="up" className="absolute right-16 bottom-1/4 z-0">
           <ShapeAnimation 
             type="square" 
             color="var(--accent-secondary)" 
@@ -64,16 +65,16 @@ export default function Contact() {
           className="mb-16 md:mb-20"
         />
 
-        <motion.div
+        <div
           className="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-12"
-          style={{ y: contentY }}
         >
           {/* Contact Information - Cleaner layout */}
           <SwissMotion 
             type="slide" 
             delay={0.3} 
             duration={0.6} 
             className="lg:col-span-5"
+            style={{ y: contactInfoY }}
           >
             <div className="swiss-card relative overflow-hidden p-8 md:p-10">
               {/* Swiss style accent line */}
@@ -137,6 +138,7 @@ export default function Contact() {
             delay={0.4} 
             duration={0.6} 
             className="lg:col-span-7"
+            style={{ y: socialLinksY }}
           >
             <div className="swiss-card relative p-8 md:p-10">
               {/* Swiss style accent lines */}
@@ -207,7 +209,7 @@ export default function Contact() {
               </div>
             </div>
           </SwissMotion>
-        </motion.div>
+        </div>
 
         {/* Refined footer note */}
         <SwissMotion type="fade" delay={0.7} className="mt-16 text-center flex flex-col items-center">
diff --git a/src/components/Experience.tsx b/src/components/Experience.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useRef, useMemo } from "react";
-import { motion, useInView } from "framer-motion";
+import { motion, useInView, useScroll, useTransform } from "framer-motion";
 import { useIsMobile } from "@/hooks/useIsMobile";
 import { SectionHeader } from "./common";
 
@@ -19,6 +19,11 @@ const getCircleCounts = (isMobile: boolean) => isMobile ? [1, 2] : [1, 2, 3];
 
 export default function Experience() {
   const isMobile = useIsMobile();
+  const ref = useRef<HTMLElement>(null);
+  const { scrollYProgress } = useScroll({
+    target: ref,
+    offset: ["start end", "end start"]
+  });
   
   // Memoized constants based on device
   const LINE_COUNT = useMemo(() => getLineCount(isMobile), [isMobile]);
@@ -28,6 +33,9 @@ export default function Experience() {
   const getOptimizedDelay = (baseDelay: number) => isMobile ? baseDelay * 0.7 : baseDelay;
   const getOptimizedDuration = (baseDuration: number) => isMobile ? baseDuration * 0.6 : baseDuration;
   
+  const lottieAndSkillsY = useTransform(scrollYProgress, [0, 1], [-20, 20]);
+  const timelineY = useTransform(scrollYProgress, [0, 1], [-40, 40]);
+
   // Refs for scroll animations
   const refs = {
     skills: useRef<HTMLDivElement>(null),
@@ -43,14 +51,14 @@ export default function Experience() {
   };
 
   return (
-    <section id="experience" className="py-24 md:py-32 relative overflow-hidden">
+    <section id="experience" ref={ref} className="py-24 md:py-32 relative overflow-hidden">
       {/* Decorative background elements - conditionally rendered and simplified for mobile */}
       {(!isMobile || (isMobile && LINE_COUNT > 0)) && (
         <div className="absolute left-4 md:left-12 top-0 bottom-0 w-12 z-0 flex flex-col justify-around">
           {Array.from({ length: LINE_COUNT }).map((_, i) => (
             <ParallaxLayer 
               key={`line-${i}`} 
-              speed={isMobile ? 0.03 : 0.05 + (i * 0.03)} 
+              speed={isMobile ? 0.1 : 0.2 + (i * 0.05)} 
               direction={i % 2 ? "left" : "right"}
             >
               <ShapeAnimation 
@@ -74,7 +82,7 @@ export default function Experience() {
           {CIRCLE_COUNTS.map((i) => (
             <ParallaxLayer 
               key={`circle-${i}`} 
-              speed={isMobile ? 0.05 * i : 0.1 * i} 
+              speed={isMobile ? 0.15 * i : 0.25 * i} 
               direction={i % 2 ? "right" : "left"}
             >
               <ShapeAnimation 
@@ -104,6 +112,7 @@ export default function Experience() {
 
         <motion.div 
           className="max-w-6xl mx-auto mb-16"
+          style={{ y: lottieAndSkillsY, willChange: 'transform' }}
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           transition={{ 
@@ -162,6 +171,7 @@ export default function Experience() {
           duration={getOptimizedDuration(0.8)} 
           className="mt-16 pt-16 border-t border-[var(--border)]"
           mobileOptimized={true}
+          style={{ y: timelineY, willChange: 'transform' }}
         >
           <SwissMotion 
             type={isMobile ? "fade" : "slide"} 
diff --git a/src/components/Hero/BackgroundElements.tsx b/src/components/Hero/BackgroundElements.tsx
@@ -24,7 +24,7 @@ const BackgroundElements = memo(function BackgroundElements({ isMobile }: Backgr
           <div className="absolute top-0 left-0 w-[200%] h-[2px] bg-[var(--accent)] origin-top-left rotate-45 transform -translate-x-1/4"></div>
         </SwissMotion>
 
-        <ParallaxLayer speed={0.3} direction="up" className="absolute bottom-16 left-0 -z-10">
+        <ParallaxLayer speed={0.4} direction="up" className="absolute bottom-16 left-0 -z-10">
           <ShapeAnimation 
             type="square" 
             color="var(--accent-secondary)" 
@@ -36,7 +36,7 @@ const BackgroundElements = memo(function BackgroundElements({ isMobile }: Backgr
           />
         </ParallaxLayer>
         
-        <ParallaxLayer speed={0.25} direction="left" className="absolute top-24 left-1/4 -z-10">
+        <ParallaxLayer speed={0.35} direction="left" className="absolute top-24 left-1/4 -z-10">
           <ShapeAnimation 
             type="triangle" 
             color="var(--accent)" 
@@ -48,7 +48,7 @@ const BackgroundElements = memo(function BackgroundElements({ isMobile }: Backgr
           />
         </ParallaxLayer>
         
-        <ParallaxLayer speed={0.35} direction="right" className="absolute top-32 right-8 -z-10">
+        <ParallaxLayer speed={0.45} direction="right" className="absolute top-32 right-8 -z-10">
           <ShapeAnimation 
             type="circle" 
             color="var(--accent-tertiary)" 
@@ -60,7 +60,7 @@ const BackgroundElements = memo(function BackgroundElements({ isMobile }: Backgr
           />
         </ParallaxLayer>
 
-        <ParallaxLayer speed={0.4} direction="right" className="absolute bottom-40 right-5 -z-10">
+        <ParallaxLayer speed={0.5} direction="right" className="absolute bottom-40 right-5 -z-10">
           <ShapeAnimation 
             type="diagonal" 
             color="var(--accent-secondary)" 
@@ -88,7 +88,7 @@ const BackgroundElements = memo(function BackgroundElements({ isMobile }: Backgr
       </SwissMotion>
 
       {/* Dynamic accent shapes */}
-      <ParallaxLayer speed={0.2} direction="up" className="absolute bottom-16 left-16 -z-10">
+      <ParallaxLayer speed={0.35} direction="up" className="absolute bottom-16 left-16 -z-10">
         <ShapeAnimation 
           type="square" 
           color="var(--accent-secondary)" 
@@ -99,7 +99,7 @@ const BackgroundElements = memo(function BackgroundElements({ isMobile }: Backgr
         />
       </ParallaxLayer>
       
-      <ParallaxLayer speed={0.3} direction="down" className="absolute top-32 right-32 -z-10">
+      <ParallaxLayer speed={0.45} direction="up" className="absolute top-32 right-32 -z-10">
         <ShapeAnimation 
           type="circle" 
           color="var(--accent-tertiary)" 
@@ -111,7 +111,7 @@ const BackgroundElements = memo(function BackgroundElements({ isMobile }: Backgr
       </ParallaxLayer>
       
       {/* Additional energetic shapes */}
-      <ParallaxLayer speed={0.15} direction="left" className="absolute top-40 left-1/4 -z-10">
+      <ParallaxLayer speed={0.55} direction="right" className="absolute top-40 left-1/4 -z-10">
         <ShapeAnimation 
           type="triangle" 
           color="var(--accent)" 
@@ -123,7 +123,7 @@ const BackgroundElements = memo(function BackgroundElements({ isMobile }: Backgr
         />
       </ParallaxLayer>
       
-      <ParallaxLayer speed={0.25} direction="right" className="absolute bottom-40 right-1/3 -z-10">
+      <ParallaxLayer speed={0.65} direction="right" className="absolute bottom-40 right-1/3 -z-10">
         <ShapeAnimation 
           type="diagonal" 
           color="var(--accent-secondary)" 
@@ -134,6 +134,18 @@ const BackgroundElements = memo(function BackgroundElements({ isMobile }: Backgr
           loop={true}
         />
       </ParallaxLayer>
+
+      <ParallaxLayer speed={0.85} direction="left" className="absolute bottom-1/3 left-1/4 -z-10">
+        <ShapeAnimation
+          type="cross"
+          color="var(--accent)"
+          size={40}
+          variant="draw"
+          delay={1.1}
+          duration={1.5}
+          loop={true}
+        />
+      </ParallaxLayer>
     </>
   );
 });
diff --git a/src/components/Hero/HeroVisual.tsx b/src/components/Hero/HeroVisual.tsx
@@ -5,28 +5,31 @@ import SwissMotion from "../SwissMotion";
 import AccentBorders from "./visual/AccentBorders";
 import GridCanvas from "./visual/GridCanvas";
 import { ANIMATION } from "./constants";
+import ParallaxLayer from "../ParallaxLayer";
 
 /**
  * Visual Swiss design grid display for the right side of the hero section
  */
 const HeroVisual = memo(function HeroVisual() {
   return (
     <div className="swiss-asymmetric-right flex items-center justify-center relative">
-      <SwissMotion
-        type="scale"
-        delay={0.5}
-        duration={ANIMATION.duration.medium}
-        className="relative"
-      >
-        {/* Swiss style grid pattern */}
-        <div className="w-60 h-60 md:w-80 md:h-80 lg:w-96 lg:h-96 swiss-grid-pattern relative">
-          {/* Accent shapes for Swiss style */}
-          <AccentBorders />
-          
-          {/* Dynamic Swiss-style visual elements */}
-          <GridCanvas />
-        </div>
-      </SwissMotion>
+      <ParallaxLayer speed={0.1} direction="down">
+        <SwissMotion
+          type="scale"
+          delay={0.5}
+          duration={ANIMATION.duration.medium}
+          className="relative"
+        >
+          {/* Swiss style grid pattern */}
+          <div className="w-60 h-60 md:w-80 md:h-80 lg:w-96 lg:h-96 swiss-grid-pattern relative">
+            {/* Accent shapes for Swiss style */}
+            <AccentBorders />
+            
+            {/* Dynamic Swiss-style visual elements */}
+            <GridCanvas />
+          </div>
+        </SwissMotion>
+      </ParallaxLayer>
     </div>
   );
 });
diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx
