From faf1e7ec29f74cd531a76ebdc3f0803b74b560ff Mon Sep 17 00:00:00 2001
From: Mackie <iwan.mackie@gmail.com>
Date: Mon, 25 May 2026 02:13:14 +0800
Subject: [PATCH] footer

---
 src/components/HeroPage.tsx | 36 +++++++++++++++++++++++++++++-------
 1 file changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/components/HeroPage.tsx b/src/components/HeroPage.tsx
index c0b80e6..921213b 100644
--- a/src/components/HeroPage.tsx
+++ b/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 {