index.html

@@ -7,7 +7,7 @@
     <!-- Font Awesome -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <!-- DevIcon -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.16.0/devicon.min.css">
     <!-- Google Fonts -->
     <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Fira+Code:wght@400;600&display=swap" rel="stylesheet">
     <!-- Bootstrap CSS -->

src/assets/styles/Blog.scss

@@ -1,4 +1,4 @@
-@import "./variables.scss";
+@use "./variables.scss" as *;
 
 /* Page Header */
 .page-header {

src/assets/styles/Home.module.scss

@@ -1,5 +1,104 @@
 @use './variables' as *;
 
+/* Skills Section */
+.skillsSection {
+    padding: 6rem 0;
+    background-color: $secondary-dark;
+    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;
@@ -105,104 +204,6 @@
     left: 100%;
 }
 
-/* Skills Section */
-.skillsSection {
-    padding: 6rem 0;
-    background-color: $secondary-dark;
-    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;
-}
-
 /* Blinking cursor effect */
 .blinkingCursor {
     display: inline-block;

src/assets/styles/SkillCard.module.scss

@@ -0,0 +1,97 @@
+/* Skills Section */
+.skillsSection {
+    padding: 6rem 0;
+    background-color: $secondary-dark;
+    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;
+}

src/components/SkillCard.tsx

@@ -0,0 +1,67 @@
+import styles from '@styles/SkillCard.module.css';
+import React from 'react';
+interface Skill {
+    name: string;
+    icon: React.ReactNode; // Or string if using CSS classes for icons
+}
+
+interface SkillCardProps {
+    categoryTitle: string;
+    categoryIcon: React.ReactNode; // Or string
+    skills: Skill[];
+}
+
+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 ? (
+                        <ul className="list-unstyled mb-0">
+                            {skills.map((skill, index) => (
+                                <li key={index} className={styles.skillItem}>
+                                    <span className={styles.skillIcon}><i className={`${skill.icon ?? ""}`}></i></span>
+                                    <span className={styles.skillName}>{skill.name}</span>
+                                </li>
+                            ))}
+                        </ul>
+                    ) : (
+                        <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>
+
+        </>
+    );
+};
+
+export default SkillCard;

src/pages/Home.tsx

@@ -129,21 +129,21 @@ export const Home = () => {
               <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="category-title">Languages</h3>
+                        <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"><i className="devicon-cplusplus-plain colored"></i></span>
+                      <span className={`skill-icon ${styles.skillIcon}`}><i className="devicon-cplusplus-plain "></i></span>
-                      <span className="skill-name">C/C++</span>
+                      <span className={`skill-name ${styles.skillName}`}>C/C++</span>
                     </li>
-                    <li className="skill-item">
+                    <li className={`skill-item ${styles.skillItem}`}>
-                      <span className="skill-icon"><i className="devicon-python-plain colored"></i></span>
+                      <span className={`skill-icon ${styles.skillIcon}`}><i className="devicon-python-plain"></i></span>
-                      <span className="skill-name">Python</span>
+                      <span className={`skill-name ${styles.skillName}`}>Python</span>
                     </li>
-                    <li className="skill-item">
+                    <li className={`skill-item ${styles.skillItem}`}>
-                      <span className="skill-icon"><i className="devicon-csharp-plain colored"></i></span>
+                      <span className={`skill-icon ${styles.skillIcon}`}><i className="devicon-csharp-plain"></i></span>
-                      <span className="skill-name">.NET</span>
+                      <span className={`skill-name ${styles.skillName}`}>.NET</span>
                     </li>
                   </ul>
                 </div>
@@ -152,8 +152,8 @@ export const Home = () => {
 
             {/* Embedded Systems Card */}
             <div className="col-md-6 col-lg-4">
-              <div className="card h-100">
+              <div className={`card h-100 ${styles.card}`}>
-                <div className="card-header">
+                <div className={`card-header ${styles.cardHeader}`}>
                   <i className={`fas fa-microchip ${styles.categoryIcon}`}></i>
                   <h3 className="category-title">Embedded Systems</h3>
                 </div>
@@ -186,11 +186,11 @@ export const Home = () => {
                 <div className="card-body">
                   <ul className="list-unstyled">
                     <li className="skill-item">
-                      <span className="skill-icon"><i className="devicon-pandas-original colored"></i></span>
+                      <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="fas fa-cogs"></i></span>
+                      <span className="skill-icon"><i className="devicon-scikitlearn-plain"></i></span>
                       <span className="skill-name">Scikit-learn</span>
                     </li>
                     <li className="skill-item">
@@ -198,7 +198,7 @@ export const Home = () => {
                       <span className="skill-name">Scikit-image</span>
                     </li>
                     <li className="skill-item">
-                      <span className="skill-icon"><i className="devicon-pytorch-original colored"></i></span>
+                      <span className="skill-icon"><i className="devicon-pytorch-original"></i></span>
                       <span className="skill-name">PyTorch</span>
                     </li>
                   </ul>