Minor additions to allow for better navigation, especially for screen readers.

src/info/components/basic-page.js

@@ -4,7 +4,12 @@ import WCard from "../components/werefox-card";
 import FCard from "./footer-card";
 import PButton from "../components/page-button";
 
-export default function BasicPage({ is_home, page_title, card_title, children }) {
+export default function BasicPage({
+  is_home,
+  page_title,
+  card_title,
+  children,
+}) {
   if (is_home) {
     return (
       <div className="min-h-screen bg-werefox-grey-lighter dark:bg-werefox-grey-dark font-nerd">
@@ -56,23 +61,27 @@ export default function BasicPage({ is_home, page_title, card_title, children })
               {card_title}
             </h1>
           </WCard>
-          <PButton
-            title="Take me back home!"
-            images={[
-              { src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" },
-              { src: "/emoji/blue_heart.svg", alt: "Blue heart" },
-            ]}
-            url="/"
-          />
+          <nav>
+            <PButton
+              title="Take me back home!"
+              images={[
+                { src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" },
+                { src: "/emoji/blue_heart.svg", alt: "Blue heart" },
+              ]}
+              url="/"
+            />
+          </nav>
           {children}
-          <PButton
-            title="Take me back home!"
-            images={[
-              { src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" },
-              { src: "/emoji/blue_heart.svg", alt: "Blue heart" },
-            ]}
-            url="/"
-          />
+          <nav>
+            <PButton
+              title="Take me back home!"
+              images={[
+                { src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" },
+                { src: "/emoji/blue_heart.svg", alt: "Blue heart" },
+              ]}
+              url="/"
+            />
+          </nav>
           <FCard />
         </div>
       </div>

src/info/components/identity-block.js

@@ -3,16 +3,19 @@ import { IDENTITIES } from "../js/variables";
 
 export default function IdentityBlock() {
   return (
-    <div className="grid xl:grid-rows-2 xl:grid-cols-5 sm:grid-rows-3 sm:grid-cols-3 grid-rows-9 grid-cols-1 sm:gap-2 gap-0">
-      {Object.keys(IDENTITIES).map((ids) => (
-        <IDButton
-          key={ids}
-          innerText={ids}
-          url={IDENTITIES[ids].url}
-          imageObj={IDENTITIES[ids].images}
-          extraClasses={IDENTITIES[ids].extra_classes}
-        />
-      ))}
-    </div>
+    <nav>
+      <div className="grid xl:grid-rows-2 xl:grid-cols-5 sm:grid-rows-3 sm:grid-cols-3 grid-rows-9 grid-cols-1 sm:gap-2 gap-0">
+        {Object.keys(IDENTITIES).map((ids) => (
+          <IDButton
+            key={ids}
+            innerText={ids}
+            url={IDENTITIES[ids].url}
+            locator={IDENTITIES[ids].locator}
+            imageObj={IDENTITIES[ids].images}
+            extraClasses={IDENTITIES[ids].extra_classes}
+          />
+        ))}
+      </div>
+    </nav>
   );
 }

src/info/components/identity-button.js

@@ -6,14 +6,15 @@ export default function IdentityButton({
   imageObj,
   innerText,
   url,
+  locator,
 }) {
   const images = Array(imageObj).flat();
+  const maybeLocator = locator ? `#${locator}` : "";
 
   return (
     <div className="animate-wiggle container max-w-sm mx-auto md:px-2 p-2">
-      <Link href={url}>
+      <Link href={`${url}${maybeLocator}`}>
         <a
-          target=""
           className={`${extraClasses} block ring-2 ring-werefox-grey-darker dark:ring-werefox-grey-darker rounded-lg text-lg text-center text-werefox-grey-lighter dark:text-werefox-grey-dark bg-werefox-grey dark:bg-werefox-grey-lightest transition hover:bg-werefox-grey-dark dark:hover:bg-werefox-grey-light`}
         >
           {images.map((source) => (

src/info/components/identity-card.js

@@ -66,7 +66,7 @@ export default function IdentityCard({
   } else if (url) {
     return (
       <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
-        <div className="p-2 flow space-y-3">
+        <div className="p-2 flow space-y-3" id={title}>
           <div className="rounded-lg ring-2 ring-werefox-grey 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-werefox-grey-dark dark:text-werefox-grey-lighter">
               <span className="relative inline-block w-8 h-8 align-middle mb-1">

src/info/components/page-block.js

@@ -3,15 +3,17 @@ import { PAGES } from "../js/variables";
 
 export default function ProjectBlock() {
   return (
-    <>
-      {Object.keys(PAGES).map((page) => (
-        <PButton
-          key={page}
-          title={page}
-          images={PAGES[page].images}
-          url={PAGES[page].url}
-        />
-      ))}
-    </>
+    <nav>
+      <div className="flow space-y-2">
+        {Object.keys(PAGES).map((page) => (
+          <PButton
+            key={page}
+            title={page}
+            images={PAGES[page].images}
+            url={PAGES[page].url}
+          />
+        ))}
+      </div>
+    </nav>
   );
 }

src/info/js/variables.js

@@ -25,7 +25,7 @@ export const IDENTITIES = {
     ],
     extra_classes: "xl:pt-1 xl:align-text-bottom xl:text-sm xl:min-h-full",
   },
-  "She/her": {
+  "She/Her": {
     url: "/identities/pronouns",
     images: [
       {
@@ -37,6 +37,7 @@ export const IDENTITIES = {
   },
   Polyam: {
     url: "/identities/sexuality",
+    locator: "Polyam",
     images: [
       {
         src: "/emoji/polyamory_flag.svg",
@@ -47,6 +48,7 @@ export const IDENTITIES = {
   },
   Pansexual: {
     url: "/identities/sexuality",
+    locator: "Pansexual",
     images: [
       {
         src: "/emoji/pansexual_flag.svg",
@@ -57,6 +59,7 @@ export const IDENTITIES = {
   },
   Lesbian: {
     url: "/identities/sexuality",
+    locator: "Lesbian",
     images: [
       {
         src: "/emoji/lesbian_flag.svg",
@@ -298,9 +301,11 @@ export const FAQS = {
   },
   q4: {
     question: `"What do you do?"`,
-    answer: `Something! I mainly focus on maintaining the services I run at the 
-        moment, Beat Saber streaming, myself and my transition. I could use some 
-        financial support, if you're feeling up to it and can afford it!`,
+    answer: `Lots of things! Lately, though, I've been focusing on myself and my 
+        transition. I could use some financial support (since I'm currently 
+        unemployed) if you're feeling up to it and can afford it! If you want to 
+        know more about what I do, you can check out "Stuff I do!" from the main 
+        page, and "Support Me?" if you wanna toss me some funds!`,
     src: "/images/alexis_shrug.png",
     alt: "Alexis shrugging",
   },

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

@@ -8,7 +8,7 @@ export default function Pronouns() {
       card_title="Pronouns! Important!"
     >
       <IDCard
-        title="She / Her"
+        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!`,

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

@@ -8,9 +8,9 @@ export default function Sexuality() {
       card_title="Sexuality Details!"
     >
       <IDCard
-        title="Polyamory"
+        title="Polyam"
         info={{
-          info: `This means that I am okay with having multiple partners!`,
+          info: `Short for "Polyamory", 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"