feat: add Blog and BlogCard styles, refactor components to use CSS modules, and remove unused CSS files
This commit is contained in:
@@ -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,134 +42,64 @@
|
||||
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;
|
||||
margin-right: 1rem;
|
||||
color: $text-ash;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.meta-icon {
|
||||
|
||||
@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;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
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;
|
||||
@@ -179,15 +110,21 @@
|
||||
margin-right: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
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;
|
||||
@@ -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;
|
||||
}
|
||||
@@ -73,7 +73,7 @@
|
||||
color: $accent-fire;
|
||||
font-size: 1rem;
|
||||
animation: fall linear infinite;
|
||||
opacity: 0.7;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@keyframes fall {
|
||||
|
||||
+15
-14
@@ -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">
|
||||
<h2 className="card-title">
|
||||
<div className={`card-body ${styles.cardBody}`}>
|
||||
<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="meta-item">
|
||||
<div className={`d-flex meta-items mb-3`}>
|
||||
<div className={`meta-item ${styles.metaItem}`}>
|
||||
<i className="fas fa-calendar-alt meta-icon"></i>
|
||||
<span>{post.date}</span>
|
||||
</div>
|
||||
<div className="meta-item">
|
||||
<i className="fas fa-user meta-icon"></i>
|
||||
<div className={`meta-item ${styles.metaItem}`}>
|
||||
<i className={`fas fa-user meta-icon ${styles.metaIcon}`}></i>
|
||||
<span>{post.author}</span>
|
||||
</div>
|
||||
<div className="meta-item">
|
||||
<i className="fas fa-comments meta-icon"></i>
|
||||
<div className={`meta-item ${styles.metaItem}`}>
|
||||
<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>
|
||||
|
||||
-210
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
+27
-44
@@ -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<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">
|
||||
<a className="page-link" href="#" aria-label="Previous">
|
||||
<li className={`page-item ${style.pageItem}`}>
|
||||
<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"><a className="page-link" href="#">2</a></li>
|
||||
<li className="page-item"><a className="page-link" href="#">3</a></li>
|
||||
<li className="page-item">
|
||||
<a className="page-link" href="#" aria-label="Next">
|
||||
<li className={`page-item ${style.pageItem} active`}><a className="page-link" href="#">1</a></li>
|
||||
<li className={`page-item ${style.pageItem}`}><a className="page-link" href="#">2</a></li>
|
||||
<li className={`page-item ${style.pageItem}`}><a className="page-link" href="#">3</a></li>
|
||||
<li className={`page-item ${style.pageItem}`}>
|
||||
<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">
|
||||
{/* Search Widget */}
|
||||
<div className="sidebar-widget">
|
||||
<h3 className="widget-title">Search</h3>
|
||||
<form className="search-form">
|
||||
<div className={`col-lg-4 sidebar`}>
|
||||
<div className={`sidebar-widget ${style.sidebarWidget}`}>
|
||||
<h3 className={`widget-title ${style.widgetTitle}`}>Search</h3>
|
||||
<form className={`search-form ${style.searchForm}`}>
|
||||
<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">
|
||||
<h3 className="widget-title">Categories</h3>
|
||||
<div className={`sidebar-widget ${style.sidebarWidget}`}>
|
||||
<h3 className={`widget-title ${style.widgetTitle}`}>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">
|
||||
<h3 className="widget-title">Recent Posts</h3>
|
||||
<div className={`sidebar-widget ${style.sidebarWidget}`}>
|
||||
<h3 className={`widget-title ${style.widgetTitle}`}>Recent Posts</h3>
|
||||
<div className="recent-posts">
|
||||
{blogPostsData.slice(0, 3).map(post => (
|
||||
<div className="recent-post-item" key={post.id}>
|
||||
<img src={post.image} className="recent-post-thumb" alt={post.title} />
|
||||
<div className="recent-post-info">
|
||||
<h4 className="recent-post-title">
|
||||
<div className={`recent-post-item ${style.recentPostItem}`} key={post.id}>
|
||||
<img src={post.image} className={`recent-post-thumb ${style.recentPostThumb}`} alt={post.title} />
|
||||
<div className={style.recentPostInfo}>
|
||||
<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">
|
||||
<h3 className="widget-title">Popular Tags</h3>
|
||||
<div className={`sidebar-widget ${style.sidebarWidget}`}>
|
||||
<h3 className={`widget-title ${style.widgetTitle}`}>Popular Tags</h3>
|
||||
<div>
|
||||
{uniqueTags.map((tag, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className="post-tag"
|
||||
className={style.postTag}
|
||||
onClick={() => setSearchQuery(tag)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user