feat: add Blog and BlogCard styles, refactor components to use CSS modules, and remove unused CSS files

src/assets/styles/Blog.module.scss

@@ -1,7 +1,8 @@
 @use "./variables.scss" as *;
 
+
 /* Page Header */
-.page-header {
+.pageHeader {
     padding-top: 7rem;
     padding-bottom: 3rem;
     background-color: $secondary-dark;
@@ -9,7 +10,7 @@
     overflow: hidden;
 }
 
-.page-header::before {
+.pageHeader::before {
     content: "";
     position: absolute;
     width: 100%;
@@ -22,14 +23,14 @@
     z-index: 0;
 }
 
-.page-title {
+.pageTitle {
     font-size: 3rem;
     margin-bottom: 1rem;
     position: relative;
     display: inline-block;
 }
 
-.page-title::after {
+.pageTitle::after {
     content: "";
     position: absolute;
     width: 60px;
@@ -41,100 +42,15 @@
     box-shadow: $glow-effect;
 }
 
-.page-subtitle {
+.pageSubtitle {
     font-size: 1.2rem;
     color: $text-ash;
 }
 
-/* Card styling */
-.card {
-    background-color: $card-bg;
-    border: 1px solid $card-border;
-    border-radius: 8px;
-    transition: all 0.3s ease;
-    margin-bottom: 1.5rem;
-    overflow: hidden;
-}
-
-.card:hover {
-    transform: translateY(-5px);
-    border-color: rgba(255, 100, 0, 0.3);
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
-}
-
-.card-img-top {
-    height: 200px;
-    object-fit: cover;
-}
-
-.featured-img {
-    height: 300px;
-}
-
-.card-title {
-    font-size: 1.5rem;
-    margin-bottom: 0.75rem;
-}
-
-.card-title a {
-    color: $text-light;
-    text-decoration: none;
-    transition: color 0.3s;
-}
-
-.card-title a:hover {
-    color: $accent-fire;
-}
-
-.card-text {
-    color: $text-ash;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    line-height: 1.6;
-}
-
-.featured-card .card-title {
-    font-size: 1.8rem;
-}
-
-.card-footer {
-    background-color: rgba(0, 0, 0, 0.2);
-    border-top: 1px solid $card-border;
-}
-
-/* Category badges */
-.category-badge {
-    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;
-}
-
-.featured-badge {
-    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;
-}
 
 /* Meta items */
-.meta-item {
+@mixin metaItem {
+    .metaItem {
         display: inline-flex;
         align-items: center;
         gap: 6px;
@@ -142,13 +58,26 @@
         color: $text-ash;
         font-size: 0.9rem;
     }
-
-.meta-icon {
-    color: $accent-fire;
 }
 
+
+@mixin metaIcon {
+    .metaIcon {
+        font-size: 1.2rem;
+        color: $text-ash;
+        transition: all 0.3s ease;
+    }
+
+    .metaIcon:hover {
+        color: $accent-fire;
+    }
+}
+
+
 /* Read more link */
-.read-more {
+
+@mixin readMore {
+    .readMore {
         display: inline-block;
         color: $accent-fire;
         text-decoration: none;
@@ -157,18 +86,20 @@
         position: relative;
     }
 
-.read-more::after {
+    .readMore::after {
         content: "→";
         margin-left: 5px;
         transition: transform 0.3s ease;
     }
 
-.read-more:hover::after {
+    .readMore:hover::after {
         transform: translateX(5px);
     }
+}
 
 /* Tags */
-.post-tag {
+@mixin postTag {
+    .postTag {
         display: inline-block;
         background-color: rgba(255, 100, 0, 0.1);
         color: $accent-fire;
@@ -181,13 +112,19 @@
         transition: all 0.3s ease;
     }
 
-.post-tag:hover {
+    .postTag:hover {
         background-color: rgba(255, 100, 0, 0.2);
         transform: translateY(-2px);
     }
+}
+
+@include metaItem;
+@include metaIcon;
+@include readMore;
+@include postTag;
 
 /* Sidebar */
-.sidebar-widget {
+.sidebarWidget {
     background-color: $card-bg;
     border-radius: 8px;
     padding: 1.5rem;
@@ -195,7 +132,7 @@
     border: 1px solid $card-border;
 }
 
-.widget-title {
+.widgetTitle {
     font-size: 1.2rem;
     margin-bottom: 1.25rem;
     padding-bottom: 0.625rem;
@@ -203,7 +140,7 @@
     position: relative;
 }
 
-.widget-title::after {
+.widgetTitle::after {
     content: "";
     position: absolute;
     width: 40px;
@@ -213,40 +150,40 @@
     left: 0;
 }
 
-.search-form .form-control {
+.searchForm .formControl {
     background-color: rgba(255, 255, 255, 0.05);
     border: 1px solid $card-border;
     color: $text-light;
 }
 
-.search-form .form-control:focus {
+.searchForm .formControl:focus {
     box-shadow: 0 0 0 0.25rem rgba(255, 100, 0, 0.25);
     border-color: $accent-fire;
 }
 
-.search-form .btn {
+.searchForm .btn {
     background-color: $accent-fire;
     border-color: $accent-fire;
 }
 
-.search-form .btn:hover {
+.searchForm .btn:hover {
     background-color: $accent-dragon;
     border-color: $accent-dragon;
 }
 
 /* Lists in sidebar */
-.list-group-item {
+.listGroupItem {
     background-color: transparent;
     border-color: rgba(255, 255, 255, 0.05);
     color: $text-ash;
     transition: all 0.3s ease;
 }
 
-.list-group-item:hover {
+.listGroupItem:hover {
     background-color: rgba(255, 100, 0, 0.1);
 }
 
-.list-group-item a {
+.listGroupItem a {
     color: $text-ash;
     text-decoration: none;
     display: flex;
@@ -254,11 +191,11 @@
     align-items: center;
 }
 
-.list-group-item a:hover {
+.listGroup-item a:hover {
     color: $accent-fire;
 }
 
-.category-count {
+.categoryCount {
     background-color: rgba(255, 100, 0, 0.1);
     color: $accent-fire;
     padding: 2px 8px;
@@ -267,7 +204,7 @@
 }
 
 /* Recent posts in sidebar */
-.recent-post-item {
+.recentPostItem {
     display: flex;
     align-items: center;
     gap: 10px;
@@ -276,65 +213,65 @@
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }
 
-.recent-post-item:last-child {
+.recentPostItem:last-child {
     margin-bottom: 0;
     padding-bottom: 0;
     border-bottom: none;
 }
 
-.recent-post-thumb {
+.recentPostThumb {
     width: 60px;
     height: 60px;
     border-radius: 4px;
     object-fit: cover;
 }
 
-.recent-post-info {
+.recentPostInfo {
     flex-grow: 1;
 }
 
-.recent-post-title {
+.recentPostTitle {
     font-size: 0.9rem;
     line-height: 1.4;
     margin-bottom: 5px;
 }
 
-.recent-post-title a {
+.recentPostTitle a {
     color: $text-ash;
     text-decoration: none;
     transition: color 0.3s;
 }
 
-.recent-post-title a:hover {
+.recentPostTitle a:hover {
     color: $accent-fire;
 }
 
-.recent-post-date {
+.recentPostDate {
     font-size: 0.8rem;
     color: rgba(255, 255, 255, 0.5);
 }
 
 /* Pagination */
-.page-item .page-link {
+.pageItem .pageLink {
     background-color: $card-bg;
     border-color: $card-border;
     color: $text-ash;
 }
 
-.page-item .page-link:hover {
+.pageItem .pageLink:hover {
     background-color: rgba(255, 100, 0, 0.1);
     color: $accent-fire;
     border-color: $accent-fire;
 }
 
-.page-item.active .page-link {
+.pageItem.active .pageLink {
     background-color: $accent-fire;
     border-color: $accent-fire;
     color: $text-light;
 }
 
 /* Binary background effect */
-.binary-line {
+.binaryLine {
     position: absolute;
     font-family: 'Fira Code', monospace;
     color: $accent-fire;

src/assets/styles/BlogCard.module.scss

@@ -0,0 +1,95 @@
+@use "./variables.scss" as *;
+@use "./Blog.module.scss" as Blog;
+
+@include Blog.metaItem;
+@include Blog.metaIcon;
+@include Blog.readMore;
+@include Blog.postTag;
+
+
+/* Card styling */
+.card {
+    background-color: $card-bg;
+    border: 1px solid $card-border;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+    margin-bottom: 1.5rem;
+    overflow: hidden;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    border-color: rgba(255, 100, 0, 0.3);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+}
+
+.cardImgTop {
+    height: 200px;
+    object-fit: cover;
+}
+
+.featuredImg {
+    height: 300px;
+}
+
+.cardTitle {
+    font-size: 1.5rem;
+    margin-bottom: 0.75rem;
+}
+
+.cardTitle a {
+    color: $text-light;
+    text-decoration: none;
+    transition: color 0.3s;
+}
+
+.cardTitle a:hover {
+    color: $accent-fire;
+}
+
+.cardText {
+    color: $text-ash;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    line-height: 1.6;
+}
+
+.featuredCard .cardTitle {
+    font-size: 1.8rem;
+}
+
+.cardFooter {
+    background-color: rgba(0, 0, 0, 0.2);
+    border-top: 1px solid $card-border;
+}
+
+/* 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;
+}
+
+.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;
+}

src/assets/styles/Home.module.scss

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

src/components/BlogCard.tsx

@@ -1,4 +1,5 @@
 import { Link } from 'react-router-dom';
+import styles from '@styles/BlogCard.module.scss';
 
 export interface BlogPostProps {
   id: string;
@@ -22,43 +23,43 @@ interface BlogCardProps {
 
 export const BlogCard: React.FC<BlogCardProps> = ({ post }) => {
   return (
-    <div className={`card ${post.featured ? 'featured-card' : ''}`}>
+    <div className={`card ${styles.card} ${post.featured ? styles.featuredCard : ''}`}>
       <div className="position-relative">
-        <img src={post.image} className={`card-img-top ${post.featured ? 'featured-img' : ''}`} alt={post.title} />
+        <img src={post.image} className={`card-img-top ${post.featured ? styles.featuredImg : ''}`} alt={post.title} />
         <div className="category-badge">{post.category}</div>
         
         {post.featured && (
-          <div className="featured-badge">
+          <div className={`featured-badge ${styles.featuredBadge}`}>
             <i className="fas fa-star"></i>
             <span>Featured</span>
           </div>
         )}
       </div>
-      <div className="card-body">
+      <div className={`card-body ${styles.cardBody}`}>
-        <h2 className="card-title">
+        <h2 className={`card-title ${styles.cardTitle}`}>
           <Link to={`/blog/${post.slug}`}>{post.title}</Link>
         </h2>
-        <div className="d-flex meta-items mb-3">
+        <div className={`d-flex meta-items mb-3`}>
-          <div className="meta-item">
+          <div className={`meta-item ${styles.metaItem}`}>
             <i className="fas fa-calendar-alt meta-icon"></i>
             <span>{post.date}</span>
           </div>
-          <div className="meta-item">
+          <div className={`meta-item ${styles.metaItem}`}>
-            <i className="fas fa-user meta-icon"></i>
+            <i className={`fas fa-user meta-icon ${styles.metaIcon}`}></i>
             <span>{post.author}</span>
           </div>
-          <div className="meta-item">
+          <div className={`meta-item ${styles.metaItem}`}>
-            <i className="fas fa-comments meta-icon"></i>
+            <i className={`fas fa-comments meta-icon ${styles.metaIcon}`}></i>
             <span>{post.commentCount} Comments</span>
           </div>
         </div>
-        <p className="card-text">
+        <p className={`card-text ${styles.cardText}`}>
           {post.excerpt}
         </p>
-        <Link to={`/blog/${post.slug}`} className="read-more">Continue Reading</Link>
+        <Link to={`/blog/${post.slug}`} className={`read-more ${styles.readMore}`}>Continue Reading</Link>
         <div className="mt-3">
           {post.tags.map((tag, index) => (
-            <span key={index} className="post-tag">{tag}</span>
+            <span key={index} className={`post-tag ${styles.postTag}`}>{tag}</span>
           ))}
         </div>
       </div>

src/index.css

@@ -1,210 +0,0 @@
-:root {
-    --primary-dark: #0a0a0a;
-    --secondary-dark: #1a1a1a;
-    --accent-fire: #ff6400;
-    --accent-ember: #ff4500;
-    --accent-dragon: #8B0000;
-    --text-light: #f5f5f5;
-    --text-ash: #aaaaaa;
-    --glow-effect: 0 0 10px var(--accent-fire), 0 0 20px rgba(255, 100, 0, 0.4);
-    --card-bg: #141414;
-    --card-border: #2a2a2a;
-}
-
-body {
-    background-color: var(--primary-dark);
-    color: var(--text-light);
-    background-image: url('assets/images/background.png');
-    background-repeat: round;
-    background-size: 300px 300px;
-    background-position: 0 0;
-    position: relative;
-    overflow-x: hidden;
-    font-family: 'Cinzel', serif;
-}
-
-body::before {
-    content: "";
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: radial-gradient(circle at 50% 50%, rgba(139, 0, 0, 0.08), rgba(10, 10, 10, 0.4));
-    pointer-events: none;
-    z-index: -1;
-}
-
-/* Bootstrap Overrides */
-.navbar {
-    background-color: rgba(10, 10, 10, 0.95) !important;
-    border-bottom: 1px solid rgba(255, 100, 0, 0.3);
-}
-
-.navbar-brand {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-}
-
-.navbar-toggler {
-    border: 1px solid rgba(255, 100, 0, 0.5);
-    color: var(--accent-fire);
-}
-
-.navbar-toggler-icon {
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 100, 0, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
-}
-
-.nav-link {
-    color: var(--text-light) !important;
-    position: relative;
-    padding: 0.5rem 1rem;
-    transition: color 0.3s;
-}
-
-.nav-link:hover,
-.nav-link.active {
-    color: var(--accent-fire) !important;
-}
-
-.nav-link::after {
-    content: "";
-    position: absolute;
-    width: 0;
-    height: 2px;
-    bottom: 0;
-    left: 0;
-    background: linear-gradient(to right, var(--accent-fire), transparent);
-    transition: width 0.3s ease;
-}
-
-.nav-link:hover::after,
-.nav-link.active::after {
-    width: 100%;
-}
-
-.logo-image{
-    height: 2rem;
-}
-/* Logo styling */
-.logo-icon {
-    height: 2rem;
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.logo-text {
-    font-weight: 700;
-    font-size: 1.5rem;
-    background: linear-gradient(to right, var(--accent-fire), var(--text-light));
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-    letter-spacing: 1px;
-}
-
-
-
-@keyframes fall {
-    0% {
-        transform: translateY(-100%);
-    }
-
-    100% {
-        transform: translateY(100vh);
-    }
-}
-
-
-
-@keyframes rise {
-    0% {
-        transform: translateY(0) translateX(0);
-        opacity: 0;
-    }
-
-    10% {
-        opacity: 0.5;
-    }
-
-    90% {
-        opacity: 0.5;
-    }
-
-    100% {
-        transform: translateY(-100px) translateX(var(--x));
-        opacity: 0;
-    }
-}
-
-/* Footer */
-.footer {
-    background-color: var(--primary-dark);
-    padding: 3rem 0;
-    border-top: 1px solid rgba(255, 100, 0, 0.2);
-    margin-top: 5rem;
-}
-
-.social-links {
-    display: flex;
-    justify-content: center;
-    gap: 20px;
-    margin-bottom: 1.5rem;
-}
-
-.social-icon {
-    font-size: 1.5rem;
-    color: var(--text-ash);
-    transition: all 0.3s ease;
-}
-
-.social-icon:hover {
-    color: var(--accent-fire);
-    transform: translateY(-5px);
-}
-
-.copyright {
-    color: var(--text-ash);
-    font-size: 0.9rem;
-    margin-top: 1rem;
-    text-align: center;
-}
-
-/* Responsive adjustments */
-@media (max-width: 992px) {
-    .title-main {
-        font-size: 3rem;
-    }
-}
-
-@media (max-width: 768px) {
-    .title-main {
-        font-size: 2.5rem;
-    }
-
-    .subtitle {
-        font-size: 1.2rem;
-    }
-
-    .binary-line {
-        font-size: 0.8rem;
-    }
-}
-
-@media (max-width: 576px) {
-    .title-main {
-        font-size: 2rem;
-    }
-
-    .subtitle {
-        font-size: 1rem;
-    }
-
-    .btn-primary {
-        padding: 0.6rem 1.5rem;
-        font-size: 0.9rem;
-    }
-}

src/pages/Blog.module.css

@@ -1,342 +0,0 @@
-/* Page Header */
-.page-header {
-    padding-top: 7rem;
-    padding-bottom: 3rem;
-    background-color: var(--secondary-dark);
-    position: relative;
-    overflow: hidden;
-}
-
-.page-header::before {
-    content: "";
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    background-image: url('/api/placeholder/1200/400');
-    opacity: 0.15;
-    filter: brightness(0.3);
-    z-index: 0;
-}
-
-.page-title {
-    font-size: 3rem;
-    margin-bottom: 1rem;
-    position: relative;
-    display: inline-block;
-}
-
-.page-title::after {
-    content: "";
-    position: absolute;
-    width: 60px;
-    height: 3px;
-    background: var(--accent-fire);
-    bottom: -10px;
-    left: 50%;
-    transform: translateX(-50%);
-    box-shadow: var(--glow-effect);
-}
-
-.page-subtitle {
-    font-size: 1.2rem;
-    color: var(--text-ash);
-}
-
-/* Card styling */
-.card {
-    background-color: var(--card-bg);
-    border: 1px solid var(--card-border);
-    border-radius: 8px;
-    transition: all 0.3s ease;
-    margin-bottom: 1.5rem;
-    overflow: hidden;
-}
-
-.card:hover {
-    transform: translateY(-5px);
-    border-color: rgba(255, 100, 0, 0.3);
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
-}
-
-.card-img-top {
-    height: 200px;
-    object-fit: cover;
-}
-
-.featured-img {
-    height: 300px;
-}
-
-.card-title {
-    font-size: 1.5rem;
-    margin-bottom: 0.75rem;
-}
-
-.card-title a {
-    color: var(--text-light);
-    text-decoration: none;
-    transition: color 0.3s;
-}
-
-.card-title a:hover {
-    color: var(--accent-fire);
-}
-
-.card-text {
-    color: var(--text-ash);
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    line-height: 1.6;
-}
-
-.featured-card .card-title {
-    font-size: 1.8rem;
-}
-
-.card-footer {
-    background-color: rgba(0, 0, 0, 0.2);
-    border-top: 1px solid var(--card-border);
-}
-
-/* Category badges */
-.category-badge {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    background-color: rgba(139, 0, 0, 0.9);
-    color: var(--text-light);
-    padding: 0.25rem 0.75rem;
-    border-radius: 4px;
-    font-size: 0.8rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-}
-
-.featured-badge {
-    position: absolute;
-    top: 1rem;
-    left: 1rem;
-    background: linear-gradient(45deg, var(--accent-dragon), var(--accent-fire));
-    color: var(--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;
-}
-
-/* Meta items */
-.meta-item {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    margin-right: 1rem;
-    color: var(--text-ash);
-    font-size: 0.9rem;
-}
-
-.meta-icon {
-    color: var(--accent-fire);
-}
-
-/* Read more link */
-.read-more {
-    display: inline-block;
-    color: var(--accent-fire);
-    text-decoration: none;
-    font-weight: 600;
-    transition: all 0.3s ease;
-    position: relative;
-}
-
-.read-more::after {
-    content: "→";
-    margin-left: 5px;
-    transition: transform 0.3s ease;
-}
-
-.read-more:hover::after {
-    transform: translateX(5px);
-}
-
-/* Tags */
-.post-tag {
-    display: inline-block;
-    background-color: rgba(255, 100, 0, 0.1);
-    color: var(--accent-fire);
-    padding: 0.25rem 0.5rem;
-    border-radius: 4px;
-    font-size: 0.8rem;
-    font-weight: 500;
-    margin-right: 0.5rem;
-    margin-bottom: 0.5rem;
-    transition: all 0.3s ease;
-}
-
-.post-tag:hover {
-    background-color: rgba(255, 100, 0, 0.2);
-    transform: translateY(-2px);
-}
-
-/* Sidebar */
-.sidebar-widget {
-    background-color: var(--card-bg);
-    border-radius: 8px;
-    padding: 1.5rem;
-    margin-bottom: 1.5rem;
-    border: 1px solid var(--card-border);
-}
-
-.widget-title {
-    font-size: 1.2rem;
-    margin-bottom: 1.25rem;
-    padding-bottom: 0.625rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    position: relative;
-}
-
-.widget-title::after {
-    content: "";
-    position: absolute;
-    width: 40px;
-    height: 2px;
-    background: var(--accent-fire);
-    bottom: -1px;
-    left: 0;
-}
-
-.search-form .form-control {
-    background-color: rgba(255, 255, 255, 0.05);
-    border: 1px solid var(--card-border);
-    color: var(--text-light);
-}
-
-.search-form .form-control:focus {
-    box-shadow: 0 0 0 0.25rem rgba(255, 100, 0, 0.25);
-    border-color: var(--accent-fire);
-}
-
-.search-form .btn {
-    background-color: var(--accent-fire);
-    border-color: var(--accent-fire);
-}
-
-.search-form .btn:hover {
-    background-color: var(--accent-dragon);
-    border-color: var(--accent-dragon);
-}
-
-/* Lists in sidebar */
-.list-group-item {
-    background-color: transparent;
-    border-color: rgba(255, 255, 255, 0.05);
-    color: var(--text-ash);
-    transition: all 0.3s ease;
-}
-
-.list-group-item:hover {
-    background-color: rgba(255, 100, 0, 0.1);
-}
-
-.list-group-item a {
-    color: var(--text-ash);
-    text-decoration: none;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.list-group-item a:hover {
-    color: var(--accent-fire);
-}
-
-.category-count {
-    background-color: rgba(255, 100, 0, 0.1);
-    color: var(--accent-fire);
-    padding: 2px 8px;
-    border-radius: 10px;
-    font-size: 0.8rem;
-}
-
-/* Recent posts in sidebar */
-.recent-post-item {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 1rem;
-    padding-bottom: 1rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-}
-
-.recent-post-item:last-child {
-    margin-bottom: 0;
-    padding-bottom: 0;
-    border-bottom: none;
-}
-
-.recent-post-thumb {
-    width: 60px;
-    height: 60px;
-    border-radius: 4px;
-    object-fit: cover;
-}
-
-.recent-post-info {
-    flex-grow: 1;
-}
-
-.recent-post-title {
-    font-size: 0.9rem;
-    line-height: 1.4;
-    margin-bottom: 5px;
-}
-
-.recent-post-title a {
-    color: var(--text-ash);
-    text-decoration: none;
-    transition: color 0.3s;
-}
-
-.recent-post-title a:hover {
-    color: var(--accent-fire);
-}
-
-.recent-post-date {
-    font-size: 0.8rem;
-    color: rgba(255, 255, 255, 0.5);
-}
-
-/* Pagination */
-.page-item .page-link {
-    background-color: var(--card-bg);
-    border-color: var(--card-border);
-    color: var(--text-ash);
-}
-
-.page-item .page-link:hover {
-    background-color: rgba(255, 100, 0, 0.1);
-    color: var(--accent-fire);
-    border-color: var(--accent-fire);
-}
-
-.page-item.active .page-link {
-    background-color: var(--accent-fire);
-    border-color: var(--accent-fire);
-    color: var(--text-light);
-}
-
-/* Binary background effect */
-.binary-line {
-    position: absolute;
-    font-family: 'Fira Code', monospace;
-    color: var(--accent-fire);
-    font-size: 0.8rem;
-    opacity: 0.15;
-    pointer-events: none;
-}

src/pages/Blog.tsx

@@ -3,13 +3,11 @@ import { PageHeader } from '../components/PageHeader';
 import { BlogCard } from '../components/BlogCard';
 import { blogPostsData } from '../data/blogPostsData';
 
-import '@styles/_variables.scss';
+import style from '@styles/Blog.module.scss';
-import '@styles/Blog.scss';
 
 export const Blog = () => {
   const [searchQuery, setSearchQuery] = useState('');
   
-  // Filter blog posts based on search query
   const filteredPosts = searchQuery
     ? blogPostsData.filter(post => 
         post.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
@@ -18,21 +16,16 @@ export const Blog = () => {
       )
     : blogPostsData;
   
-  // Get the featured post
   const featuredPost = blogPostsData.find(post => post.featured);
   
-  // Get regular posts (non-featured)
   const regularPosts = filteredPosts.filter(post => !post.featured);
   
-  // Handle search input change
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchQuery(e.target.value);
   };
   
-  // Generate a list of unique categories
   const categories = Array.from(new Set(blogPostsData.map(post => post.category)));
   
-  // Generate a list of unique tags
   const allTags = blogPostsData.flatMap(post => post.tags);
   const uniqueTags = Array.from(new Set(allTags));
   
@@ -45,9 +38,7 @@ export const Blog = () => {
       
       <div className="container mt-5">
         <div className="row">
-          {/* Main Content */}
           <div className="col-lg-8">
-            {/* Featured Post */}
             {featuredPost && (!searchQuery || 
               featuredPost.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
               featuredPost.excerpt.toLowerCase().includes(searchQuery.toLowerCase()) ||
@@ -56,7 +47,6 @@ export const Blog = () => {
               <BlogCard post={featuredPost} />
             )}
 
-            {/* Regular Posts */}
             <div className="row">
               {regularPosts.map(post => (
                 <div className="col-md-6" key={post.id}>
@@ -65,7 +55,6 @@ export const Blog = () => {
               ))}
             </div>
 
-            {/* No Posts Message */}
             {filteredPosts.length === 0 && (
               <div className="text-center mt-5">
                 <h3>No posts found matching your search.</h3>
@@ -78,20 +67,19 @@ export const Blog = () => {
               </div>
             )}
 
-            {/* Pagination */}
             {filteredPosts.length > 0 && (
               <nav className="mt-5" aria-label="Blog pagination">
                 <ul className="pagination justify-content-center">
-                  <li className="page-item">
+                  <li className={`page-item ${style.pageItem}`}>
-                    <a className="page-link" href="#" aria-label="Previous">
+                    <a className={`page-link ${style.pageLink}`} href="#" aria-label="Previous">
                       <i className="fas fa-angle-left"></i>
                     </a>
                   </li>
-                  <li className="page-item active"><a className="page-link" href="#">1</a></li>
+                  <li className={`page-item ${style.pageItem} active`}><a className="page-link" href="#">1</a></li>
-                  <li className="page-item"><a className="page-link" href="#">2</a></li>
+                  <li className={`page-item ${style.pageItem}`}><a className="page-link" href="#">2</a></li>
-                  <li className="page-item"><a className="page-link" href="#">3</a></li>
+                  <li className={`page-item ${style.pageItem}`}><a className="page-link" href="#">3</a></li>
-                  <li className="page-item">
+                  <li className={`page-item ${style.pageItem}`}>
-                    <a className="page-link" href="#" aria-label="Next">
+                    <a className={`page-link ${style.pageLink}`} href="#" aria-label="Next">
                       <i className="fas fa-angle-right"></i>
                     </a>
                   </li>
@@ -100,12 +88,10 @@ export const Blog = () => {
             )}
           </div>
 
-          {/* Sidebar */}
+          <div className={`col-lg-4 sidebar`}>
-          <div className="col-lg-4 sidebar">
+            <div className={`sidebar-widget ${style.sidebarWidget}`}>
-            {/* Search Widget */}
+              <h3 className={`widget-title ${style.widgetTitle}`}>Search</h3>
-            <div className="sidebar-widget">
+              <form className={`search-form ${style.searchForm}`}>
-              <h3 className="widget-title">Search</h3>
-              <form className="search-form">
                 <div className="input-group">
                   <input 
                     type="text" 
@@ -114,24 +100,23 @@ export const Blog = () => {
                     value={searchQuery}
                     onChange={handleSearchChange}
                   />
-                  <button className="btn btn-primary" type="submit">
+                  <button className={`btn btn-primary ${style.btn}`} type="submit">
                     <i className="fas fa-search"></i>
                   </button>
                 </div>
               </form>
             </div>
 
-            {/* Categories Widget */}
+            <div className={`sidebar-widget ${style.sidebarWidget}`}>
-            <div className="sidebar-widget">
+              <h3 className={`widget-title ${style.widgetTitle}`}>Categories</h3>
-              <h3 className="widget-title">Categories</h3>
               <div className="list-group">
                 {categories.map((category, index) => {
                   const count = blogPostsData.filter(post => post.category === category).length;
                   return (
-                    <div className="list-group-item" key={index}>
+                    <div className={`list-group-item ${style.listGroupItem}`} key={index}>
                       <a href="#" onClick={() => setSearchQuery(category)}>
                         <span>{category}</span>
-                        <span className="category-count">{count}</span>
+                        <span className={`category-count ${style.categoryCount}`}>{count}</span>
                       </a>
                     </div>
                   );
@@ -139,32 +124,30 @@ export const Blog = () => {
               </div>
             </div>
 
-            {/* Recent Posts Widget */}
+            <div className={`sidebar-widget ${style.sidebarWidget}`}>
-            <div className="sidebar-widget">
+              <h3 className={`widget-title ${style.widgetTitle}`}>Recent Posts</h3>
-              <h3 className="widget-title">Recent Posts</h3>
               <div className="recent-posts">
                 {blogPostsData.slice(0, 3).map(post => (
-                  <div className="recent-post-item" key={post.id}>
+                  <div className={`recent-post-item ${style.recentPostItem}`} key={post.id}>
-                    <img src={post.image} className="recent-post-thumb" alt={post.title} />
+                    <img src={post.image} className={`recent-post-thumb ${style.recentPostThumb}`} alt={post.title} />
-                    <div className="recent-post-info">
+                    <div className={style.recentPostInfo}>
-                      <h4 className="recent-post-title">
+                      <h4 className={style.recentPostTitle}>
                         <a href={`/blog/${post.slug}`}>{post.title}</a>
                       </h4>
-                      <span className="recent-post-date">{post.date}</span>
+                      <span className={style.recentPostDate}>{post.date}</span>
                     </div>
                   </div>
                 ))}
               </div>
             </div>
 
-            {/* Tags Widget */}
+            <div className={`sidebar-widget ${style.sidebarWidget}`}>
-            <div className="sidebar-widget">
+               <h3 className={`widget-title ${style.widgetTitle}`}>Popular Tags</h3>
-              <h3 className="widget-title">Popular Tags</h3>
               <div>
                 {uniqueTags.map((tag, index) => (
                   <span 
                     key={index} 
-                    className="post-tag" 
+                    className={style.postTag} 
                     onClick={() => setSearchQuery(tag)}
                     style={{ cursor: 'pointer' }}
                   >

src/pages/Home.tsx

@@ -36,7 +36,6 @@ export const Home = () => {
       const particlesContainer = document.getElementById('particles');
       if (!particlesContainer) return;
 
-      // Clear existing particles
       particlesContainer.innerHTML = '';
 
       const particlesCount = 50;
@@ -46,29 +45,24 @@ export const Home = () => {
           const particle = document.createElement('div');
           particle.className = styles.particle;
 
-          // Random position at the bottom of the hero section
           const posX = Math.random() * window.innerWidth;
           const posY = window.innerHeight - 100 + (Math.random() * 50);
 
           particle.style.left = `${posX}px`;
           particle.style.top = `${posY}px`;
 
-          // Random size
           const size = Math.random() * 3 + 1;
           particle.style.width = `${size}px`;
           particle.style.height = `${size}px`;
 
-          // Random drift
           const xDrift = (Math.random() - 0.5) * 100;
           particle.style.setProperty('--x', `${xDrift}px`);
 
-          // Random animation duration
           const duration = Math.random() * 3 + 2;
           particle.style.animationDuration = `${duration}s`;
 
           particlesContainer.appendChild(particle);
 
-          // Remove particle after animation completes
           setTimeout(() => {
             particle.remove();
           }, duration * 1000);
@@ -79,7 +73,6 @@ export const Home = () => {
     createBinaryBg();
     createParticles();
 
-    // Create new particles periodically
     const particleInterval = setInterval(() => {
       const particlesContainer = document.getElementById('particles');
       if (particlesContainer && particlesContainer.childElementCount < 30) {
@@ -95,7 +88,6 @@ export const Home = () => {
 
   return (
     <>
-      {/* Hero Section */}
       <section className={styles.hero} id="home">
         <div id="binary-bg" className={styles.binaryBg}></div>
         <div className={`container text-center ${styles.heroContainer}`}>
@@ -113,7 +105,6 @@ export const Home = () => {
         <div id="particles" className={`particles ${styles.particles}`}></div>
       </section>
 
-      {/* Skills Section */}
       <section id="skills" className={`skills-section ${styles.skillsSection}`}>
         <div className="container">
           <div className="row justify-content-center mb-5">