feat: add background dots

src/components/BackgroundDots.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+import {
+  useMotionValue,
+  motion,
+  useMotionTemplate,
+} from 'framer-motion'
+
+export type BackgroundDotsProps = {
+  children: React.ReactNode
+  className?: string
+  containerClassName?: string
+}
+
+const BackgroundDots: React.FC<BackgroundDotsProps> = ({
+  children,
+  className,
+  containerClassName,
+}) => {
+  let mouseX = useMotionValue(0)
+  let mouseY = useMotionValue(0)
+
+  const handleMouseMove = ({
+    currentTarget,
+    clientX,
+    clientY,
+  }: React.MouseEvent<HTMLDivElement>) => {
+    if (!currentTarget) return
+    let { left, top } = currentTarget.getBoundingClientRect()
+    mouseX.set(clientX - left)
+    mouseY.set(clientY - top)
+  }
+
+  return (
+    <div
+      className={cn(
+        'relative h-[40rem] flex items-center bg-white dark:bg-black justify-center w-full group',
+        containerClassName,
+      )}
+      onMouseMove={handleMouseMove}
+    >
+      <div className='absolute inset-0 bg-dot-thick-neutral-300 dark:bg-dot-thick-neutral-800 pointer-events-none' />
+      <motion.div
+        className='pointer-events-none bg-dot-thick-indigo-500 dark:bg-dot-thick-indigo-500 absolute inset-0 opacity-0 transition duration-300 group-hover:opacity-100'
+        style={{
+          WebkitMaskImage: useMotionTemplate`
+            radial-gradient(
+              200px circle at ${mouseX}px ${mouseY}px,
+              black 0%,
+              transparent 100%
+            )
+          `,
+          maskImage: useMotionTemplate`
+            radial-gradient(
+              200px circle at ${mouseX}px ${mouseY}px,
+              black 0%,
+              transparent 100%
+            )
+          `,
+        }}
+      />
+
+      <div className={cn('relative z-20 w-full', className)}>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default BackgroundDots

src/components/Page.tsx

@@ -4,6 +4,7 @@ import Footer from './Footer'
 import { useLocation } from 'react-router-dom'
 import { Helmet } from 'react-helmet'
 import ReactGA from 'react-ga4'
+import BackgroundDots from './BackgroundDots'
 
 export type PageProps = {
   children: React.ReactNode
@@ -26,9 +27,11 @@ const Page: React.FC<PageProps> = ({ children, active, title }) => {
         <title>{title ?? 'Ammar Ahmed'}</title>
       </Helmet>
       <Navigation active={active} />
-      <main className='mx-auto max-w-4xl md:px-5 px-3'>
-        {children}
-      </main>
+      <BackgroundDots containerClassName='h-full'>
+        <main className='mx-auto max-w-4xl md:px-5 px-3'>
+          {children}
+        </main>
+      </BackgroundDots>
       <Footer />
     </>
   )

src/pages/Landing/sections/Hero.tsx

@@ -13,9 +13,11 @@ const Hero: React.FC = () => {
   useEffect(() => {
     updateSignatureWidth()
     window.addEventListener('resize', updateSignatureWidth)
+    window.addEventListener('load', updateSignatureWidth)
 
     return () => {
       window.removeEventListener('resize', updateSignatureWidth)
+      window.removeEventListener('load', updateSignatureWidth)
     }
   }, [])
 
@@ -26,7 +28,7 @@ const Hero: React.FC = () => {
   })
   return (
     <section
-      className='min-h-screen transition relative'
+      className='min-h-screen transition relative w-full'
       ref={ref}
       id='hero'
     >