From 42e1d00c76897819abceeba40f24cf8c4a81364f Mon Sep 17 00:00:00 2001 From: Samlon Date: Thu, 24 Jul 2025 13:10:02 +0200 Subject: add js to background --- styles.css | 53 ++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 44 insertions(+), 9 deletions(-) (limited to 'styles.css') diff --git a/styles.css b/styles.css index 501b1c5..e3dd04d 100644 --- a/styles.css +++ b/styles.css @@ -1,21 +1,52 @@ /* Base Styles */ :root { - --primary: #3b82f6; - --primary-hover: #60a5fa; - --text: #e5e7eb; - --text-secondary: #9ca3af; + --cursor-x: 50%; + --cursor-y: 50%; --bg: #111827; --bg-secondary: #1f2937; --bg-tertiary: #374151; + --text: #f9fafb; + --text-secondary: #d1d5db; + --primary: #3b82f6; + --primary-hover: #2563eb; --border: #374151; + --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --white: #ffffff; --black: #111827; } -* { +/* Base background and cursor light effect */ +html, body { + min-height: 100%; margin: 0; padding: 0; - box-sizing: border-box; + background: #111827; /* Base dark background */ + overflow-x: hidden; + /* Default cursor is now visible */ +} + +/* Cursor light effect */ +body::before { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: radial-gradient( + circle at var(--cursor-x, 50%) var(--cursor-y, 50%), + rgba(31, 41, 55, 0.8) 0%, + rgba(17, 24, 39, 0.95) 70%, + #111827 100% + ); + pointer-events: none; + z-index: 0; +} + +/* Ensure content is above the cursor effect */ +body > * { + position: relative; + z-index: 1; } body { @@ -75,7 +106,9 @@ nav { display: flex; align-items: center; padding: 8rem 0 4rem; - background: linear-gradient(135deg, #111827 0%, #1f2937 100%); + position: relative; + overflow: hidden; + background: transparent; } .hero-content { @@ -179,7 +212,9 @@ section { /* About Section */ .about { padding: 6rem 0; - background-color: var(--bg); + background: transparent; + position: relative; + z-index: 1; } .about-content { @@ -220,7 +255,7 @@ section { /* Projects Section */ .projects { - background-color: var(--bg); + background: transparent; padding: 6rem 0; } -- cgit v1.2.3