add js to background

3 files changed, 98 insertions, 9 deletions

diff --git a/index.html b/index.html
index c7f07d5..13e7b46 100644
--- a/index.html
+++ b/index.html
@@ -133,5 +133,6 @@
             <p>Designed & Built by Salmon and AI</p>
         </div>
     </footer>
+    <script src="js/gradient.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/js/gradient.js b/js/gradient.js
new file mode 100644
index 0000000..1fe1e63
--- /dev/null
+++ b/js/gradient.js
@@ -0,0 +1,53 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Get the body element to update the cursor position
+    const body = document.documentElement;
+    let mouseX = 0;
+    let mouseY = 0;
+    let smoothX = 0;
+    let smoothY = 0;
+    
+    // Smoothing factor (lower = smoother, higher = snappier)
+    const smoothing = 0.1;
+    
+    // Handle mouse movement
+    const handleMouseMove = (e) => {
+        mouseX = e.clientX;
+        mouseY = e.clientY;
+    };
+    
+    // Smooth the cursor movement
+    const updateCursorLight = () => {
+        // Apply smoothing
+        smoothX += (mouseX - smoothX) * smoothing;
+        smoothY += (mouseY - smoothY) * smoothing;
+        
+        // Update CSS variables for the cursor position
+        body.style.setProperty('--cursor-x', `${smoothX}px`);
+        body.style.setProperty('--cursor-y', `${smoothY}px`);
+        
+        // Continue the animation loop
+        requestAnimationFrame(updateCursorLight);
+    };
+    
+    // Add event listeners
+    window.addEventListener('mousemove', handleMouseMove);
+    
+    // Handle touch events for mobile
+    window.addEventListener('touchmove', (e) => {
+        e.preventDefault();
+        const touch = e.touches[0];
+        handleMouseMove({
+            clientX: touch.clientX,
+            clientY: touch.clientY
+        });
+    }, { passive: false });
+    
+    // Initialize cursor position to center of screen
+    mouseX = window.innerWidth / 2;
+    mouseY = window.innerHeight / 2;
+    smoothX = mouseX;
+    smoothY = mouseY;
+    
+    // Start the animation loop
+    updateCursorLight();
+});
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;
 }