diff --git a/components/buymeacoffee.jsx b/components/buymeacoffee.jsx
new file mode 100644
index 0000000..1740aee
--- /dev/null
+++ b/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 ();
+ }
+
\ No newline at end of file
diff --git a/components/buymeacoffee.style.jsx b/components/buymeacoffee.style.jsx
new file mode 100644
index 0000000..9755a33
--- /dev/null
+++ b/components/buymeacoffee.style.jsx
@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export const BMCStyle = styled.div`
+ .supportFromHome {
+ bottom: 15px;
+ }
+`
\ No newline at end of file
diff --git a/components/providers/cursor.js b/components/providers/cursor.js
index 2286c73..c0a11d6 100644
--- a/components/providers/cursor.js
+++ b/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 (
+
+
+ )
+}
\ No newline at end of file
diff --git a/pages/index.js b/pages/index.js
index 01b16bb..313e25d 100644
--- a/pages/index.js
+++ b/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"
/>
-
+
-
+
{/* */}
);
diff --git a/styles/globals.css b/styles/globals.css
index 8ca9fb5..541ed79 100644
--- a/styles/globals.css
+++ b/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;
+ }
\ No newline at end of file