Minor CSS changes, finished the identity pages for now.

src/info/components/identity-card.js

@@ -0,0 +1,82 @@
+import Link from "next/link";
+import Image from "next/image";
+
+export default function IdentityCard({
+  title,
+  info,
+  url,
+  src,
+  alt,
+  src2,
+  alt2,
+}) {
+  if (src2) {
+    return (
+      <div className="p-2 flow space-y-3">
+        <div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
+          <p className="p-4 text-center text-lg sm:text-2xl text-center text-werefox-grey-dark dark:text-werefox-grey-lighter">
+            <span className="relative inline-block w-8 h-8 align-middle mb-1">
+              <Image src={src} layout="fill" objectFit="contain" alt={alt} />
+            </span>{" "}
+            {title}
+          </p>
+        </div>
+        <div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
+          <p className="p-4 text-center text-md sm:text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
+            {Object.keys(info).map((i) => (
+              <p className="pb-4" key={i}>
+                {info[i]}
+              </p>
+            ))}
+          </p>
+        </div>
+        <div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
+          <a href="https://twitter.com/ribbonfemale" target="_blank">
+            <span className="relative inline-flex align-middle">
+              <Image
+                className="rounded-lg"
+                src={src2}
+                layout="intrinsic"
+                width="2048"
+                height="2048"
+                alt={alt2}
+              />
+            </span>
+          </a>
+        </div>
+      </div>
+    );
+  } else {
+    return (
+      <div className="p-2 flow space-y-3">
+        <div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
+          <p className="p-4 text-center text-lg sm:text-2xl text-center text-werefox-grey-dark dark:text-werefox-grey-lighter">
+            <span className="relative inline-block w-8 h-8 align-middle mb-1">
+              <Image src={src} layout="fill" objectFit="contain" alt={alt} />
+            </span>{" "}
+            {title}
+          </p>
+        </div>
+        <div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
+          <p className="p-4 text-center text-md sm:text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
+            {Object.keys(info).map((i) => (
+              <p className="pb-4" key={i}>
+                {info[i]}
+              </p>
+            ))}
+          </p>
+          <div className="pb-4 text-center text-md sm:text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
+            <Link href={url}>
+              <a
+                target="_blank"
+                className=" transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
+              >
+                Learn More
+              </a>
+            </Link>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src/info/components/love-card.js

@@ -31,7 +31,7 @@ export function renderPossibleURLField(field) {
   }
 }
 
-export default function TestimonialCard({ src, alt, url, fields, bio, user }) {
+export default function LoveCard({ src, alt, url, fields, bio, user }) {
   const finalsrc = Boolean(src) ? src : "/images/logo.png";
   const isMe =
     user == "Shadow8t4"

src/info/components/mutant-standard.js

@@ -5,7 +5,7 @@ export default function MutantStandard() {
   return (
     <WCard>
       <footer className="p-4">
-        <p className="text-center text-xs text-werefox-grey-darker dark:text-werefox-grey-lighter">
+        <p className="text-center text-xs text-werefox-grey-darkest dark:text-werefox-grey-lightest">
           This site uses{" "}
           <Link href="https://mutant.tech">
             <a>Mutant Standard emoji</a>

src/info/components/testimonial-card.js

@@ -3,6 +3,7 @@ import Link from "next/link";
 export default function TestimonialCard({ src, alt, url, innerText, user }) {
   const finalsrc = Boolean(src) ? src : "/images/logo.png";
   const isMe = (user == "Shadow8t4") ? "text-werefox-blue-dark dark:text-werefox-blue": "text-werefox-pink-dark dark:text-werefox-pink"
+  const isMeLink = (user == "Shadow8t4") ? "hover:text-werefox-pink-dark dark:hover:text-werefox-pink": "hover:text-werefox-blue-dark dark:hover:text-werefox-blue"
 
   return (
     <div className="rounded-lg container flex overflow-hidden ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
@@ -24,7 +25,7 @@ export default function TestimonialCard({ src, alt, url, innerText, user }) {
           <br />
           {"- "}
           <Link href={url}>
-            <a target="_blank">{`@${user}`}</a>
+            <a target="_blank" className={`transition ${isMeLink}`}>{`@${user}`}</a>
           </Link>
         </p>
       </div>

src/info/pages/identities/fursona/index.js

@@ -1,12 +1,28 @@
 import BasicPage from "../../../components/basic-page-template";
 import WCard from "../../../components/werefox-card";
+import IDCard from "../../../components/identity-card";
 
-export default function Fursona() {
+export default function Gender() {
   return (
-    <BasicPage
+    <BasicPage page_title="OwO What's this?" card_title="Fursona Details!">
-      page_title="OwO What's This?"
+      <WCard>
-      card_title="Fursona Details!"
+        <IDCard
-    >
+          title="Alexis Werefox"
+          info={{
+            info: `That's me, the witchy foxxo herself! 💙`,
+            more: `Despite making this whole website, I'm honestly not much for talking about myself most of the time, unless I'm feeling particularly good.`,
+            species: `I'm a fox, though! I think originally based on a fennec, but I've kinda moved away from that design nowadays.`,
+            magic: `Also, I'm a witch! I have magic powers, which have honestly been mostly used to indulge in kinks, but uhhhhhh... What were we talking about here again?`,
+            art: `I know! I know! You came here to see some art, yes?! Well, here's a free one for ya!~`,
+            source: `(this was done by the wonderful @ribbonfemale on Twitter!)`
+          }}
+          url=""
+          src="/emoji/pixel_alexis.png"
+          alt="It's me! Alexis Werefox!"
+          src2="/images/alexis_witch.jpg"
+          alt2="Some art of Alexis Werefox in a black corset and miniskirt and pink/black striped leggings and a witch hat, with magic effects surrounding her."
+        />
+      </WCard>
     </BasicPage>
   );
 }

src/info/pages/identities/gender/index.js

@@ -1,12 +1,22 @@
 import BasicPage from "../../../components/basic-page-template";
 import WCard from "../../../components/werefox-card";
+import IDCard from "../../../components/identity-card";
 
 export default function Gender() {
   return (
-    <BasicPage
+    <BasicPage page_title="What's Gender?" card_title="I'm Transgender!">
-      page_title="What's Gender?"
+      <WCard>
-      card_title="I'm Transgender!"
+        <IDCard
-    >
+          title="Trans-femme"
+          info={{
+            info: `This is a bit of a generalized term to mean someone who identifies primarily feminine.`,
+            more: `I do personally identify as a girl, but this is a bit more of a P.C. term to use!`,
+          }}
+          url="https://gender.wikia.org/wiki/Transfeminine"
+          src="/emoji/transgender_flag.svg"
+          alt="The transgender flag"
+        />
+      </WCard>
     </BasicPage>
   );
 }

src/info/pages/identities/neuro/index.js

@@ -1,12 +1,34 @@
 import BasicPage from "../../../components/basic-page-template";
 import WCard from "../../../components/werefox-card";
+import IDCard from "../../../components/identity-card";
 
-export default function Neuro() {
+export default function Gender() {
   return (
     <BasicPage
       page_title="Neurodiversity, Fam"
       card_title="I'm Neurodivergent!"
     >
+      <WCard>
+        <IDCard
+          title="ADHD"
+          info={{
+            info: `This stands for "Attention-Deficit Hyperactivity Disorder".`,
+            neurodivergent: `Addionally, the term "neurodivergent" is a general term meaning someone who lives with a form of mental disorder which may impair or alter the way they act and react to the world around them.`,
+            adhd: `While the term ADHD does address the attention and hyperactive aspects of the disorder, there are actually many other aspects that often go unaddressed. The main ones, however, are:`,
+            symptom1: `- Lack of focus, and conversely, hyperfocus!`,
+            symptom2: `- Impulsiveness`,
+            symptom3: `- Impaired ability to multitask`,
+            symptom4: `- Time management issues`,
+            symptom5: `- Difficulty remembering things (especially details and things we don't find stimulating)`,
+            symptom6: `- Emotional dysregularity (we have trouble regulating our emotions!)`,
+            symptom7: `- Last, but not least, is something called "rejection sensitivity", which can be hard to explain, and isn't technically medically accepted, but is proven to be a common symptom among ADHD folks!`,
+            conclusion: `There's a lot more I wish I could say, but I can genuinely recommend the following link to the YouTube channel "How to ADHD" if you want to learn more, especially if you believe you have this disorder yourself!`,
+          }}
+          url="https://www.youtube.com/channel/UC-nPM1_kSZf91ZGkcgy_95Q"
+          src="/emoji/neurodiversity.svg"
+          alt="The neurodiversity symbol"
+        />
+      </WCard>
     </BasicPage>
   );
 }

src/info/pages/identities/partners/index.js

@@ -5,7 +5,7 @@ import LCard from "../../../components/love-card";
 // Use this to list out partner info on this page. >w>
 
 const PARTNERS = {
-  // heatherhorns: {
+  // username: {
   //   url: "",
   //   avi: "",
   //   fields: {
@@ -16,7 +16,7 @@ const PARTNERS = {
 };
 
 export default function Partners() {
-  if (PARTNERS == null) {
+  if (Object.keys(PARTNERS).length) {
     return (
       <BasicPage page_title="Partners" card_title="Partners!">
         {Object.keys(PARTNERS).map((partner) => (

src/info/pages/identities/pronouns/index.js

@@ -1,5 +1,6 @@
 import BasicPage from "../../../components/basic-page-template";
 import WCard from "../../../components/werefox-card";
+import IDCard from "../../../components/identity-card";
 
 export default function Pronouns() {
   return (
@@ -7,6 +8,19 @@ export default function Pronouns() {
       page_title="What are your pronouns?"
       card_title="Pronouns! Important!"
     >
+      <WCard>
+        <IDCard
+          title="She / Her"
+          info={{
+            info: `When you're referring to me, please use the pronouns "She/Her".`,
+            more: `If you need some examples, for whatever reason, here are some from the site you can visit by clicking on the link below!`,
+            examples: `"Today I met a new friend, and she is really nice. She has a wonderful personality. That smile of hers really makes me happy."`,
+          }}
+          url="https://pronouns.me/she"
+          src="/emoji/speech_bubble_left.svg"
+          alt="A speech bubble emoji"
+        />
+      </WCard>
     </BasicPage>
   );
 }

src/info/pages/identities/sexuality/index.js

@@ -1,5 +1,6 @@
 import BasicPage from "../../../components/basic-page-template";
 import WCard from "../../../components/werefox-card";
+import IDCard from "../../../components/identity-card";
 
 export default function Sexuality() {
   return (
@@ -7,6 +8,38 @@ export default function Sexuality() {
       page_title="What's My Sexuality?"
       card_title="Sexuality Details!"
     >
+      <WCard>
+        <IDCard
+          title="Polyamory"
+          info={{
+            info: `This means that I am okay with having multiple partners!`,
+            more: `There's a lot I can say about Polyamory, but I feel like if you really want to learn more about it, you might be better off following the link below.`,
+          }}
+          url="https://lgbta.wikia.org/wiki/Polyamorous"
+          src="/emoji/polyamory_flag.svg"
+          alt="The polyamory flag"
+        />
+        <IDCard
+          title="Pansexual"
+          info={{
+            info: `This means that I am okay with sexual and romantic partners of any gender identity!`,
+            more: `Of course, being Pansexual does not mean I cannot have preferences or that I want to date *"anyone"*, just that I am open to it.`,
+          }}
+          url="https://lgbta.wikia.org/wiki/Pansexual"
+          src="/emoji/pansexual_flag.svg"
+          alt="The pansexual flag"
+        />
+        <IDCard
+          title="Lesbian"
+          info={{
+            info: `This means that I am okay with sexual and romantic partners that are the same gender identity as me!`,
+            more: `If you have questions about how I coulld be both Panesexual and Lesiban, I'd refer you to my FAQ.`,
+          }}
+          url="https://lgbta.wikia.org/wiki/Lesbian"
+          src="/emoji/lesbian_flag.svg"
+          alt="The lesbian flag"
+        />
+      </WCard>
     </BasicPage>
   );
 }

src/info/pages/index.js

@@ -103,6 +103,26 @@ export default function Home() {
           />
         </div>
       </WCard>
+      <WCard>
+        <p className="p-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
+          Welcome to my little info site!
+        </p>
+        <p className="pl-4 pr-4 pb-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
+          I'd describe myself as somewhere between a hot date and a hot mess.
+          Just a witchy foxxo programmer trying to make it in the world tbh.
+        </p>
+        <p className="pl-4 pr-4 pb-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
+          Feel free to click/tap any of the neat buttons above this to learn
+          more about my different aspects of personality.
+        </p>
+        <p className="pl-4 pr-4 pb-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
+          Down below, I've got some more neat little pages and useful info you
+          can look at.
+        </p>
+        <p className="pl-4 pr-4 pb-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
+          Please do look around and enjoy your stay!~ 💙
+        </p>
+      </WCard>
       <WCard
         isCardButton="true"
         extraClasses=""
@@ -113,13 +133,6 @@ export default function Home() {
         innerText="HRT Tracker!"
         url="/hrt"
       />
-      <WCard>
-        <p className="p-6 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
-          Somewhere between a hot date and a hot mess.
-          <br />
-          Just a witchy foxxo programmer trying to make it in the world tbh.
-        </p>
-      </WCard>
       <WCard
         isCardButton="true"
         extraClasses=""