feat: redesign landing to match site styling (#55)

### Explanation

_No response_

### Issue

_No response_

### Attestations

- [ ] I have read and agree to the [Code of Conduct](https://docs.nhcarrigan.com/community/coc/)
- [ ] I have read and agree to the [Community Guidelines](https://docs.nhcarrigan.com/community/guide/).
- [ ] My contribution complies with the [Contributor Covenant](https://docs.nhcarrigan.com/dev/covenant/).

### Dependencies

- [ ] I have pinned the dependencies to a specific patch version.

### Style

- [ ] I have run the linter and resolved any errors.
- [ ] My pull request uses an appropriate title, matching the conventional commit standards.
- [ ] My scope of feat/fix/chore/etc. correctly matches the nature of changes in my pull request.

### Tests

- [ ] My contribution adds new code, and I have added tests to cover it.
- [ ] My contribution modifies existing code, and I have updated the tests to reflect these changes.
- [ ] All new and existing tests pass locally with my changes.
- [ ] Code coverage remains at or above the configured threshold.

### Documentation

_No response_

### Versioning

_No response_

Reviewed-on: https://codeberg.org/nhcarrigan/portfolio/pulls/55
Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com>
Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>

src/app/page.tsx

@@ -7,51 +7,91 @@ import Image from "next/image";
 import React, { type JSX } from "react";
 import { NavItems } from "../config/NavItems";
 
+const generateRandomColor = (): string => {
+  return `#${Math.floor(Math.random() * 16_777_215).toString(16).
+    padStart(6, "0")}`;
+};
+
+const getLuminance = (hexColor: string): number => {
+  const r = Number.parseInt(hexColor.slice(1, 3), 16);
+  const g = Number.parseInt(hexColor.slice(3, 5), 16);
+  const b = Number.parseInt(hexColor.slice(5, 7), 16);
+
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  const a: [number, number, number] = [ r, g, b ].map((v) => {
+    const w = v / 255;
+    return w <= 0.039_28
+      ? w / 12.92
+      : Math.pow((w + 0.055) / 1.055, 2.4);
+  }) as [number, number, number];
+
+  const rl = a[0] * 0.2126;
+  const gl = a[1] * 0.7152;
+  const bl = a[2] * 0.0722;
+  return rl + gl + bl;
+};
+
+const adjustColorLuminosity
+  = (hexColor: string, luminosityChange: number): string => {
+    let r = Number.parseInt(hexColor.slice(1, 3), 16);
+    let g = Number.parseInt(hexColor.slice(3, 5), 16);
+    let b = Number.parseInt(hexColor.slice(5, 7), 16);
+    r = Math.round(r * luminosityChange);
+    g = Math.round(g * luminosityChange);
+    b = Math.round(b * luminosityChange);
+    r = Math.min(255, Math.max(0, r));
+    g = Math.min(255, Math.max(0, g));
+    b = Math.min(255, Math.max(0, b));
+    return `#${
+      r.toString(16).padStart(2, "0")
+    }${g.toString(16).padStart(2, "0")
+    }${b.toString(16).padStart(2, "0")}`;
+  };
+
+const generateColorPair = (): { background: string; color: string } => {
+  const backgroundColor = generateRandomColor();
+  const backgroundLuminance = getLuminance(backgroundColor);
+  const textColor = backgroundLuminance > 0.5 ?
+    adjustColorLuminosity(backgroundColor, 0) :
+    adjustColorLuminosity(backgroundColor, 5);
+
+  return {
+    background: backgroundColor,
+    color:      textColor,
+  };
+};
+
 /**
  * Renders the main React component.
  * @returns A JSX element.
  */
 const Home = (): JSX.Element => {
   return (
-    <div>
-      <div
-        className="absolute top-0 right-[33vw] z-100
-        w-[100vh] h-[100vh] rotate-90 hidden lg:block"
-      >
-        <svg className="absolute" viewBox="0 0 500 500">
-          <path
-            d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z"
-            style={{ fill: "var(--foreground)", stroke: "none" }}
-          ></path>
-        </svg>
-      </div>
-      <main className="grid grid-cols-[2fr,1fr] min-h-screen">
-        <section
-          className="bg-[--background] text-[--foreground]
-          flex flex-col items-left justify-center text-left pl-5"
-        >
+    <main className="w-4/5 text-center max-w-4xl m-auto mt-16 mb-16 rounded-lg">
       <h1 className="text-4xl mb-2">{`Naomi Carrigan`}</h1>
       <Image
         alt="Naomi Carrigan"
-            className="rounded-full"
+        className="rounded-full m-auto"
         height={200}
         src="https://cdn.nhcarrigan.com/profile.png"
         width={200}
       />
-          <p className="text-3xl">{`Software Engineer`}</p>
-          <p className="text-3xl">{`Community Manager`}</p>
-        </section>
-        <section
-          className="bg-[--foreground] text-[--background]
-          flex flex-col items-center justify-center"
-        >
+      <p className="text-2xl">{`Software Engineer | Community Manager | VTuber`}</p>
       {NavItems.map((item, index) => {
+        const { background, color } = generateColorPair();
         return (
           <a
-                className="block py-2 px-4 text-2xl
-              hover:bg-[--background] hover:text-[--foreground]"
+            className="flex max-w-[300px] w-[95%] m-auto justify-between
+            items-center border-solid border-2 rounded-3xl h-14 p-8 my-4"
             href={item.href}
             key={item.href}
+            rel="noreferrer"
+            style={{
+              background:  background,
+              borderColor: color,
+              color:       color,
+            }}
+            target="_blank"
           >
             {index % 2 === 1
               ? "🩷"
@@ -59,9 +99,7 @@ const Home = (): JSX.Element => {
           </a>
         );
       })}
-        </section>
     </main>
-    </div>
   );
 };
 

src/components/footer.tsx

@@ -7,7 +7,6 @@
 import { faComments } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Crisp } from "crisp-sdk-web";
-import { usePathname } from "next/navigation";
 import Script from "next/script";
 import React, { type JSX } from "react";
 
@@ -20,12 +19,6 @@ export const Footer = (): JSX.Element | null => {
   if (typeof window !== "undefined") {
     Crisp.configure("5398ce41-4ceb-4e31-9049-4c784a70179a");
   }
-  const pathname = usePathname();
-  const isRootPath = pathname === "/";
-
-  if (isRootPath) {
-    return null;
-  }
   return (
     <div
       className="fixed w-full bottom-0 z-50 flex

src/components/navigation.tsx

@@ -12,7 +12,6 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Image from "next/image";
-import { usePathname } from "next/navigation";
 import React, { type JSX, useState, useEffect, useCallback } from "react";
 import { NavItems } from "../config/NavItems";
 import { Rule } from "./rule";
@@ -49,13 +48,6 @@ export const Navigation = (): JSX.Element | null => {
     setIsDarkMode(!isDarkMode);
   }, [ isDarkMode ]);
 
-  const pathname = usePathname();
-  const isRootPath = pathname === "/";
-
-  if (isRootPath) {
-    return null;
-  }
-
   return (
     <div className="fixed w-full top-0 z-50">
       <nav