From ca5b54f7f70654a60e3db5d136203a86ff6dcc42 Mon Sep 17 00:00:00 2001
From: Ammar Ahmed <ammar.ahmed1@uwaterloo.ca>
Date: Thu, 9 May 2024 17:45:44 -0400
Subject: [PATCH 1/2] feat: tailwind setup

---
 package.json       |  3 +++
 src/utils/cn.ts    |  6 ++++++
 tailwind.config.js | 30 ++++++++++++++++++++++++++++++
 yarn.lock          | 16 ++++++++++++++--
 4 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 src/utils/cn.ts

diff --git a/package.json b/package.json
index d6c6d24..12bfeb6 100644
--- a/package.json
+++ b/package.json
@@ -16,10 +16,12 @@
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
     "framer-motion": "^11.1.7",
     "graphql": "^16.8.1",
     "katex": "^0.16.10",
+    "mini-svg-data-uri": "^1.4.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-ga4": "^2.1.0",
@@ -29,6 +31,7 @@
     "react-scripts": "5.0.1",
     "react-syntax-highlighter": "^15.5.0",
     "recharts": "^2.12.6",
+    "tailwind-merge": "^2.3.0",
     "typescript": "^4.4.2",
     "web-vitals": "^2.1.0"
   },
diff --git a/src/utils/cn.ts b/src/utils/cn.ts
new file mode 100644
index 0000000..5589c55
--- /dev/null
+++ b/src/utils/cn.ts
@@ -0,0 +1,6 @@
+import { ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 4baf806..cb96ba2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,18 @@
 const { nextui } = require('@nextui-org/react')
+const svgToDataUri = require('mini-svg-data-uri')
+const {
+  default: flattenColorPalette,
+} = require('tailwindcss/lib/util/flattenColorPalette')
+function addVariablesForColors({ addBase, theme }) {
+  let allColors = flattenColorPalette(theme('colors'))
+  let newVars = Object.fromEntries(
+    Object.entries(allColors).map(([key, val]) => [`--${key}`, val]),
+  )
+
+  addBase({
+    ':root': newVars,
+  })
+}
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -87,5 +101,21 @@ module.exports = {
         },
       },
     }),
+    addVariablesForColors,
+    function ({ matchUtilities, theme }) {
+      matchUtilities(
+        {
+          'bg-dot-thick': (value) => ({
+            backgroundImage: `url("${svgToDataUri(
+              `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="none"><circle fill="${value}" id="pattern-circle" cx="10" cy="10" r="2.5"></circle></svg>`,
+            )}")`,
+          }),
+        },
+        {
+          values: flattenColorPalette(theme('backgroundColor')),
+          type: 'color',
+        },
+      )
+    },
   ],
 }
diff --git a/yarn.lock b/yarn.lock
index 0f19f70..e294226 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1153,7 +1153,7 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.13", "@babel/runtime@^7.23.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.13", "@babel/runtime@^7.23.2", "@babel/runtime@^7.24.1", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.24.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.5.tgz#230946857c053a36ccc66e1dd03b17dd0c4ed02c"
   integrity sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==
@@ -5346,7 +5346,7 @@ clsx@^1.2.1:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
 
-clsx@^2.0.0:
+clsx@^2.0.0, clsx@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
   integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
@@ -9054,6 +9054,11 @@ mini-css-extract-plugin@^2.4.5:
     schema-utils "^4.0.0"
     tapable "^2.2.1"
 
+mini-svg-data-uri@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939"
+  integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==
+
 minimalistic-assert@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
@@ -11533,6 +11538,13 @@ tailwind-merge@^1.14.0:
   resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-1.14.0.tgz#e677f55d864edc6794562c63f5001f45093cdb8b"
   integrity sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==
 
+tailwind-merge@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.3.0.tgz#27d2134fd00a1f77eca22bcaafdd67055917d286"
+  integrity sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA==
+  dependencies:
+    "@babel/runtime" "^7.24.1"
+
 tailwind-variants@^0.1.20:
   version "0.1.20"
   resolved "https://registry.yarnpkg.com/tailwind-variants/-/tailwind-variants-0.1.20.tgz#8aaed9094be0379a438641a42d588943e44c5fcd"

From 9445f9f6544b5f38a77c638281105cc7fa86bd3c Mon Sep 17 00:00:00 2001
From: Ammar Ahmed <ammar.ahmed1@uwaterloo.ca>
Date: Thu, 9 May 2024 18:15:44 -0400
Subject: [PATCH 2/2] feat: add background dots

---
 src/components/BackgroundDots.tsx   | 70 +++++++++++++++++++++++++++++
 src/components/Page.tsx             |  9 ++--
 src/pages/Landing/sections/Hero.tsx |  4 +-
 3 files changed, 79 insertions(+), 4 deletions(-)
 create mode 100644 src/components/BackgroundDots.tsx

diff --git a/src/components/BackgroundDots.tsx b/src/components/BackgroundDots.tsx
new file mode 100644
index 0000000..c2af13c
--- /dev/null
+++ b/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
diff --git a/src/components/Page.tsx b/src/components/Page.tsx
index ba8bfc4..6b569e4 100644
--- a/src/components/Page.tsx
+++ b/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 />
     </>
   )
diff --git a/src/pages/Landing/sections/Hero.tsx b/src/pages/Landing/sections/Hero.tsx
index 3c3c7c6..a3209d2 100644
--- a/src/pages/Landing/sections/Hero.tsx
+++ b/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'
     >