feat: refactor Home and SkillCard components, add skillCard data for dynamic rendering

src/assets/styles/Home.module.scss

@@ -7,98 +7,6 @@
     position: relative;
 }
 
-.sectionTitle {
-    text-align: center;
-    font-size: 2.5rem;
-    margin-bottom: 3rem;
-    position: relative;
-    display: inline-block;
-}
-
-.sectionTitle::after {
-    content: "";
-    position: absolute;
-    width: 80px;
-    height: 3px;
-    background: $accent-fire;
-    bottom: -10px;
-    left: 50%;
-    transform: translateX(-50%);
-    box-shadow: $glow-effect;
-}
-
-.card {
-    background-color: $card-bg;
-    border: 1px solid $card-border;
-    border-radius: 8px;
-    transition: all 0.3s ease;
-    height: 100%;
-    position: relative;
-    overflow: hidden;
-}
-
-.card:hover {
-    transform: translateY(-10px);
-    border-color: rgba(255, 100, 0, 0.3);
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
-}
-
-.card::before {
-    content: "";
-    position: absolute;
-    width: 100%;
-    height: 5px;
-    top: 0;
-    left: 0;
-    background: linear-gradient(to right, $accent-dragon, $accent-fire);
-}
-
-.cardHeader {
-    background-color: transparent;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-.categoryIcon {
-    color: $accent-fire;
-    font-size: 1.5rem;
-}
-
-.categoryTitle {
-    font-size: 1.4rem;
-    margin-bottom: 0;
-}
-
-.skillItem {
-    margin-bottom: 12px;
-    display: flex;
-    align-items: center;
-    gap: 12px;
-}
-
-.skillIcon {
-    color: $accent-fire;
-    font-size: 1.5rem;
-    min-width: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.skillIcon i {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.skillName {
-    color: $text-ash;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-}
-
-
 /* Hero Section */
 .hero {
     height: 100vh;

src/assets/styles/SkillCard.module.scss

@@ -1,3 +1,5 @@
+@use './variables' as *;
+
 /* Skills Section */
 .skillsSection {
     padding: 6rem 0;