Added some script fixes + custom cursor

components/buymeacoffee.jsx

@@ -0,0 +1,37 @@
+import React, { useEffect } from "react";
+import {BMCStyle} from "./buymeacoffee.style";
+
+export default function Buymeacoffee() {
+    // const
+    useEffect(() => {
+      const script = document.createElement("script");
+      const div = document.getElementById("supportByBMC");
+      script.setAttribute(
+        "src",
+        "https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
+      );
+      script.setAttribute("data-name", "BMC-Widget");
+      script.setAttribute("data-cfasync", "false");
+      script.setAttribute("data-id", "bravo68web");
+      script.setAttribute("data-description", "Support me on Buy me a coffee!");
+      script.setAttribute(
+        "data-message",
+        "Buying a single coffee for me is 1000 times worth than a Thankyou "
+      );
+      script.setAttribute("data-color", "#7422f8");
+      script.setAttribute("data-position", "Right");
+      script.setAttribute("data-x_margin", "18");
+      script.setAttribute("data-y_margin", "18");
+  
+      script.onload = function () {
+        var evt = document.createEvent("Event");
+        evt.initEvent("DOMContentLoaded", false, false);
+        window.dispatchEvent(evt);
+      };
+  
+      div.appendChild(script);
+    }, []);
+  
+    return (<BMCStyle><div id="supportByBMC"></div></BMCStyle>);
+  }
+  

components/buymeacoffee.style.jsx

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export const BMCStyle = styled.div`
+    .supportFromHome {
+    bottom: 15px;
+    }
+`

components/providers/cursor.js

@@ -1,66 +1,28 @@
-export function loadCursor(ball) {
-  let x = window.innerWidth / 2;
-  let y = window.innerHeight / 2;
+import {useRef, useEffect} from 'react'; 
 
-  let ballX = x;
-  let ballY = y;
-
-  let hideTimeout = NodeJS.Timeout ? null : null;
-
-  function drawBall() {
-    ballX += (x - ballX) * 0.1 - 1;
-    ballY += (y - ballY) * 0.1 - 1;
-
-    ball.style.top = `${ballY - window.scrollY}px`;
-    ball.style.left = `${ballX}px`;
-  }
-
-  function loop() {
-    drawBall();
-    requestAnimationFrame(loop);
-  }
-
-  loop();
-
-  function touch(event) {
-    x = event.touches[0].pageX;
-    y = event.touches[0].pageY;
-  }
-
-  function mousemove(event) {
-    ball.style.opacity = "1";
-
-    if (hideTimeout) {
-      clearTimeout(hideTimeout);
-    }
-
-    x = event.pageX;
-    y = event.pageY;
-
-    hideTimeout = setTimeout(() => {
-      ball.style.opacity = "0";
-    }, 300);
-  }
-
-  function mousedown() {
-    ball.style.transform = "scale(2)";
-  }
-
-  function mouseup() {
-    ball.style.transform = "scale(1)";
-  }
-
-  window.addEventListener("touchstart", touch);
-  window.addEventListener("touchmove", touch);
-  window.addEventListener("mousemove", mousemove);
-  window.addEventListener("mousedown", mousedown);
-  window.addEventListener("mouseup", mouseup);
-
-  return () => {
-    window.removeEventListener("touchstart", touch);
-    window.removeEventListener("touchmove", touch);
-    window.removeEventListener("mousemove", mousemove);
-    window.removeEventListener("mousedown", mousedown);
-    window.removeEventListener("mouseup", mouseup);
-  };
-}
+export default function CustomCursor() {
+  const cursorRef = useRef(null)
+  useEffect(() => {
+  if (cursorRef.current == null || cursorRef == null)
+       return;
+  document.addEventListener('mousemove', e => {
+       if (cursorRef.current == null)
+            return;
+       cursorRef.current.setAttribute("style", "top: " + (e.pageY) + "px; left: " + (e.pageX) + "px;")
+  })
+  document.addEventListener('click', () => {
+  if (cursorRef.current == null)
+    return;
+  cursorRef.current.classList.add("expand");
+  setTimeout(() => {
+       if (cursorRef.current == null)
+          return;
+       cursorRef.current.classList.remove("expand");
+    }, 500)
+  })
+  }, []);
+  return (
+  <div className='cursor' ref={cursorRef}>
+  </div>
+  )
+}

pages/index.js

@@ -1,7 +1,10 @@
 import Head from "next/head";
 import Nav from "components/nav";
 import Main from "components/main";
+import Script from 'next/script'
 import Footer from "components/footer";
+import BMC from "components/buymeacoffee";
+import CustomCursor from "components/providers/cursor";
 
 export default function Home() {
   return (
@@ -32,11 +35,11 @@ export default function Home() {
           href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
           rel="stylesheet"
         />
-        <script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="bravo68web" data-description="Support me on Buy me a coffee!" data-message="Thank you checking out my portfolio !! " data-color="#BD5FFF" data-position="Right" data-x_margin="18" data-y_margin="18"></script>
       </Head>
+      <CustomCursor />
       <Nav />
       <Main />
-
+      <BMC />
       {/* <Footer /> */}
     </div>
   );

styles/globals.css

@@ -34,6 +34,7 @@ body {
   width: 100vw;
   /* color:var(--color3)   */
   color: var(--color7);
+  cursor: none;
 }
 a {
   color: inherit;
@@ -44,14 +45,40 @@ a {
   box-sizing: border-box;
 }
 
-#cursor-dot {
-  width: var(--cursor-size);
-  height: var(--cursor-size);
-  background-color: rgba(var(--color-cursor), 1);
-}
+.cursor {
+  width: 20px;
+  height: 20px;
+  border: 1px solid white;
+  border-radius: 50%;
+  position: absolute;
+  pointer-events: none;
+  z-index: 100;
+  }
+  
+.cursor::after {
+  content: "";
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  border: 2px solid blue;
+  border-radius: 50%;
+  opacity: .5;
+  top: -8px;
+  left: -8px;
+  }
+@keyframes cursorAnim {
+  0% {
+  transform: scale(1);
+  }
+  50% {
+  transform: scale(5);
+  }
+  100% {
+  transform: scale(1);
+  opacity: 0;
+  }
+  }
 
-#cursor-dot-outline {
-  width: var(--cursor-outline-size);
-  height: var(--cursor-outline-size);
-  background-color: rgba(var(--color-cursor), var(--cursor-outline-shade));
-}
+.expand {
+  animation: cursorAnim .5s forwards;
+ }