New page, new me/us.

This commit is contained in:
MeowcaTheoRange 2023-11-12 15:25:04 -06:00
parent 8e8e2e063a
commit 9f6613b329
16 changed files with 422 additions and 139 deletions

BIN
public/88x31/sneexy2.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 83 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
public/whoami/iszac_4x.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
public/whoami/theo_4x.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

217
src/app/iszac/page.tsx Normal file
View file

@ -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>
);
}

View file

@ -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>
<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>
<AccessibilityBox />
<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
well.
We're made up of two identities, Iszac and Theo.
<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
scroll={body.current}
color={Color3.fromHex("FF80C0")}
id="currents"
preview
>
<Page 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
scroll={body.current}
color={Color3.fromHex("80FF00")}
preview
id="sc_programming"
>
<Page 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
scroll={body.current}
color={Color3.fromHex("80ffff")}
preview
floaty
id="sc_fonts"
>
<Page 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
scroll={body.current}
color={Color3.fromHex("FFFFFF")}
id="branding"
>
<Page 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
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>
<Page color={Color3.fromHex("000000")}></Page>
<Footer />
</div>
);
}

View file

@ -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>
);
}

View file

@ -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>
);
}

View file

@ -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;
}
}

View file

@ -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} ${preview ? styles.PagePreview : ""} ${
className={`${styles.Page} ${cut ? styles.PageCut : ""} ${
half ? styles.PageHalf : ""
} ${preview ? styles.PagePreview : ""} ${
footer ? styles.PageFooter : ""
} ${floaty ? styles.PageSpace : ""} block PG-collapse-on-a11y`}
style={

View file

@ -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;
}

View file

@ -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>
);
}

View file

@ -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 (

View file

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

View file

@ -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>

View file

@ -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) {