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;

src/components/SkillCard.tsx

@@ -1,11 +1,12 @@
-import styles from '@styles/SkillCard.module.css';
+import styles from '@styles/SkillCard.module.scss';
 import React from 'react';
-interface Skill {
+
+export interface Skill {
     name: string;
     icon: React.ReactNode; // Or string if using CSS classes for icons
 }
 
-interface SkillCardProps {
+export interface SkillCardProps {
     categoryTitle: string;
     categoryIcon: React.ReactNode; // Or string
     skills: Skill[];
@@ -13,16 +14,14 @@ interface SkillCardProps {
 
 const SkillCard: React.FC<SkillCardProps> = ({ categoryTitle, categoryIcon, skills }) => {
     return (
-        <>
-
-            <div className="col-md-6 col-lg-4">
-                <div className={`card h-100 ${styles.card}`}>
-                    <div className={`card-header ${styles.cardHeader}`}>
-                        <i className={`fas fa-code category-icon ${styles.categoryIcon}`}></i>
-                        <h3 className={`${styles.categoryTitle}`}>{categoryTitle}</h3>
-                    </div>
-                    <div className="card-body">
-                        {skills.length > 0 ? (
+        <div className="col-md-6 col-lg-4">
+            <div className={`card h-100 ${styles.card}`}>
+                <div className={`card-header ${styles.cardHeader}`}>
+                    <i className={`fas ${categoryIcon} category-icon ${styles.categoryIcon}`}></i>
+                    <h3 className={`${styles.categoryTitle}`}>{categoryTitle}</h3>
+                </div>
+                <div className="card-body">
+                    {skills.length > 0 ? (
                         <ul className="list-unstyled mb-0">
                             {skills.map((skill, index) => (
                                 <li key={index} className={styles.skillItem}>
@@ -34,33 +33,9 @@ const SkillCard: React.FC<SkillCardProps> = ({ categoryTitle, categoryIcon, skil
                     ) : (
                         <p>No skills listed in this category.</p>
                     )}
-                    </div>
                 </div>
             </div>
-
-
-            <div className={styles.card}>
-                <div className={`card-header ${styles.cardHeader}`}>
-                    <span className={`styles.categoryIcon`}>{categoryIcon}</span>
-                    <h3 className={styles.categoryTitle}>{categoryTitle}</h3>
-                </div>
-                <div className="p-3">
-                    {skills.length > 0 ? (
-                        <ul className="list-unstyled mb-0">
-                            {skills.map((skill, index) => (
-                                <li key={index} className={styles.skillItem}>
-                                    <span className={styles.skillIcon}>{skill.icon}</span>
-                                    <span className={styles.skillName}>{skill.name}</span>
-                                </li>
-                            ))}
-                        </ul>
-                    ) : (
-                        <p>No skills listed in this category.</p>
-                    )}
-                </div>
-            </div>
-
-        </>
+        </div>
     );
 };
 

src/data/skillCard.ts

@@ -0,0 +1,58 @@
+import {type SkillCardProps} from '../components/SkillCard';
+
+export const skillCardData: SkillCardProps[] = [
+    {
+        categoryIcon: "fa-code",
+        categoryTitle: "Languages",
+        skills: [
+            { name: "C/C++", icon: "devicon-cplusplus-plain" },
+            { name: "Python", icon: "devicon-python-plain" },
+            { name: ".NET", icon: "devicon-dotnetcore-plain" }
+        ]
+    },
+    {
+        categoryIcon: "fa-microchip",
+        categoryTitle: "Embedded Systems",
+        skills: [
+            { name: "STM32 (I2C, SPI, UART)", icon: "fas fa-microchip" },
+            { name: "ESP32", icon: "fas fa-wifi" },
+            { name: "Pico-SDK", icon: "fas fa-memory" }
+        ]
+    },
+    {
+        categoryIcon: "fa-brain",
+        categoryTitle: "Data & ML",
+        skills: [
+            { name: "Pandas", icon: "devicon-pandas-plain" },
+            { name: "Scikit-learn", icon: "devicon-sklearn-plain" },
+            { name: "Scikit-image", icon: "fas fa-image" },
+            { name: "PyTorch", icon: "devicon-pytorch-plain" },
+            { name: "OpenCV", icon: "devicon-opencv-plain" }
+        ]
+    },
+    {
+        categoryIcon: "fas fa-window-maximize",
+        categoryTitle: "Web Development",
+        skills: [
+            { name: "ASP.NET Core", icon: "devicon-dot-net-plain" },
+            { name: "Entity Framework", icon: "fas fa-database" },
+            { name: "Blazor", icon: "devicon-dotnetcore-plain"},
+            { name: "React", icon: "devicon-react-original" },
+            { name: "Django", icon: "devicon-django-plain" },
+            { name: "Bootstrap", icon: "devicon-bootstrap-plain" },
+        ],
+    },
+    {
+        categoryIcon: "fas fa-cloud",
+        categoryTitle: "DevOps & Systems",
+        skills: [
+            { name: "Docker", icon: "devicon-docker-plain" },
+            { name: "Docker-compose", icon: "fas fa-layer-group" },
+            { name: ">Linux CLI", icon: "devicon-bash-plain" },
+            { name: "Git", icon: "devicon-git-plain" },
+            { name: "CI/CD", icon: "fas fa-cogs" },
+            { name: "Cmake", icon: "devicon-cmake-plain" },
+            { name: "Linux", icon: "devicon-linux-plain" },
+        ]
+    }
+];

src/pages/Home.tsx

@@ -2,9 +2,12 @@ import { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 
 import styles from '@styles/Home.module.scss';
+import SkillCard from '../components/SkillCard'
+import { skillCardData } from '../data/skillCard';
 
 export const Home = () => {
-  // Create binary background and particles effects
+  const skills = skillCardData;
+
   useEffect(() => {
     // Create binary background
     const createBinaryBg = () => {
@@ -124,87 +127,13 @@ export const Home = () => {
             </div>
           </div>
           <div className="row g-4">
-            {/* Languages Card */}
-            <div className="col-md-6 col-lg-4">
-              <div className={`card h-100 ${styles.card}`}>
-                <div className={`card-header ${styles.cardHeader}`}>
-                  <i className={`fas fa-code category-icon ${styles.categoryIcon}`}></i>
-                        <h3 className={`${styles.categoryTitle}`}>Languages</h3>
-                </div>
-                <div className="card-body">
-                  <ul className="list-unstyled">
-                    <li className={`skill-item ${styles.skillItem}`}>
-                      <span className={`skill-icon ${styles.skillIcon}`}><i className="devicon-cplusplus-plain "></i></span>
-                      <span className={`skill-name ${styles.skillName}`}>C/C++</span>
-                    </li>
-                    <li className={`skill-item ${styles.skillItem}`}>
-                      <span className={`skill-icon ${styles.skillIcon}`}><i className="devicon-python-plain"></i></span>
-                      <span className={`skill-name ${styles.skillName}`}>Python</span>
-                    </li>
-                    <li className={`skill-item ${styles.skillItem}`}>
-                      <span className={`skill-icon ${styles.skillIcon}`}><i className="devicon-csharp-plain"></i></span>
-                      <span className={`skill-name ${styles.skillName}`}>.NET</span>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-
-            {/* Embedded Systems Card */}
-            <div className="col-md-6 col-lg-4">
-              <div className={`card h-100 ${styles.card}`}>
-                <div className={`card-header ${styles.cardHeader}`}>
-                  <i className={`fas fa-microchip ${styles.categoryIcon}`}></i>
-                  <h3 className="category-title">Embedded Systems</h3>
-                </div>
-                <div className={`${styles.cardBody}`}>
-                  <ul className="list-unstyled">
-                    <li className="skill-item">
-                      <span className="skill-icon"><i className="fas fa-microchip"></i></span>
-                      <span className="skill-name">STM32 (I2C, SPI, UART)</span>
-                    </li>
-                    <li className="skill-item">
-                      <span className="skill-icon"><i className="fas fa-wifi"></i></span>
-                      <span className="skill-name">ESP32</span>
-                    </li>
-                    <li className="skill-item">
-                      <span className="skill-icon"><i className="fas fa-memory"></i></span>
-                      <span className="skill-name">Pico-SDK</span>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-
-            {/* Data & ML Card */}
-            <div className="col-md-6 col-lg-4">
-              <div className="card h-100">
-                <div className="card-header">
-                  <i className={`fas fa-brain ${styles.categoryIcon}`}></i>
-                  <h3 className="category-title">Data & ML</h3>
-                </div>
-                <div className="card-body">
-                  <ul className="list-unstyled">
-                    <li className="skill-item">
-                      <span className="skill-icon"><i className="devicon-pandas-plain"></i></span>
-                      <span className="skill-name">Pandas</span>
-                    </li>
-                    <li className="skill-item">
-                      <span className="skill-icon"><i className="devicon-scikitlearn-plain"></i></span>
-                      <span className="skill-name">Scikit-learn</span>
-                    </li>
-                    <li className="skill-item">
-                      <span className="skill-icon"><i className="fas fa-image"></i></span>
-                      <span className="skill-name">Scikit-image</span>
-                    </li>
-                    <li className="skill-item">
-                      <span className="skill-icon"><i className="devicon-pytorch-original"></i></span>
-                      <span className="skill-name">PyTorch</span>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </div>
+            {skills.map((skill, index) => (
+                <SkillCard
+                  categoryIcon={skill.categoryIcon}
+                  categoryTitle={skill.categoryTitle}
+                  skills={skill.skills}
+                />
+            ))}
           </div>
         </div>
       </section>