footer

src/components/HeroPage.tsx

@@ -250,19 +250,41 @@ function LogosSection({ isDark }: { isDark: boolean }) {
   const logoFilter = isDark ? 'brightness-0 invert opacity-30' : 'brightness-0 opacity-25'
 
   return (
-    <section className={cn('relative border-t py-8 px-6', border)}>
-      <p className={cn('mb-6 text-center text-xs tracking-widest uppercase', text)}>
+    <section className={cn('relative border-t py-8 overflow-hidden', border)}>
+      <p className={cn('mb-6 text-center text-xs tracking-widest uppercase px-6', text)}>
         Skills
       </p>
-      <div className="mx-auto flex max-w-3xl flex-wrap items-center justify-center gap-8">
-        {LOGOS.map(l => (
-          <img key={l.alt} src={l.src} alt={l.alt} className={cn('h-5 w-auto transition-all', logoFilter)} />
-        ))}
+
+      {/* Marquee track */}
+      <div className="relative flex overflow-hidden">
+        <div
+          className="flex gap-12 items-center"
+          style={{
+            animation: 'marquee 20s linear infinite',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {/* Duplicate logos for seamless loop */}
+          {[...LOGOS, ...LOGOS].map((l, i) => (
+            <img
+              key={i}
+              src={l.src}
+              alt={l.alt}
+              className={cn('h-5 w-auto flex-shrink-0 transition-all', logoFilter)}
+            />
+          ))}
+        </div>
       </div>
+
+      <style>{`
+        @keyframes marquee {
+          0% { transform: translateX(0); }
+          100% { transform: translateX(-50%); }
+        }
+      `}</style>
     </section>
   )
 }
-
 // ─── Main export ──────────────────────────────────────────────────────────────
 
 interface HeroPageProps {