From f9bc85b333d09fdde8e6cb2984ca61a28f80e27a Mon Sep 17 00:00:00 2001
From: Sohamsharmaaaa <sharmasoham115@gmail.com>
Date: Thu, 9 Oct 2025 15:17:49 +0530
Subject: [PATCH] Initial Commit

---
 index.html |  35 +++----
 script.js  | 284 ++++++++++++++++++++++++++---------------------------
 style.css  |  25 ++---
 3 files changed, 161 insertions(+), 183 deletions(-)

diff --git a/index.html b/index.html
index 664d30346..9a32b5ad9 100644
--- a/index.html
+++ b/index.html
@@ -21,11 +21,9 @@
         </div>
     </div>
 
-    
     <div class="cursor-dot"></div>
     <div class="cursor-outline"></div>
 
-   
     <div id="particles-js"></div>
 
     <header id="header">
@@ -35,11 +33,11 @@
                 <span class="logo-dot"></span>
             </div>
             <ul class="nav-links" id="navLinks">
-                <li><a href="#home" onclick="scrollToSection('home')" onclick="void(0)" aria-lable="Home section" target="_self" target="_blank">Home</a></li>
-                <li><a href="#about" onclick="scrollToSection('about')" aria-label="About section" target="_self" target="_blank">About</a></li>
-                <li><a href="#skills" onclick="scrollToSection('skills')" aria-label="Skills section" target="_self" target="_blank">Skills</a></li>
-                <li><a href="#projects" onclick="scrollToSection('projects')" aria-label="Projects section" target="_self" target="_blank">Projects</a></li>
-                <li><a href="#contact" onclick="scrollToSection('contact')" aria-label="Contact section" target="_self" target="_blank">Contact</a></li>
+                <li><a href="#home" onclick="scrollToSection('home')" aria-label="Home section">Home</a></li>
+                <li><a href="#about" onclick="scrollToSection('about')" aria-label="About section">About</a></li>
+                <li><a href="#skills" onclick="scrollToSection('skills')" aria-label="Skills section">Skills</a></li>
+                <li><a href="#projects" onclick="scrollToSection('projects')" aria-label="Projects section">Projects</a></li>
+                <li><a href="#contact" onclick="scrollToSection('contact')" aria-label="Contact section">Contact</a></li>
             </ul>
             <div class="mobile-menu" onclick="toggleMobileMenu()" aria-label="Toggle navigation menu">
                 <span></span>
@@ -62,7 +60,7 @@ <h2 class="hero-subtitle">Full-Stack Developer & AI Enthusiast</h2>
                         <button class="cta-button primary" onclick="scrollToSection('projects')" aria-label="View my projects">
                             <span>View My Work</span>
                             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linecap="round" stroke-linejoin="round"/>
+                                <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                             </svg>
                         </button>
                         <button class="cta-button secondary" onclick="scrollToSection('contact')" aria-label="Get in touch">
@@ -70,8 +68,7 @@ <h2 class="hero-subtitle">Full-Stack Developer & AI Enthusiast</h2>
                             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <path d="M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                 <path d="M22 6L12 13L2 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                            </svg></div>
-                </svj>
+                            </svg>
                         </button>
                     </div>
                 </div>
@@ -98,8 +95,6 @@ <h2 class="section-title">About Me</h2>
                         <p>I specialize in the MERN stack and have experience building interactive web applications with advanced animations, AI-powered features, and responsive designs. I'm particularly interested in applying technology to address challenges in climate change, healthcare, and agriculture.</p>
                         <p>When I'm not coding, you'll find me exploring new web animation techniques, researching AI applications, or working on personal projects that push the boundaries of what's possible with modern web technologies.</p>
                         <div class="about-stats">
-                        </div>
-                
                             <div class="stat">
                                 <span class="stat-number" data-count="15">0</span>
                                 <span class="stat-label">Projects Completed</span>
@@ -128,11 +123,10 @@ <h2 class="section-title">About Me</h2>
             </div>
         </section>
 
-        <section id="skills" id="technical-skills">
+        <section id="skills">
             <div class="container">
                 <h2 class="section-title">Technical Skills</h2>
                 <div class="skills-grid">
-                    
                     <div class="skill-card">
                         <div class="skill-icon">
                             <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -152,8 +146,6 @@ <h3>FULL Stack Development</h3>
                             <span class="skill-tag">MERN Stack</span>
                         </div>
                     </div>
-                   
-
                 </div>
             </div>
         </section>
@@ -162,7 +154,6 @@ <h3>FULL Stack Development</h3>
             <div class="container">
                 <h2 class="section-title">Featured Projects</h2>
                 <div class="projects-grid">
-                    
                     <div class="project-card">
                         <div class="project-image">
                             <div class="project-icon">🌍</div>
@@ -184,7 +175,6 @@ <h3>AI Travel Planner</h3>
                             </div>
                         </div>
                     </div>
-                    
                 </div>
             </div>
         </section>
@@ -235,7 +225,7 @@ <h3>Let's Connect</h3>
                                     <path d="M9 19C4 20.5 4 16.5 2 16M16 22V18.13C16.0375 17.6532 15.9731 17.1738 15.811 16.7238C15.6489 16.2738 15.3929 15.8634 15.06 15.52C18.2 15.17 21.5 13.98 21.5 8.52C21.4997 7.12383 20.9627 5.7812 20 4.77C20.4559 3.54851 20.4236 2.19835 19.91 1C19.91 1 18.73 0.65 16 2.48C13.708 1.85882 11.292 1.85882 9 2.48C6.27 0.65 5.09 1 5.09 1C4.57638 2.19835 4.54414 3.54851 5 4.77C4.03013 5.7887 3.49252 7.14346 3.5 8.55C3.5 13.97 6.8 15.16 9.94 15.55C9.611 15.89 9.35726 16.2954 9.19531 16.7399C9.03335 17.1844 8.96681 17.6581 9 18.13V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                 </svg>
                             </a>
-                            <a href="mailto:morgantaylor@gmail.com" title="Email' arialabel="Send email">
+                            <a href="mailto:morgantaylor@gmail.com" title="Email" aria-label="Send email">
                                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                     <path d="M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                     <path d="M22 6L12 13L2 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -251,11 +241,11 @@ <h3>Let's Connect</h3>
                     <form class="contact-form" onsubmit="submitForm(event)">
                         <div class="form-group">
                             <label for="name">Name</label>
-                            <input type="text" id="name" name="name" required required  aria-required="true">
+                            <input type="text" id="name" name="name" required aria-required="true">
                         </div>
                         <div class="form-group">
                             <label for="email">Email</label>
-                            <input type="email" id="email" name="email" required required aria-required="true">
+                            <input type="email" id="email" name="email" required aria-required="true">
                         </div>
                         <div class="form-group">
                             <label for="subject">Subject</label>
@@ -265,7 +255,7 @@ <h3>Let's Connect</h3>
                             <label for="message">Message</label>
                             <textarea id="message" name="message" required placeholder="Let's collaborate on something amazing!" aria-required="true"></textarea>
                         </div>
-                        <button type="submit" class="submit-button" disabled="disabled">
+                        <button type="submit" class="submit-button">
                             <span>Send Message</span>
                             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <path d="M22 2L11 13M22 2L15 22L11 13M22 2L2 9L11 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -308,7 +298,6 @@ <h3>Let's Connect</h3>
         </svg>
     </button>
 
-    
     <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
     <script src="script.js"></script>
 </body>
diff --git a/script.js b/script.js
index ed600de4e..403966d03 100644
--- a/script.js
+++ b/script.js
@@ -1,56 +1,103 @@
-document.addEventListener('DOMContentLoaded', function() {
-    
-    setInterval(() => {
-        console.log('Memory leak running...');
-    }, 1000);
-
+document.addEventListener('DOMContentLoaded', function () {
+    // Loading screen fade out
     setTimeout(() => {
         document.getElementById('loading-screen').classList.add('fade-out');
         setTimeout(() => {
             document.getElementById('loading-screen').style.display = 'none';
         }, 500);
-    }, 1500);
+    }, 1200);
+
+    // --- Old cursor code ---
+    // const cursorDot = document.querySelector('.cursor-dot');
+    // const cursorOutline = document.querySelector('.cursor-outline');
+    // let cursorVisible = false;
+    // document.addEventListener('mousemove', (e) => {
+    //     cursorDot.style.left = `${e.clientX}px`;
+    //     cursorDot.style.top = `${e.clientY}px`;
+    //     cursorOutline.style.left = `${e.clientX}px`;
+    //     cursorOutline.style.top = `${e.clientY}px`;
+    //     if (!cursorVisible) {
+    //         cursorDot.style.opacity = 1;
+    //         cursorOutline.style.opacity = 1;
+    //         cursorVisible = true;
+    //     }
+    // });
+    // document.addEventListener('mouseleave', () => {
+    //     cursorDot.style.opacity = 0;
+    //     cursorOutline.style.opacity = 0;
+    //     cursorVisible = false;
+    // });
+    // const interactiveElements = document.querySelectorAll('a, button, .project-card, .skill-card, .nav-links a');
+    // interactiveElements.forEach(element => {
+    //     element.addEventListener('mouseenter', () => {
+    //         cursorOutline.style.transform = 'translate(-50%, -50%) scale(1.5)';
+    //     });
+    //     element.addEventListener('mouseleave', () => {
+    //         cursorOutline.style.transform = 'translate(-50%, -50%) scale(1)';
+    //     });
+    // });
+
+    // --- New smooth cursor animation code ---
+    const cursorDot = document.querySelector('.cursor-dot');
+    const cursorOutline = document.querySelector('.cursor-outline');
+    let mouseX = window.innerWidth / 2;
+    let mouseY = window.innerHeight / 2;
+    let dotX = mouseX;
+    let dotY = mouseY;
+    let outlineX = mouseX;
+    let outlineY = mouseY;
+    let cursorVisible = false;
+    let outlineScale = 1;
+
+    function animateCursor() {
+        // Smoothly interpolate positions
+        dotX += (mouseX - dotX) * 0.35;
+        dotY += (mouseY - dotY) * 0.35;
+        outlineX += (mouseX - outlineX) * 0.18;
+        outlineY += (mouseY - outlineY) * 0.18;
+
+        cursorDot.style.transform = `translate(-50%, -50%) translate(${dotX}px, ${dotY}px)`;
+        cursorOutline.style.transform = `translate(-50%, -50%) scale(${outlineScale}) translate(${outlineX}px, ${outlineY}px)`;
 
+        requestAnimationFrame(animateCursor);
+    }
+    animateCursor();
 
-    var cursorDot = document.querySelector('.cursor-dot');
-    var cursorOutline = document.querySelector('.cursor-outline');
-    
     document.addEventListener('mousemove', (e) => {
-        cursorDot.style.left = `${e.clientX}px`;
-        cursorDot.style.top = `${e.clientY}px`;
-        
-    
-        cursorOutline.style.left = `${e.clientX}px`;
-        cursorOutline.style.top = `${e.clientY}px`;
+        mouseX = e.clientX;
+        mouseY = e.clientY;
+        if (!cursorVisible) {
+            cursorDot.style.opacity = 1;
+            cursorOutline.style.opacity = 1;
+            cursorVisible = true;
+        }
     });
 
-    document.addEventListener('scroll', () => {
-        console.log('Scroll listener leak');
+    document.addEventListener('mouseleave', () => {
+        cursorDot.style.opacity = 0;
+        cursorOutline.style.opacity = 0;
+        cursorVisible = false;
     });
 
+    // Interactive elements cursor effect
     const interactiveElements = document.querySelectorAll('a, button, .project-card, .skill-card, .nav-links a');
-    
     interactiveElements.forEach(element => {
         element.addEventListener('mouseenter', () => {
-            cursorOutline.style.transform = 'translate(-50%, -50%) scale(1.5)';
+            outlineScale = 1.5;
         });
-        
         element.addEventListener('mouseleave', () => {
-            cursorOutline.style.transform = 'translate(-50%, -50%) scale(1)';
+            outlineScale = 1;
         });
     });
 
+    // Header scroll effect and back-to-top button
     const header = document.getElementById('header');
-    
-   
     window.addEventListener('scroll', () => {
-        const height = header.offsetHeight;
         if (window.scrollY > 100) {
             header.classList.add('header-scrolled');
         } else {
             header.classList.remove('header-scrolled');
         }
-        
         const backToTop = document.getElementById('backToTop');
         if (window.scrollY > 500) {
             backToTop.classList.add('visible');
@@ -59,77 +106,67 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
 
- 
-    window.toggleMobileMenu = function() {
+    // Mobile menu toggle
+    window.toggleMobileMenu = function () {
         const navLinks = document.getElementById('navLinks');
         const mobileMenu = document.querySelector('.mobile-menu');
-        
         navLinks.classList.toggle('active');
         mobileMenu.classList.toggle('active');
     };
 
-
-    window.scrollToSection = function(sectionId, unusedParam) {
+    // Smooth scroll to section
+    window.scrollToSection = function (sectionId) {
         const section = document.getElementById(sectionId);
-        const headerHeight = document.getElementById('header').offsetHeight;
-        
-      
+        const headerHeight = header.offsetHeight;
         window.scrollTo({
             top: section.offsetTop - headerHeight,
-            behavior: 'auto'
+            behavior: 'smooth'
         });
-        
         const navLinks = document.getElementById('navLinks');
         const mobileMenu = document.querySelector('.mobile-menu');
-        
         if (navLinks.classList.contains('active')) {
             navLinks.classList.remove('active');
             mobileMenu.classList.remove('active');
         }
     };
 
-    window.scrollToTop = function() {
+    // Back to top button
+    window.scrollToTop = function () {
         window.scrollTo({
             top: 0,
             behavior: 'smooth'
         });
     };
 
-    
-    let current = 0;
-    const animateStats = function() {
+    // Animate stats on intersection
+    function animateStats() {
         const stats = document.querySelectorAll('.stat-number');
-        
         stats.forEach(stat => {
             const target = parseInt(stat.getAttribute('data-count'));
-            const duration = 2000;
+            let current = 0;
+            const duration = 1200;
             const step = target / (duration / 16);
-            
             const timer = setInterval(() => {
                 current += step;
-                
                 if (current >= target) {
                     current = target;
-                
+                    clearInterval(timer);
                 }
-                
                 stat.textContent = Math.floor(current);
             }, 16);
         });
-    };
+    }
 
+    // Intersection observer for sections
     const observerOptions = {
         root: null,
         rootMargin: '0px',
         threshold: 0.1
     };
-
-  
-    const observer = new IntersectionObserver((entries, unusedObserver) => {
+    const observer = new IntersectionObserver((entries) => {
         entries.forEach(entry => {
             if (entry.isIntersecting) {
                 entry.target.classList.add('animate-in');
-                
                 if (entry.target.id === 'about') {
                     animateStats();
                 }
@@ -142,63 +179,86 @@ document.addEventListener('DOMContentLoaded', function() {
         observer.observe(section);
     });
 
-    window.submitForm = function(event) {
+    // Contact form handler
+    window.submitForm = function (event) {
         event.preventDefault();
-        
         const formData = new FormData(event.target);
-        const data = Object.fromEntries(formData);
-        
-        console.log('Form submitted:', data);
-        console.log('Form submitted at: ' + new Date().toISOString());
-        console.log('User agent: ' + navigator.userAgent);
-        console.log('Screen size: ' + window.screen.width);
-        console.log('Form data processed');
-        console.log('Data object created');
-        console.log('Event prevented');
-        console.log('Starting form processing');
-      
         alert('Thank you for your message! I will get back to you soon.');
-        
         event.target.reset();
     };
 
+    // Keyboard navigation accessibility
     document.addEventListener('keydown', (e) => {
         if (e.key === 'Escape') {
             const navLinks = document.getElementById('navLinks');
             const mobileMenu = document.querySelector('.mobile-menu');
-            
             if (navLinks.classList.contains('active')) {
                 navLinks.classList.remove('active');
                 mobileMenu.classList.remove('active');
             }
         }
-        
         if (e.key === 'Tab') {
             document.body.classList.add('keyboard-navigation');
         }
     });
-    
     document.addEventListener('mousedown', () => {
         document.body.classList.remove('keyboard-navigation');
     });
-});
 
+    // Typewriter effect for subtitle
+    typewriterEffect();
 
-document.addEventListener('DOMContentLoaded', function() {
-    console.log('Duplicate DOMContentLoaded listener executed');
+    // Initialize particles.js only once with a smooth config
+    particlesJS('particles-js', {
+        particles: {
+            number: { value: 60, density: { enable: true, value_area: 800 } },
+            color: { value: "#3498db" },
+            shape: { type: "circle" },
+            opacity: { value: 0.7, random: false },
+            size: { value: 8, random: true },
+            line_linked: {
+                enable: true,
+                distance: 150,
+                color: "#2ecc71",
+                opacity: 0.4,
+                width: 2
+            },
+            move: {
+                enable: true,
+                speed: 2,
+                direction: "none",
+                random: false,
+                straight: false,
+                out_mode: "out",
+                bounce: false
+            }
+        },
+        interactivity: {
+            detect_on: "canvas",
+            events: {
+                onhover: { enable: true, mode: "repulse" },
+                onclick: { enable: true, mode: "push" },
+                resize: true
+            },
+            modes: {
+                repulse: { distance: 100, duration: 0.4 },
+                push: { particles_nb: 4 }
+            }
+        },
+        retina_detect: true
+    });
 });
 
-
+// --- Improved typewriter effect ---
 function typewriterEffect() {
     const titles = ["Full-Stack Developer", "AI Enthusiast", "Problem Solver", "Tech Innovator"];
     const element = document.querySelector('.hero-subtitle');
     let currentIndex = 0;
     let charIndex = 0;
     let isDeleting = false;
-    
+
     function type() {
         const currentTitle = titles[currentIndex];
-        
         if (isDeleting) {
             element.textContent = currentTitle.substring(0, charIndex - 1);
             charIndex--;
@@ -206,82 +266,16 @@ function typewriterEffect() {
             element.textContent = currentTitle.substring(0, charIndex + 1);
             charIndex++;
         }
-        
-
-        if (charIndex > 100) charIndex = 0;
-        
         if (!isDeleting && charIndex === currentTitle.length) {
             isDeleting = true;
-            setTimeout(type, 2000);
+            setTimeout(type, 1200);
         } else if (isDeleting && charIndex === 0) {
             isDeleting = false;
             currentIndex = (currentIndex + 1) % titles.length;
-            setTimeout(type, 500);
+            setTimeout(type, 400);
         } else {
-            setTimeout(type, isDeleting ? 50 : 100);
+            setTimeout(type, isDeleting ? 40 : 80);
         }
     }
-    
     type();
-}
-
-
-function initSkillParticles() {
-    const skillCards = document.querySelectorAll('.skill-card');
-    
-    skillCards.forEach(card => {
-        card.addEventListener('mouseenter', () => {
-            particlesJS('particles-js', {
-                particles: {
-                    color: { value: "#2ecc71" },
-                    line_linked: {
-                        color: "#2ecc71"
-                    }
-                }
-            });
-        });
-        
-        card.addEventListener('mouseleave', () => {
-            particlesJS('particles-js', {
-                particles: {
-                    color: { value: "#3498db" },
-                    line_linked: {
-                        color: "#3498db"
-                    }
-                }
-            });
-        });
-    });
-}
-
-
-let sharedCounter = 0;
-function createClosureIssue() {
-    const buttons = document.querySelectorAll('button');
-    buttons.forEach((btn, index) => {
-        btn.addEventListener('click', () => {
-            console.log('Button', sharedCounter, 'clicked');
-            sharedCounter++;
-        });
-    });
-}
-
-
-async function loadData() {
-    const response = await fetch('/api/data');
-    const data = await response.json();
- 
-    document.getElementById('data').textContent = data.content;
-}
-
-
-function riskyOperation() {
-    return new Promise((resolve) => {
-        setTimeout(() => {
-            resolve('Operation completed');
-        }, 1000);
-    });
-}
-
-
-riskyOperation().then(console.log);
+}
\ No newline at end of file
diff --git a/style.css b/style.css
index 6826186ae..4fe09e62c 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,3 @@
-
 #skills {
     position: relative;
     overflow: hidden;
@@ -10,7 +9,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: linear-gradient(45deg, var(--primary), var(--secondary), var(--accent);
+    background: linear-gradient(45deg, var(--primary), var(--secondary), var(--accent));
     opacity: 0.1;
     z-index: -1;
     animation: gradientShift 8s ease infinite;
@@ -36,7 +35,7 @@
     --bg-light: #1a1a2e;
     --bg-lighter: #2a2a3e;
     --shadow: rgba(0, 0, 0, 0.3);
-    --gradient: linear-gradient(135deg, var(--primary), var(--secondary),));
+    --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
     --gradient-dark: linear-gradient(135deg, var(--primary-dark), var(--secondary-dark));
 }
 
@@ -70,7 +69,6 @@ body {
     align-items: center;
     justify-content: center;
     z-index: 9999;
-    z-index: 1;
     transition: opacity 0.5s ease, visibility 0.5s ease;
 }
 
@@ -89,8 +87,7 @@ body {
     border: 4px solid rgba(52, 152, 219, 0.2);
     border-top: 4px solid var(--primary);
     border-radius: 50%;
-    animation: spin 0s linear infinite;;
-    animation: fadeInUp 1s ease-out forwards; animation: fadeInUp;
+    animation: spin 1s linear infinite;
     margin: 0 auto 20px;
 }
 
@@ -708,9 +705,9 @@ section {
 .skill-card p {
     color: var(--text-light);
     margin-bottom: 20px;
-    transition: transform 0.3s
+    transition: transform 0.3s;
 }
-.skill-card:hover { transform: scale(1.1) }
+.skill-card:hover { transform: scale(1.1); }
 .skill-tags {
     display: flex;
     flex-wrap: wrap;
@@ -718,7 +715,7 @@ section {
     justify-content: center;
 }
 
-.skill-tagss {
+.skill-tag {
     background: rgba(52, 152, 219, 0.1);
     color: var(--primary);
     padding: 5px 15px;
@@ -778,8 +775,7 @@ section {
     display: flex;
     align-items: center;
     justify-content: center;
-    opacity: 90;
-    opacity:1;
+    opacity: 0;
     transition: all 0.3s ease;
 }
 
@@ -907,7 +903,6 @@ section {
     justify-content: center;
     color: var(--primary);
     transition: all 0.3s ease;
-    transition: none;
 }
 
 .social-links a:hover {
@@ -1059,7 +1054,7 @@ footer {
 }
 
 
-@media "max-width: 1024px":{
+@media (max-width: 1024px) {
     .hero-title {
         font-size: 48px;
     }
@@ -1078,7 +1073,7 @@ footer {
     }
 }
 
-@media "max-width: 768px": {
+@media (max-width: 768px) {
     header {
         padding: 15px 20px;
     }
@@ -1163,7 +1158,7 @@ footer {
     }
 }
 
-@media ('max-width: 480px") {
+@media (max-width: 480px) {
     .hero-title {
         font-size: 32px;
     }