portfolio/src/app/page.tsx

/**
 * @copyright nhcarrigan
 * @license Naomi's Public License
 * @author Naomi Carrigan
 */
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 (
    <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 m-auto"
        height={200}
        src="https://cdn.nhcarrigan.com/profile.png"
        width={200}
      />
      <p className="text-2xl">{`Software Engineer | Community Manager | VTuber`}</p>
      {NavItems.map((item, index) => {
        const { background, color } = generateColorPair();
        return (
          <a
            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
              ? "🩷"
              : "🩵"} {item.text}
          </a>
        );
      })}
    </main>
  );
};

export default Home;