Big refactoring with more components, added a variables file to save data.

src/info/components/basic-page.js

@@ -2,8 +2,9 @@ import Head from "next/head";
 import Image from "next/image";
 import WCard from "../components/werefox-card";
 import FCard from "./footer-card";
+import PButton from "../components/page-button";
 
-export default function HRT({ 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">
@@ -55,25 +56,21 @@ export default function HRT({ is_home, page_title, card_title, children }) {
               {card_title}
             </h1>
           </WCard>
-          <WCard
+          <PButton
-            isCardButton="true"
+            title="Take me back home!"
-            extraClasses=""
+            images={[
-            imageObj={[
               { src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" },
               { src: "/emoji/blue_heart.svg", alt: "Blue heart" },
             ]}
-            innerText="Take me back home!"
             url="/"
           />
           {children}
-          <WCard
+          <PButton
-            isCardButton="true"
+            title="Take me back home!"
-            extraClasses=""
+            images={[
-            imageObj={[
               { src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" },
               { src: "/emoji/blue_heart.svg", alt: "Blue heart" },
             ]}
-            innerText="Take me back home!"
             url="/"
           />
           <FCard />

src/info/components/faq-block.js

@@ -0,0 +1,18 @@
+import FCard from "./faq-card";
+import { FAQS } from "../js/variables";
+
+export default function FAQBlock() {
+  return (
+    <>
+      {Object.keys(FAQS).map((faq) => (
+        <FCard
+          key={faq}
+          question={FAQS[faq].question}
+          answer={FAQS[faq].answer}
+          src={FAQS[faq].src}
+          alt={FAQS[faq].alt}
+        />
+      ))}
+    </>
+  );
+}

src/info/components/faq-card.js

@@ -0,0 +1,43 @@
+import Link from "next/link";
+
+export default function TestimonialCard({ question, answer, src, alt }) {
+  const finalsrc = Boolean(src) ? src : "/images/logo.png";
+
+  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 space-y-2">
+        <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-8 text-center text-lg sm:text-xl text-werefox-pink-dark dark:text-werefox-pink">
+            {question}
+          </p>
+        </div>
+        <div className="p-2 flex space-y-2 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
+          <Link href="https://vulpine.club/@shadow8t4">
+            <a>
+              <div className="flex-1 pt-4 pb-4 pl-4">
+                <img
+                  className="rounded-lg sm:w-32 w-16"
+                  src={finalsrc}
+                  alt={alt}
+                />
+              </div>
+            </a>
+          </Link>{" "}
+          <div className="flex items-center justify-center animate-wiggle flex-5 p-4 sm:text-lg text-xs text-center min-h-full text-werefox-blue-dark dark:text-werefox-blue">
+            <p>
+              {answer}
+              <br />
+              {"- "}
+              <Link href="https://vulpine.club/@shadow8t4">
+                <a
+                  target="_blank"
+                  className="transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
+                >{`@shadow8t4`}</a>
+              </Link>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/info/components/footer-card.js

@@ -3,20 +3,26 @@ import WCard from "./werefox-card";
 
 export default function FooterCard() {
   return (
-    <WCard>
+    <footer className="p-4 space-y-2 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
-      <footer className="p-4 space-y-2">
       <div className="flex text-werefox-blue-darker dark:text-werefox-blue">
         <div className="flex-1 sm:pr-16 pr-4">
           <p className="text-right sm:text-md text-sm transition">
             <Link href="/contacts">
-                <a className="hover:text-werefox-pink-dark dark:hover:text-werefox-pink">Contact</a>
+              <a className="hover:text-werefox-pink-dark dark:hover:text-werefox-pink">
+                Contact
+              </a>
             </Link>
           </p>
         </div>
         <div className="flex-1 sm:pl-16 pl-4">
           <p className="text-left sm:text-md text-sm transition">
             <Link href="https://gitea.werefox.dev/shadow8t4/info-werefox-dev">
-                <a className="hover:text-werefox-pink-dark dark:hover:text-werefox-pink" target="_blank"> /src</a>
+              <a
+                className="hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
+                target="_blank"
+              >
+                 /src
+              </a>
             </Link>
           </p>
         </div>
@@ -37,6 +43,5 @@ export default function FooterCard() {
         </Link>
       </p>
     </footer>
-    </WCard>
   );
 }

src/info/components/identity-block.js

@@ -0,0 +1,18 @@
+import IDButton from "./identity-button";
+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>
+  );
+}

src/info/components/identity-card.js

@@ -13,6 +13,7 @@ export default function IdentityCard({
 }) {
   if (children) {
     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="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
             <h4 className="p-4 text-center text-lg sm:text-2xl text-werefox-grey-dark dark:text-werefox-grey-lighter">
@@ -24,9 +25,11 @@ export default function IdentityCard({
           </div>
           {children}
         </div>
+      </div>
     );
   } else if (src2) {
     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="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
             <h4 className="p-4 text-center text-lg sm:text-2xl text-werefox-grey-dark dark:text-werefox-grey-lighter">
@@ -37,11 +40,9 @@ export default function IdentityCard({
             </h4>
           </div>
           <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-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
+            <p className="p-4 flow space-y-4 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
               {Object.keys(info).map((i) => (
-              <p className="pb-4" key={i}>
+                <p key={i}>{info[i]}</p>
-                {info[i]}
-              </p>
               ))}
             </p>
           </div>
@@ -60,9 +61,11 @@ export default function IdentityCard({
             </a>
           </div>
         </div>
+      </div>
     );
-  } else {
+  } 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="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">
@@ -73,11 +76,9 @@ export default function IdentityCard({
             </p>
           </div>
           <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-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
+            <p className="p-4 flow space-y-4 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
               {Object.keys(info).map((i) => (
-              <p className="pb-4" key={i}>
+                <p key={i}>{info[i]}</p>
-                {info[i]}
-              </p>
               ))}
             </p>
             <div className="pb-4 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
@@ -92,6 +93,29 @@ export default function IdentityCard({
             </div>
           </div>
         </div>
+      </div>
+    );
+  } else {
+    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="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
+            <h4 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">
+                <Image src={src} layout="fill" objectFit="contain" alt={alt} />
+              </span>{" "}
+              {title}
+            </h4>
+          </div>
+          <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 flow space-y-4 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
+              {Object.keys(info).map((i) => (
+                <p key={i}>{info[i]}</p>
+              ))}
+            </p>
+          </div>
+        </div>
+      </div>
     );
   }
 }

src/info/components/page-block.js

@@ -0,0 +1,17 @@
+import PButton from "./page-button";
+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}
+        />
+      ))}
+    </>
+  );
+}

src/info/components/page-button.js

@@ -0,0 +1,29 @@
+import Link from "next/link";
+import Image from "next/image";
+
+export default function PageButton({ title, images, url, extra_classes }) {
+  return (
+    <div className="">
+      <Link href={url}>
+        <a
+          className={`${extra_classes} sm:p-2 p-1 w-full inline-block ring-2 ring-werefox-grey-darker dark:ring-werefox-grey-light 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) => (
+            <span
+              key={source}
+              className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top"
+            >
+              <Image
+                src={source.src}
+                layout="fill"
+                objectFit="contain"
+                alt={source.alt}
+              />
+            </span>
+          ))}{" "}
+          {title}
+        </a>
+      </Link>
+    </div>
+  );
+}

src/info/components/project-block.js

@@ -1,6 +1,6 @@
 import PCard from "./project-card";
 
-export default function ProjectBlock({ title, cards }) {
+export default function ProjectCardBlock({ title, cards }) {
   return (
     <div className="p-2 flow space-y-3 w-full">
       <div className="p-2 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker w-full bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
@@ -13,7 +13,7 @@ export default function ProjectBlock({ title, cards }) {
           {Object.keys(cards).map((card) => (
             <PCard
               key={card}
-              title={cards[card].title}
+              title={card}
               url={cards[card].url}
               src={cards[card].src}
               alt={cards[card].alt}

src/info/components/project-card.js

@@ -1,14 +1,26 @@
 import Link from "next/link";
 import Image from "next/image";
 
-export default function projectCard({ title, url, src, alt, description }) {
+export default function projectCard({
+  title,
+  url,
+  new_tab,
+  src,
+  alt,
+  description,
+}) {
+  const open_new_tab = new_tab ? "_blank" : "";
+
   return (
     <li className="p2 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker w-full bg-werefox-grey-light dark:bg-werefox-grey">
       <div className="p-2 flow space-y-2 w-full">
         <div className="p-3 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker w-full bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
           <div className="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">
+              <a
+                target={open_new_tab}
+                className="transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
+              >
                 <span className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top">
                   <Image
                     src={src}

src/info/components/testimonial-card.js

@@ -32,10 +32,12 @@ export default function TestimonialCard({ src, alt, url, innerText, user }) {
           {innerText}
           <br />
           {"- "}
+          <Link href={url}>
             <a
               target="_blank"
               className={`transition ${isMeLink}`}
             >{`@${user}`}</a>
+          </Link>
         </p>
       </div>
     </div>

src/info/components/werefox-card.js

@@ -1,51 +1,28 @@
-import Image from "next/image";
-import Link from "next/link";
-
 export default function WerefoxCard({
   isTitle,
-  isCardButton,
-  extraClasses,
-  imageObj,
   innerText,
-  url,
   children,
 }) {
-  const images = Array(imageObj).flat();
   if (isTitle) {
     return (
       <header className="rounded-lg ring-4 ring-werefox-blue bg-werefox-grey-light dark:bg-werefox-grey">
         {children}
       </header>
     );
-  } else if (isCardButton) {
+  } else {
     return (
-      <div className="">
+      <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
-        <Link href={url}>
+        <div className="p-2 space-y-2">
-          <a
+          <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
-            className={`${extraClasses} sm:p-2 p-1 w-full inline-block ring-2 ring-werefox-grey-darker dark:ring-werefox-grey-light 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`}
+            <p className="p-2 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
-          >
-            {images.map((source) => (
-              <span
-                key={source.src}
-                className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top"
-              >
-                <Image
-                  src={source.src}
-                  layout="fill"
-                  objectFit="contain"
-                  alt={source.alt}
-                />
-              </span>
-            ))}{" "}
               {innerText}
-          </a>
+            </p>
-        </Link>
+          </div>
+          <div className="p-2 flow space-y-2 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
+            {children}
+          </div>
+        </div>
       </div>
     );
   }
-  return (
-    <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
-      {children}
-    </div>
-  );
 }

src/info/js/variables.js

@@ -0,0 +1,353 @@
+// An object listing my different identity aspects
+
+export const IDENTITIES = {
+  26: {
+    url: "",
+    images: [
+      {
+        src: "/emoji/18_plus.svg",
+        alt: "Over 18 emoji",
+      },
+    ],
+    extra_classes: "pointer-events-none",
+  },
+  "Trans-femme": {
+    url: "/identities/gender",
+    images: [
+      {
+        src: "/emoji/transgender_flag.svg",
+        alt: "Transgender flag emoji",
+      },
+      {
+        src: "/emoji/female_symbol.svg",
+        alt: "Female symbol emoji",
+      },
+    ],
+    extra_classes: "xl:pt-1 xl:align-text-bottom xl:text-sm xl:min-h-full",
+  },
+  "She/her": {
+    url: "/identities/pronouns",
+    images: [
+      {
+        src: "/emoji/speech_bubble_left.svg",
+        alt: "A speech bubble emoji",
+      },
+    ],
+    extra_classes: "",
+  },
+  Polyam: {
+    url: "/identities/sexuality",
+    images: [
+      {
+        src: "/emoji/polyamory_flag.svg",
+        alt: "Polyamory flag emoji",
+      },
+    ],
+    extra_classes: "",
+  },
+  Pansexual: {
+    url: "/identities/sexuality",
+    images: [
+      {
+        src: "/emoji/pansexual_flag.svg",
+        alt: "Pansexual flag emoji",
+      },
+    ],
+    extra_classes: "",
+  },
+  Lesbian: {
+    url: "/identities/sexuality",
+    images: [
+      {
+        src: "/emoji/lesbian_flag.svg",
+        alt: "Lesbian flag emoji",
+      },
+    ],
+    extra_classes: "",
+  },
+  Single: {
+    url: "/identities/partners",
+    images: [
+      {
+        src: "/emoji/blue_heart.svg",
+        alt: "Blue heart emoji",
+      },
+    ],
+    extra_classes: "",
+  },
+  ADHD: {
+    url: "/identities/neuro",
+    images: [
+      {
+        src: "/emoji/neurodiversity.svg",
+        alt: "Neurodiversity symbol emoji",
+      },
+    ],
+    extra_classes: "",
+  },
+  "Fox witch": {
+    url: "/identities/fursona",
+    images: [
+      {
+        src: "/emoji/fox.svg",
+        alt: "Fox emoji",
+      },
+      {
+        src: "/emoji/magic_wand.svg",
+        alt: "Magic wand emoji",
+      },
+    ],
+    extra_classes: "xl:pt-1 xl:align-text-bottom xl:text-sm xl:min-h-full",
+  },
+};
+
+// An object listing pages folks can visit
+
+export const PAGES = {
+  "Stuff I do!": {
+    url: "/projects",
+    images: [
+      {
+        src: "/emoji/crt_prompt.svg",
+        alt: "CRT prompt emoji",
+      },
+    ],
+  },
+  "See Testimonials!": {
+    url: "/testimonials",
+    images: [{ src: "/emoji/awoo.svg", alt: "Awoo emoji" }],
+  },
+  "HRT Tracker!": {
+    url: "/hrt",
+    images: [
+      {
+        src: "/emoji/trans_heart.png",
+        alt: "Transgender heart emoji",
+      },
+    ],
+  },
+  FAQ: {
+    url: "/faq",
+    images: [
+      {
+        src: "/emoji/red_question_mark.svg",
+        alt: "Red question mark emoji",
+      },
+    ],
+  },
+  "Support Me?": {
+    url: "/support",
+    images: [
+      {
+        src: "/emoji/green_money.svg",
+        alt: "Green money emoji",
+      },
+    ],
+  },
+};
+
+// Use this to list out partners on the partners page. >w>
+
+export const PARTNERS = {
+  //   parnter: {
+  //     url: "",
+  //     avi: "",
+  //     fields: {
+  //       "": "",
+  //     },
+  //     bio: ``,
+  //   },
+};
+
+// This is where you put the testimonial users' info
+
+export const TESTIMONIALS = {
+  colabunny: {
+    json: "https://yiff.life/@colabunny.json",
+    url: "https://yiff.life/@colabunny",
+    content: '"please stay your jokes are funny and smart"',
+  },
+  ElfLord: {
+    url: "https://freedom.horse/@ElfLord",
+    json: "https://freedom.horse/@ElfLord.json",
+    content: `"Someday I'm gonna visit you in Texas, and when I get there, I'm going to realize you don't live in Texas at all, and I'm in the wrong state"`,
+  },
+  Decimal: {
+    url: "https://plush.city/@Decimal",
+    json: "https://plush.city/@Decimal.json",
+    content: `"I will appreciate the heck out of you any day"`,
+  },
+  skelly: {
+    url: "https://redroo.ml/@skelly",
+    json: "https://redroo.ml/@skelly.json",
+    content: `"this an an official invitation for any one of you to put 'fuck you i dont give testimonials' as a testimonial by me on your profile"`,
+  },
+  Drako_Fenris: {
+    url: "https://yiff.life/@Drako_Fenris",
+    json: "https://yiff.life/@Drako_Fenris.json",
+    content: `"[Alexis' future wife] lives in the ether yet to be revealed. she awaits the day her big tiddie goth gf rides in on her unicorn and rescues her."`,
+  },
+  "00dani": {
+    url: "https://vulpine.club/@00dani",
+    json: "https://vulpine.club/@00dani.json",
+    content: `"*falls in love with you* haha whoopsies 😳"`,
+  },
+  Gumby: {
+    url: "https://puppy.cafe/@Gumby",
+    json: "https://puppy.cafe/@Gumby.json",
+    content: `"im love alexis a lot 💚 🐀"`,
+  },
+  AshBunny: {
+    url: "https://vulpine.club/@AshBunny",
+    json: "https://vulpine.club/@AshBunny.json",
+    content: `"heck. I don't think I can take all of this support."`,
+  },
+  heatherhorns: {
+    url: "https://plush.city/@heatherhorns",
+    json: "https://plush.city/@heatherhorns.json",
+    content: `";~;
+
+    gpsd gosh"`,
+  },
+  MutoShack: {
+    url: "https://functional.cafe/@MutoShack",
+    json: "https://functional.cafe/@MutoShack.json",
+    content: `"yess w'all say nice things! usually "alexis is the good" and "alexis is the gay"
+
+    because it is the truth"`,
+  },
+  immychan: {
+    url: "https://antabaka.me/@immychan",
+    json: "https://antabaka.me/@immychan.json",
+    content: `"Oh damn you're cute 😳"`,
+  },
+  nautilee: {
+    url: "https://dragon.style/@nautilee",
+    json: "https://dragon.style/@nautilee.json",
+    content: `"...how are you so goshdarn cute"`,
+  },
+  lindsays: {
+    url: "https://hackers.town/@lindsays",
+    json: "https://hackers.town/@lindsays.json",
+    content: `"Regarding @shadow8t4  : She's an amazing, sweet, beautiful dork, and a spectacular best friend. also, a butt."`,
+  },
+};
+
+// This is where I put the questions and answers for the FAQ
+
+export const FAQS = {
+  q1: {
+    question: `"So is Werefox like a species or...?"`,
+    answer: `That's a good question! No, my fursona's full name is Alexis Werefox, 
+        so Werefox is just a last name. I am just a fox!`,
+    src: "/images/alexis_heart.png",
+    alt: "Alexis giving a heart emoji",
+  },
+  q2: {
+    question: `"How can you be Pansexual and a Lesbian?"`,
+    answer: `I believe I've been told the proper term is "sapphic", 
+        it just means I *am* Pansexual, but I prefer those who identify more femme.`,
+    src: "/images/alexis_wink.png",
+    alt: "Alexis winking and giving a peace sign",
+  },
+  q3: {
+    question: `"How do I get more Xenia stickers?"`,
+    answer: `Yeah, about that. So, I've made a few posts aobut this, but when 
+        I first started giving those out, I was in a good financial position, among 
+        other things. Now I'm not! I will get to it when I do.`,
+    src: "/images/alexis_annoyed.png",
+    alt: "Alexis looking annoyed and crossing her arms",
+  },
+  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!`,
+    src: "/images/alexis_shrug.png",
+    alt: "Alexis shrugging",
+  },
+};
+
+// An object listing the different stuff I do
+
+export const PROJECTS = {
+  Services: {
+    url: "/projects/services",
+    src: "/emoji/crt_blue_screen.svg",
+    alt: "A CRT blue screen emoji",
+    description: `Here is a list of some of the services I host.
+    Some of them, because a few I keep to just myself.`,
+  },
+  Poetry: {
+    url: "https://write.as/a-letter-to-the-void",
+    new_tab: true,
+    src: "/emoji/pen.svg",
+    alt: "Pen emoji",
+    description: `Sometimes, I write poetry. It's not the happiest
+    always, but I am proud of it. It would mean a lot if you took
+    a look!`,
+  },
+};
+
+// An object listing the services I host
+
+export const SERVICES = {
+  Mastodon: {
+    url: "https://masto.werefox.dev/about/",
+    new_tab: true,
+    src: "/emoji/mastodon-logo.png",
+    alt: "The Mastodon logo",
+    description: `Mastodon is an online, self-hosted social media, and social networking service. 
+      It allows anyone to host their own server node in the network, and its various separately 
+      operated user bases are federated across many different servers.`,
+  },
+  Pinafore: {
+    url: "https://pina.werefox.dev/",
+    new_tab: true,
+    src: "/emoji/pinafore_logo.svg",
+    alt: "The Pinafore logo",
+    description: `An alternative web client for Mastodon, focused on speed and simplicity.`,
+  },
+  Halcyon: {
+    url: "https://halcyon.werefox.dev/",
+    new_tab: true,
+    src: "/emoji/halcyon_logo.png",
+    alt: "The Halcyon logo",
+    description: `Halcyon is standard Twitter like client of Mastodon, And you can use it just 
+      by login to your instance. Let's Toot like a tweet.`,
+  },
+  Brutaldon: {
+    url: "https://brutal.werefox.dev/",
+    new_tab: true,
+    src: "/emoji/brutaldon_logo.png",
+    alt: "The Brutaldon logo",
+    description: `Brutaldon is a brutalist, Web 1.0 web interface for Mastodon and Pleroma.`,
+  },
+  PeerTube: {
+    url: "https://vid.werefox.dev/",
+    new_tab: true,
+    src: "/emoji/peertube_logo.svg",
+    alt: "The PeerTube logo",
+    description: `PeerTube is a free and open-source, decentralized, federated video platform 
+      powered by ActivityPub and WebTorrent, that uses peer-to-peer technology to reduce load on 
+      individual servers when viewing videos.`,
+  },
+  Element: {
+    url: "https://elem.werefox.dev/",
+    new_tab: true,
+    src: "/emoji/element_logo.svg",
+    alt: "The Element logo",
+    description: `Element (previously Riot) is an all-in-one secure chat app for teams, 
+      friends and organisations. Keeps conversations in your control, safe from data-mining 
+      and ads. Talk to everyone through the open global Matrix network, protected by proper 
+      end-to-end encryption. (additionally, I host a Matrix server at matrix.werefox.dev)`,
+  },
+  Gitea: {
+    url: "https://gitea.werefox.dev/",
+    new_tab: true,
+    src: "/emoji/gitea_logo.svg",
+    alt: "The Gitea logo",
+    description: `A painless self-hosted Git service. Gitea is a community managed 
+      lightweight code hosting solution written in Go. It is published under the MIT license.`,
+  },
+};

src/info/pages/contacts/index.js

@@ -1,4 +1,4 @@
-import BasicPage from "../../components/basic-page-template";
+import BasicPage from "../../components/basic-page";
 import WCard from "../../components/werefox-card";
 import Image from "next/image";
 
@@ -8,15 +8,9 @@ export default function Contacts() {
       page_title="Where To Find Me"
       card_title={`"Do you have a [Social Media]?"`}
     >
-      <WCard>
+      <WCard innerText="You can find me in quite a few places!">
-        <div className="p-2 space-y-2">
+        <div className="p-4 space-y-4">
-          <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="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
-            <p className="p-2 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
-              You can find me in quite a few places!
-            </p>
-          </div>
-          <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 md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
             <a href="https://vulpine.club/@shadow8t4" target="_blank">
               <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
                 <Image
@@ -36,7 +30,7 @@ export default function Contacts() {
               @shadow8t4@vulpine.club
             </a>
           </p>
-            <p className="pl-4 pr-4 pb-4 md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
+          <p className="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
             <a href="https://twitter.com/alexis_werefox" target="_blank">
               <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
                 <Image
@@ -56,7 +50,7 @@ export default function Contacts() {
               @alexis_werefox
             </a>
           </p>
-            <p className="pl-4 pr-4 pb-4 md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
+          <p className="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
             <a href="https://www.twitch.tv/alexis_werefox" target="_blank">
               <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
                 <Image
@@ -76,7 +70,7 @@ export default function Contacts() {
               @Alexis_Werefox
             </a>
           </p>
-            <p className="pl-4 pr-4 pb-4 md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
+          <p className="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
             <a
               href="https://vid.werefox.dev/accounts/shadow8t4/video-channels"
               target="_blank"
@@ -99,7 +93,7 @@ export default function Contacts() {
               vid.werefox.dev
             </a>
           </p>
-            <p className="pl-4 pr-4 pb-4 md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
+          <p className="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
             <a href="https://write.as/a-letter-to-the-void" target="_blank">
               <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
                 <Image
@@ -119,7 +113,7 @@ export default function Contacts() {
               write.as/a-letter-to-the-void
             </a>
           </p>
-            <p className="pl-4 pr-4 pb-4 md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
+          <p className="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
             <a href="https://werefox.dev" target="_blank">
               <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
                 <Image
@@ -139,7 +133,7 @@ export default function Contacts() {
               werefox.dev
             </a>
           </p>
-            <p className="pl-4 pr-4 pb-4 md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
+          <p className="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
             <a href="mailto:adh9694@gmail.com" target="">
               <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
                 <Image
@@ -160,7 +154,6 @@ export default function Contacts() {
             </a>
           </p>
         </div>
-        </div>
       </WCard>
     </BasicPage>
   );

src/info/pages/faq/index.js

@@ -1,62 +1,10 @@
-import BasicPage from "../../components/basic-page-template";
+import BasicPage from "../../components/basic-page";
-import WCard from "../../components/werefox-card";
+import FBlock from "../../components/faq-block";
-import TCard from "../../components/testimonial-card";
 
 export default function FAQ() {
   return (
     <BasicPage page_title="FAQ" card_title="Frequently Asked Questions!">
-      <WCard>
+      <FBlock />
-        <p className="p-6 text-lg text-center text-werefox-pink-dark dark:text-werefox-pink">
-          "So is Werefox like a species or...?"
-        </p>
-      </WCard>
-      <TCard
-        key=""
-        src="/images/alexis_heart.png"
-        alt="Alexis"
-        url="https://vulpine.club/@shadow8t4"
-        user="Shadow8t4"
-        innerText="That's a good question! No, my fursona's full name is Alexis Werefox, so Werefox is just a last name. I am just a fox!"
-      />
-      <WCard>
-        <p className="p-6 text-lg text-center text-werefox-pink-dark dark:text-werefox-pink">
-          "How can you be Pansexual and a Lesbian?"
-        </p>
-      </WCard>
-      <TCard
-        key=""
-        src="/images/alexis_wink.png"
-        alt="Alexis"
-        url="https://vulpine.club/@shadow8t4"
-        user="Shadow8t4"
-        innerText={`I believe I've been told the proper term is "sapphic", it just means I *am* Pansexual, but I prefer those who identify more femme.`}
-      />
-      <WCard>
-        <p className="p-6 text-lg text-center text-werefox-pink-dark dark:text-werefox-pink">
-          "How do I get more Xenia stickers?"
-        </p>
-      </WCard>
-      <TCard
-        key=""
-        src="/images/alexis_annoyed.png"
-        alt="Alexis"
-        url="https://vulpine.club/@shadow8t4"
-        user="Shadow8t4"
-        innerText={`Yeah, about that. So, I've made a few posts aobut this, but when I first started giving those out, I was in a good financial position, among other things. Now I'm not! I will get to it when I do.`}
-      />
-      <WCard>
-        <p className="p-6 text-lg text-center text-werefox-pink-dark dark:text-werefox-pink">
-          "What do you do?"
-        </p>
-      </WCard>
-      <TCard
-        key=""
-        src="/images/alexis_shrug.png"
-        alt="Alexis"
-        url="https://vulpine.club/@shadow8t4"
-        user="Shadow8t4"
-        innerText="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!"
-      />
     </BasicPage>
   );
 }

src/info/pages/hrt/index.js

@@ -1,4 +1,4 @@
-import BasicPage from "../../components/basic-page-template";
+import BasicPage from "../../components/basic-page";
 import WCard from "../../components/werefox-card";
 import { useEffect, useState } from "react";
 
@@ -45,20 +45,13 @@ export default function HRT({ startTimes }) {
       page_title="Alexis Werefox HRT Tracker"
       card_title="Track my HRT progress!"
     >
-      <WCard>
+      <WCard innerText={`I'm so glad you're interested!!`}>
-        <div className="p-4">
+        <div className="p-2 sm:text-xl text-lg text-center text-werefox-blue-dark dark:text-werefox-blue grid grid-cols-1 grid-rows-4 gap-2">
-        <p className="pt-6 text-lg md:text-2xl text-center text-werefox-blue-dark dark:text-werefox-blue">
+          <p>I've been on HRT for:</p>
-          I'm so glad you're interested!!
-        </p>
-        <p className="text-lg md:text-2xl text-center text-werefox-blue-dark dark:text-werefox-blue">
-          I've been on HRT for:
-        </p>
-        <div className="pb-6 text-lg md:text-2xl text-center text-werefox-blue-dark dark:text-werefox-blue grid grid-cols-1 grid-rows-4">
           {Object.keys(timesArray).map((t) => (
             <p key={t}>{timesArray[t]}</p>
           ))}
         </div>
-        </div>
       </WCard>
     </BasicPage>
   );

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

@@ -1,11 +1,9 @@
-import BasicPage from "../../../components/basic-page-template";
+import BasicPage from "../../../components/basic-page";
-import WCard from "../../../components/werefox-card";
 import IDCard from "../../../components/identity-card";
 
 export default function Fursona() {
   return (
     <BasicPage page_title="OwO What's this?" card_title="Fursona Details!">
-      <WCard>
       <IDCard
         title="Alexis Werefox"
         info={{
@@ -14,15 +12,13 @@ export default function Fursona() {
           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!)`
+          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,11 +1,9 @@
-import BasicPage from "../../../components/basic-page-template";
+import BasicPage from "../../../components/basic-page";
-import WCard from "../../../components/werefox-card";
 import IDCard from "../../../components/identity-card";
 
 export default function Gender() {
   return (
     <BasicPage page_title="What's Gender?" card_title="I'm Transgender!">
-      <WCard>
       <IDCard
         title="Trans-femme"
         info={{
@@ -16,7 +14,6 @@ export default function Gender() {
         src="/emoji/transgender_flag.svg"
         alt="The transgender flag"
       />
-      </WCard>
     </BasicPage>
   );
 }

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

@@ -1,5 +1,4 @@
-import BasicPage from "../../../components/basic-page-template";
+import BasicPage from "../../../components/basic-page";
-import WCard from "../../../components/werefox-card";
 import IDCard from "../../../components/identity-card";
 
 export default function Neurodiversity() {
@@ -8,7 +7,6 @@ export default function Neurodiversity() {
       page_title="Neurodiversity, Fam"
       card_title="I'm Neurodivergent!"
     >
-      <WCard>
       <IDCard
         title="ADHD"
         info={{
@@ -28,7 +26,6 @@ export default function Neurodiversity() {
         src="/emoji/neurodiversity.svg"
         alt="The neurodiversity symbol"
       />
-      </WCard>
     </BasicPage>
   );
 }

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

@@ -1,26 +1,12 @@
-import BasicPage from "../../../components/basic-page-template";
+import BasicPage from "../../../components/basic-page";
 import IDCard from "../../../components/identity-card";
 import LCard from "../../../components/love-card";
-import WCard from "../../../components/werefox-card";
+import { PARTNERS } from "../../../js/variables";
-
-// Use this to list out partner info on this page. >w>
-
-const PARTNERS = {
-  // parnter: {
-  //   url: "",
-  //   avi: "",
-  //   fields: {
-  //     "": "",
-  //   },
-  //   bio: ``,
-  // },
-};
 
 export default function Partners() {
   if (Object.keys(PARTNERS).length) {
     return (
       <BasicPage page_title="Partners" card_title="Partners!">
-        <WCard>
         <IDCard
           title="My loves!"
           src="/emoji/blue_heart.svg"
@@ -38,27 +24,20 @@ export default function Partners() {
             ></LCard>
           ))}
         </IDCard>
-        </WCard>
       </BasicPage>
     );
   } else {
     return (
       <BasicPage page_title="Partners" card_title="Partners!">
-        <WCard>
         <IDCard
           title="My loves!"
           src="/emoji/blue_heart.svg"
           alt="Blue heart emoji"
-          >
+          info={{
-            <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
+            info: `Oh! It looks like I don't have any partners at the moment.`,
-              <p className="p-6 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
+            more: `Oh well!`,
-                Oh! It looks like I don't have any partners at the moment.
+          }}
-                <br />
+        ></IDCard>
-                Oh well!
-              </p>
-            </div>
-          </IDCard>
-        </WCard>
       </BasicPage>
     );
   }

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

@@ -1,5 +1,4 @@
-import BasicPage from "../../../components/basic-page-template";
+import BasicPage from "../../../components/basic-page";
-import WCard from "../../../components/werefox-card";
 import IDCard from "../../../components/identity-card";
 
 export default function Pronouns() {
@@ -8,7 +7,6 @@ export default function Pronouns() {
       page_title="What are your pronouns?"
       card_title="Pronouns! Important!"
     >
-      <WCard>
       <IDCard
         title="She / Her"
         info={{
@@ -20,7 +18,6 @@ export default function Pronouns() {
         src="/emoji/speech_bubble_left.svg"
         alt="A speech bubble emoji"
       />
-      </WCard>
     </BasicPage>
   );
 }

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

@@ -1,5 +1,4 @@
-import BasicPage from "../../../components/basic-page-template";
+import BasicPage from "../../../components/basic-page";
-import WCard from "../../../components/werefox-card";
 import IDCard from "../../../components/identity-card";
 
 export default function Sexuality() {
@@ -8,7 +7,6 @@ export default function Sexuality() {
       page_title="What's My Sexuality?"
       card_title="Sexuality Details!"
     >
-      <WCard>
       <IDCard
         title="Polyamory"
         info={{
@@ -39,7 +37,6 @@ export default function Sexuality() {
         src="/emoji/lesbian_flag.svg"
         alt="The lesbian flag"
       />
-      </WCard>
     </BasicPage>
   );
 }

src/info/pages/index.js

@@ -1,6 +1,7 @@
-import BasicPage from "../components/basic-page-template";
+import BasicPage from "../components/basic-page";
-import IDButton from "../components/identity-button";
+import IDBlock from "../components/identity-block";
 import WCard from "../components/werefox-card";
+import PBlock from "../components/page-block";
 
 export default function Home() {
   return (
@@ -9,192 +10,28 @@ export default function Home() {
       page_title="About A Werefox"
       card_title="Hi! I'm Alexis Werefox!"
     >
-      <WCard>
+      <WCard innerText="Basic Info">
-        <div className="p-2 space-y-2">
+        <IDBlock />
-          <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-2 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
-              <p>Basic Info</p>
-            </p>
-          </div>
-          <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">
-            <IDButton
-              extraClasses="pointer-events-none"
-              imageObj={{ src: "/emoji/18_plus.svg", alt: "Over 18" }}
-              innerText="26"
-              url=""
-            />
-            <IDButton
-              extraClasses="xl:pt-1 xl:align-text-bottom xl:text-sm xl:min-h-full"
-              imageObj={[
-                {
-                  src: "/emoji/transgender_flag.svg",
-                  alt: "Transgender flag",
-                },
-                {
-                  src: "/emoji/female_symbol.svg",
-                  alt: "Female symbol",
-                },
-              ]}
-              innerText="Trans-femme"
-              url="/identities/gender"
-            />
-            <IDButton
-              extraClasses=""
-              imageObj={{
-                src: "/emoji/speech_bubble_left.svg",
-                alt: "",
-              }}
-              innerText="She/her"
-              url="/identities/pronouns"
-            />
-            <IDButton
-              extraClasses=""
-              imageObj={{
-                src: "/emoji/polyamory_flag.svg",
-                alt: "Polyamory flag",
-              }}
-              innerText="Polyam"
-              url="/identities/sexuality"
-            />
-            <IDButton
-              extraClasses=""
-              imageObj={{
-                src: "/emoji/pansexual_flag.svg",
-                alt: "Pansexual flag",
-              }}
-              innerText="Pansexual"
-              url="/identities/sexuality"
-            />
-            <IDButton
-              extraClasses=""
-              imageObj={{
-                src: "/emoji/lesbian_flag.svg",
-                alt: "Lesbian flag",
-              }}
-              innerText="Lesbian"
-              url="/identities/sexuality"
-            />
-            <IDButton
-              extraClasses=""
-              imageObj={{
-                src: "/emoji/blue_heart.svg",
-                alt: "Blue heart",
-              }}
-              innerText="Single"
-              url="/identities/partners"
-            />
-            <IDButton
-              extraClasses=""
-              imageObj={{
-                src: "/emoji/neurodiversity.svg",
-                alt: "Neurodiversity symbol",
-              }}
-              innerText="ADHD"
-              url="/identities/neuro"
-            />
-            <IDButton
-              extraClasses="xl:pt-1 xl:align-text-bottom xl:text-sm xl:min-h-full"
-              imageObj={[
-                {
-                  src: "/emoji/fox.svg",
-                  alt: "Fox",
-                },
-                {
-                  src: "/emoji/magic_wand.svg",
-                  alt: "Magic wand",
-                },
-              ]}
-              innerText="Fox witch"
-              url="/identities/fursona"
-            />
-          </div>
-        </div>
       </WCard>
-      <WCard>
+      <WCard innerText="Welcome to my little info site!">
-        <div className="p-2 space-y-2">
-          <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-2 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
-              <p>Welcome to my little info site!</p>
-            </p>
-          </div>
-          <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-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
-              I'd describe myself as somewhere between a hot date and a hot
+          I'd describe myself as somewhere between a hot date and a hot mess.
-              mess. Just a witchy foxxo programmer trying to make it in the
+          Just a witchy foxxo programmer trying to make it in the world tbh.
-              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 cute 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
+          Down below, I've got some more neat little pages and useful info you
-              you can look at.
+          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>
-          </div>
-        </div>
       </WCard>
-      <WCard>
+      <WCard innerText="Neat Pages!">
-        <div className="p-2 space-y-3">
+        <PBlock />
-          <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-2 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
-              Neat Pages!
-            </p>
-          </div>
-          <WCard
-            isCardButton="true"
-            extraClasses=""
-            imageObj={{
-              src: "/emoji/crt_prompt.svg",
-              alt: "CRT prompt emoji",
-            }}
-            innerText="Stuff I do!"
-            url="/projects"
-          />
-          <WCard
-            isCardButton="true"
-            extraClasses=""
-            imageObj={{
-              src: "/emoji/awoo.svg",
-              alt: "Awoo emoji",
-            }}
-            innerText="See Testimonials!"
-            url="/testimonials"
-          />
-          <WCard
-            isCardButton="true"
-            extraClasses=""
-            imageObj={{
-              src: "/emoji/trans_heart.png",
-              alt: "Transgender heart",
-            }}
-            innerText="HRT Tracker!"
-            url="/hrt"
-          />
-          <WCard
-            isCardButton="true"
-            extraClasses=""
-            imageObj={{
-              src: "/emoji/red_question_mark.svg",
-              alt: "Question mark emoji",
-            }}
-            innerText="FAQ"
-            url="/faq"
-          />
-          <WCard
-            isCardButton="true"
-            extraClasses=""
-            imageObj={{
-              src: "/emoji/green_money.svg",
-              alt: "Support",
-            }}
-            innerText="Support Me?"
-            url="/support"
-          />
-        </div>
       </WCard>
     </BasicPage>
   );

src/info/pages/projects/index.js

@@ -1,74 +1,13 @@
-import BasicPage from "../../components/basic-page-template";
+import BasicPage from "../../components/basic-page";
-import WCard from "../../components/werefox-card";
 import PBlock from "../../components/project-block";
+import { PROJECTS } from "../../js/variables";
 
-const CARDS = {
+export default function Services() {
-  mastodon: {
-    title: "Mastodon",
-    url: "https://masto.werefox.dev/about/",
-    src: "/emoji/mastodon-logo.png",
-    alt: "The Mastodon logo",
-    description: `Mastodon is an online, self-hosted social media, and social networking service. 
-    It allows anyone to host their own server node in the network, and its various separately 
-    operated user bases are federated across many different servers.`,
-  },
-  pinafore: {
-    title: "Pinafore",
-    url: "https://pina.werefox.dev/",
-    src: "/emoji/pinafore_logo.svg",
-    alt: "The Pinafore logo",
-    description: `An alternative web client for Mastodon, focused on speed and simplicity.`,
-  },
-  halcyon: {
-    title: "Halcyon",
-    url: "https://halcyon.werefox.dev/",
-    src: "/emoji/halcyon_logo.png",
-    alt: "The Halcyon logo",
-    description: `Halcyon is standard Twitter like client of Mastodon, And you can use it just 
-    by login to your instance. Let's Toot like a tweet.`,
-  },
-  brutaldon: {
-    title: "Brutaldon",
-    url: "https://brutal.werefox.dev/",
-    src: "/emoji/brutaldon_logo.png",
-    alt: "The Brutaldon logo",
-    description: `Brutaldon is a brutalist, Web 1.0 web interface for Mastodon and Pleroma.`,
-  },
-  peertube: {
-    title: "PeerTube",
-    url: "https://vid.werefox.dev/",
-    src: "/emoji/peertube_logo.svg",
-    alt: "The PeerTube logo",
-    description: `PeerTube is a free and open-source, decentralized, federated video platform 
-    powered by ActivityPub and WebTorrent, that uses peer-to-peer technology to reduce load on 
-    individual servers when viewing videos.`,
-  },
-  element: {
-    title: "Element",
-    url: "https://elem.werefox.dev/",
-    src: "/emoji/element_logo.svg",
-    alt: "The Element logo",
-    description: `Element (previously Riot) is an all-in-one secure chat app for teams, 
-    friends and organisations. Keeps conversations in your control, safe from data-mining 
-    and ads. Talk to everyone through the open global Matrix network, protected by proper 
-    end-to-end encryption. (additionally, I host a Matrix server at matrix.werefox.dev)`,
-  },
-  gitea: {
-    title: "Gitea",
-    url: "https://gitea.werefox.dev/",
-    src: "/emoji/gitea_logo.svg",
-    alt: "The Gitea logo",
-    description: `A painless self-hosted Git service. Gitea is a community managed 
-    lightweight code hosting solution written in Go. It is published under the MIT license.`,
-  },
-};
-
-export default function Projects() {
   return (
-    <BasicPage page_title="Werefox Projects" card_title="Some stuff I do!">
+    <BasicPage page_title="Personal Projects" card_title="Some stuff I do!">
-      <WCard>
+      <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
-        <PBlock title="Services" cards={CARDS} />
+        <PBlock title="Personal Projects" cards={PROJECTS} />
-      </WCard>
+      </div>
     </BasicPage>
   );
 }

src/info/pages/projects/services/index.js

@@ -0,0 +1,13 @@
+import BasicPage from "../../../components/basic-page";
+import PBlock from "../../../components/project-block";
+import { SERVICES } from "../../../js/variables";
+
+export default function Services() {
+  return (
+    <BasicPage page_title="Werefox Services" card_title="Services I Host!">
+      <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
+        <PBlock title="Services" cards={SERVICES} />
+      </div>
+    </BasicPage>
+  );
+}

src/info/pages/support/index.js

@@ -1,4 +1,4 @@
-import BasicPage from "../../components/basic-page-template";
+import BasicPage from "../../components/basic-page";
 import WCard from "../../components/werefox-card";
 import Link from "next/link";
 import Iframe from "react-iframe";
@@ -6,12 +6,11 @@ import Iframe from "react-iframe";
 export default function Support() {
   return (
     <BasicPage page_title="Support" card_title="Support Me!">
-      <WCard>
+      <WCard
+        innerText="I would sincerely appreciate if you would throw some financial
+        support my way!! 💙"
+      >
         <div className="p-4 space-y-4">
-          <p className="pt-6 text-lg md:text-2xl text-center text-werefox-blue-dark dark:text-werefox-blue">
-            I would sincerely appreciate if you would throw some financial
-            support my way!! 💙
-          </p>
           <p className="text-lg md:text-2xl text-center text-werefox-blue-dark dark:text-werefox-blue">
             You could support me through Patreon, Ko-fi, or Liberapay
           </p>

src/info/pages/testimonials/index.js

@@ -1,6 +1,7 @@
-import BasicPage from "../../components/basic-page-template";
+import BasicPage from "../../components/basic-page";
 import WCard from "../../components/werefox-card";
 import TCard from "../../components/testimonial-card";
+import { TESTIMONIALS } from "../../js/variables";
 import axios from "axios";
 
 // Async functions to grab user avatars server-side
@@ -15,7 +16,7 @@ export const getIcon = async ({ json, name }) =>
   );
 
 export const getStaticProps = async () => {
-  const promises = Object.entries(USERS).map(([name, { json }]) =>
+  const promises = Object.entries(TESTIMONIALS).map(([name, { json }]) =>
     getIcon({ name, json })
   );
   const iconUrls = await Promise.all(promises);
@@ -29,99 +30,24 @@ export const getStaticProps = async () => {
   };
 };
 
-// This is where you put the testimonial users' info
-
-const USERS = {
-  colabunny: {
-    json: "https://yiff.life/@colabunny.json",
-    url: "https://yiff.life/@colabunny",
-    content: '"please stay your jokes are funny and smart"',
-  },
-  ElfLord: {
-    url: "https://freedom.horse/@ElfLord",
-    json: "https://freedom.horse/@ElfLord.json",
-    content: `"Someday I'm gonna visit you in Texas, and when I get there, I'm going to realize you don't live in Texas at all, and I'm in the wrong state"`,
-  },
-  Decimal: {
-    url: "https://plush.city/@Decimal",
-    json: "https://plush.city/@Decimal.json",
-    content: `"I will appreciate the heck out of you any day"`,
-  },
-  skelly: {
-    url: "https://redroo.ml/@skelly",
-    json: "https://redroo.ml/@skelly.json",
-    content: `"this an an official invitation for any one of you to put 'fuck you i dont give testimonials' as a testimonial by me on your profile"`,
-  },
-  Drako_Fenris: {
-    url: "https://yiff.life/@Drako_Fenris",
-    json: "https://yiff.life/@Drako_Fenris.json",
-    content: `"[Alexis' future wife] lives in the ether yet to be revealed. she awaits the day her big tiddie goth gf rides in on her unicorn and rescues her."`,
-  },
-  "00dani": {
-    url: "https://vulpine.club/@00dani",
-    json: "https://vulpine.club/@00dani.json",
-    content: `"*falls in love with you* haha whoopsies 😳"`,
-  },
-  Gumby: {
-    url: "https://puppy.cafe/@Gumby",
-    json: "https://puppy.cafe/@Gumby.json",
-    content: `"im love alexis a lot 💚 🐀"`,
-  },
-  AshBunny: {
-    url: "https://vulpine.club/@AshBunny",
-    json: "https://vulpine.club/@AshBunny.json",
-    content: `"heck. I don't think I can take all of this support."`,
-  },
-  heatherhorns: {
-    url: "https://plush.city/@heatherhorns",
-    json: "https://plush.city/@heatherhorns.json",
-    content: `";~;
-
-    gpsd gosh"`,
-  },
-  MutoShack: {
-    url: "https://functional.cafe/@MutoShack",
-    json: "https://functional.cafe/@MutoShack.json",
-    content: `"yess w'all say nice things! usually "alexis is the good" and "alexis is the gay"
-
-    because it is the truth"`,
-  },
-  immychan: {
-    url: "https://antabaka.me/@immychan",
-    json: "https://antabaka.me/@immychan.json",
-    content: `"Oh damn you're cute 😳"`,
-  },
-  nautilee: {
-    url: "https://dragon.style/@nautilee",
-    json: "https://dragon.style/@nautilee.json",
-    content: `"...how are you so goshdarn cute"`,
-  },
-  lindsays: {
-    url: "https://hackers.town/@lindsays",
-    json: "https://hackers.town/@lindsays.json",
-    content: `"Regarding @shadow8t4  : She's an amazing, sweet, beautiful dork, and a spectacular best friend. also, a butt."`,
-  },
-};
-
 export default function Testimonials({ iconUrls }) {
   return (
     <BasicPage page_title="Werefox Testimonials" card_title="Testimonials!">
-      <WCard>
+      <WCard
-        <p className="p-6 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
+        innerText={`Sometimes, people say some nice things about me. Here are some
-          Sometimes, people say some nice things about me. Here are some
+        examples!`}
-          examples!
+      >
-        </p>
+        {Object.keys(TESTIMONIALS).map((user) => (
-      </WCard>
-      {Object.keys(USERS).map((user) => (
           <TCard
-          key={USERS[user].url}
+            key={TESTIMONIALS[user].url}
             src={iconUrls[user]}
             alt={`${user}'s Avatar`}
-          url={USERS[user].url}
+            url={TESTIMONIALS[user].url}
             user={user}
-          innerText={USERS[user].content}
+            innerText={TESTIMONIALS[user].content}
           />
         ))}
+      </WCard>
     </BasicPage>
   );
 }

src/info/public/emoji/crt_blue_screen.svg

@@ -0,0 +1 @@
+<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.41421" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path clip-rule="evenodd" d="m0 0h32v32h-32z"/></clipPath><metadata/><path d="m0 0h32v32h-32z" fill="none"/><g clip-path="url(#a)"><path d="m0 0h32v32h-32z"/><path d="m30 2h-28v22l1 .5-1 .5v5h28v-5l-1-.5 1-.5z" fill="#4d4d4d"/><path d="m2 24h28v1h-28z" fill="#333"/><g fill="#808080"><path d="m4 26h2v1h-2z"/><path d="m4 28h2v1h-2z"/><path d="m7 26h2v1h-2z"/><path d="m7 28h2v1h-2z"/><path d="m10 26h2v1h-2z"/><path d="m10 28h2v1h-2z"/></g><path d="m25 26h3v3h-3z" fill="#219555"/><circle cx="14.5" cy="27.5" fill="#333" r="1.5"/><circle cx="18.5" cy="27.5" fill="#333" r="1.5"/><circle cx="22.5" cy="27.5" fill="#333" r="1.5"/><path d="m28 6c0-.53-.211-1.039-.586-1.414s-.884-.586-1.414-.586c-4.52 0-15.48 0-20 0-.53 0-1.039.211-1.414.586s-.586.884-.586 1.414v14c0 .53.211 1.039.586 1.414s.884.586 1.414.586h20c.53 0 1.039-.211 1.414-.586s.586-.884.586-1.414c0-3.463 0-10.537 0-14z" fill="#2243fd"/><path d="m17 18h6v2h-6z" fill="#fff"/><path d="m24 18h2v2h-2z" fill="#fff"/></g></svg>