Hero Section Completed

shivam-tiwari-21 · Dec 30, 2024 · 21e8741 · 21e8741
1 parent 192f251
commit 21e8741
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 39 deletions.
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
@@ -1,33 +1,50 @@
 import { motion } from "framer-motion";
-import {styles} from "../Style";
-import {ComputersCanvas} from "./canvas";
-
-
+import { styles } from "../Style";
+import { ComputersCanvas } from "./canvas";
 
 const Hero = () => {
   return (
     <section className="relative w-full h-screen mx-auto">
-    <div className={`${styles.paddingX}
-    absolute inset-0 top-[120px] max-w-7xl mx-auto flex
-    flex-row items-start gap-5`}>
-      <div className="flex flex-col justify-center items-center mt-5">
-        <div className="w-5 h-5 rounded-full bg-[#915eff]"/>
-        <div className="w-1 sm:h-80 h-40 violet-gradient"/>
-      </div>
-      <div>
-        <h1 className={`${styles.heroHeadText} text-white`}>Hi, I'm <span className="text-[#915eff]">
-          Shivam Tiwari
-          </span></h1>
+      <div
+        className={`${styles.paddingX} absolute inset-0 top-[120px] max-w-7xl mx-auto flex flex-row items-start gap-5`}
+      >
+        <div className="flex flex-col justify-center items-center mt-5">
+          <div className="w-5 h-5 rounded-full bg-[#915eff]" />
+          <div className="w-1 sm:h-80 h-40 violet-gradient" />
+        </div>
+        <div>
+          <h1 className={`${styles.heroHeadText} text-white`}>
+            Hi, I'm <span className="text-[#915eff]">Shivam Tiwari</span>
+          </h1>
           <p className={`${styles.heroSubText} mt-2 text-white-100`}>
-            I develop Full-Stack Web Applications, 
-            <br className="sm:block hidden"/>
-              primarly using the MERN Stack.
+            I develop Full-Stack Web Applications, <br className="sm:block hidden" />
+            primarily using the MERN Stack.
           </p>
+        </div>
+      </div>
+
+      <ComputersCanvas />
+
+      {/* Animated div component placed below modal */}
+      <div className="absolute w-full flex justify-center items-center z-10">
+        <a href="#about">
+          <div className="w-[35px] h-[64px] rounded-3xl border-4 border-secondary flex justify-center items-start p-2">
+            <motion.div
+              animate={{
+                y: [0, 26, 0],
+              }}
+              transition={{
+                duration: 1.5,
+                repeat: Infinity,
+                repeatType: "loop",
+              }}
+              className="w-3 h-3 rounded-full bg-secondary mb-1"
+            />
+          </div>
+        </a>
       </div>
-    </div>
-    <ComputersCanvas/>
     </section>
-  )
-}
+  );
+};
 
-export default Hero
+export default Hero;
diff --git a/src/components/canvas/Computers.jsx b/src/components/canvas/Computers.jsx
@@ -1,32 +1,51 @@
-
-import { Suspense } from 'react';
-import { Canvas, useThree } from '@react-three/fiber';
+import { Suspense, useEffect, useState } from 'react';
+import { Canvas } from '@react-three/fiber';
 import { OrbitControls, Preload, useGLTF } from '@react-three/drei';
 import CanvasLoader from '../Loader';
 
-const Computers = () => {
+const Computers = ({isMobile}) => {
   const computer = useGLTF('./desktop_pc/scene.gltf');
   return (
     <mesh>
       <hemisphereLight intensity={1} groundColor="black" />
-      <pointLight intensity={1.4}  />
+      <pointLight intensity={1.4} />
       <spotLight
-      position={[-20,50,10]}
-      angle={0.12}
-      penumbra={1}
-      intensity={1.4}
-      castShadow
-      shadow-mapSize={1024}
+        position={[-20, 50, 10]}
+        angle={0.12}
+        penumbra={1}
+        intensity={1.4}
+        castShadow
+        shadow-mapSize={1024}
+      />
+      <primitive
+        object={computer.scene}
+        scale={isMobile? 0.7 : 0.75}
+        position={isMobile?[0,3.75,2.2] : [0, -4, -1.5]}
+        rotation={[-0.01, -0.2, -0.1]}
       />
-      <primitive object={computer.scene} 
-      scale={0.75}
-      position={[0, -4, -1.5]}
-      rotation={[-0.01,-0.2,-0.1]}/>
     </mesh>
   );
 };
 
 const ComputersCanvas = () => {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(max-width: 500px)");
+    setIsMobile(mediaQuery.matches);
+
+    const handleMediaQueryChange = (event) => {
+      setIsMobile(event.matches);
+    };
+
+    mediaQuery.addEventListener('change', handleMediaQueryChange);
+
+    // Cleanup function to remove the event listener
+    return () => {
+      mediaQuery.removeEventListener('change', handleMediaQueryChange);
+    };
+  }, []);
+
   return (
     <Canvas
       frameloop="demand"
@@ -40,7 +59,7 @@ const ComputersCanvas = () => {
           maxPolarAngle={Math.PI / 2}
           minPolarAngle={Math.PI / 2}
         />
-        <Computers />
+        <Computers isMobile={isMobile} />
       </Suspense>
       <Preload all />
     </Canvas>