cursor

GrvExplorer · Nov 27, 2023 · 61d21d3 · 61d21d3
1 parent a86f971
commit 61d21d3
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 25 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -17,7 +17,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v1
         with:
-          node-version: 16
+          node-version: 12
 
       - name: Install dependencies
         uses: bahmutov/npm-install@v1

diff --git a/index.html b/index.html
@@ -2,12 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/assets/logoWith.svg" />
+    <link rel="icon" type="image/svg+xml" href="./src/assets/logoWith.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>GRV | Portfolio</title>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="./src/main.jsx"></script>
   </body>
 </html>
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import {
   About,
   Contact,
@@ -9,36 +10,74 @@ import {
   Works,
   StarsCanvas,
 } from "./components";
+import { Mouse } from "./components/canvas";
 
 /**
- * 
+ *
  * @returns
  * Todo~ Learn Responsiveness
  * Todo~ Folder structure (Proper die section )
  * Todo~ React Library ( Main CSS )
  * Todo~ CSS Framework (chose 1 and arrangement of design system )
- * 
+ *
  */
 
-
 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,
+    },
+  };
+
+  function mouseEffect(e) {
+    setMousePosition({ x: e.clientX, y: e.clientY });
+  }
+
+  useEffect(() => {
+    addEventListener("mousemove", mouseEffect);
+
+    return () => {
+      removeEventListener("mousemove", mouseEffect);
+    };
+  }, []);
+
+  const textInhance = () => setMouseModes("text");
+  const textNormal = () => setMouseModes("default");
+
   return (
     <>
-        <div className="relative z-0 bg-primary ">
-          <div className="flex bg-hero-pattern bg-cover bg-center bg-no-repeat">
-            <Navbar />
-            <Hero />
-          </div>
-          <About />
-          {/* <Experience /> */}
-          <Tech />
-          <Works />
-          <Feedbacks />
-          <div className="relative z-0">
-            <Contact />
-            <StarsCanvas />
-          </div>
+      <div className="relative z-0 bg-primary ">
+        <div className="flex bg-hero-pattern bg-cover bg-center bg-no-repeat">
+          <Navbar />
+          <Mouse
+            cursoreMove={cusoreMove}
+            mouseModes={mouseModes}
+            mousePosition={mousePosition}
+          />
+
+          <Hero textInhance={textInhance} textNormal={textNormal} />
+        </div>
+
+        <About />
+        {/* <Experience /> */}
+        <Tech />
+        <Works />
+        <Feedbacks />
+        <div className="relative z-0">
+          <Contact />
+          <StarsCanvas />
         </div>
+      </div>
     </>
   );
 }

diff --git a/src/components/Contact.jsx b/src/components/Contact.jsx
@@ -9,7 +9,6 @@ import { slideIn } from "../utils/motion";
 
 const Contact = () => {
   const formRef = useRef();
-  console.log(formRef);
 
   const [form, setForm] = useState({
     name: "",

diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
@@ -3,7 +3,8 @@ import { motion } from "framer-motion";
 import { styles } from "../styles";
 import ComputersCanvas from "./canvas/Computers";
 
-const Hero = () => {
+const Hero = ({textInhance, textNormal}) => {
+
   return (
     <section className="relative mx-auto h-screen w-full">
       <div
@@ -14,7 +15,7 @@ const Hero = () => {
           <div className="violet-gradient h-80 w-1"></div>
         </div>
 
-        <div className="px-4">
+        <div onMouseEnter={textInhance()} onMouseLeave={textNormal()} className="px-4">
           <h1 className={`${styles.heroHeadText} text-white`}>
             Hi, I'm <span className="text-[#915eff]">Gaurav</span>
           </h1>

diff --git a/src/components/canvas/Mouse.jsx b/src/components/canvas/Mouse.jsx
@@ -0,0 +1,18 @@
+import { Circle } from "@react-three/drei";
+import { motion} from 'framer-motion'
+
+import React from "react";
+
+function Mouse( {mousePosition, mouseModes, cursoreMove} ) {
+
+  return (
+    <motion.div 
+      variants={cursoreMove}
+      animate={mouseModes}
+      className={`h-20 w-20 pointer-events-none z-50 top-0 left-0 absolute bg-purple-500 opacity-[60%] rounded-full`}
+    >
+    </motion.div>
+  );
+}
+
+export default Mouse;
diff --git a/src/components/canvas/index.js b/src/components/canvas/index.js
@@ -2,5 +2,6 @@ import EarthCanvas from "./Earth";
 import BallCanvas from "./Ball";
 import ComputersCanvas from "./Computers";
 import StarsCanvas from "./Stars";
+import Mouse from './Mouse'
 
-export { EarthCanvas, BallCanvas, ComputersCanvas, StarsCanvas };
+export { EarthCanvas, BallCanvas, ComputersCanvas, StarsCanvas, Mouse};
diff --git a/vite.config.js b/vite.config.js
@@ -7,5 +7,5 @@ export default defineConfig({
   server: {
     port: 8880
   },
-  base: '/3D_Portfolio/'
+  base: '/3D_Portfolio'
 })