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" /> - +