feat: add external nav links, new game, better contrast (#63)

### 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/63
Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com>
Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>

src/app/page.tsx

@@ -3,6 +3,8 @@
  * @license Naomi's Public License
  * @author Naomi Carrigan
  */
+import { faUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Image from "next/image";
 import React, { type JSX } from "react";
 import { NavItems } from "../config/NavItems";
@@ -32,31 +34,13 @@ const getLuminance = (hexColor: string): number => {
   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);
+      ? "#00000099"
+      : "#FFFFFF99";
 
   return {
     background: backgroundColor,
@@ -88,15 +72,26 @@ const Home = (): JSX.Element => {
             items-center border-solid border-2 rounded-3xl h-14 p-8 my-4"
             href={item.href}
             key={item.href}
+            rel={item.href.startsWith("http")
+              ? "noreferrer"
+              : ""}
             style={{
               background:  background,
               borderColor: color,
               color:       color,
             }}
+            target={item.href.startsWith("http")
+              ? "_blank"
+              : "_self"}
           >
             {index % 2 === 1
               ? "🩷"
-              : "🩵"} {item.text}
+              : "🩵"} {item.text}{" "}
+            {item.href.startsWith("http")
+              ? <FontAwesomeIcon
+                aria-label="External link"
+                icon={faUpRightFromSquare} />
+              : null}
           </a>
         );
       })}