Major re-work!

src/components/ResumeSkills.tsx

@@ -8,11 +8,10 @@ interface Skill {
 }
 
 interface ResumeSkillsProps {
-  title: string;
   skills: Skill[];
 }
 
-export default function ResumeSkills({ title, skills }: ResumeSkillsProps) {
+export default function ResumeSkills({ skills }: ResumeSkillsProps) {
   const animatedLevels = useSignal<{ [key: string]: number }>({});
   const hasAnimated = useSignal(false);
 
@@ -65,31 +64,26 @@ export default function ResumeSkills({ title, skills }: ResumeSkillsProps) {
   };
 
   return (
-    <div id="skills-section" class="card bg-base-200 shadow-xl mb-4 sm:mb-6">
-      <div class="card-body p-4 sm:p-6">
-        <h2 class="card-title text-xl sm:text-2xl">{title || "Skills"}</h2>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4">
-          {skills.map((skill) => {
-            const currentLevel = animatedLevels.value[skill.id] || 0;
-            const progressValue = currentLevel * 20; // Convert 1-5 scale to 0-100
+    <div id="skills-section" class="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4">
+      {skills.map((skill) => {
+        const currentLevel = animatedLevels.value[skill.id] || 0;
+        const progressValue = currentLevel * 20; // Convert 1-5 scale to 0-100
 
-            return (
-              <div key={skill.id}>
-                <label class="label p-1 sm:p-2">
-                  <span class="label-text text-sm sm:text-base">
-                    {skill.name}
-                  </span>
-                </label>
-                <progress
-                  class="progress progress-primary w-full h-2 sm:h-3 transition-all duration-100 ease-out"
-                  value={progressValue}
-                  max="100"
-                ></progress>
-              </div>
-            );
-          })}
-        </div>
-      </div>
+        return (
+          <div key={skill.id}>
+            <label class="label p-1 sm:p-2">
+              <span class="label-text text-sm sm:text-base">
+                {skill.name}
+              </span>
+            </label>
+            <progress
+              class="progress progress-primary w-full h-2 sm:h-3 transition-all duration-100 ease-out"
+              value={progressValue}
+              max="100"
+            ></progress>
+          </div>
+        );
+      })}
     </div>
   );
 }