yet another quality commit

src/app/components/AboutMe.tsx

@@ -3,49 +3,53 @@
 import age from "@/utils";
 import { motion } from "framer-motion";
 
-export const AboutMe = () => {
+export const AboutMe = () => (
-	return (
+	<motion.div
-		<motion.div
+		className="p-4 w-full max-w-[325px] h-[265px] rounded-lg shadow-lg bg-white dark:bg-black flex flex-col justify-center items-start"
-			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 }}
-			initial={{ opacity: 0 }}
+		animate={{ opacity: 1 }}
-			animate={{ opacity: 1 }}
+		whileHover={{ scale: 1.05 }}
-			whileHover={{ scale: 1.05 }}
+		transition={{ duration: 0.5 }}
-			transition={{ duration: 0.5 }}
+	>
-		>
+		<h2 className="text-3xl font-bold dark:text-[--dark-secondary] text-[--light-secondary] mb-4">
-			<h2 className="text-[250%] font-bold dark:text-[--dark-secondary] text-[--light-secondary]">
+			About Me
-				about me
+		</h2>
-			</h2>
+		<p className="text-lg leading-relaxed">
-			<p className="text-[110%]">
+			I’m a{" "}
-				I’m a{" "}
+			<span className="font-semibold text-blue-600 dark:text-blue-400">
-				<span className="font-semibold text-blue-600 dark:text-blue-400">
+				{age()}-year-old
-					{age()}-year-old
+			</span>
-				</span>
+			, studying
-				, studying{" "}
+			<span className="font-medium text-orange-600 dark:text-orange-400">
-				<span className="font-medium text-orange-600 dark:text-orange-400">
+				{" "}
-					Computer Science Operational Engineering
+				Computer Science Operational Engineering
-				</span>{" "}
+			</span>{" "}
-				at{" "}
+			at
-				<span className="font-medium text-green-600 dark:text-green-400">
+			<span className="font-medium text-green-600 dark:text-green-400">
-					Óbuda University
+				{" "}
-				</span>{" "}
+				Óbuda University
-				in Hungary. I’m passionate about{" "}
+			</span>{" "}
-				<span className="text-red-600 dark:text-red-400">
+			in Hungary. I’m passionate about
-					systems engineering
+			<span className="text-red-600 dark:text-red-400">
-				</span>
+				{" "}
-				, working on my{" "}
+				systems engineering
-				<span className="italic text-green-700 dark:text-green-500">
+			</span>
-					homelab
+			, working on my
-				</span>
+			<span className="italic text-green-700 dark:text-green-500">
-				, and coding in{" "}
+				{" "}
-				<span className="font-medium text-purple-600 dark:text-purple-400">
+				homelab
-					TypeScript
+			</span>
-				</span>{" "}
+			, and coding in
-				and{" "}
+			<span className="font-medium text-purple-600 dark:text-purple-400">
-				<span className="font-medium text-purple-600 dark:text-purple-400">
+				{" "}
-					Go
+				TypeScript
-				</span>
+			</span>{" "}
-				.
+			and
-			</p>
+			<span className="font-medium text-purple-600 dark:text-purple-400">
-		</motion.div>
+				{" "}
-	);
+				Go
-};
+			</span>
+			.
+		</p>
+	</motion.div>
+);

src/app/components/Highlight.tsx

@@ -3,7 +3,7 @@
 import { cn } from "@/utils";
 import { useMotionValue, motion, useMotionTemplate } from "framer-motion";
 
-export const HeroHighlight = ({
+export const Highlight = ({
 	children,
 	className,
 	containerClassName,

src/app/globals.css

@@ -18,11 +18,11 @@
 	html {
 		scrollbar-width: thin;
 		scrollbar-color: #8040ee transparent;
-		background-color: var(--light-background);
+		background-color: transparent;
 	}
 
 	.dark {
-		background-color: var(--dark-background);
+		background-color: transparent;
 	}
 }
 

src/app/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import Script from "next/script";
 import type { ReactNode } from "react";
 import { Albert_Sans } from "next/font/google";
@@ -20,6 +20,12 @@ export const metadata: Metadata = {
 	},
 };
 
+export const viewport: Viewport = {
+	width: "device-width",
+	initialScale: 1,
+	maximumScale: 1,
+};
+
 export default function RootLayout({
 	children,
 }: Readonly<{

src/app/page.tsx

@@ -6,13 +6,13 @@ import { SocialLayout } from "@/components/SocialLayout";
 import { AboutMe } from "@/components/AboutMe";
 import { Toaster } from "react-hot-toast";
 import { motion } from "framer-motion";
-import { HeroHighlight } from "@/components/Highlight";
+import { Highlight } from "@/components/Highlight";
 import { Fragment } from "react";
 
 export default function Home() {
 	return (
 		<Fragment>
-			<HeroHighlight containerClassName="min-h-screen flex items-start">
+			<Highlight containerClassName="min-h-screen flex items-start">
 				<ThemeSwitcher />
 				<Toaster position="top-left" />
 				<motion.div
@@ -20,7 +20,7 @@ export default function Home() {
 					animate={{ opacity: 1, y: 0 }}
 					transition={{ duration: 0.5 }}
 				>
-					<div className="flex max-w-3xl flex-col z-10 relative mt-52">
+					<div className="flex max-w-3xl flex-col z-10 relative mt-24 lg:mt-56">
 						<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 }}
@@ -43,7 +43,7 @@ export default function Home() {
 						</motion.div>
 					</div>
 				</motion.div>
-			</HeroHighlight>
+			</Highlight>
 		</Fragment>
 	);
 }