Tree done

src/App.jsx

@@ -23,21 +23,22 @@ import { Mouse } from "./components/canvas";
  */
 
 function App() {
-  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
-  const [mouseModes, setMouseModes] = useState("default");
 
-  const cusoreMove = {
-    default: {
-      x: mousePosition.x - 40,
-      y: mousePosition.y - 40,
-    },
-    text: {
-      width: 160,
-      height: 160,
-      x: mousePosition.x - 80,
-      y: mousePosition.y - 80,
-    },
-  };
+  // const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+  // const [mouseModes, setMouseModes] = useState("default");
+
+  // const cusoreMove = {
+  //   default: {
+  //     x: mousePosition.x - 40,
+  //     y: mousePosition.y - 40,
+  //   },
+  //   text: {
+  //     width: 160,
+  //     height: 160,
+  //     x: mousePosition.x - 80,
+  //     y: mousePosition.y - 80,
+  //   },
+  // };
 
 
 
@@ -61,14 +62,8 @@ function App() {
     <>
       <div className="relative z-0 bg-primary">
         <div className="flex bg-hero-pattern bg-cover bg-center bg-no-repeat pointer-events-none">
-          <Navbar />
-          <Mouse
-            cursoreMove={cusoreMove}
-            mouseModes={mouseModes}
-          />
-
+          <Navbar />            
           <Hero 
-          // textInhance={textInhance} textNormal={textNormal}
            />
         </div>
         <About />

src/components/Experience.jsx

@@ -1,17 +1,19 @@
 import { styles } from "../styles";
 import { motion } from "framer-motion";
-import { fadeIn, textVariant } from "../utils/motion";
-import { experiences } from "../constants";
 import {
   VerticalTimeline,
   VerticalTimelineElement,
 } from "react-vertical-timeline-component";
+import 'react-vertical-timeline-component/style.min.css'
+
 import { SectionWrapper } from "../hoc";
+import { experiences } from "../constants";
+import { fadeIn, textVariant } from "../utils/motion";
 
 const ExperienceCard = ({ experience }) => {
   return (
     <VerticalTimelineElement
-      className="flex pb-3"
+      className="pb-3"
       contentStyle={{
         background: "#1d1836",
         color: "#fff",
@@ -20,16 +22,16 @@ const ExperienceCard = ({ experience }) => {
       date={experience.date}
       iconStyle={{ background: experience.iconBg }}
       icon={
-        <div className="flex w-20">
+        <div className="flex h-full items-center justify-center ">
           <img
             src={experience.icon}
             alt={experience.company_name}
-            className="w-[40%] h-[20%] object-contain"
+            className="w-[60%] h-[60%] object-contain"
           />
         </div>
       }
     >
-      <div className="">
+      <div>
         <h3 className="text-white text-[24px] font-bold">{experience.title}</h3>
         <p
           className="text-secondary text-[16px] font-semibold"
@@ -62,9 +64,11 @@ const Experience = () => {
 
       <div className="mt-20 flex flex-col">
         <VerticalTimeline>
-          {experiences.map((exp, i) => (
-            <ExperienceCard key={`experience-${i}`} experience={exp} />
-          ))}
+          {
+            experiences.map((experience, i) => (
+              <ExperienceCard key={`experience${i}`} experience={experience} />
+            ))
+          }
         </VerticalTimeline>
       </div>
     </>

src/components/Navbar.jsx

@@ -4,12 +4,15 @@ import { Link } from "react-router-dom";
 import { styles } from "../styles";
 import { navLinks } from "../constants";
 import { logo, menu, close } from "../assets";
-useState;
+
 const Navbar = () => {
   const [active, setActive] = useState("");
   const [toggle, setToggle] = useState(true);
   const [isNavColor, setNavColor] = useState(false);
 
+  console.log(active);
+
+
   useEffect(() => {
     const handleScroll = () => {
       const scrollTop = scrollY;
@@ -36,8 +39,9 @@ const Navbar = () => {
       <div className="mx-auto flex w-full max-w-7xl items-center justify-between">
         <Link
           to="/"
-          className="flex items-center gap-3"
+          className="flex cursor-pointer items-center gap-3"
           onClick={() => {
+            console.log('click');
             setActive("");
             scrollTo(0, 0);
           }}
@@ -57,7 +61,7 @@ const Navbar = () => {
               className={`${
                 active === link.title ? "text-white" : "text-secondary"
               } cursor-pointer text-[18px] font-medium hover:text-white`}
-              onClick={() => setActive(link.title)}
+              onClick={() => (setActive(link.title, console.log('click')))}
             >
               <a href={`#${link.id}`}>{link.title}</a>
             </li>
@@ -85,6 +89,7 @@ const Navbar = () => {
                   onClick={() => {
                     setActive(link.title);
                     setToggle(!toggle);
+                    console.log('click');
                   }}
                 >
                   <a href={`#${link.id}`}>{link.title}</a>

src/components/canvas/Ball.jsx

@@ -1,46 +1,54 @@
 import React, { Suspense, useRef } from "react";
-import { Decal, Float, OrbitControls, Preload, useTexture} from "@react-three/drei";
+import {
+  Decal,
+  Float,
+  OrbitControls,
+  Preload,
+  Shadow,
+  useTexture,
+} from "@react-three/drei";
+
 import { Canvas } from "@react-three/fiber";
 import CanvasLoader from "../Loader";
 
 const Ball = (props) => {
   const [decal] = useTexture([props.imgUrl]);
 
   return (
-    <Float speed={1.75} rotationIntensity={1} floatIntensity={2}>
-      <directionalLight position={[0, 0, 0.05]} />
-
-      <mesh castShadow receiveShadow scale={2.75}>
-        <icosahedronGeometry args={[1, 1]} />
-        <meshStandardMaterial
-          color="#fff8eb"
-          polygonOffset
-          polygonOffsetFactor={-5}
-          flatShading
-        />
-        <Decal
-          position={[0, 0, 1]}
-          rotation={[2 * Math.PI, 0, 6.25]}
-          scale={1}
-          map={decal}
-          flatShading
-        />
-      </mesh>
-    </Float>
+    <Float 
+    speed={1.75} rotationIntensity={1} floatIntensity={2}>
+    <ambientLight intensity={1}  />
+    <directionalLight position={[0, 0, 0.05]} />
+    <mesh castShadow receiveShadow scale={2.75}>
+      <icosahedronGeometry args={[1, 1]} />
+      <meshStandardMaterial
+        color='#fff8eb'
+        polygonOffset
+        polygonOffsetFactor={-5}
+        flatShading
+      />
+      <Decal
+        position={[0, 0, 1]}
+        rotation={[2 * Math.PI, 0, 6.25]}
+        scale={1}
+        map={decal}
+        flatShading
+      />
+    </mesh>
+  </Float>
   );
 };
 
 const BallCanvas = ({ icon }) => {
-  const rootRef = useRef();
-
   return (
-    <Canvas>
+    <Canvas
+      frameloop="demand"
+      dpr={[1, 2]}
+      gl={{ preserveDrawingBuffer: true }}
+    >
       <Suspense fallback={<CanvasLoader />}>
         <OrbitControls enableZoom={false} />
-        <group ref={rootRef}>
-          <Ball imgUrl={icon} />
-        </group>
-        <ambientLight intensity={0.80} />
+        <Ball imgUrl={icon} />
       </Suspense>
       <Preload all />
     </Canvas>

src/components/canvas/Computers.jsx

@@ -1,6 +1,6 @@
 import { Suspense, useEffect, useState } from "react";
 import { Canvas } from "@react-three/fiber";
-import { OrbitControls, Preload, SpotLight, useGLTF } from "@react-three/drei";
+import { OrbitControls, Preload, useGLTF } from "@react-three/drei";
 
 import CanvasLoader from "../Loader";
 
@@ -12,27 +12,33 @@ const Computers = ({isMobile}) => {
 
   // lighting required 
   return (
-    <group> 
+    <mesh> 
       <hemisphereLight intensity={2} groundColor={0x000000} />   
       <pointLight intensity={5} 
               angle={0.12}
               penumbra={1}
               castShadow
               shadow-mapSize={1024}
       />
-      <SpotLight  position={[-20, 50,10]} />
+      <spotLight
+        position={[-20, 50, 10]}
+        angle={0.12}
+        penumbra={1}
+        intensity={1}
+        castShadow
+        shadow-mapSize={1024}
+      />
+      <pointLight intensity={1} />
 
       {/* component that displays on the screen  */}
-
-
       <primitive
         object={computer.scene}
         scale={isMobile ? 0.6 : 0.75}
         position={isMobile ? [0, -2.5, -1.5] : [0, -3.25, -1.5]}
         rotation={[-0.01, -0.2, -0.1]}
       />
 
-    </group>
+    </mesh>
   );
 };