diff --git a/app/globals.css b/app/globals.css index c05866b..744b793 100644 --- 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; + } } \ No newline at end of file diff --git a/app/layout.js b/app/layout.js index 9150376..fd82cb5 100644 --- 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 }) { - + {children} diff --git a/app/loading.jsx b/app/loading.jsx index 9c2f1b2..fda1840 100644 --- 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 (
- Loading... + className=' mix-blend-color-burn' />
) } diff --git a/app/page.jsx b/app/page.jsx index 24e19ac..aa18744 100644 --- 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 (
@@ -26,8 +18,8 @@ export default function Home() { +
- {/* {attention && setAttention(false)} />} */}
) } diff --git a/components/About.jsx b/components/About.jsx index e570c11..8f31639 100644 --- a/components/About.jsx +++ b/components/About.jsx @@ -1,130 +1,130 @@ - +"use client"; import Image from 'next/image' import React from 'react' -import FramerIcon from '../app/assets/framer.png'; +import FramerIcon from '../public/assets/framer.png'; import AnimateLetters from './clients/AnimateLetters'; -import {ElementWrapper} from './clients/client'; +import { ElementWrapper } from './clients/client'; const About = () => { return (
- +
-

Hi 👋 I'm Mudassir ,

-
-

Having successfully completed my studies in BTech Electrical and Electronics Engineering, I possess a distinctive combination of engineering expertise and proficient coding skills. I'm passionate about creating captivating user experiences through intuitive and responsive front-end development. -

-

I actively contribute to the open-source community and enjoy collaborating with like-minded individuals to bring innovative ideas to life. My tech stack includes Next.js, React, TailwindCSS, and Im always eager to learn and expand my skills. -

-
+

Hi 👋 I'm Mudassir ,

+
+

Having successfully completed my studies in BTech Electrical and Electronics Engineering, I possess a distinctive combination of engineering expertise and proficient coding skills. I'm passionate about creating captivating user experiences through intuitive and responsive front-end development. +

+

I actively contribute to the open-source community and enjoy collaborating with like-minded individuals to bring innovative ideas to life. My tech stack includes Next.js, React, TailwindCSS, and Im always eager to learn and expand my skills. +

+
-

Language and Tools

-
    -
  • - Nextjs -
    Next js
    -
    • -
  • - Language and Tools +
      +
    • + Nextjs +
      Next js
      +
      • +
    • + react js -
      React JS
      -
      • - -
    • - +
      React JS
      +
      • + +
    • + redux-toolkit -
      redux-toolkit
      -
      • -
    • - tailwind css -
      Tailwind CSS
      -
      • -
    • - +
      redux-toolkit
      +
      • +
    • + tailwind css +
      Tailwind CSS
      +
      • +
    • + JavaScript -
      JavaScript
      -
      • -
    • - Python -
      Python
      -
      • - -
    • - firebase -
      firebase
      -
      • -
    • - Framer motion -
      Framer motion
      -
      • -
    • - Figma -
      Figma
      -
      • -
    • - Git -
      Git
      -
      • -
    • - Github -
      Github
      -
      • - + /> +
      JavaScript
      + +
    • + Python +
      Python
      +
      • + +
    • + firebase +
      firebase
      +
      • +
    • + Framer motion +
      Framer motion
      +
      • +
    • + Figma +
      Figma
      +
      • +
    • + Git +
      Git
      +
      • +
    • + Github +
      Github
      +
      • +
    • Vs Code -
      Vscode
      + /> +
      Vscode
-
+ ) } diff --git a/components/Contact.jsx b/components/Contact.jsx index 411db0e..e8ff7f9 100644 --- a/components/Contact.jsx +++ b/components/Contact.jsx @@ -1,8 +1,8 @@ "use client" -import GithubIcon from '../app/assets/githubIcon.png'; -import gmailIcon from '../app/assets/gmail.png'; -import linkedinIcon from '../app/assets/linkedin.png'; -import twitterIcon from '../app/assets/twitter.png'; +import GithubIcon from '../public/assets/githubIcon.png'; +import gmailIcon from '../public/assets/gmail.png'; +import linkedinIcon from '../public/assets/linkedin.png'; +import twitterIcon from '../public/assets/twitter.png'; import Image from 'next/image'; import { ElementWrapper } from './clients/client'; const Contact = () => { diff --git a/components/Hero.jsx b/components/Hero.jsx index 84330f0..ab46148 100644 --- a/components/Hero.jsx +++ b/components/Hero.jsx @@ -1,7 +1,7 @@ -import GithubIcon from '../app/assets/githubIcon.png'; -import gmailIcon from '../app/assets/gmail.png'; -import linkedinIcon from '../app/assets/linkedin.png'; -import twitterIcon from '../app/assets/twitter.png'; +import GithubIcon from '../public/assets/githubIcon.png'; +import gmailIcon from '../public/assets/gmail.png'; +import linkedinIcon from '../public/assets/linkedin.png'; +import twitterIcon from '../public/assets/twitter.png'; import Image from 'next/image'; import HeroAnimation from './clients/HeroAnimation'; import { ElementWrapper } from './clients/client'; diff --git a/components/Projects.jsx b/components/Projects.jsx index 066effa..d2e65cd 100644 --- a/components/Projects.jsx +++ b/components/Projects.jsx @@ -1,7 +1,7 @@ -import HomeFinderGif from '../app/assets/HomeFinder.gif'; -import bugbounty from '../app/assets/bugbounty.png'; -import tabstacker from '../app/assets/tabstacker.png'; -import liftSimulationGif from '../app/assets/liftSimulation.gif'; +"use client" +import HomeFinderGif from '../public/assets/HomeFinder.gif'; +import bugbounty from '../public/assets/bugbounty.png'; +import tabstacker from '../public/assets/tabstacker.png'; import AnimateLetters from './clients/AnimateLetters'; import ProjectSection from './clients/ProjectSection'; import { ElementWrapper } from './clients/client'; diff --git a/components/clients/Cursor.jsx b/components/clients/Cursor.jsx new file mode 100644 index 0000000..52cfee7 --- /dev/null +++ b/components/clients/Cursor.jsx @@ -0,0 +1,59 @@ +"use client"; +import { useEffect, useRef, useState } from 'react'; +import { FaStar } from "react-icons/fa"; +const Cursor = () => { + const [cursorShow, setCursorShow] = useState(false); + const [positions, setPositions] = useState([]); + const [color, setColor] = useState('red'); + const colors = ['red', 'blue', 'green', 'yellow', 'pink', 'purple', 'orange', 'indigo']; + const cursorRef = useRef(); + + const rand = (max, min) => Math.floor(Math.random() * (max - min + 1)) + min; + const selectRandomColor = (items) => { + return items[rand(0, items.length - 1)] + } + + // Events when cursor moves and we set position + const mouseMove = (e) => { + setCursorShow(true); + setPositions(prevPositions => [...prevPositions, { left: `${e.clientX}px`, top: `${e.clientY}px` }]); + setTimeout(() => { + setPositions(prevPositions => prevPositions.length > 1 ? prevPositions.slice(1) : []); + }, 1000); + }; + + // When cursor leave set postion to middle + const mouseLeave = () => { + setCursorShow(false); + setPositions([]); + }; + + // Mounting the event and demount + useEffect(() => { + document?.addEventListener('mousemove', mouseMove); + document?.addEventListener('mouseleave', mouseLeave); + + return () => { + document?.removeEventListener('mousemove', mouseMove); + document?.removeEventListener('mouseleave', mouseLeave); + }; + }, []); + return ( + <> + {positions.map((pos, index) => { + const color = selectRandomColor(colors); + console.log(color) + return ( + + ); + })} + + ); +}; + +export default Cursor; diff --git a/next.config.js b/next.config.js index 767719f..b37f1e5 100644 --- a/next.config.js +++ b/next.config.js @@ -1,4 +1,8 @@ /** @type {import('next').NextConfig} */ -const nextConfig = {} - -module.exports = nextConfig +const nextConfig = { + images: { + domains: ['queue.simpleanalyticscdn.com'], + }, + } + + module.exports = nextConfig \ No newline at end of file diff --git a/app/assets/HomeFinder.gif b/public/assets/HomeFinder.gif similarity index 100% rename from app/assets/HomeFinder.gif rename to public/assets/HomeFinder.gif diff --git a/app/assets/bugbounty.png b/public/assets/bugbounty.png similarity index 100% rename from app/assets/bugbounty.png rename to public/assets/bugbounty.png diff --git a/app/assets/framer.png b/public/assets/framer.png similarity index 100% rename from app/assets/framer.png rename to public/assets/framer.png diff --git a/app/assets/githubIcon.png b/public/assets/githubIcon.png similarity index 100% rename from app/assets/githubIcon.png rename to public/assets/githubIcon.png diff --git a/app/assets/gmail.png b/public/assets/gmail.png similarity index 100% rename from app/assets/gmail.png rename to public/assets/gmail.png diff --git a/app/assets/liftSimulation.gif b/public/assets/liftSimulation.gif similarity index 100% rename from app/assets/liftSimulation.gif rename to public/assets/liftSimulation.gif diff --git a/app/assets/linkedin.png b/public/assets/linkedin.png similarity index 100% rename from app/assets/linkedin.png rename to public/assets/linkedin.png diff --git a/app/assets/loader.svg b/public/assets/loader.svg similarity index 100% rename from app/assets/loader.svg rename to public/assets/loader.svg diff --git a/app/assets/tabstacker.png b/public/assets/tabstacker.png similarity index 100% rename from app/assets/tabstacker.png rename to public/assets/tabstacker.png diff --git a/app/assets/twitter.png b/public/assets/twitter.png similarity index 100% rename from app/assets/twitter.png rename to public/assets/twitter.png diff --git a/app/assets/wow.gif b/public/assets/wow.gif similarity index 100% rename from app/assets/wow.gif rename to public/assets/wow.gif