ada
/
werefox-cafe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Alexis Werefox 2021-05-01 06:15:09 +00:00
parent fe1fe42d4e
commit a59bf8f88c
28 changed files with 985 additions and 878 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/info/components/basic-page-template.js → src/info/components/basic-page.js
View File

@ -2,8 +2,9 @@ import Head from "next/head";
import Image from "next/image"; import Image from "next/image";
import WCard from "../components/werefox-card"; import WCard from "../components/werefox-card";
import FCard from "./footer-card"; import FCard from "./footer-card";
import PButton from "../components/page-button";
export default function HRT({ is_home, page_title, card_title, children }) { export default function BasicPage({ is_home, page_title, card_title, children }) {
if (is_home) { if (is_home) {
return ( return (
<div className="min-h-screen bg-werefox-grey-lighter dark:bg-werefox-grey-dark font-nerd"> <div className="min-h-screen bg-werefox-grey-lighter dark:bg-werefox-grey-dark font-nerd">
@ -55,25 +56,21 @@ export default function HRT({ is_home, page_title, card_title, children }) {
{card_title} {card_title}
</h1> </h1>
</WCard> </WCard>
<WCard <PButton
isCardButton="true" title="Take me back home!"
extraClasses="" images={[
imageObj={[
{ src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" }, { src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" },
{ src: "/emoji/blue_heart.svg", alt: "Blue heart" }, { src: "/emoji/blue_heart.svg", alt: "Blue heart" },
]} ]}
innerText="Take me back home!"
url="/" url="/"
/> />
{children} {children}
<WCard <PButton
isCardButton="true" title="Take me back home!"
extraClasses="" images={[
imageObj={[
{ src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" }, { src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" },
{ src: "/emoji/blue_heart.svg", alt: "Blue heart" }, { src: "/emoji/blue_heart.svg", alt: "Blue heart" },
]} ]}
innerText="Take me back home!"
url="/" url="/"
/> />
<FCard /> <FCard />

18
src/info/components/faq-block.js Normal file
View File

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

43
src/info/components/faq-card.js Normal file
View File

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

73
src/info/components/footer-card.js
View File

@ -3,40 +3,45 @@ import WCard from "./werefox-card";
export default function FooterCard() { export default function FooterCard() {
return ( return (
<WCard> <footer className="p-4 space-y-2 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
<footer className="p-4 space-y-2"> <div className="flex text-werefox-blue-darker dark:text-werefox-blue">
<div className="flex text-werefox-blue-darker dark:text-werefox-blue"> <div className="flex-1 sm:pr-16 pr-4">
<div className="flex-1 sm:pr-16 pr-4"> <p className="text-right sm:text-md text-sm transition">
<p className="text-right sm:text-md text-sm transition"> <Link href="/contacts">
<Link href="/contacts"> <a className="hover:text-werefox-pink-dark dark:hover:text-werefox-pink">
<a className="hover:text-werefox-pink-dark dark:hover:text-werefox-pink">Contact</a> Contact
</Link> </a>
</p> </Link>
</div> </p>
<div className="flex-1 sm:pl-16 pl-4">
<p className="text-left sm:text-md text-sm transition">
<Link href="https://gitea.werefox.dev/shadow8t4/info-werefox-dev">
<a className="hover:text-werefox-pink-dark dark:hover:text-werefox-pink" target="_blank"> /src</a>
</Link>
</p>
</div>
</div> </div>
<p className="text-center text-xs text-werefox-grey-darkest dark:text-werefox-grey-lightest"> <div className="flex-1 sm:pl-16 pl-4">
This site uses{" "} <p className="text-left sm:text-md text-sm transition">
<Link href="https://mutant.tech"> <Link href="https://gitea.werefox.dev/shadow8t4/info-werefox-dev">
<a className="transition hover:text-werefox-grey-darker dark:hover:text-werefox-grey-lighter"> <a
Mutant Standard emoji className="hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
</a> target="_blank"
</Link> >
, which are licensed under a{" "} /src
<Link href="https://creativecommons.org/licenses/by-nc-sa/4.0/"> </a>
<a className="transition hover:text-werefox-grey-darker dark:hover:text-werefox-grey-lighter"> </Link>
Creative Commons Attribution-NonCommercial-ShareAlike 4.0 </p>
International License </div>
</a> </div>
</Link> <p className="text-center text-xs text-werefox-grey-darkest dark:text-werefox-grey-lightest">
</p> This site uses{" "}
</footer> <Link href="https://mutant.tech">
</WCard> <a className="transition hover:text-werefox-grey-darker dark:hover:text-werefox-grey-lighter">
Mutant Standard emoji
</a>
</Link>
, which are licensed under a{" "}
<Link href="https://creativecommons.org/licenses/by-nc-sa/4.0/">
<a className="transition hover:text-werefox-grey-darker dark:hover:text-werefox-grey-lighter">
Creative Commons Attribution-NonCommercial-ShareAlike 4.0
International License
</a>
</Link>
</p>
</footer>
); );
} }

18
src/info/components/identity-block.js Normal file
View File

@ -0,0 +1,18 @@
import IDButton from "./identity-button";
import { IDENTITIES } from "../js/variables";
export default function IdentityBlock() {
return (
<div className="grid xl:grid-rows-2 xl:grid-cols-5 sm:grid-rows-3 sm:grid-cols-3 grid-rows-9 grid-cols-1 sm:gap-2 gap-0">
{Object.keys(IDENTITIES).map((ids) => (
<IDButton
key={ids}
innerText={ids}
url={IDENTITIES[ids].url}
imageObj={IDENTITIES[ids].images}
extraClasses={IDENTITIES[ids].extra_classes}
/>
))}
</div>
);
}

154
src/info/components/identity-card.js
View File

@ -13,82 +13,106 @@ export default function IdentityCard({
}) { }) {
if (children) { if (children) {
return ( return (
<div className="p-2 flow space-y-3"> <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
<div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark"> <div className="p-2 flow space-y-3">
<h4 className="p-4 text-center text-lg sm:text-2xl text-werefox-grey-dark dark:text-werefox-grey-lighter"> <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
<span className="relative inline-block w-8 h-8 align-middle mb-1"> <h4 className="p-4 text-center text-lg sm:text-2xl text-werefox-grey-dark dark:text-werefox-grey-lighter">
<Image src={src} layout="fill" objectFit="contain" alt={alt} /> <span className="relative inline-block w-8 h-8 align-middle mb-1">
</span>{" "} <Image src={src} layout="fill" objectFit="contain" alt={alt} />
{title} </span>{" "}
</h4> {title}
</h4>
</div>
{children}
</div> </div>
{children}
</div> </div>
); );
} else if (src2) { } else if (src2) {
return ( return (
<div className="p-2 flow space-y-3"> <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
<div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark"> <div className="p-2 flow space-y-3">
<h4 className="p-4 text-center text-lg sm:text-2xl text-werefox-grey-dark dark:text-werefox-grey-lighter"> <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
<span className="relative inline-block w-8 h-8 align-middle mb-1"> <h4 className="p-4 text-center text-lg sm:text-2xl text-werefox-grey-dark dark:text-werefox-grey-lighter">
<Image src={src} layout="fill" objectFit="contain" alt={alt} /> <span className="relative inline-block w-8 h-8 align-middle mb-1">
</span>{" "} <Image src={src} layout="fill" objectFit="contain" alt={alt} />
{title} </span>{" "}
</h4> {title}
</h4>
</div>
<div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
<p className="p-4 flow space-y-4 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
{Object.keys(info).map((i) => (
<p key={i}>{info[i]}</p>
))}
</p>
</div>
<div 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
className="rounded-lg"
src={src2}
layout="intrinsic"
width="2048"
height="2048"
alt={alt2}
/>
</span>
</a>
</div>
</div> </div>
<div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark"> </div>
<p className="p-4 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue"> );
{Object.keys(info).map((i) => ( } else if (url) {
<p className="pb-4" key={i}> return (
{info[i]} <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
</p> <div className="p-2 flow space-y-3">
))} <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
</p> <p className="p-4 text-center text-lg sm:text-2xl text-werefox-grey-dark dark:text-werefox-grey-lighter">
</div> <span className="relative inline-block w-8 h-8 align-middle mb-1">
<div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark"> <Image src={src} layout="fill" objectFit="contain" alt={alt} />
<a href="https://twitter.com/ribbonfemale" target="_blank"> </span>{" "}
<span className="relative inline-flex align-middle"> {title}
<Image </p>
className="rounded-lg" </div>
src={src2} <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
layout="intrinsic" <p className="p-4 flow space-y-4 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
width="2048" {Object.keys(info).map((i) => (
height="2048" <p key={i}>{info[i]}</p>
alt={alt2} ))}
/> </p>
</span> <div className="pb-4 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
</a> <Link href={url}>
<a
target="_blank"
className=" transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
>
Learn More
</a>
</Link>
</div>
</div>
</div> </div>
</div> </div>
); );
} else { } else {
return ( return (
<div className="p-2 flow space-y-3"> <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
<div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark"> <div className="p-2 flow space-y-3">
<p className="p-4 text-center text-lg sm:text-2xl text-werefox-grey-dark dark:text-werefox-grey-lighter"> <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
<span className="relative inline-block w-8 h-8 align-middle mb-1"> <h4 className="p-4 text-center text-lg sm:text-2xl text-werefox-grey-dark dark:text-werefox-grey-lighter">
<Image src={src} layout="fill" objectFit="contain" alt={alt} /> <span className="relative inline-block w-8 h-8 align-middle mb-1">
</span>{" "} <Image src={src} layout="fill" objectFit="contain" alt={alt} />
{title} </span>{" "}
</p> {title}
</div> </h4>
<div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark"> </div>
<p className="p-4 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue"> <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
{Object.keys(info).map((i) => ( <p className="p-4 flow space-y-4 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
<p className="pb-4" key={i}> {Object.keys(info).map((i) => (
{info[i]} <p key={i}>{info[i]}</p>
</p> ))}
))} </p>
</p>
<div className="pb-4 text-center text-md sm:text-lg 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"
>
Learn More
</a>
</Link>
</div> </div>
</div> </div>
</div> </div>

17
src/info/components/page-block.js Normal file
View File

@ -0,0 +1,17 @@
import PButton from "./page-button";
import { PAGES } from "../js/variables";
export default function ProjectBlock() {
return (
<>
{Object.keys(PAGES).map((page) => (
<PButton
key={page}
title={page}
images={PAGES[page].images}
url={PAGES[page].url}
/>
))}
</>
);
}

29
src/info/components/page-button.js Normal file
View File

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

4
src/info/components/project-block.js
View File

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

16
src/info/components/project-card.js
View File

@ -1,14 +1,26 @@
import Link from "next/link"; import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
export default function projectCard({ title, url, src, alt, description }) { export default function projectCard({
title,
url,
new_tab,
src,
alt,
description,
}) {
const open_new_tab = new_tab ? "_blank" : "";
return ( 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"> <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-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="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"> <div className="text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
<Link href={url}> <Link href={url}>
<a target="_blank" className="transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"> <a
target={open_new_tab}
className="transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
>
<span className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top"> <span className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top">
<Image <Image
src={src} src={src}

10
src/info/components/testimonial-card.js
View File

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

47
src/info/components/werefox-card.js
View File

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

353
src/info/js/variables.js Normal file
View File

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

299
src/info/pages/contacts/index.js
View File

@ -1,4 +1,4 @@
import BasicPage from "../../components/basic-page-template"; import BasicPage from "../../components/basic-page";
import WCard from "../../components/werefox-card"; import WCard from "../../components/werefox-card";
import Image from "next/image"; import Image from "next/image";
@ -8,158 +8,151 @@ export default function Contacts() {
page_title="Where To Find Me" page_title="Where To Find Me"
card_title={`"Do you have a [Social Media]?"`} card_title={`"Do you have a [Social Media]?"`}
> >
<WCard> <WCard innerText="You can find me in quite a few places!">
<div className="p-2 space-y-2"> <div className="p-4 space-y-4">
<div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark"> <p className="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
<p className="p-2 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue"> <a href="https://vulpine.club/@shadow8t4" target="_blank">
You can find me in quite a few places! <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
</p> <Image
</div> src="/emoji/mastodon-logo.png"
<div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark"> layout="fill"
<p className="p-4 md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue"> objectFit="contain"
<a href="https://vulpine.club/@shadow8t4" target="_blank"> alt="Mastodon logo"
<span className="animate-bounce relative inline-block w-6 h-6 align-middle"> />
<Image </span>
src="/emoji/mastodon-logo.png" </a>{" "}
layout="fill" My public Mastodon{" "}
objectFit="contain" <a
alt="Mastodon logo" className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
/> href="https://vulpine.club/@shadow8t4"
</span> target="_blank"
</a>{" "} >
My public Mastodon{" "} @shadow8t4@vulpine.club
<a </a>
className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink" </p>
href="https://vulpine.club/@shadow8t4" <p className="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
target="_blank" <a href="https://twitter.com/alexis_werefox" target="_blank">
> <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
@shadow8t4@vulpine.club <Image
</a> src="/emoji/twitter-logo.png"
</p> layout="fill"
<p className="pl-4 pr-4 pb-4 md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue"> objectFit="contain"
<a href="https://twitter.com/alexis_werefox" target="_blank"> alt="Twitter logo"
<span className="animate-bounce relative inline-block w-6 h-6 align-middle"> />
<Image </span>
src="/emoji/twitter-logo.png" </a>{" "}
layout="fill" My Twitter{" "}
objectFit="contain" <a
alt="Twitter logo" className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
/> href="https://twitter.com/alexis_werefox"
</span> target="_blank"
</a>{" "} >
My Twitter{" "} @alexis_werefox
<a </a>
className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink" </p>
href="https://twitter.com/alexis_werefox" <p className="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
target="_blank" <a href="https://www.twitch.tv/alexis_werefox" target="_blank">
> <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
@alexis_werefox <Image
</a> src="/emoji/twitch-logo.png"
</p> layout="fill"
<p className="pl-4 pr-4 pb-4 md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue"> objectFit="contain"
<a href="https://www.twitch.tv/alexis_werefox" target="_blank"> alt="Twitch logo"
<span className="animate-bounce relative inline-block w-6 h-6 align-middle"> />
<Image </span>
src="/emoji/twitch-logo.png" </a>{" "}
layout="fill" My Twitch{" "}
objectFit="contain" <a
alt="Twitch logo" className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
/> href="https://www.twitch.tv/alexis_werefox"
</span> target="_blank"
</a>{" "} >
My Twitch{" "} @Alexis_Werefox
<a </a>
className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink" </p>
href="https://www.twitch.tv/alexis_werefox" <p className="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
target="_blank" <a
> href="https://vid.werefox.dev/accounts/shadow8t4/video-channels"
@Alexis_Werefox target="_blank"
</a> >
</p> <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
<p className="pl-4 pr-4 pb-4 md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue"> <Image
<a src="/emoji/vhs.svg"
href="https://vid.werefox.dev/accounts/shadow8t4/video-channels" layout="fill"
target="_blank" objectFit="contain"
> alt="VHS tape emoji"
<span className="animate-bounce relative inline-block w-6 h-6 align-middle"> />
<Image </span>
src="/emoji/vhs.svg" </a>{" "}
layout="fill" My PeerTube (mostly VODs from the stream){" "}
objectFit="contain" <a
alt="VHS tape emoji" className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
/> href="https://vid.werefox.dev/accounts/shadow8t4/video-channels"
</span> target="_blank"
</a>{" "} >
My PeerTube (mostly VODs from the stream){" "} vid.werefox.dev
<a </a>
className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink" </p>
href="https://vid.werefox.dev/accounts/shadow8t4/video-channels" <p className="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
target="_blank" <a href="https://write.as/a-letter-to-the-void" target="_blank">
> <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
vid.werefox.dev <Image
</a> src="/emoji/pen.svg"
</p> layout="fill"
<p className="pl-4 pr-4 pb-4 md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue"> objectFit="contain"
<a href="https://write.as/a-letter-to-the-void" target="_blank"> alt="Pen emoji"
<span className="animate-bounce relative inline-block w-6 h-6 align-middle"> />
<Image </span>
src="/emoji/pen.svg" </a>{" "}
layout="fill" My poetry{" "}
objectFit="contain" <a
alt="Pen emoji" className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
/> href="https://write.as/a-letter-to-the-void"
</span> target="_blank"
</a>{" "} >
My poetry{" "} write.as/a-letter-to-the-void
<a </a>
className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink" </p>
href="https://write.as/a-letter-to-the-void" <p className="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
target="_blank" <a href="https://werefox.dev" target="_blank">
> <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
write.as/a-letter-to-the-void <Image
</a> src="/emoji/page_with_pencil.svg"
</p> layout="fill"
<p className="pl-4 pr-4 pb-4 md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue"> objectFit="contain"
<a href="https://werefox.dev" target="_blank"> alt="A piece of paper with a pencil emoji"
<span className="animate-bounce relative inline-block w-6 h-6 align-middle"> />
<Image </span>
src="/emoji/page_with_pencil.svg" </a>{" "}
layout="fill" My (often outdated) blog{" "}
objectFit="contain" <a
alt="A piece of paper with a pencil emoji" className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
/> href="https://werefox.dev"
</span> target="_blank"
</a>{" "} >
My (often outdated) blog{" "} werefox.dev
<a </a>
className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink" </p>
href="https://werefox.dev" <p className="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
target="_blank" <a href="mailto:adh9694@gmail.com" target="">
> <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
werefox.dev <Image
</a> src="/emoji/inbox.svg"
</p> layout="fill"
<p className="pl-4 pr-4 pb-4 md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue"> objectFit="contain"
<a href="mailto:adh9694@gmail.com" target=""> alt="Inbox emoji"
<span className="animate-bounce relative inline-block w-6 h-6 align-middle"> />
<Image </span>
src="/emoji/inbox.svg" </a>{" "}
layout="fill" My e-mail{" "}
objectFit="contain" <a
alt="Inbox emoji" className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
/> href="mailto:adh9694@gmail.com"
</span> target="_blank"
</a>{" "} >
My e-mail{" "} adh9694@gmail.com
<a </a>
className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink" </p>
href="mailto:adh9694@gmail.com"
target="_blank"
>
adh9694@gmail.com
</a>
</p>
</div>
</div> </div>
</WCard> </WCard>
</BasicPage> </BasicPage>

58
src/info/pages/faq/index.js
View File

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

15
src/info/pages/hrt/index.js
View File

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

36
src/info/pages/identities/fursona/index.js
View File

@ -1,28 +1,24 @@
import BasicPage from "../../../components/basic-page-template"; import BasicPage from "../../../components/basic-page";
import WCard from "../../../components/werefox-card";
import IDCard from "../../../components/identity-card"; import IDCard from "../../../components/identity-card";
export default function Fursona() { export default function Fursona() {
return ( return (
<BasicPage page_title="OwO What's this?" card_title="Fursona Details!"> <BasicPage page_title="OwO What's this?" card_title="Fursona Details!">
<WCard> <IDCard
<IDCard title="Alexis Werefox"
title="Alexis Werefox" info={{
info={{ info: `That's me, the witchy foxxo herself! 💙`,
info: `That's me, the witchy foxxo herself! 💙`, more: `Despite making this whole website, I'm honestly not much for talking about myself most of the time, unless I'm feeling particularly good.`,
more: `Despite making this whole website, I'm honestly not much for talking about myself most of the time, unless I'm feeling particularly good.`, species: `I'm a fox, though! I think originally based on a fennec, but I've kinda moved away from that design nowadays.`,
species: `I'm a fox, though! I think originally based on a fennec, but I've kinda moved away from that design nowadays.`, magic: `Also, I'm a witch! I have magic powers, which have honestly been mostly used to indulge in kinks, but uhhhhhh... What were we talking about here again?`,
magic: `Also, I'm a witch! I have magic powers, which have honestly been mostly used to indulge in kinks, but uhhhhhh... What were we talking about here again?`, art: `I know! I know! You came here to see some art, yes?! Well, here's a free one for ya!~`,
art: `I know! I know! You came here to see some art, yes?! Well, here's a free one for ya!~`, source: `(this was done by the wonderful @ribbonfemale on Twitter!)`,
source: `(this was done by the wonderful @ribbonfemale on Twitter!)` }}
}} src="/emoji/pixel_alexis.png"
url="" alt="It's me! Alexis Werefox!"
src="/emoji/pixel_alexis.png" src2="/images/alexis_witch.jpg"
alt="It's me! Alexis Werefox!" alt2="Some art of Alexis Werefox in a black corset and miniskirt and pink/black striped leggings and a witch hat, with magic effects surrounding her."
src2="/images/alexis_witch.jpg" />
alt2="Some art of Alexis Werefox in a black corset and miniskirt and pink/black striped leggings and a witch hat, with magic effects surrounding her."
/>
</WCard>
</BasicPage> </BasicPage>
); );
} }

25
src/info/pages/identities/gender/index.js
View File

@ -1,22 +1,19 @@
import BasicPage from "../../../components/basic-page-template"; import BasicPage from "../../../components/basic-page";
import WCard from "../../../components/werefox-card";
import IDCard from "../../../components/identity-card"; import IDCard from "../../../components/identity-card";
export default function Gender() { export default function Gender() {
return ( return (
<BasicPage page_title="What's Gender?" card_title="I'm Transgender!"> <BasicPage page_title="What's Gender?" card_title="I'm Transgender!">
<WCard> <IDCard
<IDCard title="Trans-femme"
title="Trans-femme" info={{
info={{ info: `This is a bit of a generalized term to mean someone who identifies primarily feminine.`,
info: `This is a bit of a generalized term to mean someone who identifies primarily feminine.`, more: `I do personally identify as a girl, but this is a bit more of a P.C. term to use!`,
more: `I do personally identify as a girl, but this is a bit more of a P.C. term to use!`, }}
}} url="https://gender.wikia.org/wiki/Transfeminine"
url="https://gender.wikia.org/wiki/Transfeminine" src="/emoji/transgender_flag.svg"
src="/emoji/transgender_flag.svg" alt="The transgender flag"
alt="The transgender flag" />
/>
</WCard>
</BasicPage> </BasicPage>
); );
} }

43
src/info/pages/identities/neuro/index.js
View File

@ -1,5 +1,4 @@
import BasicPage from "../../../components/basic-page-template"; import BasicPage from "../../../components/basic-page";
import WCard from "../../../components/werefox-card";
import IDCard from "../../../components/identity-card"; import IDCard from "../../../components/identity-card";
export default function Neurodiversity() { export default function Neurodiversity() {
@ -8,27 +7,25 @@ export default function Neurodiversity() {
page_title="Neurodiversity, Fam" page_title="Neurodiversity, Fam"
card_title="I'm Neurodivergent!" card_title="I'm Neurodivergent!"
> >
<WCard> <IDCard
<IDCard title="ADHD"
title="ADHD" info={{
info={{ info: `This stands for "Attention-Deficit Hyperactivity Disorder".`,
info: `This stands for "Attention-Deficit Hyperactivity Disorder".`, neurodivergent: `Addionally, the term "neurodivergent" is a general term meaning someone who lives with a form of mental disorder which may impair or alter the way they act and react to the world around them.`,
neurodivergent: `Addionally, the term "neurodivergent" is a general term meaning someone who lives with a form of mental disorder which may impair or alter the way they act and react to the world around them.`, adhd: `While the term ADHD does address the attention and hyperactive aspects of the disorder, there are actually many other aspects that often go unaddressed. The main ones, however, are:`,
adhd: `While the term ADHD does address the attention and hyperactive aspects of the disorder, there are actually many other aspects that often go unaddressed. The main ones, however, are:`, symptom1: `- Lack of focus, and conversely, hyperfocus!`,
symptom1: `- Lack of focus, and conversely, hyperfocus!`, symptom2: `- Impulsiveness`,
symptom2: `- Impulsiveness`, symptom3: `- Impaired ability to multitask`,
symptom3: `- Impaired ability to multitask`, symptom4: `- Time management issues`,
symptom4: `- Time management issues`, symptom5: `- Difficulty remembering things (especially details and things we don't find stimulating)`,
symptom5: `- Difficulty remembering things (especially details and things we don't find stimulating)`, symptom6: `- Emotional dysregularity (we have trouble regulating our emotions!)`,
symptom6: `- Emotional dysregularity (we have trouble regulating our emotions!)`, symptom7: `- Last, but not least, is something called "rejection sensitivity", which can be hard to explain, and isn't technically medically accepted, but is proven to be a common symptom among ADHD folks!`,
symptom7: `- Last, but not least, is something called "rejection sensitivity", which can be hard to explain, and isn't technically medically accepted, but is proven to be a common symptom among ADHD folks!`, conclusion: `There's a lot more I wish I could say, but I can genuinely recommend the following link to the YouTube channel "How to ADHD" if you want to learn more, especially if you believe you have this disorder yourself!`,
conclusion: `There's a lot more I wish I could say, but I can genuinely recommend the following link to the YouTube channel "How to ADHD" if you want to learn more, especially if you believe you have this disorder yourself!`, }}
}} url="https://www.youtube.com/channel/UC-nPM1_kSZf91ZGkcgy_95Q"
url="https://www.youtube.com/channel/UC-nPM1_kSZf91ZGkcgy_95Q" src="/emoji/neurodiversity.svg"
src="/emoji/neurodiversity.svg" alt="The neurodiversity symbol"
alt="The neurodiversity symbol" />
/>
</WCard>
</BasicPage> </BasicPage>
); );
} }

77
src/info/pages/identities/partners/index.js
View File

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

27
src/info/pages/identities/pronouns/index.js
View File

@ -1,5 +1,4 @@
import BasicPage from "../../../components/basic-page-template"; import BasicPage from "../../../components/basic-page";
import WCard from "../../../components/werefox-card";
import IDCard from "../../../components/identity-card"; import IDCard from "../../../components/identity-card";
export default function Pronouns() { export default function Pronouns() {
@ -8,19 +7,17 @@ export default function Pronouns() {
page_title="What are your pronouns?" page_title="What are your pronouns?"
card_title="Pronouns! Important!" card_title="Pronouns! Important!"
> >
<WCard> <IDCard
<IDCard title="She / Her"
title="She / Her" info={{
info={{ info: `When you're referring to me, please use the pronouns "She/Her".`,
info: `When you're referring to me, please use the pronouns "She/Her".`, more: `If you need some examples, for whatever reason, here are some from the site you can visit by clicking on the link below!`,
more: `If you need some examples, for whatever reason, here are some from the site you can visit by clicking on the link below!`, examples: `"Today I met a new friend, and she is really nice. She has a wonderful personality. That smile of hers really makes me happy."`,
examples: `"Today I met a new friend, and she is really nice. She has a wonderful personality. That smile of hers really makes me happy."`, }}
}} url="https://pronouns.me/she"
url="https://pronouns.me/she" src="/emoji/speech_bubble_left.svg"
src="/emoji/speech_bubble_left.svg" alt="A speech bubble emoji"
alt="A speech bubble emoji" />
/>
</WCard>
</BasicPage> </BasicPage>
); );
} }

65
src/info/pages/identities/sexuality/index.js
View File

@ -1,5 +1,4 @@
import BasicPage from "../../../components/basic-page-template"; import BasicPage from "../../../components/basic-page";
import WCard from "../../../components/werefox-card";
import IDCard from "../../../components/identity-card"; import IDCard from "../../../components/identity-card";
export default function Sexuality() { export default function Sexuality() {
@ -8,38 +7,36 @@ export default function Sexuality() {
page_title="What's My Sexuality?" page_title="What's My Sexuality?"
card_title="Sexuality Details!" card_title="Sexuality Details!"
> >
<WCard> <IDCard
<IDCard title="Polyamory"
title="Polyamory" info={{
info={{ info: `This means that I am okay with having multiple partners!`,
info: `This means that I am okay with having multiple partners!`, more: `There's a lot I can say about Polyamory, but I feel like if you really want to learn more about it, you might be better off following the link below.`,
more: `There's a lot I can say about Polyamory, but I feel like if you really want to learn more about it, you might be better off following the link below.`, }}
}} url="https://lgbta.wikia.org/wiki/Polyamorous"
url="https://lgbta.wikia.org/wiki/Polyamorous" src="/emoji/polyamory_flag.svg"
src="/emoji/polyamory_flag.svg" alt="The polyamory flag"
alt="The polyamory flag" />
/> <IDCard
<IDCard title="Pansexual"
title="Pansexual" info={{
info={{ info: `This means that I am okay with sexual and romantic partners of any gender identity!`,
info: `This means that I am okay with sexual and romantic partners of any gender identity!`, more: `Of course, being Pansexual does not mean I cannot have preferences or that I want to date *"anyone"*, just that I am open to it.`,
more: `Of course, being Pansexual does not mean I cannot have preferences or that I want to date *"anyone"*, just that I am open to it.`, }}
}} url="https://lgbta.wikia.org/wiki/Pansexual"
url="https://lgbta.wikia.org/wiki/Pansexual" src="/emoji/pansexual_flag.svg"
src="/emoji/pansexual_flag.svg" alt="The pansexual flag"
alt="The pansexual flag" />
/> <IDCard
<IDCard title="Lesbian"
title="Lesbian" info={{
info={{ info: `This means that I am okay with sexual and romantic partners that are the same gender identity as me!`,
info: `This means that I am okay with sexual and romantic partners that are the same gender identity as me!`, more: `If you have questions about how I could be both Pansexual and Lesiban, I'd refer you to my FAQ.`,
more: `If you have questions about how I could be both Pansexual and Lesiban, I'd refer you to my FAQ.`, }}
}} url="https://lgbta.wikia.org/wiki/Lesbian"
url="https://lgbta.wikia.org/wiki/Lesbian" src="/emoji/lesbian_flag.svg"
src="/emoji/lesbian_flag.svg" alt="The lesbian flag"
alt="The lesbian flag" />
/>
</WCard>
</BasicPage> </BasicPage>
); );
} }

209
src/info/pages/index.js
View File

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

75
src/info/pages/projects/index.js
View File

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

13
src/info/pages/projects/services/index.js Normal file
View File

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

11
src/info/pages/support/index.js
View File

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

108
src/info/pages/testimonials/index.js
View File

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

1
src/info/public/emoji/crt_blue_screen.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 1.2 KiB