Update: Remove custom cursor and implement contact form with Google Sheets integration

Adwaitbytes · Adwaitbytes · commit ce77d039fa2c · 2024-12-27T15:12:16.000+05:30
diff --git a/index.html b/index.html
@@ -8,10 +8,6 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
 </head>
 <body>
-    <!-- Custom Cursor -->
-    <div class="cursor"></div>
-    <div class="cursor-follower"></div>
-
     <!-- Loading Screen -->
     <div class="loading-screen">
         <div class="counter">0%</div>
@@ -288,10 +284,10 @@ <h3>Web3 Innovation</h3>
     <!-- Contact Section -->
     <section id="contact" class="contact">
         <h2>Get In Touch</h2>
-        <form id="contact-form">
-            <input type="text" placeholder="Name" required>
-            <input type="email" placeholder="Email" required>
-            <textarea placeholder="Tell me about your project" required></textarea>
+        <form id="contact-form" method="POST">
+            <input type="text" name="name" placeholder="Name" required>
+            <input type="email" name="email" placeholder="Email" required>
+            <textarea name="message" placeholder="Tell me about your project" required></textarea>
             <button type="submit" class="submit-btn">Send Message</button>
         </form>
     </section>
diff --git a/script.js b/script.js
@@ -8,6 +8,24 @@ const menuBtn = document.querySelector('.menu-btn');
 const navContent = document.querySelector('.nav-content');
 const logoText = document.querySelector('.logo-text');
 
+// CTA Button click handler
+const ctaButton = document.querySelector('.cta-button');
+if (ctaButton) {
+    ctaButton.addEventListener('click', () => {
+        const projectsSection = document.querySelector('#projects');
+        if (projectsSection) {
+            const headerOffset = header.offsetHeight;
+            const targetPosition = projectsSection.getBoundingClientRect().top + window.pageYOffset - headerOffset;
+            
+            gsap.to(window, {
+                duration: 1,
+                scrollTo: targetPosition,
+                ease: "power2.inOut"
+            });
+        }
+    });
+}
+
 // Header Scroll Effect
 window.addEventListener('scroll', () => {
     if (window.scrollY > 50) {
@@ -67,38 +85,6 @@ gsap.to(logoText, {
     ease: "power1.inOut"
 });
 
-// Custom Cursor
-const cursor = document.querySelector('.cursor');
-const cursorFollower = document.querySelector('.cursor-follower');
-
-document.addEventListener('mousemove', (e) => {
-    gsap.to(cursor, {
-        x: e.clientX,
-        y: e.clientY,
-        duration: 0
-    });
-    
-    gsap.to(cursorFollower, {
-        x: e.clientX - 20,
-        y: e.clientY - 20,
-        duration: 0.1
-    });
-});
-
-// Hover effect on links and buttons
-const links = document.querySelectorAll('a, button');
-links.forEach(link => {
-    link.addEventListener('mouseenter', () => {
-        cursorFollower.style.transform = 'scale(1.5)';
-        cursor.style.opacity = '0';
-    });
-    
-    link.addEventListener('mouseleave', () => {
-        cursorFollower.style.transform = 'scale(1)';
-        cursor.style.opacity = '1';
-    });
-});
-
 // Loading Animation
 window.addEventListener('load', () => {
     const counter = document.querySelector('.counter');
@@ -349,3 +335,43 @@ document.querySelector('.email-link').addEventListener('click', function(e) {
     // Remove tooltip after animation
     setTimeout(() => tooltip.remove(), 2000);
 });
+
+// Contact Form Handler
+const contactForm = document.getElementById('contact-form');
+if (contactForm) {
+    contactForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        
+        const submitBtn = contactForm.querySelector('.submit-btn');
+        const originalBtnText = submitBtn.textContent;
+        submitBtn.textContent = 'Sending...';
+        submitBtn.disabled = true;
+
+        try {
+            const formData = new FormData(contactForm);
+            const searchParams = new URLSearchParams();
+
+            // Convert FormData to URLSearchParams
+            for (const [key, value] of formData) {
+                searchParams.append(key, value);
+            }
+
+            const response = await fetch('https://script.google.com/macros/s/AKfycbxRqoplK1yceUaNj3OIvEu4ynm4c37YNyCoNDBrUAn6VvKThLVVzyWG5A53L1F34Zce/exec', {
+                method: 'POST',
+                body: searchParams,
+                mode: 'no-cors'
+            });
+
+            // Show success message
+            alert('Thank you! Your message has been sent successfully.');
+            contactForm.reset();
+            
+        } catch (error) {
+            console.error('Error:', error);
+            alert('Sorry, there was an error sending your message. Please try again or contact me directly via email.');
+        } finally {
+            submitBtn.textContent = originalBtnText;
+            submitBtn.disabled = false;
+        }
+    });
+}
diff --git a/styles.css b/styles.css
@@ -10,7 +10,12 @@ body {
     background: #0a0a0a;
     color: #fff;
     overflow-x: hidden;
-    cursor: none;
+}
+
+/* Add normal cursor for interactive elements */
+a, button, .nav-link, .logo, .menu-btn, 
+[role="button"], [type="button"], [type="submit"] {
+    cursor: pointer;
 }
 
 /* Header Styles */
@@ -196,28 +201,6 @@ body {
     }
 }
 
-/* Custom Cursor */
-.cursor {
-    width: 8px;
-    height: 8px;
-    background: #fff;
-    border-radius: 50%;
-    position: fixed;
-    pointer-events: none;
-    z-index: 9999;
-}
-
-.cursor-follower {
-    width: 40px;
-    height: 40px;
-    border: 2px solid #fff;
-    border-radius: 50%;
-    position: fixed;
-    pointer-events: none;
-    z-index: 9999;
-    transition: transform 0.1s;
-}
-
 /* Loading Screen */
 .loading-screen {
     position: fixed;
@@ -518,18 +501,35 @@ h2 {
     gap: 2rem;
 }
 
-.cta-primary, .cta-secondary {
-    padding: 1rem 2.5rem;
-    border-radius: 8px;
-    font-weight: 500;
+.cta-button {
+    background: linear-gradient(45deg, #00fffc, #00a8a6);
+    color: #fff;
+    border: none;
+    padding: 1rem 2rem;
     font-size: 1.1rem;
+    border-radius: 30px;
+    cursor: pointer;
+    margin-top: 2rem;
     transition: all 0.3s ease;
-    text-decoration: none;
+    box-shadow: 0 4px 15px rgba(0, 255, 252, 0.2);
+    position: relative;
+    overflow: hidden;
 }
 
-.cta-primary {
-    background: #00fffc;
-    color: #000;
+.cta-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(0, 255, 252, 0.3);
+}
+
+.cta-button:active {
+    transform: translateY(0);
+}
+
+@media (max-width: 768px) {
+    .cta-button {
+        padding: 0.8rem 1.6rem;
+        font-size: 1rem;
+    }
 }
 
 .cta-secondary {
@@ -538,7 +538,7 @@ h2 {
     color: #00fffc;
 }
 
-.cta-primary:hover, .cta-secondary:hover {
+.cta-secondary:hover {
     transform: translateY(-3px);
     box-shadow: 0 5px 15px rgba(0, 255, 252, 0.2);
 }
