Refactor and update Skills component styles

Moved Skills-related styles from App.css to a new Skills.css file for better modularity. Refactored SkillContainer.css with improved layout, new CSS variables, and enhanced level indicator styling for better UI consistency and maintainability.

Author: JorchCortez

src/App.css

@@ -303,40 +303,13 @@ section.sv-container{
   padding: 15px 0;
 }
 
-/*Skills*/
 .wrapper{
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-}
-.stats-container{
-  width: 100%;
-  height: 100%; 
-  margin-top: -13px;
-  padding: 2.5%; 
-  border-image: url('./Media/Windows/Window5.png') 16 16 16 16 fill stretch;
-  border-style: solid;
-  image-rendering: pixelated;
-  border-width: 35px;
-  overflow: hidden;
-}
-.achievement-container{
-  width: 90%;
-  min-height: 450px;
-  height: auto;    
-}
-
-.skill-info{ 
-  padding: 30px 0;
-  width: 100%;
-  height: 400px;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
 }
 
 .a-title{

src/Components/Skills/SkillContainer/SkillContainer.css

@@ -1,22 +1,31 @@
 /* SkillContainer Component Styles */
+
+:root {
+    --active-box-shadow:
+        inset 2px -2px 2px rgba(0, 0, 0, 0.5),
+        inset -2px 2px 2px rgba(250, 240, 224, 0.5),
+        -2px 2px 2px rgba(0, 0, 0, 0.5);
+}
+
 .skill-container {
     position: relative;
-    width: 28%;
-    height: auto;
-    margin: 1%;
-    padding: 1%;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-    background-size: 100% 100%;
+    width: 48rem;
+    height: auto; 
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: space-between;
-    border-image: url(/src/Media/Windows/Window5.png) 2 fill stretch;
-    border-style: solid;
-    image-rendering: pixelated;
-    border-width: 4px;
+    justify-content: space-between; 
+}
+
+.skill-container__item {
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: end;
+    gap: 0.5rem;
+    font-size: 1.5rem;
 }
 
 .skill-container__title {
@@ -52,44 +61,52 @@
     text-align: center;
 }
 
-.skill-container__stats-line {
-    margin: 0.2rem 0;
+.skill-container__icon {
+    width: 2rem;
+    height: 2rem;
+    cursor: help;
+}
+
+.skill-container__icon:hover {
+    transform: scale(1.1);
+}
+
+.skill-container__level-indicators {
     display: flex;
-    flex-direction: column;
-    gap: 6px;
+    gap: 0.5rem;
 }
 
-.skill-container__progress-bar {
-    width: 100%;
-    height: 12px;
+.skill-container__level-block { 
     background-color: #3a3a3a;
-    border-radius: 6px;
+    border-radius: 0.25rem;
     overflow: hidden;
-    border: 2px solid #8b4513;
-    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
+    height: 1.25rem;
+    border: 0.125rem solid #C88D36;
+    background-color: #C87D1B;
+    box-shadow: inset -2px 2px 2px rgba(0, 0, 0, 0.5),
+    -2px 2px 2px rgba(0, 0, 0, 0.5); 
 }
 
-.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__level-block.sm {
+    width: 1.5rem;
+    &.active {
+        background-color: #DF003B;
+        box-shadow: var(--active-box-shadow);
+    }
 }
 
-.skill-container__icon {
-    position: absolute;
-    bottom: -12px;
-    left: -12px;
-    width: 40px;
-    height: 40px;
-    cursor: help;
-    transition: transform 0.2s ease-in-out;
+.skill-container__level-block.lg {
+    width: 3rem;
+    &.active {
+        background-color: #FFA301;
+        box-shadow: var(--active-box-shadow);
+    }
 }
 
-.skill-container__icon:hover {
-    transform: scale(1.1);
+.skill-container__level-no {
+    width: 2ch;
+    font-weight: 600;
+    font-size: 2rem;
 }
 
 /* Responsive adjustments */

src/Components/Skills/Skills.css

@@ -0,0 +1,30 @@
+
+.stats-container{
+    width: 100%;
+    height: 100%; 
+    margin-top: -13px;
+    padding: 0; 
+    border-image: url('../../Media/Windows/Window5.png') 16 16 16 16 fill stretch;
+    border-style: solid;
+    image-rendering: pixelated;
+    border-width: 35px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: row;
+}
+
+.achievement-container{
+    width: 90%;
+    min-height: 450px;
+    height: auto;    
+}
+
+.skill-info{  
+    width: 100%;
+    height: 400px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+}