feat: enhance ProjectCard and Projects components with new styles and improved structure

style: update opacity in Home styles for better visibility
refactor: remove unnecessary comments in Projects component for cleaner code

src/assets/styles/Home.module.scss

@@ -73,7 +73,7 @@
     color: $accent-fire;
     font-size: 1rem;
     animation: fall linear infinite;
-    opacity: 0.8;
+    opacity: 0.9;
 }
 
 @keyframes fall {

src/assets/styles/Project.module.scss

@@ -0,0 +1,371 @@
+@use './variables' as *;
+
+.filterContainer {
+    margin-bottom: 2rem;
+}
+
+.filterButton {
+    background-color: rgba(255, 255, 255, 0.05);
+    border: 1px solid $card-border;
+    color: $text-ash;
+    padding: 0.5rem 1rem;
+    margin: 0 0.25rem 0.5rem;
+    border-radius: 4px;
+    transition: all 0.3s ease;
+}
+
+.filterButton:hover,
+.filterButton.active {
+    background-color: rgba(255, 100, 0, 0.1);
+    border-color: rgba(255, 100, 0, 0.3);
+    color: $accent-fire;
+}
+
+.filterButton.active {
+    border-color: $accent-fire;
+}
+
+/* Project Cards */
+.card {
+    background-color: $card-bg;
+    border: 1px solid $card-border;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+    margin-bottom: 1.5rem;
+    overflow: hidden;
+    height: 100%;
+}
+
+.card:hover {
+    transform: translateY(-10px);
+    border-color: rgba(255, 100, 0, 0.3);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+}
+
+.cardImg-top {
+    height: 200px;
+    object-fit: cover;
+}
+
+.cardTitle {
+    font-size: 1.5rem;
+    margin-bottom: 0.75rem;
+}
+
+.cardText {
+    color: $text-ash;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    line-height: 1.6;
+    margin-bottom: 1.5rem;
+}
+
+.featuredCard {
+    position: relative;
+}
+
+.featuredCard .cardImgTop {
+    height: 300px;
+}
+
+/* Category badges */
+.categoryBadge {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    background-color: rgba(139, 0, 0, 0.9);
+    color: $text-light;
+    padding: 0.25rem 0.75rem;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    z-index: 1;
+}
+
+.featuredBadge {
+    position: absolute;
+    top: 1rem;
+    left: 1rem;
+    background: linear-gradient(45deg, $accent-dragon, $accent-fire);
+    color: $text-light;
+    padding: 0.25rem 0.75rem;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    z-index: 1;
+}
+
+/* Tech stack */
+.techTitle {
+    font-size: 0.9rem;
+    margin-bottom: 0.625rem;
+    color: $text-ash;
+    font-family: 'Fira Code', monospace;
+}
+
+.techStack {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 1.5rem;
+}
+
+.techItem {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background-color: rgba(255, 255, 255, 0.05);
+    padding: 5px 10px;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    font-family: 'Fira Code', monospace;
+    color: $text-ash;
+    transition: all 0.3s ease;
+}
+
+.techItem:hover {
+    background-color: rgba(255, 100, 0, 0.1);
+    color: $accent-fire;
+    transform: translateY(-2px);
+}
+
+.techIcon {
+    font-size: 1rem;
+    color: $accent-fire;
+}
+
+/* Project links */
+.btnOutlineSecondary {
+    background-color: rgba(255, 255, 255, 0.05);
+    border-color: $card-border;
+    color: $text-light;
+}
+
+.btnOutlineSecondary:hover {
+    background-color: rgba(255, 100, 0, 0.1);
+    border-color: $accent-fire;
+    color: $text-light;
+}
+
+.btnIcon {
+    margin-right: 0.5rem;
+    color: $accent-fire;
+}
+
+/* View All Button */
+.btnPrimary {
+    background: linear-gradient(45deg, $accent-dragon, $accent-fire);
+    border: none;
+    padding: 0.75rem 2rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    box-shadow: 0 4px 15px rgba(139, 0, 0, 0.3);
+    transition: all 0.3s ease;
+}
+
+.btnPrimary:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 7px 25px rgba(139, 0, 0, 0.5);
+    background-color: $accent-fire;
+    background-image: none;
+}
+
+/* Modal Styling */
+.modalContent {
+    background-color: $card-bg;
+    border: 1px solid $card-border;
+    color: $text-light;
+}
+
+.modalHeader {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.modalTitle {
+    color: $text-light;
+}
+
+.modalFooter {
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.btnClose {
+    filter: invert(1) grayscale(100%) brightness(200%);
+}
+
+.featuresList {
+    padding-left: 1.5rem;
+    color: $text-ash;
+}
+
+.featuresList li {
+    margin-bottom: 0.5rem;
+    position: relative;
+}
+
+.featuresList li::before {
+    content: "•";
+    color: $accent-fire;
+    position: absolute;
+    left: -1rem;
+    top: 0;
+    font-size: 1.2rem;
+}
+
+.techChip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background-color: rgba(255, 255, 255, 0.05);
+    padding: 8px 15px;
+    border-radius: 20px;
+    margin-right: 0.5rem;
+    margin-bottom: 0.5rem;
+    transition: all 0.3s ease;
+}
+
+.techChip:hover {
+    background-color: rgba(255, 100, 0, 0.1);
+    transform: translateY(-3px);
+}
+
+.techChip-icon {
+    color: $accent-fire;
+    font-size: 1.1rem;
+}
+
+.techChip-name {
+    color: $text-ash;
+    font-size: 0.9rem;
+    font-family: 'Fira Code', monospace;
+}
+
+.galleryItem {
+    height: 150px;
+    border-radius: 8px;
+    overflow: hidden;
+    transition: all 0.3s ease;
+    cursor: pointer;
+    margin-bottom: 15px;
+}
+
+.galleryItem:hover {
+    transform: scale(1.05);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+}
+
+.galleryImage {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* Binary background effect */
+.binaryLine {
+    position: absolute;
+    font-family: 'Fira Code', monospace;
+    color: $accent-fire;
+    font-size: 0.8rem;
+    opacity: 0.15;
+    pointer-events: none;
+}
+
+/* Ember particle effect */
+.emberParticle {
+    position: absolute;
+    width: 3px;
+    height: 3px;
+    background-color: $accent-fire;
+    border-radius: 50%;
+    opacity: 0.6;
+    pointer-events: none;
+    z-index: 2;
+    box-shadow: 0 0 5px $accent-fire;
+    animation: float 3s linear infinite;
+}
+
+@keyframes float {
+    0% {
+        transform: translateY(0) rotate(0deg);
+        opacity: 0.6;
+    }
+
+    100% {
+        transform: translateY(-100px) rotate(360deg);
+        opacity: 0;
+    }
+}
+
+/* Footer */
+.footer {
+    background-color: $primary-dark;
+    padding: 3rem 0;
+    border-top: 1px solid rgba(255, 100, 0, 0.2);
+    margin-top: 3rem;
+}
+
+.socialLinks {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-bottom: 1.5rem;
+}
+
+.socialIcon {
+    font-size: 1.5rem;
+    color: $text-ash;
+    transition: all 0.3s ease;
+}
+
+.socialIcon:hover {
+    color: $accent-fire;
+    transform: translateY(-5px);
+}
+
+.copyright {
+    color: $text-ash;
+    font-size: 0.9rem;
+    text-align: center;
+}
+
+/* Responsive adjustments */
+@media (max-width: 992px) {
+    .pageTitle {
+        font-size: 2.5rem;
+    }
+
+    .featuredCard .row {
+        flex-direction: column;
+    }
+}
+
+@media (max-width: 768px) {
+    .pageTitle {
+        font-size: 2rem;
+    }
+
+    .techStack {
+        justify-content: center;
+    }
+}
+
+@media (max-width: 576px) {
+    .pageTitle {
+        font-size: 1.8rem;
+    }
+
+    .projectLinks {
+        flex-direction: column;
+    }
+
+    .projectLinks .btn {
+        margin-bottom: 0.5rem;
+    }
+}

src/components/ProjectCard.tsx

@@ -1,5 +1,7 @@
 import { useState } from 'react'
 
+import style from '@styles/Project.module.scss'
+
 export interface ProjectTech {
   name: string;
   icon: string;
@@ -29,41 +31,40 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({ project, onOpenDetails
   
   return (
     <div 
-      className={`card h-100 ${project.featured ? 'featured-card' : ''}`} 
+      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="card-img-top" alt={project.title} />
+        <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="category-badge">{project.category[0]}</div>
+        <div className={style.categoryBadge}>{project.category[0]}</div>
-        
         {project.featured && (
-          <div className="featured-badge">
+          <div className={style.featuredBadge}>
             <i className="fas fa-star"></i>
             <span>Featured</span>
           </div>
         )}
       </div>
-      <div className="card-body d-flex flex-column">
+      <div className={`${style.cardBody} d-flex flex-column`}>
-        <h3 className="card-title">{project.title}</h3>
+        <h3 className={style.cardTitle}>{project.title}</h3>
-        <p className="card-text">
+        <p className={style.cardText}>
           {project.description}
         </p>
         <div>
-          <h4 className="tech-title">// TECHNOLOGIES_USED</h4>
+          <h4 className={style.techTitle}>// TECHNOLOGIES_USED</h4>
-          <div className="tech-stack">
+          <div className={style.techStack}>
             {project.technologies.map((tech, index) => (
-              <span className="tech-item" key={index}>
+              <span className={style.techItem} key={index}>
                 <i className={tech.icon}></i>
                 <span>{tech.name}</span>
               </span>
             ))}
           </div>
         </div>
-        <div className="mt-auto d-flex gap-2 flex-wrap project-links">
+        <div className={`mt-auto d-flex gap-2 flex-wrap project-links`}>
           <button 
-            className="btn btn-outline-secondary" 
+            className={`btn btn-outline-secondary`} 
             onClick={() => onOpenDetails(project.id)}
           >
             <i className="fas fa-info-circle me-2"></i>
@@ -71,14 +72,14 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({ project, onOpenDetails
           </button>
           
           {project.links.github && (
-            <a href={project.links.github} className="btn btn-outline-secondary">
+            <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">
+            <a href={project.links.demo} className={`btn btn-outline-secondary`}>
               <i className="fas fa-external-link-alt me-2"></i>
               Live Demo
             </a>

src/pages/Blog.tsx

@@ -7,7 +7,7 @@ import style from '@styles/Blog.module.scss';
 
 export const Blog = () => {
   const [searchQuery, setSearchQuery] = useState('');
-  const [currentPage, setCurrentPage] = useState(1);
+  const [currentPage, /*setCurrentPage*/] = useState(1);
   
   const filteredPosts = searchQuery
     ? blogPostsData.filter(post => 

src/pages/Projects.tsx

@@ -8,23 +8,18 @@ export const Projects = () => {
   const [activeFilter, setActiveFilter] = useState('all');
   const [selectedProject, setSelectedProject] = useState<ProjectProps | null>(null);
   
-  // Filter projects based on selected category
   const filteredProjects = activeFilter === 'all' 
     ? projectsData 
     : projectsData.filter(project => project.category.includes(activeFilter));
     
-  // Get the featured project
   const featuredProject = projectsData.find(project => project.featured);
   
-  // Get regular projects (non-featured)
   const regularProjects = filteredProjects.filter(project => !project.featured);
   
-  // Handle project filter click
   const handleFilterClick = (filter: string) => {
     setActiveFilter(filter);
   };
   
-  // Handle opening project details modal
   const handleOpenDetails = (id: string) => {
     const project = projectsData.find(p => p.id === id);
     if (project) {
@@ -32,7 +27,6 @@ export const Projects = () => {
     }
   };
   
-  // Handle closing project details modal
   const handleCloseDetails = () => {
     setSelectedProject(null);
   };
@@ -79,16 +73,13 @@ export const Projects = () => {
           </button>
         </div>
 
-        {/* Projects Grid */}
         <div className="row">
-          {/* Featured Project */}
           {featuredProject && (activeFilter === 'all' || featuredProject.category.includes(activeFilter)) && (
             <div className="col-12 mb-4">
               <ProjectCard project={featuredProject} onOpenDetails={handleOpenDetails} />
             </div>
           )}
 
-          {/* Regular Projects */}
           {regularProjects.map(project => (
             <div className="col-md-6 col-lg-4 mb-4" key={project.id}>
               <ProjectCard project={project} onOpenDetails={handleOpenDetails} />
@@ -96,14 +87,12 @@ export const Projects = () => {
           ))}
         </div>
 
-        {/* No Projects Message */}
         {filteredProjects.length === 0 && (
           <div className="text-center mt-5">
             <h3>No projects found for this category.</h3>
           </div>
         )}
 
-        {/* View All Button */}
         <div className="text-center mt-4">
           <a href="https://github.com/SecCodeSmith" className="btn btn-primary">
             <i className="fab fa-github me-2"></i> View All Projects on GitHub
@@ -111,7 +100,6 @@ export const Projects = () => {
         </div>
       </div>
       
-      {/* Project Modal */}
       {selectedProject && (
         <ProjectModal project={selectedProject} onClose={handleCloseDetails} />
       )}