a11y

src/components/ResumeSkills.tsx

@@ -21,7 +21,6 @@ export default function ResumeSkills({ skills }: ResumeSkillsProps) {
         entries.forEach((entry) => {
           if (entry.isIntersecting && !hasAnimated.value) {
             hasAnimated.value = true;
-            // Start animation for all skills
             skills.forEach((skill) => {
               animateSkill(skill.id, skill.level);
             });
@@ -67,19 +66,23 @@ export default function ResumeSkills({ skills }: ResumeSkillsProps) {
     <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
+        const progressValue = currentLevel * 20;
 
         return (
           <div key={skill.id}>
-            <label class="label p-1 sm:p-2">
-              <span class="label-text text-sm sm:text-base">
+            <div class="flex justify-between items-center p-1 sm:p-2">
+              <span class="text-sm sm:text-base font-medium">
                 {skill.name}
               </span>
-            </label>
+              <span class="text-xs sm:text-sm text-base-content/70">
+                {Math.round(currentLevel)}/5
+              </span>
+            </div>
             <progress
-              class="progress progress-primary w-full h-2 sm:h-3 transition-all duration-100 ease-out"
+              class="progress progress-primary w-full h-2 sm:h-3 min-h-2 transition-all duration-100 ease-out"
               value={progressValue}
               max="100"
+              aria-label={`${skill.name} skill level: ${Math.round(currentLevel)} out of 5`}
             ></progress>
           </div>
         );