Refactor technical skills display with SkillTags component

Author: royyraa

src/pages/research.astro

@@ -2,6 +2,7 @@
 import Layout from "@/layouts/Layout.astro";
 import { profile } from "@/settings";
 import BetterIcon from "@/components/ui/BetterIcon.astro";
+import SkillTags from "@/components/ui/SkillTags.astro";
 import { RESEARCH_ICONS } from "@/data/researchIcons";
 import { skills, projects } from "@/data/cv";
 
@@ -68,16 +69,8 @@ const { research_areas } = profile;
       }
     </div>
 
-    <h2 class="text-2xl font-bold mb-6">Technical Skills</h2>
-    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-12 not-prose">
-      {
-        skills.map((skill) => (
-          <div class="border border-base-300 rounded-xl p-4 bg-base-100">
-            <h3 class="font-semibold text-sm mb-2">{skill.title}</h3>
-            <p class="text-sm text-base-content/70">{skill.description}</p>
-          </div>
-        ))
-      }
+    <div class="not-prose">
+      <SkillTags listTitle="Technical Skills" skills={skills} />
     </div>
 
   </div>