Add progress bar to skill container

Introduces a visual progress bar to the skill container component to display XP progress toward the next level. Updates the logic for calculating current level and XP progress, and enhances the UI with new CSS styles for the progress bar and fill.

Author: JorchCortez

src/Components/Skills/SkillContainer/SkillContainer.css

@@ -54,6 +54,28 @@
 
 .skill-container__stats-line {
     margin: 0.2rem 0;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.skill-container__progress-bar {
+    width: 100%;
+    height: 12px;
+    background-color: #3a3a3a;
+    border-radius: 6px;
+    overflow: hidden;
+    border: 2px solid #8b4513;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.skill-container__progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #4caf50, #81c784);
+    border-radius: 4px;
+    transition: width 0.3s ease;
+    min-width: 2px;
+    box-shadow: 0 0 8px rgba(76, 175, 80, 0.5);
 }
 
 .skill-container__icon {

src/Components/Skills/SkillContainer/SkillContainer.tsx

@@ -16,9 +16,22 @@ const Skills = ({
     xp,
     levelInfo
 }: SkillProps) => {
-    const currentLevel = (xp > levelInfo.val) ? levelInfo.id : levelInfo.id - 1;
-    const xpToNextLevel = (xp > 15000) ? 0 : (levelInfo.val - xp);
-    const xpToMax = (xp > 15000) ? "Maxed" : 15000 - xp;
+    const currentLevel = (xp >= levelInfo.val) ? levelInfo.id : levelInfo.id - 1;
+    const xpToNextLevel = (xp >= 15000) ? 0 : (levelInfo.val - xp);
+    const xpToMax = (xp >= 15000) ? "Maxed" : 15000 - xp;
+    
+    // Calculate progress within current level
+    const currentLevelXpRequirement = levelInfo.id > 1 ? Math.floor(levelInfo.val * 0.85) : 0;
+    const nextLevelXpRequirement = levelInfo.val;
+    const xpInCurrentLevel = Math.max(0, xp - currentLevelXpRequirement);
+    const xpNeededForLevel = nextLevelXpRequirement - currentLevelXpRequirement;
+    
+    let progressPercentage = 0;
+    if (xp >= 15000) {
+        progressPercentage = 100; // Max level
+    } else if (xpNeededForLevel > 0) {
+        progressPercentage = Math.min(100, (xpInCurrentLevel / xpNeededForLevel) * 100);
+    }
 
     return (
         <div className="skill-container">
@@ -27,13 +40,16 @@ const Skills = ({
             </p>
             <div className="skill-container__stats">
                 <div className="skill-container__stats-line">
-                    Current XP: {xp}
-                </div>
-                <div className="skill-container__stats-line">
-                    Level Up in: {xpToNextLevel}
-                </div>
-                <div className="skill-container__stats-line">
-                    Max level in: {xpToMax}
+                    <div className="skill-container__progress-bar">
+                        <div 
+                            className="skill-container__progress-fill"
+                            style={{
+                                width: `${progressPercentage}%`
+                            }}
+                        ></div>
+                    </div>
+                    {xpToNextLevel > 0 ? `XP to next level: ${xpToNextLevel}` : "Max Level Reached"}
+                    {/* {xp} / {levelInfo.val} */}
                 </div>
             </div>
             <img