From c539be3c871ba8603adfc9930ad8dc7d3ebe55bb Mon Sep 17 00:00:00 2001
From: seccodesmith <admin@seccodesmith.pl>
Date: Sat, 24 May 2025 22:31:34 +0200
Subject: [PATCH] feat: update BlogCard and Project components with improved
 styling and structure

---
 src/components/BlogCard.tsx     |   2 +-
 src/components/ProjectCard.tsx  |   4 +-
 src/components/ProjectModal.tsx | 100 +++++++++++++++++++-------------
 src/pages/Projects.tsx          |   9 ++-
 4 files changed, 67 insertions(+), 48 deletions(-)

diff --git a/src/components/BlogCard.tsx b/src/components/BlogCard.tsx
index d9f34bd..c15c786 100644
--- a/src/components/BlogCard.tsx
+++ b/src/components/BlogCard.tsx
@@ -26,7 +26,7 @@ export const BlogCard: React.FC<BlogCardProps> = ({ post }) => {
     <div className={`card ${styles.card} ${post.featured ? styles.featuredCard : ''}`}>
       <div className="position-relative">
         <img src={post.image} className={`card-img-top ${post.featured ? styles.featuredImg : ''}`} alt={post.title} />
-        <div className="category-badge">{post.category}</div>
+        <div className={styles.categoryBadge}>{post.category}</div>
         
         {post.featured && (
           <div className={`featured-badge ${styles.featuredBadge}`}>
diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx
index 4d92450..142c1b0 100644
--- a/src/components/ProjectCard.tsx
+++ b/src/components/ProjectCard.tsx
@@ -64,13 +64,13 @@ const ProjectLinks: React.FC<{ links: { github?: string; demo?: string }, id: st
       className={`btn btn-outline-secondary  ${style.btnOutlineSecondary}`}
       onClick={() => onOpenDetails(id)}
     >
-      <i className={`fas fa-info-circle ${style.btnIcon}`}></i>
+      <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>
+        <i className={`fab fa-github ${style.btnIcon}`} ></i>
         View Code
       </a>
     )}
diff --git a/src/components/ProjectModal.tsx b/src/components/ProjectModal.tsx
index 78da803..a3e3330 100644
--- a/src/components/ProjectModal.tsx
+++ b/src/components/ProjectModal.tsx
@@ -1,5 +1,8 @@
 import type { ProjectProps } from './ProjectCard';
 
+import style from '@styles/Project.module.scss'
+
+
 interface ProjectModalProps {
   project: ProjectProps | null;
   onClose: () => void;
@@ -9,48 +12,65 @@ export const ProjectModal: React.FC<ProjectModalProps> = ({ project, onClose })
   if (!project) return null;
   
   return (
-    <div className="modal fade show" style={{ display: 'block' }} tabIndex={-1}>
-      <div className="modal-dialog modal-xl modal-dialog-scrollable">
-        <div className="modal-content">
-          <div className="modal-header">
-            <h5 className="modal-title">{project.title}</h5>
-            <button type="button" className="btn-close" onClick={onClose}></button>
-          </div>
-          <div className="modal-body">
-            <div className="mb-4">
-              <img src={project.image} className="img-fluid rounded mb-3" alt={project.title} />
+    <div className="modal fade" id="shadowguardianModal" tabIndex={-1} aria-labelledby="shadowguardianModalLabel" aria-hidden="true">
+        <div className="modal-dialog modal-xl modal-dialog-scrollable">
+            <div className="modal-content">
+                <div className="modal-header">
+                    <h5 className="modal-title" id="shadowguardianModalLabel">ShadowGuardian: Secure IoT Monitoring System</h5>
+                    <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div className="modal-body">
+                    <div className="mb-4">
+                        <img src="/api/placeholder/1000/400" className="img-fluid rounded mb-3" alt="ShadowGuardian Project"></img>
+                        <div className="row">
+                            <div className="col-md-8">
+                                <p>ShadowGuardian is a comprehensive security monitoring system designed for both residential and commercial applications. Built on a foundation of STM32 microcontrollers, it provides reliable, secure monitoring with extremely low power consumption, allowing for battery operation of up to 2 years.</p>
+                                <p>The system features end-to-end encryption for all communications, ensuring that sensitive security data remains private. Its modular architecture allows for easy expansion with additional sensors and integration with existing home automation systems.</p>
+                            </div>
+                            <div className="col-md-4">
+                                <div className="card h-100">
+                                    <div className="card-header">
+                                        <h5 className="mb-0">Project Overview</h5>
+                                    </div>
+                                    <div className="card-body">
+                                        <p><strong>Duration:</strong> 6 months</p>
+                                        <p><strong>Role:</strong> Lead Developer</p>
+                                        <p><strong>Status:</strong> Completed</p>
+                                        <p><strong>Client:</strong> ConnectedWorld Technologies</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <h4 className="mt-4 mb-3">Key Features</h4>
+                    <ul className="features-list">
+                        <li>Military-grade AES-256 encryption for all data transmission</li>
+                        <li>Ultra-low power consumption with intelligent sleep modes</li>
+                        <li>Modular sensor architecture supporting motion, contact, glass-break, and environmental sensors</li>
+                        <li>Local processing to reduce cloud dependency and improve response times</li>
+                        <li>Mesh networking for extended coverage without Wi-Fi dependencies</li>
+                        <li>Real-time notifications via mobile app (iOS and Android)</li>
+                        <li>Integration with popular home automation platforms including HomeKit, Google Home, and Alexa</li>
+                        <li>Tamper detection and notification system</li>
+                        <li>Optional cellular backup connection for critical deployments</li>
+                    </ul>
+                    
+                </div>
+                <div className="modal-footer">
+                    <a href="#" className="btn btn-outline-secondary">
+                        <i className="fab fa-github btn-icon"></i>Source Code
+                    </a>
+                    <a href="#" className="btn btn-outline-secondary">
+                        <i className="fas fa-external-link-alt btn-icon"></i>Live Demo
+                    </a>
+                    <a href="#" className="btn btn-outline-secondary">
+                        <i className="fas fa-book btn-icon"></i>Documentation
+                    </a>
+                    <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                </div>
             </div>
-            
-            <p>{project.description}</p>
-            
-            <h4 className="mt-4 mb-3">Technologies Used</h4>
-            <div className="mb-4">
-              {project.technologies.map((tech, index) => (
-                <span className="tech-chip" key={index}>
-                  <i className={`${tech.icon} tech-chip-icon`}></i>
-                  <span className="tech-chip-name">{tech.name}</span>
-                </span>
-              ))}
-            </div>
-          </div>
-          <div className="modal-footer">
-            {project.links.github && (
-              <a href={project.links.github} className="btn btn-outline-secondary">
-                <i className="fab fa-github me-2"></i>Source 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>
-            )}
-            
-            <button type="button" className="btn btn-secondary" onClick={onClose}>Close</button>
-          </div>
         </div>
-      </div>
-      <div className="modal-backdrop fade show"></div>
     </div>
   );
 }
\ No newline at end of file
diff --git a/src/pages/Projects.tsx b/src/pages/Projects.tsx
index d59354f..acc020a 100644
--- a/src/pages/Projects.tsx
+++ b/src/pages/Projects.tsx
@@ -3,7 +3,6 @@ import { PageHeader } from '../components/PageHeader';
 import { ProjectCard, type ProjectProps } from '../components/ProjectCard';
 import { ProjectModal } from '../components/ProjectModal';
 import { projectsData, Categories } from '../data/projectsData';
-import { styleText } from 'util';
 
 import style from '@styles/Project.module.scss'
 
@@ -48,7 +47,7 @@ export const Projects = () => {
         {/* Projects Filter */}
         <div className={`filter-container ${style.filterContainer} text-center`}>
           <button
-            className={`filter-button  ${style.filterButton} ${activeFilter === 'all' ?  style.active : ''}`}
+            className={`filter-button  ${style.filterButton} ${activeFilter === 'all' ? style.active : ''}`}
             onClick={() => handleFilterClick('all')}
           >
             All Artifacts
@@ -56,7 +55,7 @@ export const Projects = () => {
           {Object.values(categories).map((category) => (
             <button
               key={category.shortName}
-              className={`filter-button ${style.filterButton} ${activeFilter === category.shortName.toLowerCase() ?  style.active : ''}`}
+              className={`filter-button ${style.filterButton} ${activeFilter === category.shortName.toLowerCase() ? style.active : ''}`}
               onClick={() => handleFilterClick(category.shortName.toLowerCase())}
             >
               {category.fullName}
@@ -83,8 +82,8 @@ export const Projects = () => {
           </div>
         )}
 
-        <div className="text-center mt-4">
-          <a href="https://github.com/SecCodeSmith" className="btn btn-primary">
+        <div className="text-center mt-4 mb-5">
+          <a href="https://github.com/SecCodeSmith" className={`btn btn-primary ${style.btnPrimary}`}>
             <i className="fab fa-github me-2"></i> View All Projects on GitHub
           </a>
         </div>