New page, new me/us.
This commit is contained in:
MeowcaTheoRange
parent
8e8e2e063a
commit
9f6613b329
16 changed files with 422 additions and 139 deletions
BIN
public/88x31/sneexy2.gif
Normal file
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
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
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
217
src/app/iszac/page.tsx
Normal 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?
|
||||
<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?
|
||||
<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>
|
||||
);
|
||||
}
|
||||
140
src/app/page.tsx
140
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>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
26
src/components/AccssibilityBox/AccessibilityBox.tsx
Normal file
26
src/components/AccssibilityBox/AccessibilityBox.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
88
src/components/Footer/Footer.tsx
Normal file
88
src/components/Footer/Footer.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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={
|
||||
|
|
|
|||
16
src/components/PageContainer/PageContainer.module.css
Normal file
16
src/components/PageContainer/PageContainer.module.css
Normal 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;
|
||||
}
|
||||
15
src/components/PageContainer/PageContainer.tsx
Normal file
15
src/components/PageContainer/PageContainer.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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 (
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
.Sides {
|
||||
display: grid;
|
||||
grid-template-columns: auto max-content;
|
||||
grid-template-columns: 50% 50%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue