diff --git a/style.css b/style.css index 79e47fb..f80e6b2 100644 --- a/style.css +++ b/style.css @@ -4,7 +4,6 @@ --card-bg: #0a0a0f; --accent-color: #ff00ff; --link-color: #ffd700; - --shadow: 0 0 20px rgba(0, 243, 255, 0.1); --mono-font: 'SFMono-Regular', Consolas, Menlo, monospace; } @@ -13,20 +12,47 @@ 50% { opacity: 1; } } +@keyframes background-flare { + 0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.1; } + 50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.2; } + 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.1; } +} + +@keyframes scan-line { + 0% { transform: translateX(-150%) skewX(-45deg); opacity: 0; } + 10% { opacity: 0.5; } + 20% { transform: translateX(150%) skewX(-45deg); opacity: 0; } + 100% { transform: translateX(150%) skewX(-45deg); opacity: 0; } +} + * { box-sizing: border-box; } body { margin: 0; font-family: var(--mono-font); background-color: var(--bg-color); - background-image: radial-gradient(rgba(19, 69, 72, 0.21) 1px, transparent 1px); - background-size: 18px 18px; + background-image: radial-gradient(rgba(0, 243, 255, 0.15) 1px, transparent 1px); + background-size: 24px 24px; /* Slightly larger grid for more presence */ color: var(--text-color); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; + position: relative; + overflow: hidden; +} + +body::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 150vw; + height: 150vh; + background: radial-gradient(circle at center, rgba(0, 243, 255, 0.05) 0%, transparent 50%); + animation: background-flare 20s ease-in-out infinite alternate; + z-index: -1; } .bento-grid { @@ -39,11 +65,12 @@ body { .card { background: var(--card-bg); padding: 24px; - border: 1px solid rgba(0, 243, 255, 0.15); - box-shadow: var(--shadow); + border: 0.2rem solid rgba(0, 243, 255, 0.3); + filter: drop-shadow(0 0 10px rgba(0, 243, 255, 0.3)) + drop-shadow(0 0 30px rgba(0, 243, 255, 0.15)); position: relative; + transition: all 0.3s ease; backface-visibility: hidden; /* Fixes potential text blur on rotated cards */ - /* Chamfered tech-cut corners */ clip-path: polygon( 0 15px, 15px 0, 100% 0, @@ -52,9 +79,27 @@ body { ); } +.card:hover { + filter: drop-shadow(0 0 15px rgba(0, 243, 255, 0.5)) + drop-shadow(0 0 50px rgba(0, 243, 255, 0.3)); + border-color: rgba(0, 243, 255, 0.6); + transform: scale(1.02); +} + .profile { grid-column: span 4; display: flex; align-items: center; gap: 32px; } -/* Organic Displacement */ +.profile::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 60px; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(0, 243, 255, 0.2), transparent); + animation: scan-line 4s infinite linear; + pointer-events: none; +} + .about { grid-column: span 2; transform: translate(-8px, 4px) rotate(-0.4deg); } .interests { grid-column: span 2; transform: translate(12px, 8px) rotate(0.6deg); } .links { grid-column: span 2; transform: translate(-4px, -6px) rotate(-0.3deg); } @@ -65,9 +110,9 @@ body { content: ""; position: absolute; top: 10px; right: 10px; - width: 6px; height: 6px; + width: 10px; height: 10px; background: var(--link-color); - box-shadow: 0 0 10px var(--link-color); + box-shadow: 0 0 15px 2px var(--link-color); border-radius: 50%; animation: pulse-trace 1s infinite; } @@ -91,6 +136,7 @@ h2 { font-size: 0.75rem; text-transform: uppercase; color: var(--accent-color); + text-shadow: 0 0 8px var(--accent-color); margin-bottom: 16px; margin-top: 0; letter-spacing: 2px; @@ -112,6 +158,7 @@ h2 { .link-grid a:hover { background: rgba(255, 255, 255, 0.08); border-left-color: var(--accent-color); + box-shadow: 0 0 15px var(--accent-color); } a { color: var(--link-color); text-decoration: none; }