fix ui

src/components/design/Marquee.vue

@@ -1,5 +1,4 @@
 <template>
-  isSmallScreen: {{ isSmallScreen }}
   <section
     v-if="!isSmallScreen"
     id="marquee-section"
@@ -429,7 +428,7 @@
 
 <script setup lang="ts">
   import gsap from 'gsap';
-  import { Observer, ScrollToPlugin } from 'gsap/all';
+  import { ScrollToPlugin } from 'gsap/all';
 
   import { computed, onMounted, ref } from 'vue';
   import { useWindowSize } from '@vueuse/core';
@@ -444,15 +443,14 @@
     document.getElementById('logos') as HTMLElement,
   );
 
-  gsap.registerPlugin(Observer);
+  // gsap.registerPlugin(Observer);
   gsap.registerPlugin(ScrollToPlugin);
 
   onMounted(() => {
     if (!isSmallScreen.value) {
       const marquees = gsap.utils.toArray('.marquee') as HTMLElement[];
 
       gsap.registerPlugin(ScrollTrigger);
-      gsap.registerPlugin(Observer);
 
       // Animate marquees
       marquees.forEach((marquee, index) => {
@@ -477,42 +475,19 @@
               trigger: '#marquee-section',
               start: 'top bottom',
               end: 'bottom top',
-              scrub: true,
+              scrub: 2,
               // markers: false,
             },
           },
         );
       });
 
       // Animate logos
-
       const logos = gsap.utils.toArray('.logos-marquee div');
       const tl = horizontalLoop(logos, {
         repeat: -1,
         paddingRight: 40,
-      });
-
-      Observer.create({
-        type: 'wheel',
-        onChangeY(self) {
-          let factor = 1.5;
-          if (self.deltaY < 0) {
-            factor *= -1;
-          }
-          gsap
-            .timeline({
-              defaults: {
-                ease: 'none',
-              },
-            })
-
-            .to(tl, { timeScale: factor, duration: 0.2 });
-          //   .to(
-          //     tl,
-          //     { timeScale: factor / 2.5, duration: 1, ease: 'power1' },
-          //     '+=0.3',
-          //   );
-        },
+        speed: 0.6,
       });
     }
   });

src/components/design/index.ts

@@ -1,13 +1,14 @@
-import Circles from './Circles.vue';
-import MyName from './MyName.vue';
-import Star from './Star.vue';
-import LoadingScreen from './LoadingScreen.vue';
-import SamsungError from './SamsungError.vue';
-import Marquee from './Marquee.vue';
-import Slider from './Slider.vue';
-import Footer from './Footer.vue';
+import { defineAsyncComponent } from 'vue';
 
-import Cursor from './Cursor.vue';
+const Circles = defineAsyncComponent(() => import('./Circles.vue'));
+const MyName = defineAsyncComponent(() => import('./MyName.vue'));
+const Star = defineAsyncComponent(() => import('./Star.vue'));
+const LoadingScreen = defineAsyncComponent(() => import('./LoadingScreen.vue'));
+const SamsungError = defineAsyncComponent(() => import('./SamsungError.vue'));
+const Marquee = defineAsyncComponent(() => import('./Marquee.vue'));
+const Slider = defineAsyncComponent(() => import('./Slider.vue'));
+const Footer = defineAsyncComponent(() => import('./Footer.vue'));
+const Cursor = defineAsyncComponent(() => import('./Cursor.vue'));
 
 export {
   Circles,

src/components/sections/People.vue

@@ -2,7 +2,7 @@
   <!-- common-padding  -->
   <section
     id="testimonials-section"
-    class="common-padding relative mx-auto min-h-svh overflow-y-clip py-0 will-change-transform"
+    class="common-padding relative mx-auto min-h-svh overflow-y-clip py-0 will-change-auto"
   >
     <div
       class="grid w-full grid-cols-12 border-b-[1px] border-flax-smoke-300 pb-[clamp(2.25rem,2.1786rem_+_0.3571vi,2.5rem)]"

src/components/sections/aboutMe.vue

@@ -1,7 +1,7 @@
 <template>
   <section
     id="about-me-section"
-    class="common-padding relative z-10 overflow-y-clip rounded-b-3xl bg-[#0B0B0A] text-flax-smoke-200 shadow-2xl will-change-transform sm:mt-0"
+    class="common-padding relative z-10 overflow-y-clip rounded-b-3xl bg-[#0B0B0A] text-flax-smoke-200 shadow-2xl will-change-auto sm:mt-0"
   >
     <div class="md:column-gap grid grid-cols-12">
       <div class="hide-on-mobile overflow-hidden md:col-span-4">

src/components/sections/index.ts

@@ -1,11 +1,12 @@
 import { defineAsyncComponent } from 'vue';
 
 import Hero from './Hero.vue';
+import Contact from './Contact.vue';
 
 const Services = defineAsyncComponent(() => import('./Services.vue'));
 const Works = defineAsyncComponent(() => import('./Works.vue'));
 const aboutMe = defineAsyncComponent(() => import('./aboutMe.vue'));
 const People = defineAsyncComponent(() => import('./People.vue'));
-const Contact = defineAsyncComponent(() => import('./Contact.vue'));
+// const Contact = defineAsyncComponent(() => import('./Contact.vue'));
 
 export { Hero, Services, Works, aboutMe, People, Contact };