From fb84bf87de2006b9f0a3e701503fe575ba3268b5 Mon Sep 17 00:00:00 2001 From: seccodesmith Date: Tue, 20 May 2025 14:43:49 +0200 Subject: [PATCH] feat: refactor styles and update imports for Home and Blog components --- src/assets/styles/Blog.scss | 2 +- src/assets/styles/Home.module.scss | 248 +++++++++++++++++++++++++++++ src/pages/Blog.tsx | 1 + src/pages/Home.tsx | 64 ++++---- 4 files changed, 282 insertions(+), 33 deletions(-) create mode 100644 src/assets/styles/Home.module.scss diff --git a/src/assets/styles/Blog.scss b/src/assets/styles/Blog.scss index dee9a0a..ad88129 100644 --- a/src/assets/styles/Blog.scss +++ b/src/assets/styles/Blog.scss @@ -1,4 +1,4 @@ -@import './_variables.scss'; +@import "./variables.scss"; /* Page Header */ .page-header { diff --git a/src/assets/styles/Home.module.scss b/src/assets/styles/Home.module.scss new file mode 100644 index 0000000..73b42bd --- /dev/null +++ b/src/assets/styles/Home.module.scss @@ -0,0 +1,248 @@ +@use './variables' as *; + +/* Hero Section */ +.hero { + height: 100vh; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + padding-top: 76px; +} + +.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; +} + +.titleMain { + font-size: 4rem; + font-weight: 700; + position: relative; + display: inline-block; +} + +.titleMain::before { + content: "< "; + color: $accent-fire; + opacity: 0.8; +} + +.titleMain::after { + content: " />"; + color: $accent-fire; + opacity: 0.8; +} + +.subtitle { + font-size: 1.6rem; + color: $text-ash; + margin-bottom: 2rem; +} + +/* Binary Background */ +.binaryBg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + opacity: 0.07; + overflow: hidden; +} + +.binaryLine { + position: absolute; + font-family: 'Fira Code', monospace; + color: $accent-fire; + font-size: 1rem; + animation: fall linear infinite; + opacity: 0.7; +} + +/* Button Styling */ +.btnPrimary { + background: linear-gradient(45deg, $accent-dragon, $accent-fire); + border: none; + padding: 0.75rem 2rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 1px; + box-shadow: 0 4px 15px rgba(139, 0, 0, 0.3); + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.btnPrimary:hover { + transform: translateY(-3px); + box-shadow: 0 7px 25px rgba(139, 0, 0, 0.5); + background-color: $accent-fire; + background-image: none; +} + +.btnPrimary::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; +} + +.btnPrimary:hover::before { + left: 100%; +} + +/* Skills Section */ +.skillsSection { + padding: 6rem 0; + background-color: $secondary-dark; + position: relative; +} + +.sectionTitle { + text-align: center; + font-size: 2.5rem; + margin-bottom: 3rem; + position: relative; + display: inline-block; +} + +.sectionTitle::after { + content: ""; + position: absolute; + width: 80px; + height: 3px; + background: $accent-fire; + bottom: -10px; + left: 50%; + transform: translateX(-50%); + box-shadow: $glow-effect; +} + +.card { + background-color: $card-bg; + border: 1px solid $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, $accent-dragon, $accent-fire); +} + +.cardHeader { + background-color: transparent; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + display: flex; + align-items: center; + gap: 10px; +} + +.categoryIcon { + color: $accent-fire; + font-size: 1.5rem; +} + +.categoryTitle { + font-size: 1.4rem; + margin-bottom: 0; +} + +.skillItem { + margin-bottom: 12px; + display: flex; + align-items: center; + gap: 12px; +} + +.skillIcon { + color: $accent-fire; + font-size: 1.5rem; + min-width: 24px; + display: flex; + align-items: center; + justify-content: center; +} + +.skillIcon i { + display: inline-flex; + align-items: center; + justify-content: center; +} + +.skillName { + color: $text-ash; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +/* Blinking cursor effect */ +.blinkingCursor { + display: inline-block; + width: 10px; + height: 24px; + background-color: $accent-fire; + margin-left: 5px; + animation: blink 1s step-end infinite; + box-shadow: $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: $accent-fire; + border-radius: 50%; + opacity: 0; + animation: rise linear forwards; +} \ No newline at end of file diff --git a/src/pages/Blog.tsx b/src/pages/Blog.tsx index 1a380bb..20bd874 100644 --- a/src/pages/Blog.tsx +++ b/src/pages/Blog.tsx @@ -3,6 +3,7 @@ import { PageHeader } from '../components/PageHeader'; import { BlogCard } from '../components/BlogCard'; import { blogPostsData } from '../data/blogPostsData'; +import '@styles/_variables.scss'; import '@styles/Blog.scss'; export const Blog = () => { diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 37df88d..091a437 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,7 +1,7 @@ import { useEffect } from 'react'; import { Link } from 'react-router-dom'; -import styles from './Home.module.css'; +import styles from '@styles/Home.module.scss'; export const Home = () => { // Create binary background and particles effects @@ -10,66 +10,66 @@ export const Home = () => { const createBinaryBg = () => { const binaryBg = document.getElementById('binary-bg'); if (!binaryBg) return; - + const chars = '01'; const linesCount = 20; - + // Clear existing lines binaryBg.innerHTML = ''; - + for (let i = 0; i < linesCount; i++) { const line = document.createElement('div'); line.className = styles.binaryLine; line.style.left = `${Math.random() * 100}%`; line.style.animationDuration = `${Math.random() * 10 + 15}s`; - + let binaryString = ''; for (let j = 0; j < 100; j++) { binaryString += chars.charAt(Math.floor(Math.random() * chars.length)); } - + line.textContent = binaryString; binaryBg.appendChild(line); } }; - + // Create particles effect (ember/spark effect) const createParticles = () => { const particlesContainer = document.getElementById('particles'); if (!particlesContainer) return; - + // Clear existing particles particlesContainer.innerHTML = ''; - + const particlesCount = 50; - + for (let i = 0; i < particlesCount; i++) { setTimeout(() => { 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(); @@ -77,10 +77,10 @@ export const Home = () => { }, i * 100); } }; - + createBinaryBg(); createParticles(); - + // Create new particles periodically const particleInterval = setInterval(() => { const particlesContainer = document.getElementById('particles'); @@ -88,17 +88,17 @@ export const Home = () => { createParticles(); } }, 5000); - + // Cleanup return () => { clearInterval(particleInterval); }; }, []); - + return ( <> {/* Hero Section */} -
+
@@ -106,7 +106,7 @@ export const Home = () => {

SecCodeSmith

Forging Digital Solutions in the Fires of Innovation

- + View My Forge
@@ -126,14 +126,14 @@ export const Home = () => {
{/* Languages Card */}
-
-
- +
+
+

Languages

    -
  • +
  • C/C++
    • @@ -149,15 +149,15 @@ export const Home = () => {
- + {/* Embedded Systems Card */}
- +

Embedded Systems

-
+
  • @@ -175,7 +175,7 @@ export const Home = () => {
- + {/* Data & ML Card */}
@@ -207,7 +207,7 @@ export const Home = () => {
-
+
); }; \ No newline at end of file