From ebe3d24736502f06f60de809d5ca4cb549b10d07 Mon Sep 17 00:00:00 2001
From: khankadir193 <abdulkadirk059@gmail.com>
Date: Thu, 25 Jun 2026 13:57:14 +0530
Subject: [PATCH] performance issue

---
 app/About.js                     |  1 -
 app/AmbientBackground.module.css |  2 ++
 app/ClientProviders.jsx          |  9 +--------
 app/HomeClient.jsx               |  6 +++---
 app/Navbar.js                    | 33 ++++++++++++++++++++------------
 app/sections/ContactSection.js   |  4 ++--
 6 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/app/About.js b/app/About.js
index 17a6fd6..38b2ba6 100644
--- a/app/About.js
+++ b/app/About.js
@@ -31,7 +31,6 @@ export default function About() {
                 src="/kadir.jpeg"
                 alt="Abdul Kadir Khan"
                 fill
-                priority
                 className={styles.profileImage}
               />
             </div>
diff --git a/app/AmbientBackground.module.css b/app/AmbientBackground.module.css
index 2e20e9b..c4b34a7 100644
--- a/app/AmbientBackground.module.css
+++ b/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) {
diff --git a/app/ClientProviders.jsx b/app/ClientProviders.jsx
index 2658c7b..2fdef42 100644
--- a/app/ClientProviders.jsx
+++ b/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>
   );
 }
diff --git a/app/HomeClient.jsx b/app/HomeClient.jsx
index e29d7c5..f5655ce 100644
--- a/app/HomeClient.jsx
+++ b/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'));
diff --git a/app/Navbar.js b/app/Navbar.js
index 6eae60b..466e23f 100644
--- a/app/Navbar.js
+++ b/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}`}
diff --git a/app/sections/ContactSection.js b/app/sections/ContactSection.js
index 184eb08..e4f52c7 100644
--- a/app/sections/ContactSection.js
+++ b/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>