add js to background

1 files changed, 44 insertions, 9 deletions

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;
 }