minor tweaks and polish

src/pages/about.astro

@@ -7,7 +7,6 @@ import { readSingleton, readItems } from '@directus/sdk';
 
 const global = await directus.request(readSingleton('global'));
 const about = await directus.request(readSingleton('about'));
-
 const skills = await directus.request(
   readItems('skills', {
     fields: ['*'],
@@ -20,17 +19,14 @@ const skills = await directus.request(
     class="theme-transition-all mx-auto max-w-6xl px-4 py-8 sm:px-6 sm:py-12 md:py-16"
     transition:animate="slide"
   >
-    <!-- Hero Section -->
+    <!-- Introduction Section -->
     <div class="relative mb-12 sm:mb-16 md:mb-20">
       <div class="relative grid grid-cols-1 items-center gap-8 md:grid-cols-2 md:gap-12">
         <div class="hero-text order-2 text-center md:order-1 md:text-left">
           <h1
             class="theme-transition-color hero-text mb-4 text-3xl font-bold tracking-tight text-zinc-900 sm:mb-6 sm:text-4xl md:text-5xl dark:text-zinc-100"
           >
-            Hello, I'm <span
-              class="theme-transition-all bg-gradient-to-r from-zinc-500 to-zinc-900 bg-clip-text text-transparent dark:from-zinc-300 dark:to-zinc-100"
-              >{global.name}</span
-            >
+            Hello, I'm <span class="theme-transition-all bg-clip-text">{global.name}</span>
           </h1>
 
           <p
@@ -38,12 +34,6 @@ const skills = await directus.request(
           >
             {about.background}
           </p>
-
-          <div
-            class="social-links-container theme-transition-children flex flex-wrap justify-center gap-4 md:justify-start"
-          >
-            <!-- Social links remain the same -->
-          </div>
         </div>
 
         <div class="relative order-1 md:order-2">
@@ -61,7 +51,7 @@ const skills = await directus.request(
       </div>
     </div>
 
-    <!-- About Section -->
+    <!-- About Me section -->
     <div class="theme-transition-all mb-16 sm:mb-20 md:mb-24">
       <div class="mx-auto max-w-3xl">
         <h2
@@ -111,10 +101,7 @@ const skills = await directus.request(
         <div class="slider-track animate-slide flex">
           {
             [...skills, ...skills, ...skills].map((skill, index) => (
-              <div
-                key={`${skill.title}-${index}`}
-                class="skill-card theme-transition-element mx-2 min-w-[220px] transform rounded-xl border border-zinc-200 bg-white transition-all duration-300 hover:-translate-y-2 hover:scale-105 hover:border-zinc-300 hover:shadow-xl sm:mx-4 sm:min-w-[280px] dark:border-zinc-700 dark:bg-zinc-800/50 dark:hover:border-zinc-600"
-              >
+              <div class="skill-card theme-transition-element Ztransition-all mx-2 min-w-[220px] transform rounded-xl border border-zinc-300 bg-white duration-300 hover:-translate-y-2 hover:scale-105 hover:border-zinc-200 hover:shadow-xl sm:mx-4 sm:min-w-[280px] dark:border-zinc-700 dark:bg-zinc-900 dark:hover:border-zinc-800 dark:hover:bg-zinc-900">
                 <div class="p-4 sm:p-6">
                   <div class="mb-4 flex items-center justify-between sm:mb-6">
                     <div class="flex items-center gap-2 sm:gap-4">
@@ -158,6 +145,7 @@ const skills = await directus.request(
         </div>
       </div>
     </div>
+
     <!-- Contact Section -->
     <div class="theme-transition-all mx-auto max-w-3xl text-center">
       <h2
@@ -222,45 +210,13 @@ const skills = await directus.request(
     animateContent();
 
     // Create seamless infinite scrolling effect
-    const sliderTrack = document.querySelector('.slider-track');
     function setupInfiniteScroll() {
       const cards = document.querySelectorAll('.skill-card');
       if (!cards.length) return;
-
-      // Set proper animation based on screen size
-      function updateScrollAnimation() {
-        if (window.innerWidth >= 640) {
-          sliderTrack.style.animation = 'scroll 60s linear infinite';
-        } else {
-          sliderTrack.style.animation = 'scroll 40s linear infinite';
-        }
-      }
-
-      updateScrollAnimation();
-      window.addEventListener('resize', updateScrollAnimation);
     }
 
     setupInfiniteScroll();
 
-    // Pause animation on hover/touch
-    sliderTrack?.addEventListener('mouseenter', () => {
-      sliderTrack.style.animationPlayState = 'paused';
-    });
-
-    sliderTrack?.addEventListener('touchstart', () => {
-      sliderTrack.style.animationPlayState = 'paused';
-    });
-
-    sliderTrack?.addEventListener('mouseleave', () => {
-      sliderTrack.style.animationPlayState = 'running';
-    });
-
-    sliderTrack?.addEventListener('touchend', () => {
-      setTimeout(() => {
-        sliderTrack.style.animationPlayState = 'running';
-      }, 1000); // Delay resuming animation after touch
-    });
-
     // Add hover effects to cards - only on non-touch devices
     const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
     const cards = document.querySelectorAll('.skill-card');
@@ -308,18 +264,6 @@ const skills = await directus.request(
         });
       });
     }
-
-    // Handle theme transition
-    document.addEventListener('themeChange', () => {
-      cards.forEach((card, index) => {
-        setTimeout(() => {
-          card.classList.add('theme-changing');
-          setTimeout(() => {
-            card.classList.remove('theme-changing');
-          }, 600);
-        }, index * 50);
-      });
-    });
   });
 </script>
 
@@ -442,36 +386,4 @@ const skills = await directus.request(
       min-height: 44px;
     }
   }
-
-  /* Content reveal animations */
-  .hero-text h1,
-  .hero-text span,
-  .hero-text p,
-  .hero-text ~ div {
-    opacity: 0;
-    transform: translateY(20px);
-    transition:
-      opacity 0.8s ease,
-      transform 0.8s ease;
-  }
-
-  .animate-reveal {
-    opacity: 1 !important;
-    transform: translateY(0) !important;
-  }
-
-  /* Theme transition effect */
-  :global(.theme-switching) .theme-transition-element {
-    animation: fadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-  }
-
-  /* Smooth card transition during theme switch */
-  .skill-card.theme-transition-element {
-    transition:
-      background-color var(--theme-transition),
-      border-color var(--theme-transition),
-      color var(--theme-transition),
-      box-shadow var(--theme-transition),
-      transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  }
 </style>