diff --git a/src/assets/styles/Blog.scss b/src/assets/styles/Blog.module.scss similarity index 50% rename from src/assets/styles/Blog.scss rename to src/assets/styles/Blog.module.scss index db9a0de..154a440 100644 --- a/src/assets/styles/Blog.scss +++ b/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,153 +42,89 @@ 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 { - display: inline-flex; - align-items: center; - gap: 6px; - margin-right: 1rem; - color: $text-ash; - font-size: 0.9rem; +@mixin metaItem { + .metaItem { + display: inline-flex; + align-items: center; + gap: 6px; + margin-right: 1rem; + 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 { - display: inline-block; - color: $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; -} +@mixin readMore { + .readMore { + display: inline-block; + color: $accent-fire; + text-decoration: none; + font-weight: 600; + transition: all 0.3s ease; + position: relative; + } -.read-more:hover::after { - transform: translateX(5px); + .readMore::after { + content: "→"; + margin-left: 5px; + transition: transform 0.3s ease; + } + + .readMore:hover::after { + transform: translateX(5px); + } } /* Tags */ -.post-tag { - display: inline-block; - background-color: rgba(255, 100, 0, 0.1); - color: $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; +@mixin postTag { + .postTag { + display: inline-block; + background-color: rgba(255, 100, 0, 0.1); + color: $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; + } + + .postTag:hover { + background-color: rgba(255, 100, 0, 0.2); + transform: translateY(-2px); + } } -.post-tag: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; diff --git a/src/assets/styles/BlogCard.module.scss b/src/assets/styles/BlogCard.module.scss new file mode 100644 index 0000000..954b4db --- /dev/null +++ b/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; +} diff --git a/src/assets/styles/Home.module.scss b/src/assets/styles/Home.module.scss index 1bcdaca..965247c 100644 --- a/src/assets/styles/Home.module.scss +++ b/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 { diff --git a/src/components/BlogCard.tsx b/src/components/BlogCard.tsx index 23eb7d4..d9f34bd 100644 --- a/src/components/BlogCard.tsx +++ b/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 = ({ post }) => { return ( -
+
- {post.title} + {post.title}
{post.category}
{post.featured && ( -
+
Featured
)}
-
-

+
+

{post.title}

-
-
+
+
{post.date}
-
- +
+ {post.author}
-
- +
+ {post.commentCount} Comments
-

+

{post.excerpt}

- Continue Reading + Continue Reading
{post.tags.map((tag, index) => ( - {tag} + {tag} ))}
diff --git a/src/index.css b/src/index.css deleted file mode 100644 index 62c1518..0000000 --- a/src/index.css +++ /dev/null @@ -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; - } -} \ No newline at end of file diff --git a/src/pages/Blog.module.css b/src/pages/Blog.module.css deleted file mode 100644 index 9419c93..0000000 --- a/src/pages/Blog.module.css +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/src/pages/Blog.tsx b/src/pages/Blog.tsx index 20bd874..8e2b5da 100644 --- a/src/pages/Blog.tsx +++ b/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 '@styles/Blog.scss'; +import style from '@styles/Blog.module.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) => { 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 = () => {
- {/* Main Content */}
- {/* Featured Post */} {featuredPost && (!searchQuery || featuredPost.title.toLowerCase().includes(searchQuery.toLowerCase()) || featuredPost.excerpt.toLowerCase().includes(searchQuery.toLowerCase()) || @@ -56,7 +47,6 @@ export const Blog = () => { )} - {/* Regular Posts */}
{regularPosts.map(post => (
@@ -65,7 +55,6 @@ export const Blog = () => { ))}
- {/* No Posts Message */} {filteredPosts.length === 0 && (

No posts found matching your search.

@@ -78,20 +67,19 @@ export const Blog = () => {
)} - {/* Pagination */} {filteredPosts.length > 0 && (
- {/* Sidebar */} -
- {/* Search Widget */} -
-

Search

-
+
+
+

Search

+
{ value={searchQuery} onChange={handleSearchChange} /> -
- {/* Categories Widget */} -
-

Categories

+
+

Categories

{categories.map((category, index) => { const count = blogPostsData.filter(post => post.category === category).length; return ( -
+ ); @@ -139,32 +124,30 @@ export const Blog = () => {
- {/* Recent Posts Widget */} -
-

Recent Posts

+
+

Recent Posts

{blogPostsData.slice(0, 3).map(post => ( -
- {post.title} -
-

+
+ {post.title} +
+

{post.title}

- {post.date} + {post.date}
))}

- {/* Tags Widget */} -
-

Popular Tags

+
+

Popular Tags

{uniqueTags.map((tag, index) => ( setSearchQuery(tag)} style={{ cursor: 'pointer' }} > diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 508dfbe..194bb4d 100644 --- a/src/pages/Home.tsx +++ b/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 */}
@@ -113,7 +105,6 @@ export const Home = () => {
- {/* Skills Section */}