New page, new me/us.

src/app/iszac/page.tsx

@@ -0,0 +1,217 @@
+/* eslint-disable react/jsx-no-comment-textnodes */
+/* eslint-disable react/no-unescaped-entities */
+"use client";
+import AccessibilityBox from "@/components/AccssibilityBox/AccessibilityBox";
+import Floaty from "@/components/Floaty/Floaty";
+import Footer from "@/components/Footer/Footer";
+import Page from "@/components/Page/Page";
+import ScrollBackInd from "@/components/ScrollBackInd/ScrollBackInd";
+import SpeedDial from "@/components/SpeedDial/SpeedDial";
+import { Color3 } from "@/utility/color";
+import { useEffect, useRef, useState } from "react";
+
+export default function Home() {
+  const [page, setPage] = useState(0);
+  const body = useRef<HTMLDivElement>(null);
+
+  // TIME
+  const dateObj = new Date();
+  const [time, setTime] = useState("00:00:00 PM");
+  const [date, setDate] = useState("0/0/0000");
+  let animFrame = useRef(0);
+
+  // hot reloading memory saver
+  useEffect(() => {
+    window.cancelAnimationFrame(animFrame.current);
+  }, []);
+  useEffect(() => {
+    function setTheTime() {
+      dateObj.setTime(Date.now());
+      setTime(
+        dateObj.toLocaleTimeString("en-US", {
+          minute: "2-digit",
+          hour: "2-digit",
+          timeZone: "America/Chicago",
+        })
+      );
+      setDate(
+        dateObj.toLocaleDateString("en-US", {
+          weekday: "long",
+          day: "2-digit",
+          month: "long",
+          timeZone: "America/Chicago",
+        })
+      );
+      animFrame.current = window.requestAnimationFrame(setTheTime);
+    }
+    animFrame.current = window.requestAnimationFrame(setTheTime);
+  }, []);
+
+  return (
+    <div
+      className="body"
+      ref={body}
+      onScroll={(e) => {
+        const target = e.target as HTMLDivElement;
+        const curPage = Math.round(target.scrollTop / target.clientHeight);
+        if (curPage != page) setPage(curPage);
+      }}
+    >
+      <ScrollBackInd hide={page <= 0} scroll={body.current} time={time} />
+      <Page color={Color3.fromHex("FF4000")} cut>
+        <h1>
+          Who's Theo?&nbsp;
+          <p className="chip">he/him</p>
+        </h1>
+        <p>
+          Well, that's a hard question to answer. Some would say that Theo is
+          the me that's always been here.
+        </p>
+        <p>
+          We do know that Theo primarily sits in front, only ever leaving when
+          he needs some time to figure things out.
+        </p>
+        <p>
+          He's a proud sysadmin, taking care of the technological side of things
+          when he can.
+        </p>
+        <AccessibilityBox />
+        <Floaty>
+          <img src="/whoami/theo_4x.png"></img>
+        </Floaty>
+      </Page>
+      <Page color={Color3.fromHex("00c0FF")} cut>
+        <h1>
+          Who's Iszac?&nbsp;
+          <p className="chip">he/they/it</p>
+        </h1>
+        <p>
+          Ice cream, cotton candy, any brightly-coloured sweet treat would
+          describe him quite well.
+        </p>
+        <p>
+          Sometimes we describe him as my true autistic self, one unregulated by
+          the bounds of what is "cringe" in my head, but we're also still not
+          sure yet.
+        </p>
+        <p>
+          Iszac is the identity that fills in when Theo feels disconnected from
+          his own identity.
+        </p>
+        <p>
+          He's more creative, not too interested in sysadmining but more
+          interested in expressing himself with whatever means necessary.
+        </p>
+        <Floaty>
+          <img src="/whoami/iszac_4x.png"></img>
+        </Floaty>
+      </Page>
+      <Page color={Color3.fromHex("FFFFFF")} cut>
+        <h1>
+          Who do you make up?
+          <p className="chip">plural they</p>
+          <p className="chip">he/him</p>
+        </h1>
+        <p>
+          We think it would be wrong to call us a <strong>system</strong>,
+          especially because that's not really how we feel.
+        </p>
+        <p>
+          We're just one person, 2 identities, that aren't too different from
+          each other. We make up MeowcaTheoRange!
+        </p>
+      </Page>
+      <Page color={Color3.fromHex("c0c0c0")}>
+        <h1>What accounts do you run?</h1>
+        <p>Let's see...</p>
+        <h2>Iszac runs</h2>
+        <SpeedDial
+          services={[
+            {
+              name: "iszac.abtmtr.link on Discord",
+            },
+            {
+              name: "@mtr@local.abtmtr.link",
+              url: "https://local.abtmtr.link/mtr",
+            },
+            {
+              name: "@stories@blog.abtmtr.link",
+              url: "https://blog.abtmtr.link/stories",
+            },
+            {
+              name: "MeowcaTheoRange on mspfa.com",
+              url: "https://mspfa.com/user/?u=109014333296332953331",
+            },
+            {
+              name: "ko-fi.com/meowcatheorange",
+              url: "https://ko-fi.com/meowcatheorange",
+            },
+          ]}
+        />
+        <h2>Theo runs</h2>
+        <SpeedDial
+          services={[
+            {
+              name: "abtmtr.link on Discord",
+            },
+            {
+              name: "@meowcatheorange@moth.zone",
+              url: "https://moth.zone/meowcatheorange",
+            },
+            {
+              name: "@mtr@blog.abtmtr.link",
+              url: "https://blog.abtmtr.link/mtr",
+            },
+            {
+              name: "github.com/MeowcaTheoRange",
+              url: "https://github.com/MeowcaTheoRange",
+            },
+            {
+              name: "beta.trollcall.xyz",
+              url: "https://beta.trollcall.xyz/",
+            },
+            {
+              name: "Our home server",
+            },
+          ]}
+        />
+        <h2>We both run...</h2>
+        <SpeedDial
+          services={[
+            {
+              name: "abtmtr.link",
+              url: "https://abtmtr.link/",
+            },
+            {
+              name: "me@abtmtr.link",
+              url: "mailto:me@abtmtr.link",
+            },
+            {
+              name: "@ro@translunar.academy",
+              url: "https://social.translunar.academy/ro",
+            },
+            {
+              name: "@mtr@img.abtmtr.link",
+              url: "https://img.abtmtr.link/",
+            },
+            {
+              name: "MeowcaTheoRange on beta.trollcall.xyz",
+              url: "https://beta.trollcall.xyz/clan/meowcatheorange",
+            },
+          ]}
+        />
+        <p>
+          This should be a reliable enough index of where we are and what we do.
+        </p>
+        <p>
+          <strong>
+            Also, if any accounts aren't listed here and don't link back to
+            abtmtr.link, it's most likely not us or inactive!
+          </strong>
+        </p>
+      </Page>
+      <Page color={Color3.fromHex("000000")}></Page>
+      <Footer />
+    </div>
+  );
+}

src/app/page.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable react/jsx-no-comment-textnodes */
 /* eslint-disable react/no-unescaped-entities */
 "use client";
+import AccessibilityBox from "@/components/AccssibilityBox/AccessibilityBox";
 import ColourChip from "@/components/ColourChip/ColourChip";
-import Eighty from "@/components/Eighty/Eighty";
 import Floaty from "@/components/Floaty/Floaty";
+import Footer from "@/components/Footer/Footer";
 import Page from "@/components/Page/Page";
 import ProjectList, { Project } from "@/components/ProjectList/ProjectList";
 import ScrollBackInd from "@/components/ScrollBackInd/ScrollBackInd";
@@ -185,12 +186,11 @@ export default function Home() {
     >
       <ScrollBackInd
         hide={page <= 0}
-        scroll={body.current}
         player={player}
         time={time}
+        scroll={body.current}
       />
       <Page
-        scroll={body.current}
         color={Color3.fromHex("ff4000")}
         bg={`linear-gradient(0deg, #200800ee, #200800ee)${
           player?.recenttracks.track[0].image[2]["#text"] != null
@@ -205,18 +205,7 @@ export default function Home() {
           .LINK
         </h1>
         <Time time={time} date={date} />
-        <Floaty top>
+        <AccessibilityBox />
-          <input
-            id="accessibility"
-            type="checkbox"
-            onClick={function (x) {
-              (x.target as HTMLInputElement).checked
-                ? document.body.parentElement?.classList.add("a11y")
-                : document.body.parentElement?.classList.remove("a11y");
-            }}
-          />
-          <label htmlFor="accessibility">Accessibility</label>
-        </Floaty>
         <Floaty>
           <LastFM player={player} />
         </Floaty>
@@ -224,25 +213,30 @@ export default function Home() {
           <p className="hv">Scroll down for more!</p>
         </Floaty>
       </Page>
-      <Page scroll={body.current} color={Color3.fromHex("FFFFFF")} id="hi">
+      <Page color={Color3.fromHex("FFFFFF")} id="hi">
         <h1>Welcome 👋</h1>
         <p>
-          I'm <b>MeowcaTheoRange</b>{" "}
+          We're <b>MeowcaTheoRange</b>{" "}
           <small aria-label="Pronounced: meow, cuh, the, oh, range">
             (miau-kuh-thee~oh-ray~nj)
           </small>
           .
           <br />
-          I'm a web developer, Fediverse enthusiast, and compulsory Minnesotan.
+          We make up a web developer, Fediverse enthusiast, and compulsory
+          Minnesotan.
         </p>
         <p>
-          I'm also known as <strong>Iszac</strong> or <strong>Theo</strong> as
+          We're made up of two identities, Iszac and Theo.
-          well.
+          <br />
+          This site was originally written by Theo, so it will go on from his
+          perspective.
+          <br />
+          <a href="/iszac">Learn more about us</a>
         </p>
-        <p className="chip">he/they/it</p>
         <p className="chip">Male</p>
         <p className="chip">Minor</p>
         <p className="chip">Autistic</p>
+        <h2>Hey, I'm Theo.</h2>
         <p>I run this domain and all of the services on it.</p>
         <p>
           My favourite hobbies are <strong>programming</strong>,{" "}
@@ -326,7 +320,7 @@ export default function Home() {
           ]}
         />
       </Page>
-      <Page scroll={body.current} color={Color3.fromHex("00c0ff")}>
+      <Page color={Color3.fromHex("00c0ff")}>
         <h1>What's on this domain?</h1>
         <p>
           Here's a quick list of all of the web services on this domain right
@@ -410,12 +404,7 @@ export default function Home() {
           markdown
         />
       </Page>
-      <Page
+      <Page color={Color3.fromHex("FF80C0")} id="currents" preview>
-        scroll={body.current}
-        color={Color3.fromHex("FF80C0")}
-        id="currents"
-        preview
-      >
         <h1>Current Obsessions</h1>
         <p>
           I'm into a lot of stuff. As of this site's publication, you'll
@@ -462,12 +451,7 @@ export default function Home() {
           sections. Enjoy!
         </p>
       </Page>
-      <Page
+      <Page color={Color3.fromHex("80FF00")} preview id="sc_programming">
-        scroll={body.current}
-        color={Color3.fromHex("80FF00")}
-        preview
-        id="sc_programming"
-      >
         <h1>Programming</h1>
         <p>I like using what some call "programming languages".</p>
         <p>
@@ -481,13 +465,7 @@ export default function Home() {
         </p>
         <ProjectList projects={repos} />
       </Page>
-      <Page
+      <Page color={Color3.fromHex("80ffff")} preview floaty id="sc_fonts">
-        scroll={body.current}
-        color={Color3.fromHex("80ffff")}
-        preview
-        floaty
-        id="sc_fonts"
-      >
         <h1>Fonts</h1>
         <p>I also like UI and UI design. This includes fonts, quite a bit.</p>
         <p>
@@ -598,7 +576,7 @@ export default function Home() {
           </div>
         </Floaty>
       </Page>
-      <Page scroll={body.current} color={Color3.fromHex("00c0ff")} id="sc_art">
+      <Page color={Color3.fromHex("00c0ff")} id="sc_art">
         <h1>Artistry</h1>
         <p>
           Artistry usually includes writing and drawing. These are the purposes
@@ -615,11 +593,7 @@ export default function Home() {
         <ProjectList projects={images} markdown />
         <ProjectList projects={blog} markdown double tooLong />
       </Page>
-      <Page
+      <Page color={Color3.fromHex("FFFFFF")} id="branding">
-        scroll={body.current}
-        color={Color3.fromHex("FFFFFF")}
-        id="branding"
-      >
         <h1>Branding</h1>
         <p>
           I don't really have strict branding guidelines, but I do have a few
@@ -648,7 +622,7 @@ export default function Home() {
         <p className="hv">
           If you are a local organization and would like to refer to me by my
           legal name, please{" "}
-          <a href="#top" className="inline">
+          <a href="#hi" className="inline">
             contact me
           </a>{" "}
           and we can probably figure something out.
@@ -662,7 +636,7 @@ export default function Home() {
           these colours:
         </p>
 
-        <ColourChip colour={new Color3(0, 0.75, 1)}>
+        <ColourChip colour={new Color3(0, 0.752941176, 1)}>
           <b>Iszac Blue</b>
           <br />
           <small>Primary</small>
@@ -721,72 +695,8 @@ export default function Home() {
           that I'm still screwing with.
         </p>
       </Page>
-      <Page scroll={body.current} color={Color3.fromHex("000000")}></Page>
+      <Page color={Color3.fromHex("000000")}></Page>
-      <Page
+      <Footer />
-        scroll={body.current}
-        color={Color3.fromHex("ffffff")}
-        footer
-        bg="center/50px 50px repeating-linear-gradient(45deg, #80808010, #80808010 25%, transparent 25%, transparent 50%, #80808010 50%, #80808010 75%, transparent 75%, transparent 100%)"
-        id="footer"
-      >
-        <h1>
-          ABTMTR
-          <wbr />
-          .LINK
-        </h1>
-        <Eighty img="/88x31/dotart.png" alt="blocked by dotart" />
-        <Eighty
-          url="https://www.mozilla.org/en-US/firefox/new/"
-          img="/88x31/firefox4.gif"
-          alt="tested on Firefox"
-        />
-        <Eighty
-          url="https://homestuck.com/"
-          img="/88x31/sun_88x31_dual_border.png"
-          alt="HOMESTUCK"
-        />
-        <Eighty
-          url="https://dimden.dev/"
-          img="https://dimden.dev/services/images/88x31.gif"
-          alt="DIMDEN"
-        />
-        <Eighty
-          url="https://park-city.club/~frix/"
-          img="/88x31/pjfrix2023.png"
-          alt="pjfrix"
-        />
-        <Eighty
-          url="https://invoxiplaygames.uk/"
-          img="/88x31/ipg.png"
-          alt="Invoxi PlayGames"
-        />
-        <Eighty
-          url="https://ioletsgo.gay/"
-          img="/88x31/ivorybutton.gif"
-          alt="ioletsgo.gay"
-        />
-        <Eighty
-          url="https://spacy.neocities.org/"
-          img="/88x31/spacy_webbutton.png"
-          alt="Spacy =)"
-        />
-        <Eighty
-          url="https://disqordia.space/"
-          img="/88x31/disqordia-approved-border.png"
-          alt="Disqordia Approved"
-        />
-        <Eighty
-          url="https://translunar.academy/"
-          img="/88x31/tla.png"
-          alt="TRANSLUNAR ACADEMY"
-        />
-        <Eighty
-          url="https://moth.zone/meowcatheorange"
-          img="/88x31/kkdiagt.png"
-          alt="KARKATDYINGIN AGLUETRAP.COM R.I.P"
-        />
-        <p className="hv">© MeowcaTheoRange 2023</p>
-      </Page>
     </div>
   );
 }

src/components/AccssibilityBox/AccessibilityBox.tsx

@@ -0,0 +1,26 @@
+"use client";
+import Floaty from "../Floaty/Floaty";
+
+export default function AccessibilityBox() {
+  if (window.localStorage.getItem("a11y"))
+    document.body.parentElement?.classList.add("a11y");
+  return (
+    <Floaty top>
+      <input
+        id="accessibility"
+        type="checkbox"
+        onClick={function (x) {
+          if ((x.target as HTMLInputElement).checked) {
+            document.body.parentElement?.classList.add("a11y");
+            window.localStorage.setItem("a11y", "a11y");
+          } else {
+            document.body.parentElement?.classList.remove("a11y");
+            window.localStorage.setItem("a11y", "");
+          }
+        }}
+        defaultChecked={window.localStorage.getItem("a11y") == "a11y"}
+      />
+      <label htmlFor="accessibility">Accessibility</label>
+    </Floaty>
+  );
+}

src/components/Footer/Footer.tsx

@@ -0,0 +1,88 @@
+import { Color3 } from "@/utility/color";
+import Eighty from "../Eighty/Eighty";
+import Page from "../Page/Page";
+
+export default function Footer() {
+  return (
+    <Page
+      color={Color3.fromHex("ffffff")}
+      footer
+      bg="center/50px 50px repeating-linear-gradient(45deg, #80808010, #80808010 25%, transparent 25%, transparent 50%, #80808010 50%, #80808010 75%, transparent 75%, transparent 100%)"
+      id="footer"
+    >
+      <h1>
+        ABTMTR
+        <wbr />
+        .LINK
+      </h1>
+      <Eighty img="/88x31/dotart.png" alt="blocked by dotart" />
+      <Eighty
+        url="https://www.mozilla.org/en-US/firefox/new/"
+        img="/88x31/firefox4.gif"
+        alt="tested on Firefox"
+      />
+      <Eighty
+        url="https://homestuck.com/"
+        img="/88x31/sun_88x31_dual_border.png"
+        alt="HOMESTUCK"
+      />
+      <Eighty
+        url="https://dimden.dev/"
+        img="https://dimden.dev/services/images/88x31.gif"
+        alt="DIMDEN"
+      />
+      <Eighty
+        url="https://park-city.club/~frix/"
+        img="/88x31/pjfrix2023.png"
+        alt="pjfrix"
+      />
+      <Eighty
+        url="https://invoxiplaygames.uk/"
+        img="/88x31/ipg.png"
+        alt="Invoxi PlayGames"
+      />
+      <Eighty
+        url="https://ioletsgo.gay/"
+        img="/88x31/ivorybutton.gif"
+        alt="ioletsgo.gay"
+      />
+      <Eighty
+        url="https://spacy.neocities.org/"
+        img="/88x31/spacy_webbutton.png"
+        alt="Spacy =)"
+      />
+      <Eighty
+        url="https://sneexy.pages.gay/"
+        img="/88x31/sneexy2.gif"
+        alt="Sneexy"
+      />
+      <Eighty
+        url="https://disqordia.space/"
+        img="/88x31/disqordia-approved-border.png"
+        alt="Disqordia Approved"
+      />
+      <Eighty
+        url="https://translunar.academy/"
+        img="/88x31/tla.png"
+        alt="TRANSLUNAR ACADEMY"
+      />
+      <Eighty
+        url="https://moth.zone/meowcatheorange"
+        img="/88x31/kkdiagt.png"
+        alt="KARKATDYINGIN AGLUETRAP.COM R.I.P"
+      />
+      <p>
+        This site hosts and serves the font{" "}
+        <a href="https://www.dafont.com/renogare.font" target="_blank">
+          Renogare
+        </a>
+        , and uses the Google Font CDN for{" "}
+        <a href="https://fonts.google.com/specimen/Lexend+Deca" target="_blank">
+          Lexend Deca
+        </a>{" "}
+        and Material Symbols Outlined.
+      </p>
+      <p className="hv">© MeowcaTheoRange 2023</p>
+    </Page>
+  );
+}

src/components/Page/Page.module.css

@@ -37,6 +37,17 @@
   min-height: calc(100vh - (64px + (3rem + 1.5rem)));
 }
 
+.PageHalf {
+  width: 50vw;
+  padding-right: 0;
+}
+
+.PageCut {
+  min-height: 50vh;
+  scroll-snap-align: end;
+  scroll-margin-bottom: 0;
+}
+
 .PageFooter {
   min-height: 50vh;
   scroll-snap-align: end;
@@ -56,4 +67,8 @@
   .PageSpace {
     padding-right: 64px;
   }
+
+  .PageHalf {
+    width: 100vw;
+  }
 }

src/components/Page/Page.tsx

@@ -1,44 +1,33 @@
 import { Color3 } from "@/utility/color";
-import { useEffect, useRef } from "react";
 import styles from "./Page.module.css";
 
 export default function Page({
   children,
   color,
   bg,
-  scroll,
   preview = false,
   footer = false,
   floaty = false,
+  half = false,
+  cut = false,
   id,
 }: {
   children?: React.ReactNode;
   color?: Color3;
   bg?: string;
-  scroll: HTMLElement | null;
   preview?: boolean;
   footer?: boolean;
   floaty?: boolean;
+  half?: boolean;
+  cut?: boolean;
   id?: string;
 }) {
-  const pageobj = useRef<HTMLDivElement>(null);
-  const pageScrollAnim = useRef(0);
-  useEffect(() => {
-    if (scroll == null) return;
-    const handler = () => {
-      if (pageobj.current == null) return;
-      pageobj.current.style.backgroundPositionY =
-        -(pageobj.current.offsetTop - scroll.scrollTop) / 2 + "px";
-      pageScrollAnim.current = requestAnimationFrame(handler);
-    };
-    pageScrollAnim.current = requestAnimationFrame(handler);
-    // return cancelAnimationFrame(pageScrollAnim.current);
-  }, [scroll]);
   return (
     <div
       id={id}
-      ref={pageobj}
+      className={`${styles.Page} ${cut ? styles.PageCut : ""} ${
-      className={`${styles.Page} ${preview ? styles.PagePreview : ""} ${
+        half ? styles.PageHalf : ""
+      } ${preview ? styles.PagePreview : ""} ${
         footer ? styles.PageFooter : ""
       } ${floaty ? styles.PageSpace : ""} block PG-collapse-on-a11y`}
       style={

src/components/PageContainer/PageContainer.module.css

@@ -0,0 +1,16 @@
+.PageContainer {
+  box-sizing: border-box;
+  width: 100vw;
+  min-height: 100vh;
+  height: max-content;
+  /* overflow-y: auto; */
+  overflow: hidden;
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+  position: relative;
+  background-attachment: fixed;
+  z-index: 1;
+  scroll-margin-bottom: calc(64px + (3rem + 1.5rem));
+  display: grid;
+  grid-template-columns: auto auto;
+}

src/components/PageContainer/PageContainer.tsx

@@ -0,0 +1,15 @@
+import styles from "./PageContainer.module.css";
+
+export default function PageContainer({
+  children,
+  id,
+}: {
+  children?: React.ReactNode;
+  id?: string;
+}) {
+  return (
+    <div id={id} className={`${styles.PageContainer}`}>
+      {children}
+    </div>
+  );
+}

src/components/ScrollBackInd/ScrollBackInd.tsx

@@ -9,7 +9,7 @@ export default function ScrollBackInd<T>({
 }: {
   hide?: boolean;
   scroll: HTMLElement | null;
-  player: { [key: string]: any } | null | undefined;
+  player?: { [key: string]: any } | null | undefined;
   time: string;
 }) {
   return (

src/components/Sides/Sides.module.css

@@ -1,6 +1,8 @@
 .Sides {
   display: grid;
-  grid-template-columns: auto max-content;
+  grid-template-columns: 50% 50%;
+  width: 100%;
+  overflow: hidden;
   gap: 16px;
 }
 

src/components/SpeedDial/SpeedDial.tsx

@@ -5,7 +5,7 @@ export default function SpeedDial({
 }: {
   services: {
     name: string;
-    url: string;
+    url?: string;
     golden?: boolean;
     purpose?: string;
   }[];
@@ -24,9 +24,13 @@ export default function SpeedDial({
           ) : (
             <></>
           )}
-          <a href={service.url} className="special">
+          {service.url ? (
+            <a target="_blank" href={service.url} className="special">
               {service.name}
             </a>
+          ) : (
+            service.name
+          )}
         </li>
       ))}
     </ul>

src/styles/globals.css

@@ -213,6 +213,7 @@ a.special:active::after {
   margin-left: 0.25em;
   margin-right: 0.25em;
   border-radius: 1em;
+  vertical-align: 50%;
 }
 
 @media only screen and (max-width: 1024px) {