I made a services page, need to split this into its own subpage of projects page.

src/info/components/footer-card.js

@@ -5,7 +5,7 @@ export default function FooterCard() {
   return (
     <WCard>
       <footer className="p-4 space-y-2">
-        <div className="container flex text-werefox-blue-darker dark:text-werefox-blue">
+        <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">

src/info/components/identity-button.js

@@ -14,7 +14,7 @@ export default function IdentityButton({
       <Link href={url}>
         <a
           target=""
-          className={`${extraClasses} block ring-2 ring-werefox-grey-lightest 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`}
+          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) => (
             <span

src/info/components/identity-card.js

@@ -14,7 +14,7 @@ export default function IdentityCard({
   if (children) {
     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">
+        <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} />
@@ -28,7 +28,7 @@ export default function IdentityCard({
   } else 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">
+        <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} />
@@ -36,7 +36,7 @@ export default function IdentityCard({
             {title}
           </h4>
         </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">
+        <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">
             {Object.keys(info).map((i) => (
               <p className="pb-4" key={i}>
@@ -45,7 +45,7 @@ export default function IdentityCard({
             ))}
           </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">
+        <div className="rounded-lg ring-2 ring-werefox-grey 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
@@ -64,7 +64,7 @@ export default function IdentityCard({
   } 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">
+        <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">
               <Image src={src} layout="fill" objectFit="contain" alt={alt} />
@@ -72,7 +72,7 @@ export default function IdentityCard({
             {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">
+        <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">
             {Object.keys(info).map((i) => (
               <p className="pb-4" key={i}>

src/info/components/love-card.js

@@ -17,14 +17,14 @@ export function renderPossibleURLField(field) {
   if (validURL(field)) {
     return (
       <Link href={field}>
-        <a className="p-2 text-center overflow-clip overflow-auto ring-2 ring-werefox-grey-light dark:ring-werefox-grey-darker rounded-lg bg-werefox-grey-lighter dark:bg-werefox-grey-dark hover:text-werefox-blue-dark dark:hover:text-werefox-blue">
+        <a className="p-2 text-center overflow-clip overflow-auto ring-2 ring-werefox-grey dark:ring-werefox-grey-darker rounded-lg bg-werefox-grey-lighter dark:bg-werefox-grey-dark hover:text-werefox-blue-dark dark:hover:text-werefox-blue">
           {field}
         </a>
       </Link>
     );
   } else {
     return (
-      <p className="p-2 text-center overflow-clip overflow-auto ring-2 ring-werefox-grey-light dark:ring-werefox-grey-darker rounded-lg bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
+      <p className="p-2 text-center overflow-clip overflow-auto ring-2 ring-werefox-grey dark:ring-werefox-grey-darker rounded-lg bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
         {field}
       </p>
     );
@@ -39,7 +39,7 @@ export default function LoveCard({ src, alt, url, fields, bio, user }) {
       : "text-werefox-pink-dark dark:text-werefox-pink";
 
   return (
-    <div className="rounded-lg min-w-full flex ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
+    <div className="rounded-lg min-w-full flex ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
       <Link href={url}>
         <a>
           <div className="flex-1 pt-4 pb-4 pl-4">
@@ -54,7 +54,7 @@ export default function LoveCard({ src, alt, url, fields, bio, user }) {
       </Link>{" "}
       <div className={`flex-5 p-4 sm:text-sm text-xs text-center ${isMe}`}>
         <div className="grid grid-cols-1 gap-2">
-          <div className="ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker rounded-lg p-2 grid grid-cols-2 grid-rows-1 gap-2 bg-werefox-grey-light dark:bg-werefox-grey">
+          <div className="ring-2 ring-werefox-grey dark:ring-werefox-grey-darker rounded-lg p-2 grid grid-cols-2 grid-rows-1 gap-2 bg-werefox-grey-light dark:bg-werefox-grey">
             {Object.keys(fields).map((field) => (
               <>
                 {renderPossibleURLField(field)}
@@ -62,7 +62,7 @@ export default function LoveCard({ src, alt, url, fields, bio, user }) {
               </>
             ))}
           </div>
-          <div className="ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker rounded-lg p-2 bg-werefox-grey-light dark:bg-werefox-grey">
+          <div className="ring-2 ring-werefox-grey dark:ring-werefox-grey-darker rounded-lg p-2 bg-werefox-grey-light dark:bg-werefox-grey">
             <p className="overflow-auto">
               {bio}
               <br />

src/info/components/project-block.js

@@ -0,0 +1,27 @@
+import PCard from "./project-card";
+
+export default function ProjectBlock({ 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">
+        <p className="sm:text-xl text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
+          {title}
+        </p>
+      </div>
+      <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">
+        <ul className="space-y-3 w-full text-werefox-blue-dark dark:text-werefox-blue">
+          {Object.keys(cards).map((card) => (
+            <PCard
+              key={card}
+              title={cards[card].title}
+              url={cards[card].url}
+              src={cards[card].src}
+              alt={cards[card].alt}
+              description={cards[card].description}
+            />
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}

src/info/components/project-card.js

@@ -0,0 +1,33 @@
+import Link from "next/link";
+import Image from "next/image";
+
+export default function projectCard({ title, url, src, alt, description }) {
+  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">
+                <span className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top">
+                  <Image
+                    src={src}
+                    layout="fill"
+                    objectFit="contain"
+                    alt={alt}
+                  />
+                </span>{" "}
+                {title}
+              </a>
+            </Link>
+          </div>
+        </div>
+        <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">
+          <p className="text-md text-center text-werefox-blue-dark dark:text-werefox-blue">
+            {description}
+          </p>
+        </div>
+      </div>
+    </li>
+  );
+}

src/info/components/testimonial-card.js

@@ -12,7 +12,7 @@ export default function TestimonialCard({ src, alt, url, innerText, user }) {
       : "hover:text-werefox-blue-dark dark:hover:text-werefox-blue";
 
   return (
-    <div className="rounded-lg min-w-full flex overflow-hidden ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
+    <div className="rounded-lg min-w-full flex overflow-hidden ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
       <Link href={url}>
         <a>
           <div className="flex-1 pt-4 pb-4 pl-4">

src/info/components/werefox-card.js

@@ -13,29 +13,28 @@ export default function WerefoxCard({
   const images = Array(imageObj).flat();
   if (isTitle) {
     return (
-      <header className="rounded-lg container ring-4 ring-werefox-blue bg-werefox-grey-light dark:bg-werefox-grey">
+      <header className="rounded-lg ring-4 ring-werefox-blue bg-werefox-grey-light dark:bg-werefox-grey">
         {children}
       </header>
     );
   } else if (isCardButton) {
     return (
-      <div className="container">
+      <div className="">
         <Link href={url}>
           <a
-            className={`${extraClasses} p-2 block ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker rounded-lg text-lg text-center text-werefox-grey dark:text-werefox-grey-dark bg-werefox-grey-lighter dark:bg-werefox-grey-lightest transition hover:bg-werefox-grey-lightest dark:hover:bg-werefox-grey-light`}
+            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`}
           >
             {images.map((source) => (
               <span
                 key={source.src}
-                className="relative inline-block w-6 h-6 align-middle mb-1"
+                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}
@@ -45,7 +44,7 @@ export default function WerefoxCard({
     );
   }
   return (
-    <div className="rounded-lg container ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
+    <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/pages/contacts/index.js

@@ -10,12 +10,12 @@ export default function Contacts() {
     >
       <WCard>
         <div className="p-2 space-y-2">
-          <div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
+          <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">
               You can find me in quite a few places!
             </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">
+          <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">

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

@@ -50,7 +50,7 @@ export default function Partners() {
             src="/emoji/blue_heart.svg"
             alt="Blue heart emoji"
           >
-            <div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey dark:bg-werefox-grey-dark">
+            <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-6 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
                 Oh! It looks like I don't have any partners at the moment.
                 <br />

src/info/pages/index.js

@@ -11,17 +11,17 @@ export default function Home() {
     >
       <WCard>
         <div className="p-2 space-y-2">
-          <div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
+          <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 gap-2">
+          <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=""
+              extraClasses="pointer-events-none"
               imageObj={{ src: "/emoji/18_plus.svg", alt: "Over 18" }}
               innerText="26"
-              url="/contacts"
+              url=""
             />
             <IDButton
               extraClasses="xl:pt-1 xl:align-text-bottom xl:text-sm xl:min-h-full"
@@ -112,19 +112,19 @@ export default function Home() {
       </WCard>
       <WCard>
         <div className="p-2 space-y-2">
-          <div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
+          <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-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
+          <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
               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
+              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">
@@ -139,20 +139,20 @@ export default function Home() {
       </WCard>
       <WCard>
         <div className="p-2 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">
+          <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">
-              Useful Pages! (hopefully!)
+              Neat Pages!
             </p>
           </div>
           <WCard
             isCardButton="true"
             extraClasses=""
             imageObj={{
-              src: "/emoji/trans_heart.png",
+              src: "/emoji/crt_prompt.svg",
-              alt: "Transgender heart",
+              alt: "CRT prompt emoji",
             }}
-            innerText="HRT Tracker!"
+            innerText="Stuff I do!"
-            url="/hrt"
+            url="/projects"
           />
           <WCard
             isCardButton="true"
@@ -164,6 +164,16 @@ export default function Home() {
             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=""

src/info/pages/projects/index.js

@@ -0,0 +1,74 @@
+import BasicPage from "../../components/basic-page-template";
+import WCard from "../../components/werefox-card";
+import PBlock from "../../components/project-block";
+
+const CARDS = {
+  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!">
+      <WCard>
+        <PBlock title="Services" cards={CARDS} />
+      </WCard>
+    </BasicPage>
+  );
+}

src/info/pages/support/index.js

@@ -18,7 +18,7 @@ export default function Support() {
           <div className="w-full justify-center flex">
             <Link href="https://www.patreon.com/bePatron?u=16333959">
               <a target="_blank">
-                <p className="rounded-lg pt-2 pb-2 pl-4 pr-4 w-full w-max-60 ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker text-lg text-center text-werefox-grey-darker dark:text-werefox-grey-lightest bg-werefox-blue dark:bg-werefox-blue-dark transition hover:bg-werefox-blue-light dark:hover:bg-werefox-blue-darker">
+                <p className="rounded-lg pt-2 pb-2 pl-4 pr-4 w-full w-max-60 ring-2 ring-werefox-grey dark:ring-werefox-grey-darker text-lg text-center text-werefox-grey-darker dark:text-werefox-grey-lightest bg-werefox-blue dark:bg-werefox-blue-dark transition hover:bg-werefox-blue-light dark:hover:bg-werefox-blue-darker">
                   <span>
                     <img
                       alt="Subscribe to Alexis' Patreon"
@@ -34,7 +34,7 @@ export default function Support() {
           <div className="w-full justify-center flex">
             <Link href="https://ko-fi.com/O5O61UAY1">
               <a target="_blank">
-                <p className="rounded-lg pt-2 pb-2 pl-4 pr-4 w-full w-max-60 ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker text-lg text-center text-werefox-grey-darker dark:text-werefox-grey-lightest bg-werefox-blue dark:bg-werefox-blue-dark transition hover:bg-werefox-blue-light dark:hover:bg-werefox-blue-darker">
+                <p className="rounded-lg pt-2 pb-2 pl-4 pr-4 w-full w-max-60 ring-2 ring-werefox-grey dark:ring-werefox-grey-darker text-lg text-center text-werefox-grey-darker dark:text-werefox-grey-lightest bg-werefox-blue dark:bg-werefox-blue-dark transition hover:bg-werefox-blue-light dark:hover:bg-werefox-blue-darker">
                   <span>
                     <img
                       alt="Buy Alexis a Coffee"
@@ -48,10 +48,10 @@ export default function Support() {
             </Link>
           </div>
           <div className="w-full justify-center flex">
-            <Link href="https://liberapay.com/shadow8t4/donate">
+            <Link href="https://liberapay.com/alexis_werefox/donate">
               <a
                 target="_blank"
-                className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker"
+                className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker"
               >
                 <img
                   alt="Donate using Liberapay"
@@ -63,11 +63,11 @@ export default function Support() {
           </div>
           <div className="pb-6 flex justify-center">
             <details className="rounded-lg p-1 overflow-auto">
-              <summary className="p-2 pl-4 pr-4 rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker text-md text-center text-werefox-grey-darker dark:text-werefox-grey-lighter bg-werefox-blue dark:bg-werefox-blue-dark transition hover:bg-werefox-blue-light dark:hover:bg-werefox-blue-darker">
+              <summary className="p-2 pl-4 pr-4 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker text-md text-center text-werefox-grey-darker dark:text-werefox-grey-lighter bg-werefox-blue dark:bg-werefox-blue-dark transition hover:bg-werefox-blue-light dark:hover:bg-werefox-blue-darker">
                 <strong>Open/Close Ko-fi Donation Widget</strong>
               </summary>
               <div className="pt-2">
-                <div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker overflow-auto">
+                <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker overflow-auto">
                   <Iframe
                     className="rounded-lg w-96 min-w-96"
                     url="https://ko-fi.com/alexis_werefox/?hidefeed=true&widget=true&embed=true&preview=true"

src/info/public/emoji/element_logo.svg

@@ -0,0 +1,6 @@
+<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M414 204C414 180.804 432.804 162 456 162C610.64 162 736 287.36 736 442C736 465.196 717.196 484 694 484C670.804 484 652 465.196 652 442C652 333.752 564.248 246 456 246C432.804 246 414 227.196 414 204Z" fill="#0DBD8B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M610 820C610 843.196 591.196 862 568 862C413.36 862 288 736.64 288 582C288 558.804 306.804 540 330 540C353.196 540 372 558.804 372 582C372 690.248 459.752 778 568 778C591.196 778 610 796.804 610 820Z" fill="#0DBD8B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M204 610C180.804 610 162 591.196 162 568C162 413.36 287.36 288 442 288C465.196 288 484 306.804 484 330C484 353.196 465.196 372 442 372C333.752 372 246 459.752 246 568C246 591.196 227.196 610 204 610Z" fill="#0DBD8B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M820 414C843.196 414 862 432.804 862 456C862 610.64 736.64 736 582 736C558.804 736 540 717.196 540 694C540 670.804 558.804 652 582 652C690.248 652 778 564.248 778 456C778 432.804 796.804 414 820 414Z" fill="#0DBD8B"/>
+</svg>

src/info/public/emoji/gitea_logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" style="enable-background:new 0 0 640 640" xml:space="preserve" width="32" height="32"><path style="fill:#fff" d="m395.9 484.2-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5 21.2-17.9 33.8-11.8 17.2 8.3 27.1 13 27.1 13l-.1-109.2 16.7-.1.1 117.1s57.4 24.2 83.1 40.1c3.7 2.3 10.2 6.8 12.9 14.4 2.1 6.1 2 13.1-1 19.3l-61 126.9c-6.2 12.7-21.4 18.1-33.9 12z"/><path style="fill:#609926" d="M622.7 149.8c-4.1-4.1-9.6-4-9.6-4s-117.2 6.6-177.9 8c-13.3.3-26.5.6-39.6.7v117.2c-5.5-2.6-11.1-5.3-16.6-7.9 0-36.4-.1-109.2-.1-109.2-29 .4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5c-9.8-.6-22.5-2.1-39 1.5-8.7 1.8-33.5 7.4-53.8 26.9C-4.9 212.4 6.6 276.2 8 285.8c1.7 11.7 6.9 44.2 31.7 72.5 45.8 56.1 144.4 54.8 144.4 54.8s12.1 28.9 30.6 55.5c25 33.1 50.7 58.9 75.7 62 63 0 188.9-.1 188.9-.1s12 .1 28.3-10.3c14-8.5 26.5-23.4 26.5-23.4S547 483 565 451.5c5.5-9.7 10.1-19.1 14.1-28 0 0 55.2-117.1 55.2-231.1-1.1-34.5-9.6-40.6-11.6-42.6zM125.6 353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6 321.8 60 295.4c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5 38.5-30c13.8-3.7 31-3.1 31-3.1s7.1 59.4 15.7 94.2c7.2 29.2 24.8 77.7 24.8 77.7s-26.1-3.1-43-9.1zm300.3 107.6s-6.1 14.5-19.6 15.4c-5.8.4-10.3-1.2-10.3-1.2s-.3-.1-5.3-2.1l-112.9-55s-10.9-5.7-12.8-15.6c-2.2-8.1 2.7-18.1 2.7-18.1L322 273s4.8-9.7 12.2-13c.6-.3 2.3-1 4.5-1.5 8.1-2.1 18 2.8 18 2.8L467.4 315s12.6 5.7 15.3 16.2c1.9 7.4-.5 14-1.8 17.2-6.3 15.4-55 113.1-55 113.1z"/><path style="fill:#609926" d="M326.8 380.1c-8.2.1-15.4 5.8-17.3 13.8-1.9 8 2 16.3 9.1 20 7.7 4 17.5 1.8 22.7-5.4 5.1-7.1 4.3-16.9-1.8-23.1l24-49.1c1.5.1 3.7.2 6.2-.5 4.1-.9 7.1-3.6 7.1-3.6 4.2 1.8 8.6 3.8 13.2 6.1 4.8 2.4 9.3 4.9 13.4 7.3.9.5 1.8 1.1 2.8 1.9 1.6 1.3 3.4 3.1 4.7 5.5 1.9 5.5-1.9 14.9-1.9 14.9-2.3 7.6-18.4 40.6-18.4 40.6-8.1-.2-15.3 5-17.7 12.5-2.6 8.1 1.1 17.3 8.9 21.3 7.8 4 17.4 1.7 22.5-5.3 5-6.8 4.6-16.3-1.1-22.6 1.9-3.7 3.7-7.4 5.6-11.3 5-10.4 13.5-30.4 13.5-30.4.9-1.7 5.7-10.3 2.7-21.3-2.5-11.4-12.6-16.7-12.6-16.7-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3 4.7-9.7 9.4-19.3 14.1-29-4.1-2-8.1-4-12.2-6.1-4.8 9.8-9.7 19.7-14.5 29.5-6.7-.1-12.9 3.5-16.1 9.4-3.4 6.3-2.7 14.1 1.9 19.8l-24.6 50.4z"/></svg>

src/info/public/emoji/matrix_logo.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="75px" height="32px" viewBox="0 0 75 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55 (78076) - https://sketchapp.com -->
+    <title>matrix logo white</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="matrix-logo-white" fill="#FFFFFF" fill-rule="nonzero">
+            <polygon id="Path" points="0.936314791 0.73220178 0.936314791 31.2495668 3.12942478 31.2495668 3.12942478 31.9817685 0.094721871 31.9817685 0.094721871 9.49554896e-05 3.12942478 9.49554896e-05 3.12942478 0.73220178"/>
+            <path d="M9.38571429,10.4066469 L9.38571429,11.951003 L9.42961441,11.951003 C9.8409292,11.3631335 10.3363464,10.9066825 10.9167193,10.5830742 C11.496713,10.2600356 12.1615676,10.0978516 12.9104298,10.0978516 C13.6298989,10.0978516 14.287263,10.237911 14.8819532,10.5170801 C15.4768331,10.796724 15.9285398,11.2891632 16.2369785,11.9952522 C16.5745259,11.4953116 17.0334387,11.0539585 17.6138116,10.6715727 C18.1938053,10.2893769 18.8803729,10.0978516 19.6736094,10.0978516 C20.2757901,10.0978516 20.8335967,10.1715371 21.3480721,10.3186231 C21.8617889,10.4657092 22.302402,10.7010089 22.6696271,11.0245223 C23.0364728,11.3483205 23.3228192,11.7711573 23.5288559,12.2928427 C23.7343236,12.8154777 23.8372946,13.4438932 23.8372946,14.1795134 L23.8372946,21.8126053 L20.7089128,21.8125104 L20.7089128,15.3485104 C20.7089128,14.9663145 20.694311,14.6059585 20.664823,14.2674421 C20.6351454,13.9294006 20.5547408,13.6354184 20.4225664,13.3850208 C20.2902971,13.1351929 20.0954488,12.936451 19.83878,12.78927 C19.581732,12.6427537 19.2328066,12.5687834 18.7922882,12.5687834 C18.3517699,12.5687834 17.9955436,12.6538635 17.723799,12.8224095 C17.4518647,12.9918101 17.2390961,13.2125816 17.085019,13.4843442 C16.930847,13.7567715 16.8279709,14.0654718 16.7766751,14.4112997 C16.725,14.7567478 16.6994943,15.106184 16.6994943,15.4591335 L16.6994943,21.8126053 L13.571397,21.8126053 L13.571397,15.4149792 C13.571397,15.0767478 13.5637168,14.7420297 13.5495891,14.4112997 C13.5346081,14.0801899 13.4724083,13.7750979 13.3620417,13.495454 C13.2518647,13.2162849 13.0682048,12.9918101 12.8112516,12.8224095 C12.5542035,12.6538635 12.1760746,12.5687834 11.6767699,12.5687834 C11.5297092,12.5687834 11.3351454,12.6019228 11.0930784,12.6682967 C10.8507269,12.7344807 10.6155815,12.859727 10.3881163,13.043276 C10.160177,13.2272997 9.96580278,13.4920356 9.80423515,13.8373887 C9.64257269,14.1832166 9.56188369,14.6352047 9.56188369,15.1940178 L9.56188369,21.8125104 L6.43388116,21.8126053 L6.43388116,10.4066469 L9.38571429,10.4066469 Z" id="Path"/>
+            <path d="M25.8417193,12.0835608 C26.1645702,11.5980534 26.5759798,11.208546 27.0754741,10.914089 C27.5745891,10.6200119 28.1360936,10.4105401 28.7604614,10.2853887 C29.3845449,10.1605223 30.0125158,10.0977567 30.6439949,10.0977567 C31.2168774,10.0977567 31.7967762,10.1383976 32.3842604,10.2190148 C32.9716498,10.3002018 33.5078382,10.4584926 33.9925411,10.6935074 C34.4771492,10.9287122 34.8735777,11.2562136 35.1821113,11.6751573 C35.4905499,12.0942908 35.6447219,12.6495905 35.6447219,13.3409614 L35.6447219,19.2751098 C35.6447219,19.7905282 35.674115,20.2826825 35.7329962,20.7532819 C35.7913085,21.2241662 35.8942794,21.5771157 36.0412453,21.8123205 L32.869153,21.8123205 C32.8102718,21.6357033 32.7623894,21.4557626 32.725885,21.2717389 C32.6889064,21.0881899 32.6632111,20.9006528 32.648799,20.7093175 C32.1493995,21.2241662 31.5617257,21.5845223 30.8866308,21.7904807 C30.2108723,21.9958694 29.5206068,22.099181 28.8156448,22.099181 C28.2720607,22.099181 27.7653603,22.0329021 27.2954488,21.900724 C26.8253477,21.7682611 26.4143173,21.5624926 26.0618837,21.2825638 C25.7093552,21.0035846 25.4340076,20.6505401 25.2357459,20.224095 C25.0374842,19.7976499 24.9382111,19.2897329 24.9382111,18.7016736 C24.9382111,18.0547418 25.0518963,17.5213769 25.2799305,17.1026231 C25.5073957,16.6832047 25.8009482,16.3487715 26.1612516,16.0984688 C26.5208913,15.848546 26.9320164,15.6610089 27.3948167,15.5360475 C27.8573325,15.411181 28.3235461,15.3121424 28.7935525,15.2381721 C29.2635588,15.1648665 29.7260746,15.1058991 30.1814791,15.0618398 C30.6366941,15.0175905 31.040708,14.9513116 31.3931416,14.8630979 C31.74567,14.7748843 32.0244311,14.6464095 32.2302781,14.4771039 C32.4355563,14.3079881 32.5310367,14.0616736 32.5166245,13.7378754 C32.5166245,13.3998338 32.4616308,13.1312047 32.3514539,12.9327478 C32.2413717,12.7342908 32.0944058,12.5796083 31.9109355,12.469365 C31.7272756,12.3591217 31.5143173,12.2855312 31.2721555,12.2485935 C31.0297092,12.2123205 30.7687737,12.1935193 30.4901075,12.1935193 C29.8732301,12.1935193 29.388622,12.3259822 29.0360936,12.5907181 C28.6837547,12.855454 28.4777181,13.2969021 28.4192162,13.9143976 L25.2911188,13.9143976 C25.3349241,13.1792522 25.5182048,12.5685935 25.8417193,12.0835608 Z M32.0208281,16.5068724 C31.8226612,16.5729614 31.6096081,16.6279407 31.3821429,16.6721899 C31.1543932,16.7163442 30.9158344,16.7531869 30.666182,16.7824332 C30.4163401,16.8121543 30.1666877,16.8487122 29.917225,16.8928665 C29.6820796,16.9366409 29.4508217,16.9959881 29.2234513,17.0691988 C28.995512,17.1431691 28.7972503,17.2422077 28.6285714,17.3671691 C28.4594185,17.4922255 28.323641,17.6506113 28.2208597,17.8413769 C28.1179836,18.0326172 28.0666877,18.2754184 28.0666877,18.5694955 C28.0666877,18.8486647 28.1179836,19.0843442 28.2208597,19.2751098 C28.323641,19.466635 28.4634008,19.6173294 28.6395702,19.7275727 C28.8157396,19.837816 29.0212073,19.9152047 29.2565424,19.9590742 C29.4912137,20.0033234 29.7335651,20.0253531 29.9833123,20.0253531 C30.6000948,20.0253531 31.0772124,19.9226113 31.4153287,19.7164629 C31.7529709,19.5107893 32.0024336,19.2642849 32.1642857,18.9772344 C32.3256637,18.6905638 32.4249368,18.4006647 32.4617257,18.1061128 C32.4981353,17.8120356 32.5167193,17.5766409 32.5167193,17.4002136 L32.5167193,16.2307418 C32.3843552,16.3487715 32.2191846,16.4405935 32.0208281,16.5068724 Z" id="Shape"/>
+            <path d="M43.8835335,10.4066469 L43.8835335,12.5025045 L41.5926675,12.5025045 L41.5926675,18.150362 C41.5926675,18.679549 41.6806574,19.0326884 41.8570164,19.2090208 C42.0329962,19.385543 42.3857143,19.4737567 42.9144121,19.4737567 C43.0906764,19.4737567 43.2593552,19.4665401 43.4210177,19.451727 C43.5824905,19.4372938 43.7367573,19.4148843 43.8835335,19.385638 L43.8835335,21.8124154 C43.6191846,21.8565697 43.3253477,21.885816 43.002402,21.900819 C42.6793616,21.9149674 42.363622,21.9226588 42.0551833,21.9226588 C41.5705752,21.9226588 41.1114728,21.8894243 40.6783502,21.8231454 C40.2449431,21.7571513 39.8632111,21.6287715 39.5328698,21.4373412 C39.2023388,21.2463858 38.9415929,20.9739585 38.7508217,20.6210089 C38.5596713,20.2683442 38.4643805,19.8048665 38.4643805,19.2309555 L38.4643805,12.5025045 L36.5699431,12.5025045 L36.5699431,10.4066469 L38.4643805,10.4066469 L38.4643805,6.98710979 L41.5925727,6.98710979 L41.5925727,10.4066469 L43.8835335,10.4066469 Z" id="Path"/>
+            <path d="M48.3553729,10.4066469 L48.3553729,12.5246291 L48.3994627,12.5246291 C48.5460493,12.1713947 48.7442162,11.8444629 48.994153,11.5426944 C49.2439001,11.2414955 49.5300569,10.9838813 49.8531922,10.7706113 C50.176043,10.5577211 50.5213654,10.3922136 50.8888748,10.274184 C51.2556258,10.156724 51.637737,10.0976617 52.0343552,10.0976617 C52.2399178,10.0976617 52.4672882,10.1346944 52.717225,10.208095 L52.717225,13.1203798 C52.5701643,13.0907537 52.3939001,13.0649258 52.1885272,13.0430861 C51.982775,13.0209614 51.7846081,13.0098516 51.5936473,13.0098516 C51.0208597,13.0098516 50.5362516,13.1057567 50.1399178,13.2967122 C49.7433944,13.4879525 49.4240518,13.7487953 49.1816056,14.0798101 C48.9393489,14.4109199 48.7664033,14.796724 48.6637168,15.2380772 C48.5610303,15.6791454 48.5096397,16.1574362 48.5096397,16.672095 L48.5096397,21.8123205 L45.3815424,21.8123205 L45.3815424,10.4066469 L48.3553729,10.4066469 Z" id="Path"/>
+            <path d="M54.0388748,8.64161424 L54.0388748,6.06043917 L57.1672566,6.06043917 L57.1672566,8.64161424 L54.0388748,8.64161424 Z M57.1672566,10.4066469 L57.1672566,21.8124154 L54.0388748,21.8124154 L54.0388748,10.4066469 L57.1672566,10.4066469 Z" id="Shape"/>
+            <polygon id="Path" points="58.7972503 10.4066469 62.365866 10.4066469 64.37067 13.3849258 66.3533818 10.4066469 69.8119153 10.4066469 66.0670354 15.7456142 70.2747155 21.8125104 66.7058154 21.8125104 64.3265803 18.216546 61.9472503 21.8125104 58.4449115 21.8125104 62.542225 15.8119881"/>
+            <polygon id="Path" points="74.0938369 31.2495668 74.0938369 0.73220178 71.9007269 0.73220178 71.9007269 9.49554896e-05 74.9356195 9.49554896e-05 74.9356195 31.9817685 71.9007269 31.9817685 71.9007269 31.2495668"/>
+        </g>
+    </g>
+</svg>

src/info/public/emoji/peertube_logo.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="2799 -911 16 22">
+  <defs/>
+  <g data-name="Artboard – 1">
+    <g data-name="Symbol 3 – 1">
+      <g data-name="Group 44">
+        <path fill="#211f20" d="M2799-911v11l8-5" data-name="Path 4"/>
+        <path fill="#737373" d="M2799-900v11l8-6" data-name="Path 5"/>
+        <path fill="#f1680d" d="M2807-905v10l8-5" data-name="Path 6"/>
+        <path fill="transparent" d="M2807-895v-10l-8 5z" data-name="Path 7"/>
+      </g>
+    </g>
+  </g>
+</svg>

src/info/public/emoji/pinafore_logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10000 10000"><path fill="#4169e1" d="M0 0h10000v10000H0z"/><path fill="#fff" d="M9212 5993H5987V823c1053 667 2747 2177 3225 5170zM3100 2690A12240 12240 0 01939 6035h2161zm676 7210h2448a3067 3067 0 003067-3067H5052V627a527 527 0 00-1052 0v6206H709a3067 3067 0 003067 3067z"/></svg>

src/info/tailwind.config.js

@@ -37,9 +37,15 @@ module.exports = {
           "0%, 100%": { transform: "rotate(-1deg)" },
           "50%": { transform: "rotate(1deg)" },
         },
+        jiggle: {
+          "0%, 100%": { transform: "rotate(0deg)" },
+          "25%": { transform: "rotate(-10deg)" },
+          "75%": { transform: "rotate(10deg)" },
+        },
       },
       animation: {
         wiggle: "wiggle 7s ease-in-out infinite",
+        jiggle: "jiggle 5s cubic-bezier(0.75,0.25,0.25,0.75) infinite",
       },
     },
   },