No changes after this point.

src/app/components/AboutMe.tsx

@@ -6,7 +6,7 @@ import { motion } from "framer-motion";
 export const AboutMe = () => {
 	return (
 		<motion.div
-			className="p-3 max-w-[325px] lg:max-w-lg md:max-w-md max-h-[300px] h-[265px] rounded-lg shadow-lg backdrop-blur-sm bg-white/20 dark:bg-black/20 object-fit"
+			className="p-3 max-w-xs lg:max-w-sm md:max-w-md max-h-[300px] h-[265px] rounded-lg shadow-lg bg-white dark:bg-black"
 			initial={{ opacity: 0 }}
 			animate={{ opacity: 1 }}
 			whileHover={{ scale: 1.05 }}

src/app/components/Background.tsx

@@ -1,42 +0,0 @@
-"use client";
-
-import React from "react";
-import { motion } from "framer-motion";
-
-export const Background = () => {
-	return (
-		<div className="fixed inset-0 w-screen h-screen overflow-hidden z-[-1] flex justify-center items-center">
-			<motion.div
-				className="absolute w-[800px] h-[800px] bg-gradient-to-r from-pink-500 to-purple-500 rounded-full blur-3xl"
-				style={{ willChange: "transform, opacity" }}
-				animate={{
-					scale: [1.5, 1.2, 1, 1.2, 1.5],
-					x: [0, 200, 0, -200, 0],
-					y: [0, -80, 150, -150, 0],
-					opacity: [0.6, 1, 0.6],
-				}}
-				transition={{
-					duration: 18,
-					repeat: Number.POSITIVE_INFINITY,
-					ease: "easeInOut",
-				}}
-			/>
-
-			<motion.div
-				className="absolute w-[800px] h-[800px] bg-gradient-to-r from-blue-400 to-red-500 rounded-full blur-3xl"
-				style={{ willChange: "transform, opacity" }}
-				animate={{
-					scale: [1, 1.3, 1.5, 1.3, 1],
-					x: [-150, 150, -150, 150, -150],
-					y: [180, -180, 180, -180, 180],
-					opacity: [0.6, 1, 0.6],
-				}}
-				transition={{
-					duration: 22,
-					repeat: Number.POSITIVE_INFINITY,
-					ease: "easeInOut",
-				}}
-			/>
-		</div>
-	);
-};

src/app/components/Highlight.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { cn } from "@/utils";
+import { useMotionValue, motion, useMotionTemplate } from "framer-motion";
+
+export const HeroHighlight = ({
+	children,
+	className,
+	containerClassName,
+}: {
+	children: React.ReactNode;
+	className?: string;
+	containerClassName?: string;
+}) => {
+	const mouseX = useMotionValue(0);
+	const mouseY = useMotionValue(0);
+
+	function handleMouseMove({
+		currentTarget,
+		clientX,
+		clientY,
+	}: React.MouseEvent<HTMLDivElement>) {
+		if (!currentTarget) return;
+		const { left, top } = currentTarget.getBoundingClientRect();
+
+		mouseX.set(clientX - left);
+		mouseY.set(clientY - top);
+	}
+
+	return (
+		<div
+			className={cn(
+				"relative h-screen 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", className)}>{children}</div>
+		</div>
+	);
+};

src/app/components/SpotifyCard.tsx

@@ -111,7 +111,7 @@ export const NowPlayingCard = () => {
 
 	return (
 		<motion.div
-			className="mt-5 w-[325px] rounded-md shadow-lg p-3 dark:bg-black/20 bg-white/20 backfrop-blur-sm"
+			className="mt-5 w-[325px] rounded-md shadow-lg p-3 dark:bg-black bg-white"
 			initial={{ opacity: 0, y: 20 }}
 			animate={{ opacity: 1, y: 0 }}
 			transition={{ duration: 0.5, ease: "easeInOut" }}

src/app/components/ThemeSwitcher.tsx

@@ -30,7 +30,7 @@ export const ThemeSwitcher = () => {
 		<motion.button
 			aria-label="Switch Theme"
 			type="button"
-			className="fixed top-5 right-5 p-3 rounded-full"
+			className="fixed top-5 right-5 p-3 rounded-full z-50"
 			onClick={toggleTheme}
 			initial={{ opacity: 0, scale: 0.8 }}
 			animate={{ opacity: 1, scale: 1 }}

src/app/globals.css

@@ -3,8 +3,8 @@
 @tailwind utilities;
 
 :root {
-	--dark-background: #000000;
-	--dark-primary: #121212;
+	--dark-background: #282828;
+	--dark-primary: #323232;
 	--dark-secondary: #cecece;
 	--dark-text: #eeeeee;
 

src/app/page.tsx

@@ -6,43 +6,44 @@ import { SocialLayout } from "@/components/SocialLayout";
 import { AboutMe } from "@/components/AboutMe";
 import { Toaster } from "react-hot-toast";
 import { motion } from "framer-motion";
-import { Background } from "@/components/Background";
+import { HeroHighlight } from "@/components/Highlight";
 import { Fragment } from "react";
 
 export default function Home() {
 	return (
 		<Fragment>
-			<Background />
-			<ThemeSwitcher />
-			<Toaster position="top-left" />
-			<motion.div
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-				transition={{ duration: 0.5 }}
-			>
-				<div className="mx-auto mt-44 flex max-w-3xl flex-col mb-12 z-10 relative">
-					<motion.div
-						className="flex flex-col lg:flex-row items-center justify-center lg:justify-between space-y-10 lg:space-y-5 lg:space-x-10"
-						initial={{ opacity: 0 }}
-						animate={{ opacity: 1 }}
-						transition={{ duration: 0.5 }}
-					>
+			<HeroHighlight containerClassName="min-h-screen flex items-start">
+				<ThemeSwitcher />
+				<Toaster position="top-left" />
+				<motion.div
+					initial={{ opacity: 0, y: 20 }}
+					animate={{ opacity: 1, y: 0 }}
+					transition={{ duration: 0.5 }}
+				>
+					<div className="flex max-w-3xl flex-col z-10 relative mt-52">
 						<motion.div
-							className="flex flex-col items-center text-center"
-							initial={{ scale: 0.9 }}
-							animate={{ scale: 1 }}
+							className="flex flex-col lg:flex-row items-center justify-center lg:justify-between space-y-10 lg:space-y-5 lg:space-x-10"
+							initial={{ opacity: 0 }}
+							animate={{ opacity: 1 }}
 							transition={{ duration: 0.5 }}
 						>
-							<h1 className="text-[7.5rem] leading-none font-bold dark:text-[--dark-text] text-[--light-text]">
-								albert
-							</h1>
-							<SocialLayout />
-							<NowPlayingCard />
+							<motion.div
+								className="flex flex-col items-center text-center"
+								initial={{ scale: 0.9 }}
+								animate={{ scale: 1 }}
+								transition={{ duration: 0.5 }}
+							>
+								<h1 className="text-[7.5rem] leading-none font-bold dark:text-[--dark-text] text-[--light-text]">
+									albert
+								</h1>
+								<SocialLayout />
+								<NowPlayingCard />
+							</motion.div>
+							<AboutMe />
 						</motion.div>
-						<AboutMe />
-					</motion.div>
-				</div>
-			</motion.div>
+					</div>
+				</motion.div>
+			</HeroHighlight>
 		</Fragment>
 	);
 }

src/app/utils/index.ts

@@ -1,3 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
 export default function age() {
 	const BIRTHDATE = process.env.NEXT_PUBLIC_BIRTHDATE;
 	if (!BIRTHDATE) {
@@ -17,3 +20,7 @@ export const truncate = (str: string, n: number): string => {
 	}
 	return str.trim();
 };
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}