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}`}>

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>
     )}

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 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">{project.title}</h5>
+                    <h5 className="modal-title" id="shadowguardianModalLabel">ShadowGuardian: Secure IoT Monitoring System</h5>
-            <button type="button" className="btn-close" onClick={onClose}></button>
+                    <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={project.image} className="img-fluid rounded mb-3" alt={project.title} />
+                        <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>
                     
-            <p>{project.description}</p>
+                    <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>
                     
-            <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="#" className="btn btn-outline-secondary">
-              <a href={project.links.github} className="btn btn-outline-secondary">
+                        <i className="fab fa-github btn-icon"></i>Source Code
-                <i className="fab fa-github me-2"></i>Source Code
                     </a>
-            )}
+                    <a href="#" className="btn btn-outline-secondary">
-            
+                        <i className="fas fa-external-link-alt btn-icon"></i>Live Demo
-            {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>
-            )}
+                    <a href="#" className="btn btn-outline-secondary">
-            
+                        <i className="fas fa-book btn-icon"></i>Documentation
-            <button type="button" className="btn btn-secondary" onClick={onClose}>Close</button>
+                    </a>
+                    <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                 </div>
             </div>
         </div>
-      <div className="modal-backdrop fade show"></div>
     </div>
   );
 }

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'
 
@@ -83,8 +82,8 @@ export const Projects = () => {
           </div>
         )}
 
-        <div className="text-center mt-4">
+        <div className="text-center mt-4 mb-5">
-          <a href="https://github.com/SecCodeSmith" className="btn btn-primary">
+          <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>