performance issue

app/About.js

@@ -31,7 +31,6 @@ export default function About() {
                 src="/kadir.jpeg"
                 alt="Abdul Kadir Khan"
                 fill
-                priority
                 className={styles.profileImage}
               />
             </div>

app/AmbientBackground.module.css

@@ -251,6 +251,7 @@
   background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,60 C300,100 600,20 900,60 C1050,80 1200,40 1200,60 L1200,120 L0,120 Z" fill="rgba(56, 189, 248, 0.08)"/></svg>');
   background-size: 50% 100%;
   animation: waveMove 15s ease-in-out infinite;
+  will-change: transform;
 }
 
 .wave:nth-child(2) {
@@ -294,6 +295,7 @@
   border-radius: 50%;
   animation: orbDrift 50s ease-in-out infinite;
   filter: blur(20px);
+  will-change: transform;
 }
 
 .orb:nth-child(1) {

app/ClientProviders.jsx

@@ -2,19 +2,12 @@
 
 import MuiThemeProvider from "./MuiThemeProvider";
 import BackgroundComponents from "./BackgroundComponents";
-import { useEffect, useState } from "react";
 
 export default function ClientProviders({ children }) {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
   return (
     <MuiThemeProvider>
       {children}
-      {mounted ? <BackgroundComponents /> : null}
+      <BackgroundComponents />
     </MuiThemeProvider>
   );
 }

app/HomeClient.jsx

@@ -7,9 +7,9 @@ import About from './About';
 const Navbar = dynamic(() => import('./Navbar'), { ssr: false });
 const Footer = dynamic(() => import('./Footer'), { ssr: false });
 
-const Container = dynamic(() => import('@mui/material/Container'), { ssr: false });
-const Skeleton = dynamic(() => import('@mui/material/Skeleton'), { ssr: false });
-const Box = dynamic(() => import('@mui/material/Box'), { ssr: false });
+import Container from '@mui/material/Container';
+import Skeleton from '@mui/material/Skeleton';
+import Box from '@mui/material/Box';
 
 // Lazy-loaded section components with optimized loading
 const LazySkillsSection = lazy(() => import('./sections/SkillsSection'));

app/Navbar.js

@@ -1,25 +1,34 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
+
+const NAV_ITEMS = ["about", "skills", "experience", "project", "education", "contact"];
 
 export default function Navbar() {
-  const navItems = ["about", "skills", "experience", "project", "education", "contact"];
   const [activeSection, setActiveSection] = useState('about');
+  const scrollTicking = useRef(false);
 
   useEffect(() => {
     const handleScroll = () => {
-      const scrollPosition = window.scrollY + 100;
-      for (let i = navItems.length - 1; i >= 0; i--) {
-        const section = document.getElementById(navItems[i]);
-        if (section && section.offsetTop <= scrollPosition) {
-          setActiveSection(navItems[i]);
-          break;
+      if (scrollTicking.current) return;
+      scrollTicking.current = true;
+
+      requestAnimationFrame(() => {
+        const scrollPosition = window.scrollY + 100;
+        for (let i = NAV_ITEMS.length - 1; i >= 0; i--) {
+          const section = document.getElementById(NAV_ITEMS[i]);
+          if (section && section.offsetTop <= scrollPosition) {
+            setActiveSection(NAV_ITEMS[i]);
+            break;
+          }
         }
-      }
+        scrollTicking.current = false;
+      });
     };
-    window.addEventListener('scroll', handleScroll);
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
     return () => window.removeEventListener('scroll', handleScroll);
-  }, [navItems]);
+  }, []);
 
   const handleNavClick = (e, item) => {
     setActiveSection(item);
@@ -58,7 +67,7 @@ export default function Navbar() {
     <nav className="navbar">
       <h1 className="brand">Abdul Kadir Khan</h1>
       <ul className="nav-links">
-        {navItems.map((item) => (
+        {NAV_ITEMS.map((item) => (
           <li key={item}>
             <a
               href={`#${item}`}

app/sections/ContactSection.js

@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import { Box, TextField, Button, Grid, Paper } from '@mui/material';
-import { Email, Phone, LocationOn, LinkedIn, GitHub, Mail } from '@mui/icons-material';
+import { Phone, LocationOn, LinkedIn, GitHub, Mail } from '@mui/icons-material';
 import { SectionTitle } from '../SectionComponents';
 import styles from './ContactSection.module.css';
 
@@ -154,7 +154,7 @@ export default function ContactSection() {
 
             {status === 'success' && (
               <div className={styles.successMessage}>
-                Message sent successfully! I'll get back to you soon.
+                Message sent successfully! I&apos;ll get back to you soon.
               </div>
             )}
           </form>