Update resume animation

src/pages/resume.astro

@@ -3,6 +3,7 @@ import { Icon } from 'astro-icon/components';
 import { readFile } from 'node:fs/promises';
 import { join } from 'node:path';
 import Layout from '../layouts/Layout.astro';
+import SkillsSection from '../components/SkillsSection.tsx';
 import '../styles/global.css';
 
 interface ResumeData {
@@ -133,26 +134,11 @@ const data = resumeData;
       )}
 
       {data.sections.skills && data.sections.skills.items && data.sections.skills.items.length > 0 && (
-        <div class="card bg-base-200 shadow-xl mb-6">
-          <div class="card-body">
-            <h2 class="card-title text-2xl">{data.sections.skills.name || "Skills"}</h2>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-              {data.sections.skills.items.map((skill) => (
-                <div>
-                  <label class="label">
-                    <span class="label-text">{skill.name}</span>
-                  </label>
-                  <progress
-                    class="progress progress-primary w-full"
-                    value={skill.level * 20}
-                    max="100"
-                  >
-                  </progress>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
+        <SkillsSection 
+          title={data.sections.skills.name} 
+          skills={data.sections.skills.items} 
+          client:visible 
+        />
       )}
 
       {data.sections.experience && data.sections.experience.items && data.sections.experience.items.length > 0 && (