✨Feat : implement cursor animation

Mudassirkhan2 · Dec 30, 2023 · becbdcf · becbdcf · vercel · Dec 30, 2023
1 parent 33f2ff8
commit becbdcf
Show file tree

Hide file tree

Showing 21 changed files with 263 additions and 130 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -5,9 +5,10 @@
 @tailwind utilities;
 
 body {
-  background: rgb(2,0,36);
+  background: rgb(2, 0, 36);
 }
-*{
+
+* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
@@ -17,17 +18,88 @@ body {
 html {
   scroll-behavior: smooth;
 }
+
 @supports (-webkit-text-stroke: 1px black) {
-   .outline-text {
+  .outline-text {
     -webkit-text-stroke: 1px rgb(255, 247, 247);
     -webkit-text-fill-color: black;
   }
 }
+
 ::-webkit-scrollbar {
   background-color: #2d2d35;
   width: 0.4rem;
 }
+
 ::-webkit-scrollbar-thumb {
   --tw-bg-opacity: 1;
   background-color: rgb(0 255 148);
+}
+
+
+.glow-point {
+  position: absolute;
+  box-shadow: 0rem 0rem 1.2rem 0.6rem rgb(var(--glow-rgb));
+  pointer-events: none;
+}
+
+.star {
+  position: fixed;
+  z-index: 2;
+  font-size: 1rem;
+  animation-duration: 1500ms;
+  animation-fill-mode: forwards;
+  pointer-events: none;
+  animation: fall-1 1500ms ease-in-out 0ms infinite;
+}
+
+@keyframes fall-1 {
+  0% {
+    transform: translate(0px, 0px) rotateX(45deg) rotateY(30deg) rotateZ(0deg) scale(0.25);
+    opacity: 0;
+  }
+
+  5% {
+    transform: translate(10px, -10px) rotateX(45deg) rotateY(30deg) rotateZ(0deg) scale(1);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate(25px, 200px) rotateX(180deg) rotateY(270deg) rotateZ(90deg) scale(1);
+    opacity: 0;
+  }
+}
+
+@keyframes fall-2 {
+  0% {
+    transform: translate(0px, 0px) rotateX(-20deg) rotateY(10deg) scale(0.25);
+    opacity: 0;
+  }
+
+  10% {
+    transform: translate(-10px, -5px) rotateX(-20deg) rotateY(10deg) scale(1);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate(-10px, 160px) rotateX(-90deg) rotateY(45deg) scale(0.25);
+    opacity: 0;
+  }
+}
+
+@keyframes fall-3 {
+  0% {
+    transform: translate(0px, 0px) rotateX(0deg) rotateY(45deg) scale(0.5);
+    opacity: 0;
+  }
+
+  15% {
+    transform: translate(7px, 5px) rotateX(0deg) rotateY(45deg) scale(1);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate(20px, 120px) rotateX(-180deg) rotateY(-90deg) scale(0.5);
+    opacity: 0;
+  }
 }
diff --git a/app/layout.js b/app/layout.js
@@ -6,6 +6,10 @@ const inter = Inter({ subsets: ['latin'] })
 export const metadata = {
   title: 'Mudassir Khan - Web Developer',
   description: 'Mudassir Khan Portfolio Frontend developer Based in India. Like to Play with Css.Tech Stack are React.JS, Next.JS, Tailwindcss',
+  metadataBase: new URL('https://www.mudassirkhan.tech/'),
+  openGraph: {
+    images: '/og-image.png',
+  },
 }
 
 
@@ -23,7 +27,9 @@ export default function RootLayout({ children }) {
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css">
         </link>
         <script async defer src="https://scripts.simpleanalyticscdn.com/latest.js"></script>
-        <noscript><Image src="https://queue.simpleanalyticscdn.com/noscript.gif" alt="no script" referrerpolicy="no-referrer-when-downgrade" /></noscript>
+        <noscript><Image src="https://queue.simpleanalyticscdn.com/noscript.gif" alt="no script" 
+        width="0" height="0" loading="lazy"
+        referrerPolicy="no-referrer-when-downgrade" /></noscript>
       </head>
       <body className={inter.className}>{children}</body>
     </html>

diff --git a/app/loading.jsx b/app/loading.jsx
@@ -1,12 +1,12 @@
 import React from 'react'
-import Loader from "./assets/loader.svg"
+import Loader from "../public/assets/loader.svg"
 import Image from 'next/image'
 const Loading = () => {
   return (
     <div className='fixed top-0 bottom-0 left-0 right-0 z-50 flex items-center justify-center bg-black bg-opacity-50'>
-      <Image src={Loader} alt="Loading..."  
+      <Image src={Loader} alt="Loading..."
         width={300} height={300}
-      className=' mix-blend-color-burn'/>
+        className=' mix-blend-color-burn' />
     </div>
   )
 }

diff --git a/app/page.jsx b/app/page.jsx
@@ -1,22 +1,14 @@
-"use client"
 import About from "@/components/About";
 import Contact from "@/components/Contact";
 import Hero from "@/components/Hero";
 import NavBar from "@/components/NavBar";
 import Projects from "@/components/Projects";
-import SecModal from "@/components/SecModal";
+import Cursor from "@/components/clients/Cursor";
 import HeroBg from "@/components/clients/HeroBg";
-import { useEffect, useState } from "react";
 
 
 export default function Home() {
-  const [attention, setAttention] = useState(false);
 
-  useEffect(() => {
-    setTimeout(() => {
-      setAttention(true);
-    }, 15000);
-  }, []);
   return (
     <main className="relative min-h-screen mx-auto text-white">
       <div>
@@ -26,8 +18,8 @@ export default function Home() {
         <About />
         <Projects />
         <Contact />
+        <Cursor />
       </div>
-      {/* {attention && <SecModal handleClose={() => setAttention(false)} />} */}
     </main>
   )
 }