Improving the fix

src/app/components/AboutMe.tsx

@@ -2,6 +2,7 @@
 
 import age from "@/utils";
 import { motion } from "framer-motion";
+import Link from "next/link";
 
 export const AboutMe = () => (
 	<motion.div
@@ -18,38 +19,31 @@ export const AboutMe = () => (
 			I’m a{" "}
 			<span className="font-semibold text-blue-600 dark:text-blue-400">
 				{age()}-year-old
-			</span>
-			, studying
-			<span className="font-medium text-orange-600 dark:text-orange-400">
-				{" "}
-				Computer Science Operational Engineering
 			</span>{" "}
-			at
+			<span className="font-semibold text-gray-800 dark:text-gray-200">
-			<span className="font-medium text-green-600 dark:text-green-400">
+				developer
-				{" "}
-				Óbuda University
 			</span>{" "}
-			in Hungary. I’m passionate about
+			and{" "}
-			<span className="text-red-600 dark:text-red-400">
+			<span className="font-medium text-cyan-600 dark:text-cyan-400">
-				{" "}
+				tech enthusiast
-				systems engineering
 			</span>
-			, working on my
+			. I enjoy working on my{" "}
-			<span className="italic text-green-700 dark:text-green-500">
+			<span className="italic text-indigo-700 dark:text-indigo-500">
-				{" "}
+				<Link href="homelab">homelab</Link>
-				homelab
+			</span>{" "}
-			</span>
+			and coding in{" "}
-			, and coding in
 			<span className="font-medium text-purple-600 dark:text-purple-400">
-				{" "}
+				<Link href="https://www.typescriptlang.org/" target="_blank">
-				TypeScript
+					TypeScript
+				</Link>
 			</span>{" "}
-			and
+			and{" "}
 			<span className="font-medium text-purple-600 dark:text-purple-400">
-				{" "}
+				<Link href="https://go.dev/" target="_blank">
-				Go
+					Go
+				</Link>
+				.
 			</span>
-			.
 		</p>
 	</motion.div>
 );

src/app/homelab/page.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { ThemeSwitcher } from "@/components/ThemeSwitcher";
+import { motion } from "framer-motion";
+import { Highlight } from "@/components/Highlight";
+import { Fragment } from "react";
+import { specs } from "@/utils";
+
+export default function Homelab() {
+	return (
+		<Fragment>
+			<Highlight containerClassName="min-h-screen flex items-start">
+				<ThemeSwitcher />
+				<motion.div
+					initial={{ opacity: 0, y: 20 }}
+					animate={{ opacity: 1, y: 0 }}
+					transition={{ duration: 0.5 }}
+					className="absolute top-6 left-6"
+				>
+					<a href="/" className="text-[--text-secondary] dark:[--text-primary]">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							className="h-6 w-6"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<title>Arrow</title>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								strokeWidth={2}
+								d="M10 19l-7-7m0 0l7-7m-7 7h18"
+							/>
+						</svg>
+					</a>
+				</motion.div>
+				<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-24 lg:mt-40">
+						<motion.div
+							className="flex flex-col"
+							initial={{ scale: 0.9 }}
+							animate={{ scale: 1 }}
+							transition={{ duration: 0.5 }}
+						>
+							<h1 className="text-[4.5rem] leading-none text-center font-bold dark:text-[--dark-text] text-[--light-text]">
+								My Homelab
+							</h1>
+							<div className="mt-12 grid grid-cols-1 md:grid-cols-2 gap-6 mb-12 mx-4">
+								{specs.map((spec, index) => (
+									<motion.div
+										key={spec.title}
+										initial={{ opacity: 0, y: 20 }}
+										animate={{ opacity: 1, y: 0 }}
+										transition={{ delay: 0.2 + index * 0.1 }}
+										className="bg-white dark:bg-black backdrop-blur-sm rounded-xl p-6 shadow-lg"
+									>
+										<h3 className="text-lg font-medium text-gray-400">
+											{spec.title}
+										</h3>
+										<p className="text-xl mt-2 dark:text-[--dark-text] text-[--light-text]">
+											{spec.value}
+										</p>
+									</motion.div>
+								))}
+							</div>
+						</motion.div>
+					</div>
+				</motion.div>
+			</Highlight>
+		</Fragment>
+	);
+}

src/app/layout.tsx

@@ -14,7 +14,7 @@ const albert_sans = Albert_Sans({
 export const metadata: Metadata = {
 	metadataBase: new URL("https://albert.lol"),
 	title: "albert",
-	description: `${age()}yo student at Óbuda University`,
+	description: `${age()}yo tech enthusiast`,
 	openGraph: {
 		images: "/profile.webp",
 	},

src/app/utils/index.ts

@@ -24,3 +24,14 @@ export const truncate = (str: string, n: number): string => {
 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs));
 }
+
+export const specs = [
+	{ title: "Model", value: "Dell R730" },
+	{ title: "OS", value: "Proxmox" },
+	{ title: "CPU", value: "Intel Xeon E5-2680v4 x2" },
+	{ title: "RAM", value: "128GB" },
+	{ title: "GPU", value: "NVIDIA GTX 1050Ti" },
+	{ title: "Boot", value: "WD Black SN770 1TB x2" },
+	{ title: "Pool", value: "Toshiba Enterprise 6TB x8" },
+	{ title: "Power", value: "750W Platinum x2" },
+];