diff --git a/src/index.css b/src/index.css index 88454ae..0bf1566 100644 --- a/src/index.css +++ b/src/index.css @@ -1,439 +1,209 @@ :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('../images/background.png'); - background-repeat: round; - background-size: 300px 300px; - background-position: 0 0; - position: relative; - overflow-x: hidden; - font-family: 'Cinzel', serif; - } + --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::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 styling */ - .logo-icon { - font-size: 2rem; - color: var(--accent-fire); - text-shadow: var(--glow-effect); - 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; - } - - /* Hero Section */ - .hero { - height: 100vh; - position: relative; - overflow: hidden; - display: flex; - align-items: center; - padding-top: 76px; /* Account for navbar height */ - } - - .hero::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: url('/api/placeholder/1200/800') center/cover no-repeat; - opacity: 0.15; - filter: brightness(0.5) contrast(1.2); - z-index: -1; - } - - .title-main { - font-size: 4rem; - font-weight: 700; - position: relative; - display: inline-block; - } - - .title-main::before { - content: "< "; - color: var(--accent-fire); - opacity: 0.8; - } - - .title-main::after { - content: " />"; - color: var(--accent-fire); - opacity: 0.8; - } - - .subtitle { - font-size: 1.6rem; - color: var(--text-ash); - margin-bottom: 2rem; - } - - /* Binary Background */ - .binary-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: -1; - opacity: 0.07; - overflow: hidden; - } - - .binary-line { - position: absolute; - font-family: 'Fira Code', monospace; - color: var(--accent-fire); - font-size: 1rem; - animation: fall linear infinite; - opacity: 0.7; - } - - @keyframes fall { - 0% { - transform: translateY(-100%); - } - 100% { - transform: translateY(100vh); - } - } - - /* Button Styling */ - .btn-primary { - background: linear-gradient(45deg, var(--accent-dragon), var(--accent-fire)); - border: none; - padding: 0.75rem 2rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 1px; - box-shadow: 0 4px 15px rgba(139, 0, 0, 0.3); - transition: all 0.3s ease; - position: relative; - overflow: hidden; - } - - .btn-primary:hover { - transform: translateY(-3px); - box-shadow: 0 7px 25px rgba(139, 0, 0, 0.5); - background-color: var(--accent-fire); - background-image: none; - } - - .btn-primary::before { - content: ""; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); - transition: all 0.6s ease; - } - - .btn-primary:hover::before { - left: 100%; - } - - /* Skills Section */ - .skills-section { - padding: 6rem 0; - background-color: var(--secondary-dark); - position: relative; - } - - .section-title { - text-align: center; - font-size: 2.5rem; - margin-bottom: 3rem; - position: relative; - display: inline-block; - } - - .section-title::after { - content: ""; - position: absolute; - width: 80px; - height: 3px; - background: var(--accent-fire); - bottom: -10px; - left: 50%; - transform: translateX(-50%); - box-shadow: var(--glow-effect); - } - - .card { - background-color: var(--card-bg); - border: 1px solid var(--card-border); - border-radius: 8px; - transition: all 0.3s ease; - height: 100%; - position: relative; - overflow: hidden; - } - - .card:hover { - transform: translateY(-10px); - border-color: rgba(255, 100, 0, 0.3); - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); - } - - .card::before { - content: ""; - position: absolute; - width: 100%; - height: 5px; - top: 0; - left: 0; - background: linear-gradient(to right, var(--accent-dragon), var(--accent-fire)); - } - - .card-header { - background-color: transparent; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); - display: flex; - align-items: center; - gap: 10px; - } - - .category-icon { - color: var(--accent-fire); - font-size: 1.5rem; - } - - .category-title { - font-size: 1.4rem; - margin-bottom: 0; - } - - .skill-item { - margin-bottom: 12px; - display: flex; - align-items: center; - gap: 12px; - } - - .skill-icon { - color: var(--accent-fire); - font-size: 1.5rem; - min-width: 24px; - display: flex; - align-items: center; - justify-content: center; - } - - .skill-icon i { - display: inline-flex; - align-items: center; - justify-content: center; - } - - .skill-name { - color: var(--text-ash); - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - } - - /* Blinking cursor effect */ - .blinking-cursor { - display: inline-block; - width: 10px; - height: 24px; - background-color: var(--accent-fire); - margin-left: 5px; - animation: blink 1s step-end infinite; - box-shadow: var(--glow-effect); - } - - @keyframes blink { - 0%, 100% { opacity: 1; } - 50% { opacity: 0; } - } - - /* Particles effect */ - .particles { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - pointer-events: none; - z-index: 0; - } - - .particle { - position: absolute; - width: 3px; - height: 3px; - background-color: var(--accent-fire); - border-radius: 50%; - opacity: 0; - animation: rise linear forwards; - } - - @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 +body { + background-color: var(--primary-dark); + color: var(--text-light); + background-image: url('../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 styling */ +.logo-icon { + font-size: 2rem; + color: var(--accent-fire); + text-shadow: var(--glow-effect); + 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/About.css b/src/pages/About.css new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/Blog.module.css b/src/pages/Blog.module.css new file mode 100644 index 0000000..9419c93 --- /dev/null +++ b/src/pages/Blog.module.css @@ -0,0 +1,342 @@ +/* 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 64e7e63..cda7005 100644 --- a/src/pages/Blog.tsx +++ b/src/pages/Blog.tsx @@ -3,6 +3,8 @@ import { PageHeader } from '../components/PageHeader'; import { BlogCard } from '../components/BlogCard'; import { blogPostsData } from '../data/blogPostsData'; +import './Blog.module.css'; + export const Blog = () => { const [searchQuery, setSearchQuery] = useState(''); @@ -50,9 +52,7 @@ export const Blog = () => { featuredPost.excerpt.toLowerCase().includes(searchQuery.toLowerCase()) || featuredPost.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase())) ) && ( -
- -
+ )} {/* Regular Posts */} diff --git a/src/pages/BlogPost.module.css b/src/pages/BlogPost.module.css new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/BlogPost.tsx b/src/pages/BlogPost.tsx index 69e4d4c..c00202e 100644 --- a/src/pages/BlogPost.tsx +++ b/src/pages/BlogPost.tsx @@ -3,6 +3,8 @@ import { useParams, Link } from 'react-router-dom'; import { blogPostsData } from '../data/blogPostsData'; import { NotFound } from './NotFound'; +import './BlogPost.module.css'; + export const BlogPost = () => { const { slug } = useParams<{ slug: string }>(); const [post, setPost] = useState(blogPostsData.find(post => post.slug === slug)); diff --git a/src/pages/Contact.module.css b/src/pages/Contact.module.css new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx index ff27463..ae16e95 100644 --- a/src/pages/Contact.tsx +++ b/src/pages/Contact.tsx @@ -1,6 +1,8 @@ import { PageHeader } from '../components/PageHeader'; import { ContactForm } from '../components/ContactForm'; +import './Contact.module.css'; + export const Contact = () => { return ( <> diff --git a/src/pages/Home.module.css b/src/pages/Home.module.css new file mode 100644 index 0000000..06cb79f --- /dev/null +++ b/src/pages/Home.module.css @@ -0,0 +1,247 @@ +/* Hero Section */ +.hero { + height: 100vh; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + padding-top: 76px; + /* Account for navbar height */ +} + +.hero::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: url('/api/placeholder/1200/800') center/cover no-repeat; + opacity: 0.15; + filter: brightness(0.5) contrast(1.2); + z-index: -1; +} + +.title-main { + font-size: 4rem; + font-weight: 700; + position: relative; + display: inline-block; +} + +.title-main::before { + content: "< "; + color: var(--accent-fire); + opacity: 0.8; +} + +.title-main::after { + content: " />"; + color: var(--accent-fire); + opacity: 0.8; +} + +.subtitle { + font-size: 1.6rem; + color: var(--text-ash); + margin-bottom: 2rem; +} + +/* Binary Background */ +.binary-bg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + opacity: 0.07; + overflow: hidden; +} + +.binary-line { + position: absolute; + font-family: 'Fira Code', monospace; + color: var(--accent-fire); + font-size: 1rem; + animation: fall linear infinite; + opacity: 0.7; +} + +/* Button Styling */ +.btn-primary { + background: linear-gradient(45deg, var(--accent-dragon), var(--accent-fire)); + border: none; + padding: 0.75rem 2rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 1px; + box-shadow: 0 4px 15px rgba(139, 0, 0, 0.3); + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.btn-primary:hover { + transform: translateY(-3px); + box-shadow: 0 7px 25px rgba(139, 0, 0, 0.5); + background-color: var(--accent-fire); + background-image: none; +} + +.btn-primary::before { + content: ""; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + transition: all 0.6s ease; +} + +.btn-primary:hover::before { + left: 100%; +} + +/* Skills Section */ +.skills-section { + padding: 6rem 0; + background-color: var(--secondary-dark); + position: relative; +} + +.section-title { + text-align: center; + font-size: 2.5rem; + margin-bottom: 3rem; + position: relative; + display: inline-block; +} + +.section-title::after { + content: ""; + position: absolute; + width: 80px; + height: 3px; + background: var(--accent-fire); + bottom: -10px; + left: 50%; + transform: translateX(-50%); + box-shadow: var(--glow-effect); +} + +.card { + background-color: var(--card-bg); + border: 1px solid var(--card-border); + border-radius: 8px; + transition: all 0.3s ease; + height: 100%; + position: relative; + overflow: hidden; +} + +.card:hover { + transform: translateY(-10px); + border-color: rgba(255, 100, 0, 0.3); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); +} + +.card::before { + content: ""; + position: absolute; + width: 100%; + height: 5px; + top: 0; + left: 0; + background: linear-gradient(to right, var(--accent-dragon), var(--accent-fire)); +} + +.card-header { + background-color: transparent; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + display: flex; + align-items: center; + gap: 10px; +} + +.category-icon { + color: var(--accent-fire); + font-size: 1.5rem; +} + +.category-title { + font-size: 1.4rem; + margin-bottom: 0; +} + +.skill-item { + margin-bottom: 12px; + display: flex; + align-items: center; + gap: 12px; +} + +.skill-icon { + color: var(--accent-fire); + font-size: 1.5rem; + min-width: 24px; + display: flex; + align-items: center; + justify-content: center; +} + +.skill-icon i { + display: inline-flex; + align-items: center; + justify-content: center; +} + +.skill-name { + color: var(--text-ash); + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +/* Blinking cursor effect */ +.blinking-cursor { + display: inline-block; + width: 10px; + height: 24px; + background-color: var(--accent-fire); + margin-left: 5px; + animation: blink 1s step-end infinite; + box-shadow: var(--glow-effect); +} + +@keyframes blink { + + 0%, + 100% { + opacity: 1; + } + + 50% { + opacity: 0; + } +} + +/* Particles effect */ +.particles { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 0; +} + +.particle { + position: absolute; + width: 3px; + height: 3px; + background-color: var(--accent-fire); + border-radius: 50%; + opacity: 0; + animation: rise linear forwards; +} \ No newline at end of file diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index d40877c..330965d 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,6 +1,8 @@ import { useEffect } from 'react'; import { Link } from 'react-router-dom'; +import styles from './Home.module.css'; + export const Home = () => { // Create binary background and particles effects useEffect(() => { @@ -17,7 +19,7 @@ export const Home = () => { for (let i = 0; i < linesCount; i++) { const line = document.createElement('div'); - line.className = 'binary-line'; + line.className = styles.binaryLine; line.style.left = `${Math.random() * 100}%`; line.style.animationDuration = `${Math.random() * 10 + 15}s`; @@ -44,7 +46,7 @@ export const Home = () => { for (let i = 0; i < particlesCount; i++) { setTimeout(() => { const particle = document.createElement('div'); - particle.className = 'particle'; + particle.className = styles.particle; // Random position at the bottom of the hero section const posX = Math.random() * window.innerWidth; @@ -97,28 +99,28 @@ export const Home = () => { <> {/* Hero Section */}
-
-
+
+
-

SecCodeSmith

-
-

Forging Digital Solutions in the Fires of Innovation

- +

SecCodeSmith

+
+

Forging Digital Solutions in the Fires of Innovation

+ View My Forge
-
+
{/* Skills Section */} -
+
-

Technical Arsenal

+

Technical Arsenal

@@ -126,7 +128,7 @@ export const Home = () => {
- +

Languages

@@ -152,7 +154,7 @@ export const Home = () => {
- +

Embedded Systems

@@ -178,7 +180,7 @@ export const Home = () => {
- +

Data & ML