feat: update portraits, display full group image and individual images

src/app/legacy/page.tsx

@@ -5,6 +5,7 @@
  */
 /* eslint-disable react/no-multi-comp */
 "use client";
+import Image from "next/image";
 import { useState, type JSX } from "react";
 import { CharacterComponent } from "../../components/character";
 import { Characters } from "../../config/Legacy";
@@ -123,6 +124,7 @@ const Legacy = (): JSX.Element => {
     <main className="w-4/5 text-center max-w-4xl m-auto mt-16 mb-16 rounded-lg">
       <h1 className="text-5xl">{`The Carrigan Legacy`}</h1>
       <section>
+        <Image alt="Nine anime-style female characters with diverse colorful outfits including dresses, crop tops, skirts, and pants, posing together against a light background, some making peace signs or pointing at the viewer" height="1080" src={`https://cdn.nhcarrigan.com/characters/landscape/legacy.png`} width="1920"></Image>
         <p className="mt-2">
           {`This page serves to show off all of our characters, who are all part of the same family (and thus, the same legacy).`}
         </p>
@@ -182,8 +184,9 @@ const Legacy = (): JSX.Element => {
       </section>
       <section>
         <h2 className="text-2xl">{Characters[focused]?.name}</h2>
-        <p>{Characters[focused]?.class}</p>
-        <p className="italic">{`${Characters[focused]?.age.toString() ?? "unknown"} years old`}</p>
+        <Image alt={Characters[focused]?.alt ?? "Image"} height="1080" src={`https://cdn.nhcarrigan.com/characters/landscape/${focused}.png`} width="1920"></Image>
+        <p><strong>{Characters[focused]?.class}</strong>{" - "}<span className="italic">{`${Characters[focused]?.age.toString() ?? "unknown"} years old`}</span> </p>
+
         {Characters[focused]?.bio.map((paragraph) => {
           return <p key={paragraph}>{paragraph}</p>;
         })}

src/components/character.tsx

@@ -22,17 +22,27 @@ export const CharacterComponent = (
 ): JSX.Element => {
   const { id, onClick, focused } = properties;
 
-  return (
+  return focused
+    ? <div style={{ position: "relative" }}>
       <Image
         alt={id}
         className="m-h-[525px] m-w-[400px] object-contain"
         height={525}
         onClick={onClick}
         src={`https://cdn.nhcarrigan.com/characters/${id}.png`}
-      style={focused
-        ? { border: "4px solid yellow" }
-        : {}}
         width={400}
       />
-  );
+      <div
+        className="absolute h-full w-full m-h-[525px] m-w-[400px]"
+        style={{ border: "5px solid yellow", left: 0, top: 0, zIndex: 1 }}
+      ></div>
+    </div>
+    : <Image
+      alt={id}
+      className="m-h-[525px] m-w-[400px] object-contain"
+      height={525}
+      onClick={onClick}
+      src={`https://cdn.nhcarrigan.com/characters/${id}.png`}
+      width={400}
+    />;
 };

src/config/Legacy.ts

@@ -4,9 +4,10 @@
  * @author Naomi Carrigan
  */
 
-const Characters: Record<string, { age: number; class: string; name: string; bio: Array<string> }> = {
+const Characters: Record<string, { age: number; alt: string; class: string; name: string; bio: Array<string> }> = {
   "aria-iuvo": {
     age: 103,
+    alt: "A digital art illustration depicts a young anime-style girl with long dark red hair, pale skin, and a blank white mask-like face standing against a dark night sky, holding a glowing knife and gazing pensively at a full moon.",
     bio: [
       "Aria Iuvo is far more chaotic and mischievous than her sister Melody.",
       "As an elf, Aria Iuvo is actually quite older than her sister, but she is far more spry and youthful in appearance.",
@@ -16,6 +17,7 @@ const Characters: Record<string, { age: number; class: string; name: string; bio
   },
   "becca-lyria": {
     age: 21,
+    alt: "Anime girl with white hair in pigtails and glasses, wearing a purple outfit, sitting on a white bed with a glowing purple magic circle design on the floor in front of her",
     bio: [
       "Becca Lyria commands a complete mastery over death, able to raise the dead and control them as she sees fit.",
       "She was orphaned at a young age, with little memory of her parents. Naomi had found her quite a few years later and took her in as her own child.",
@@ -25,6 +27,7 @@ const Characters: Record<string, { age: number; class: string; name: string; bio
   },
   "cordelia-taryne": {
     age: 85,
+    alt: "Anime girl with blonde hair in two buns wearing a yellow and gold dress sits amidst a white magic circle and red roses against a dark red background",
     bio: [
       "Cordelia Taryne was Aria's child, and in her early life appeared to be human.",
       "However, in her young adult life, she had fallen sway to a nefarious cult. As part of her initiation, she was bitten by a vampire and turned into a thrall.",
@@ -35,6 +38,7 @@ const Characters: Record<string, { age: number; class: string; name: string; bio
   },
   "gwen-carrigan": {
     age: 28,
+    alt: "Anime-style female character with purple hair in a side ponytail swinging her sword, wearing black armour, standing in a grassy field with cherry blossom petals floating in the air and a waterfall in the background.",
     bio: [
       "Gwen is Naomi's other adopted child. She was actually adopted first, and when Becca was taken in she took off in a huff.",
       "She had spent a few years honing her skills with the blade, getting into fights (and even losing some, one of which took her eye).",
@@ -45,6 +49,7 @@ const Characters: Record<string, { age: number; class: string; name: string; bio
   },
   "maylin-taryne": {
     age: 32,
+    alt: "A blonde female anime character with short hair aims a bow and arrow while jumping through the air, trees and a fence visible in the background under a bright blue sky with wispy clouds.",
     bio: [
       "Maylin was a thrall to the same master as Cordelia, but when Cordelia took his place Maylin's vampiric powers faded.",
       "Out of a sense of guilt, Cordelia took her in as the only human she's ever been close to.",
@@ -55,6 +60,7 @@ const Characters: Record<string, { age: number; class: string; name: string; bio
   },
   "melody-iuvo": {
     age: 26,
+    alt: "3D anime-style girl with green hair in a ponytaiol aims a sniper rifle while kneeling in a grassy field with pine trees under a blue sky",
     bio: [
       "Melody Iuvo is a master of stealth and deception.",
       "She had actually started as Naomi's assistant, but the two quickly began to develop feelings for each other and later became married.",
@@ -65,6 +71,7 @@ const Characters: Record<string, { age: number; class: string; name: string; bio
   },
   "naomi-carrigan": {
     age: 30,
+    alt: "Illustration of an anime girl with glasses and short brown hair floating in a surreal space environment, surrounded by glowing teal snowflakes, silver sparkles, and layered geometric designs resembling railroad tracks or wheels against a dark starry sky background.",
     bio: [
       "Naomi Carrigan is a technomancer - she uses magic to manipulate the technology around her.",
       "She is the matriarch of the family. Despite being younger than some of the other members, her power and her leadership capabilities have earned her the spot at the head of the family.",
@@ -74,6 +81,7 @@ const Characters: Record<string, { age: number; class: string; name: string; bio
   },
   "rosalia-nightsong": {
     age: 18,
+    alt: "Anime-style girl with long dark hair and green eyes wearing a white dress, standing in a palace throne room with pink tile floors and ornate stained glass windows behind the throne",
     bio: [
       "Born to noble parents, Rosalia wanted for little in life. She spent her time devoted to her Goddess.",
       "The day came when she was called to take up the sword and right the wrongs in the world, and she has been on that path ever since.",