From f627a6ef8923f7cadfed21d06d98ec0f19826c57 Mon Sep 17 00:00:00 2001
From: Mackie <iwan.mackie@gmail.com>
Date: Fri, 29 May 2026 09:23:37 +0800
Subject: [PATCH] logo

---
 src/components/HeroPage.tsx | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/components/HeroPage.tsx b/src/components/HeroPage.tsx
index 6ce35d0..a5ee452 100644
--- a/src/components/HeroPage.tsx
+++ b/src/components/HeroPage.tsx
@@ -305,10 +305,17 @@ function LogosSection({ isDark }: { isDark: boolean }) {
         Skills
       </p>
 
-      {/* Marquee track */}
+{/* Marquee track */}
 <div style={{ overflow: 'hidden', width: '100%' }}>
-  <div style={{ display: 'flex', width: 'max-content', animation: 'marquee 35s linear infinite' }}>
-    {[...LOGOS, ...LOGOS, ...LOGOS, ...LOGOS].map((l, i) => (
+  <div
+    style={{
+      display: 'flex',
+      width: 'max-content',
+      animation: 'marquee 35s linear infinite',
+    }}
+  >
+    {/* Only 2 copies — animation goes to -50% which = exactly 1 copy width */}
+    {[...LOGOS, ...LOGOS].map((l, i) => (
       <img
         key={i}
         src={l.src}
@@ -320,12 +327,12 @@ function LogosSection({ isDark }: { isDark: boolean }) {
   </div>
 </div>
 
-      <style>{`
-        @keyframes marquee {
-          0% { transform: translateX(0); }
-          100% { transform: translateX(-50%); }
-        }
-      `}</style>
+<style>{`
+  @keyframes marquee {
+    0%   { transform: translateX(0); }
+    100% { transform: translateX(-50%); }
+  }
+`}</style>
     </section>
   )
 }