feat: refactor ProjectCard and Projects components for improved category handling and styling

src/assets/styles/Project.module.scss

@@ -42,7 +42,7 @@
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
 }
 
-.cardImg-top {
+.cardImgTop {
     height: 200px;
     object-fit: cover;
 }
@@ -68,10 +68,18 @@
 }
 
 /* Category badges */
-.categoryBadge {
+.categoryBadgeContainer {
     position: absolute;
     top: 1rem;
     right: 1rem;
+
+    display: flex;
+    flex-direction: row-reverse;
+    gap: 0.5rem;
+    z-index: 1;
+}
+
+.categoryBadge {
     background-color: rgba(139, 0, 0, 0.9);
     color: $text-light;
     padding: 0.25rem 0.75rem;
@@ -80,7 +88,6 @@
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 1px;
-    z-index: 1;
 }
 
 .featuredBadge {

src/components/ProjectCard.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import style from '@styles/Project.module.scss'
 
@@ -12,7 +12,7 @@ export interface ProjectProps {
   title: string;
   description: string;
   image: string;
-  category: string[];
+  category: Category[];
   featured?: boolean;
   technologies: ProjectTech[];
   links: {
@@ -21,71 +21,146 @@ export interface ProjectProps {
   };
 }
 
+export interface Category {
+  [key: string]: string;
+  fullName: string;
+  shortName: string;
+  icon: string;
+}
+
 interface ProjectCardProps {
   project: ProjectProps;
   onOpenDetails: (id: string) => void;
 }
 
+const ProjectCardTech: React.FC<{ technology: ProjectTech[] }> = ({ technology }) => (
+  <div>
+    <h4 className={style.techTitle}>// TECHNOLOGIES_USED</h4>
+    <div className={style.techStack}>
+      {technology.map((tech, index) => (
+        <span className={`${style.techItem}`} key={index}>
+          <i className={`${tech.icon} ${style.techIcon}`}></i>
+          <span>{tech.name}</span>
+        </span>
+      ))}
+    </div>
+  </div>
+)
+
+const CategoryBadge: React.FC<{ category: Category[] }> = ({ category }) => (
+  < div className={style.categoryBadgeContainer} >
+    {
+      category.map((cat, index) => (
+        <span key={index} className={`${style.categoryBadge}`}>
+          {cat.shortName}
+        </span>
+      ))}
+  </div>
+)
+
+const ProjectLinks: React.FC<{ links: { github?: string; demo?: string }, id: string, onOpenDetails: (id: string) => void }> = ({ links, id, onOpenDetails }) => (
+  <div className={`mt-auto d-flex gap-2 flex-wrap project-links ${style.projectLinks}`}>
+    <button
+      className={`btn btn-outline-secondary  ${style.btnOutlineSecondary}`}
+      onClick={() => onOpenDetails(id)}
+    >
+      <i className={`fas fa-info-circle ${style.btnIcon}`}></i>
+      Project Details
+    </button>
+
+    {links.github && (
+      <a href={links.github} className={`btn btn-outline-secondary  ${style.btnOutlineSecondary} `}>
+        <i className={`fab fa-github ${style.btnIcon}`}></i>
+        View Code
+      </a>
+    )}
+
+    {links.demo && (
+      <a href={links.demo} className={`btn btn-outline-secondary  ${style.btnOutlineSecondary}`}>
+        <i className={`fas fa-external-link-alt ${style.btnIcon}`}></i>
+        Live Demo
+      </a>
+    )}
+  </div>
+)
+
 export const ProjectCard: React.FC<ProjectCardProps> = ({ project, onOpenDetails }) => {
   const [, setHovered] = useState(false);
 
-  return (
-    <div 
-      className={`card ${style.card} h-100 ${project.featured ? style.featuredCard : ''}`} 
-      data-category={project.category.join(',')}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-    >
-      <div className="position-relative">
-        <img src={project.image} className={project.featured ? `img-fluid rounded-start h-100 w-100 object-fit-cover` : style.cardImgTop} alt={project.title} />
-        <div className={style.categoryBadge}>{project.category[0]}</div>
-        {project.featured && (
-          <div className={style.featuredBadge}>
-            <i className="fas fa-star"></i>
-            <span>Featured</span>
-          </div>
-        )}
-      </div>
-      <div className={`${style.cardBody} d-flex flex-column`}>
-        <h3 className={style.cardTitle}>{project.title}</h3>
-        <p className={style.cardText}>
-          {project.description}
-        </p>
-        <div>
-          <h4 className={style.techTitle}>// TECHNOLOGIES_USED</h4>
-          <div className={style.techStack}>
-            {project.technologies.map((tech, index) => (
-              <span className={style.techItem} key={index}>
-                <i className={tech.icon}></i>
-                <span>{tech.name}</span>
-              </span>
-            ))}
+  useEffect(() => {
+    const createEmbers = () => {
+      const embersContainer = document.querySelectorAll(`.${style.cardImgTop}`);
+
+      embersContainer.forEach((container) => {
+        for (let i = 0; i < 5; i++) {
+          const ember = document.createElement('div');
+          ember.className = style.emberParticle;
+
+          ember.style.left = `${Math.random() * 100}%`;
+          ember.style.bottom = '0';
+          ember.style.animationDuration = `${Math.random() * 2 + 3}s`;
+          ember.style.animationDelay = `${Math.random() * 3}s`;
+          container.appendChild(ember);
+        }
+      });
+    };
+    createEmbers();
+  }, []);
+
+  if (project.featured) {
+    return (
+      <div className={`"col-12 mb-4`}>
+        <div
+          className={`card ${style.card} ${style.featuredCard}`}
+          data-category={project.category.join(',')}
+          onMouseEnter={() => setHovered(true)}
+          onMouseLeave={() => setHovered(false)}
+        >
+          <div className={`row g-0`}>
+            <div className={`col-md-6 position-relative`}>
+              <img src={project.image} className={`img-fluid rounded-start h-100 w-100 object-fit-cover`} alt={project.title} />
+              <div className={style.featuredBadge}>
+                <i className="fas fa-star"></i>
+                <span>Featured</span>
+              </div>
+              <CategoryBadge category={project.category} />
+            </div>
+            <div className={`col-md-6`}>
+              <div className={`card-body d-flex flex-column h-100 ${style.cardBody}`}>
+                <h3 className={`${style.cardTitle} card-title`}>{project.title}</h3>
+                <p className={`${style.cardText} card-text`}>
+                  {project.description}
+                </p>
+                <ProjectCardTech technology={project.technologies} />
+                <ProjectLinks links={project.links} id={project.id} onOpenDetails={onOpenDetails} />
+              </div>
+            </div>
           </div>
         </div>
-        <div className={`mt-auto d-flex gap-2 flex-wrap project-links`}>
-          <button 
-            className={`btn btn-outline-secondary`} 
-            onClick={() => onOpenDetails(project.id)}
-          >
-            <i className="fas fa-info-circle me-2"></i>
-            Project Details
-          </button>
+      </div>
+    )
+  }
 
-          {project.links.github && (
-            <a href={project.links.github} className={`btn btn-outline-secondary`}>
-              <i className="fab fa-github me-2"></i>
-              View Code
-            </a>
-          )}
 
-          {project.links.demo && (
-            <a href={project.links.demo} className={`btn btn-outline-secondary`}>
-              <i className="fas fa-external-link-alt me-2"></i>
-              Live Demo
-            </a>
-          )}
+  return (
+    <div className={`col-md-6 col-lg-4 mb-4`}>
+      <div className={`card ${style.card} h-100`}
+        data-category={project.category.join(',')}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}>
+        <div className={`position-relative`}>
+          <img src={project.image} className={style.cardImgTop} alt={project.title} />
+          <CategoryBadge category={project.category} />
+        </div>
+        <div className={`card-body d-flex flex-column ${style.cardBody}`}>
+          <h3 className={`${style.cardTitle} card-title`}>{project.title}</h3>
+          <p className={`${style.cardText} card-text`}>
+            {project.description}
+          </p>
+          <ProjectCardTech technology={project.technologies} />
+          <ProjectLinks links={project.links} id={project.id} onOpenDetails={onOpenDetails} />
         </div>
       </div>
     </div>
   )
-}
+};

src/data/projectsData.ts

@@ -1,4 +1,33 @@
-import type { ProjectProps } from "../components/ProjectCard";
+import type { ProjectProps, Category } from "../components/ProjectCard";
+
+type CategoryMap = Record<string, Category>
+export const Categories: CategoryMap = {
+  Embedded: {
+    fullName: "Embedded Systems",
+    shortName: "Embedded",
+    icon: "fas fa-microchip",
+  },
+  Web: {
+    fullName: "Web Development",
+    shortName: "Web",
+    icon: "fas fa-code",
+  },
+  ML: {
+    fullName: "Machine Learning",
+    shortName: "ML",
+    icon: "fas fa-robot",
+  },
+  IoT: {
+    fullName: "Internet of Things",
+    shortName: "IoT",
+    icon: "fas fa-network-wired",
+  },
+  Sec: {
+    fullName: "Cybersecurity",
+    shortName: "Security",
+    icon: "fas fa-shield-alt",
+  },
+}
 
 export const projectsData: ProjectProps[] = [
   {
@@ -6,7 +35,7 @@ export const projectsData: ProjectProps[] = [
     title: "ShadowGuardian: Secure IoT Monitoring System",
     description: "A comprehensive security monitoring system built on STM32 microcontrollers with end-to-end encryption and low-power operation. Integrates with home automation systems and provides real-time alerts through a mobile application.",
     image: "/images/projects/shadowguardian.jpg",
-    category: ["iot", "embedded"],
+    category: [Categories["IoT"], Categories["Embedded"]],
     featured: true,
     technologies: [
       { name: "C++", icon: "devicon-cplusplus-plain tech-icon" },
@@ -25,7 +54,7 @@ export const projectsData: ProjectProps[] = [
     title: "PyroSight: Thermal Anomaly Detection",
     description: "An intelligent system that uses computer vision and thermal imaging to detect anomalies in industrial equipment. Employs PyTorch for deep learning to predict potential failures before they occur.",
     image: "/images/projects/pyrosight.jpg",
-    category: ["ml", "iot"],
+    category: [Categories["ML"], Categories["IoT"]],
     technologies: [
       { name: "Python", icon: "devicon-python-plain tech-icon" },
       { name: "PyTorch", icon: "devicon-pytorch-original tech-icon" },
@@ -41,7 +70,7 @@ export const projectsData: ProjectProps[] = [
     title: "NexusFlow: DevOps Dashboard",
     description: "A real-time monitoring dashboard for DevOps teams that visualizes CI/CD pipelines, infrastructure metrics, and deployment statuses. Built with Blazor for seamless updates without page refreshes.",
     image: "/images/projects/nexusflow.jpg",
-    category: ["web"],
+    category: [Categories["Web"]],
     technologies: [
       { name: "C#", icon: "devicon-csharp-plain tech-icon" },
       { name: "Blazor", icon: "devicon-dotnetcore-plain tech-icon" },
@@ -58,7 +87,7 @@ export const projectsData: ProjectProps[] = [
     title: "EtherWhisper: Secure Communication Node",
     description: "A low-power, long-range communication node for IoT networks with military-grade encryption and mesh capabilities. Perfect for remote sensing applications in harsh environments.",
     image: "/images/projects/etherwhisper.jpg",
-    category: ["embedded", "iot"],
+    category: [Categories["Embedded"], Categories["IoT"]],
     technologies: [
       { name: "C", icon: "devicon-c-plain tech-icon" },
       { name: "STM32", icon: "fas fa-memory tech-icon" },
@@ -74,7 +103,7 @@ export const projectsData: ProjectProps[] = [
     title: "DataForge: Advanced Analytics Platform",
     description: "A comprehensive data analytics platform with interactive visualization tools and automated reporting features. Integrates with various data sources and provides ML-powered insights.",
     image: "/images/projects/dataforge.jpg",
-    category: ["web"],
+    category: [Categories["Web"]],
     technologies: [
       { name: "Python", icon: "devicon-python-plain tech-icon" },
       { name: "Django", icon: "devicon-django-plain tech-icon" },
@@ -91,7 +120,7 @@ export const projectsData: ProjectProps[] = [
     title: "VisionKeeper: Object Recognition System",
     description: "A real-time object recognition system optimized for edge devices. Capable of identifying and tracking objects with high accuracy even in challenging lighting conditions.",
     image: "/images/projects/visionkeeper.jpg",
-    category: ["ml"],
+    category: [Categories["ML"]],
     technologies: [
       { name: "Python", icon: "devicon-python-plain tech-icon" },
       { name: "PyTorch", icon: "devicon-pytorch-original tech-icon" },

src/pages/Projects.tsx

@@ -2,7 +2,11 @@ import { useState } from 'react';
 import { PageHeader } from '../components/PageHeader';
 import { ProjectCard, type ProjectProps } from '../components/ProjectCard';
 import { ProjectModal } from '../components/ProjectModal';
-import { projectsData } from '../data/projectsData';
+import { projectsData, Categories } from '../data/projectsData';
+import { styleText } from 'util';
+
+import style from '@styles/Project.module.scss'
+
 
 export const Projects = () => {
   const [activeFilter, setActiveFilter] = useState('all');
@@ -10,7 +14,9 @@ export const Projects = () => {
 
   const filteredProjects = activeFilter === 'all'
     ? projectsData
-    : projectsData.filter(project => project.category.includes(activeFilter));
+    : projectsData.filter(project => project.category.some(cat => cat.shortName.toLowerCase() === activeFilter));
+
+  const categories = Categories;
 
   const featuredProject = projectsData.find(project => project.featured);
 
@@ -40,50 +46,34 @@ export const Projects = () => {
 
       <div className="container mt-5">
         {/* Projects Filter */}
-        <div className="filter-container text-center">
+        <div className={`filter-container ${style.filterContainer} text-center`}>
           <button
-            className={`filter-button ${activeFilter === 'all' ? 'active' : ''}`} 
+            className={`filter-button  ${style.filterButton} ${activeFilter === 'all' ?  style.active : ''}`}
             onClick={() => handleFilterClick('all')}
           >
             All Artifacts
           </button>
-          <button 
-            className={`filter-button ${activeFilter === 'embedded' ? 'active' : ''}`} 
-            onClick={() => handleFilterClick('embedded')}
-          >
-            Embedded Systems
-          </button>
-          <button 
-            className={`filter-button ${activeFilter === 'web' ? 'active' : ''}`} 
-            onClick={() => handleFilterClick('web')}
-          >
-            Web Development
-          </button>
-          <button 
-            className={`filter-button ${activeFilter === 'ml' ? 'active' : ''}`} 
-            onClick={() => handleFilterClick('ml')}
-          >
-            Machine Learning
-          </button>
-          <button 
-            className={`filter-button ${activeFilter === 'iot' ? 'active' : ''}`} 
-            onClick={() => handleFilterClick('iot')}
-          >
-            IoT
-          </button>
+          {Object.values(categories).map((category) => (
+            <button
+              key={category.shortName}
+              className={`filter-button ${style.filterButton} ${activeFilter === category.shortName.toLowerCase() ?  style.active : ''}`}
+              onClick={() => handleFilterClick(category.shortName.toLowerCase())}
+            >
+              {category.fullName}
+            </button>
+          ))}
         </div>
 
         <div className="row">
-          {featuredProject && (activeFilter === 'all' || featuredProject.category.includes(activeFilter)) && (
+          {featuredProject && (activeFilter === 'all' || featuredProject.category.some(cat => cat.shortName.toLowerCase() === activeFilter)) && (
             <div className="col-12 mb-4">
               <ProjectCard project={featuredProject} onOpenDetails={handleOpenDetails} />
             </div>
           )}
 
           {regularProjects.map(project => (
-            <div className="col-md-6 col-lg-4 mb-4" key={project.id}>
-              <ProjectCard project={project} onOpenDetails={handleOpenDetails} />
-            </div>
+
+            <ProjectCard project={project} onOpenDetails={handleOpenDetails} />
           ))}
         </div>