From e51227001710f350a940967d395d0ca4ba358e1b Mon Sep 17 00:00:00 2001
From: Mackie <iwan.mackie@gmail.com>
Date: Mon, 1 Jun 2026 17:25:55 +0800
Subject: [PATCH] mobile

---
 src/blocks/Skills/Component.tsx | 33 ++++++++++++++++-----------------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/blocks/Skills/Component.tsx b/src/blocks/Skills/Component.tsx
index 7748623..4efa23f 100644
--- a/src/blocks/Skills/Component.tsx
+++ b/src/blocks/Skills/Component.tsx
@@ -36,13 +36,7 @@ export function SkillsBlock({ heading, keySkills, categories }: SkillsBlockProps
       )}
 
       {Array.isArray(categories) && categories.length > 0 && (
-        <div
-          className="border border-foreground/8 rounded-xl overflow-hidden"
-          style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(3, 1fr)',
-          }}
-        >
+        <div className="border border-foreground/8 rounded-xl overflow-hidden grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
           {categories.map((cat, i) => {
             const isLastRow = i >= categories.length - (categories.length % 3 || 3)
             const isLastCol = (i + 1) % 3 === 0
@@ -55,17 +49,22 @@ export function SkillsBlock({ heading, keySkills, categories }: SkillsBlockProps
                   !isLastRow && 'border-b border-foreground/8',
                 )}
               >
-                <i className={`ti ${cat.icon} text-foreground/40`} style={{ fontSize: 20 }} aria-hidden="true" />
+                <i
+                  className={`ti ${cat.icon} text-foreground/40`}
+                  style={{ fontSize: 20 }}
+                  aria-hidden="true"
+                />
                 <p className="text-sm font-medium text-foreground/85">{cat.title}</p>
                 <div className="flex flex-wrap gap-1.5">
-                  {Array.isArray(cat.tags) && cat.tags.map(({ tag }, j) => (
-                    <span
-                      key={j}
-                      className="text-xs text-foreground/35 border border-foreground/10 rounded-full px-2.5 py-0.5"
-                    >
-                      {tag}
-                    </span>
-                  ))}
+                  {Array.isArray(cat.tags) &&
+                    cat.tags.map(({ tag }, j) => (
+                      <span
+                        key={j}
+                        className="text-xs text-foreground/35 border border-foreground/10 rounded-full px-2.5 py-0.5"
+                      >
+                        {tag}
+                      </span>
+                    ))}
                 </div>
               </div>
             )
@@ -74,4 +73,4 @@ export function SkillsBlock({ heading, keySkills, categories }: SkillsBlockProps
       )}
     </section>
   )
-}
\ No newline at end of file
+}