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

View File

@ -2,8 +2,9 @@ import Head from "next/head";
import Image from "next/image";
import WCard from "../components/werefox-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) {
return (
<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}
</h1>
</WCard>
<WCard
isCardButton="true"
extraClasses=""
imageObj={[
<PButton
title="Take me back home!"
images={[
{ src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" },
{ src: "/emoji/blue_heart.svg", alt: "Blue heart" },
]}
innerText="Take me back home!"
url="/"
/>
{children}
<WCard
isCardButton="true"
extraClasses=""
imageObj={[
<PButton
title="Take me back home!"
images={[
{ src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" },
{ src: "/emoji/blue_heart.svg", alt: "Blue heart" },
]}
innerText="Take me back home!"
url="/"
/>
<FCard />

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

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

View File

@ -3,40 +3,45 @@ import WCard from "./werefox-card";
export default function FooterCard() {
return (
<WCard>
<footer className="p-4 space-y-2">
<div className="flex text-werefox-blue-darker dark:text-werefox-blue">
<div className="flex-1 sm:pr-16 pr-4">
<p className="text-right sm:text-md text-sm transition">
<Link href="/contacts">
<a className="hover:text-werefox-pink-dark dark:hover:text-werefox-pink">Contact</a>
</Link>
</p>
</div>
<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>
<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">
<div className="flex text-werefox-blue-darker dark:text-werefox-blue">
<div className="flex-1 sm:pr-16 pr-4">
<p className="text-right sm:text-md text-sm transition">
<Link href="/contacts">
<a className="hover:text-werefox-pink-dark dark:hover:text-werefox-pink">
Contact
</a>
</Link>
</p>
</div>
<p className="text-center text-xs text-werefox-grey-darkest dark:text-werefox-grey-lightest">
This site uses{" "}
<Link href="https://mutant.tech">
<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>
</WCard>
<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>
<p className="text-center text-xs text-werefox-grey-darkest dark:text-werefox-grey-lightest">
This site uses{" "}
<Link href="https://mutant.tech">
<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>
);
}

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

View File

@ -13,82 +13,106 @@ export default function IdentityCard({
}) {
if (children) {
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-lighter dark:bg-werefox-grey-dark">
<h4 className="p-4 text-center text-lg sm:text-2xl text-werefox-grey-dark dark:text-werefox-grey-lighter">
<span className="relative inline-block w-8 h-8 align-middle mb-1">
<Image src={src} layout="fill" objectFit="contain" alt={alt} />
</span>{" "}
{title}
</h4>
<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 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">
<h4 className="p-4 text-center text-lg sm:text-2xl text-werefox-grey-dark dark:text-werefox-grey-lighter">
<span className="relative inline-block w-8 h-8 align-middle mb-1">
<Image src={src} layout="fill" objectFit="contain" alt={alt} />
</span>{" "}
{title}
</h4>
</div>
{children}
</div>
{children}
</div>
);
} else if (src2) {
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-lighter dark:bg-werefox-grey-dark">
<h4 className="p-4 text-center text-lg sm:text-2xl text-werefox-grey-dark dark:text-werefox-grey-lighter">
<span className="relative inline-block w-8 h-8 align-middle mb-1">
<Image src={src} layout="fill" objectFit="contain" alt={alt} />
</span>{" "}
{title}
</h4>
<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 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">
<h4 className="p-4 text-center text-lg sm:text-2xl text-werefox-grey-dark dark:text-werefox-grey-lighter">
<span className="relative inline-block w-8 h-8 align-middle mb-1">
<Image src={src} layout="fill" objectFit="contain" alt={alt} />
</span>{" "}
{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 className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
<p className="p-4 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
{Object.keys(info).map((i) => (
<p className="pb-4" key={i}>
{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>
);
} else if (url) {
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 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 className="p-4 text-center text-lg sm:text-2xl text-werefox-grey-dark dark:text-werefox-grey-lighter">
<span className="relative inline-block w-8 h-8 align-middle mb-1">
<Image src={src} layout="fill" objectFit="contain" alt={alt} />
</span>{" "}
{title}
</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">
<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 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>
);
} else {
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-lighter dark:bg-werefox-grey-dark">
<p className="p-4 text-center text-lg sm:text-2xl text-werefox-grey-dark dark:text-werefox-grey-lighter">
<span className="relative inline-block w-8 h-8 align-middle mb-1">
<Image src={src} layout="fill" objectFit="contain" alt={alt} />
</span>{" "}
{title}
</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">
<p className="p-4 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
{Object.keys(info).map((i) => (
<p className="pb-4" key={i}>
{info[i]}
</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 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 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">
<h4 className="p-4 text-center text-lg sm:text-2xl text-werefox-grey-dark dark:text-werefox-grey-lighter">
<span className="relative inline-block w-8 h-8 align-middle mb-1">
<Image src={src} layout="fill" objectFit="contain" alt={alt} />
</span>{" "}
{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>
</div>

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

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

View File

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

View File

@ -1,14 +1,26 @@
import Link from "next/link";
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 (
<li className="p2 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker w-full bg-werefox-grey-light dark:bg-werefox-grey">
<div className="p-2 flow space-y-2 w-full">
<div className="p-3 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker w-full bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
<div className="text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
<Link href={url}>
<a target="_blank" className="transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink">
<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">
<Image
src={src}

View File

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

View File

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

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

View File

@ -1,62 +1,10 @@
import BasicPage from "../../components/basic-page-template";
import WCard from "../../components/werefox-card";
import TCard from "../../components/testimonial-card";
import BasicPage from "../../components/basic-page";
import FBlock from "../../components/faq-block";
export default function FAQ() {
return (
<BasicPage page_title="FAQ" card_title="Frequently Asked Questions!">
<WCard>
<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!"
/>
<FBlock />
</BasicPage>
);
}

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

View File

@ -1,28 +1,24 @@
import BasicPage from "../../../components/basic-page-template";
import WCard from "../../../components/werefox-card";
import BasicPage from "../../../components/basic-page";
import IDCard from "../../../components/identity-card";
export default function Fursona() {
return (
<BasicPage page_title="OwO What's this?" card_title="Fursona Details!">
<WCard>
<IDCard
title="Alexis Werefox"
info={{
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.`,
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?`,
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!)`
}}
url=""
src="/emoji/pixel_alexis.png"
alt="It's me! Alexis Werefox!"
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>
<IDCard
title="Alexis Werefox"
info={{
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.`,
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?`,
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!)`,
}}
src="/emoji/pixel_alexis.png"
alt="It's me! Alexis Werefox!"
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."
/>
</BasicPage>
);
}

View File

@ -1,22 +1,19 @@
import BasicPage from "../../../components/basic-page-template";
import WCard from "../../../components/werefox-card";
import BasicPage from "../../../components/basic-page";
import IDCard from "../../../components/identity-card";
export default function Gender() {
return (
<BasicPage page_title="What's Gender?" card_title="I'm Transgender!">
<WCard>
<IDCard
title="Trans-femme"
info={{
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!`,
}}
url="https://gender.wikia.org/wiki/Transfeminine"
src="/emoji/transgender_flag.svg"
alt="The transgender flag"
/>
</WCard>
<IDCard
title="Trans-femme"
info={{
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!`,
}}
url="https://gender.wikia.org/wiki/Transfeminine"
src="/emoji/transgender_flag.svg"
alt="The transgender flag"
/>
</BasicPage>
);
}

View File

@ -1,5 +1,4 @@
import BasicPage from "../../../components/basic-page-template";
import WCard from "../../../components/werefox-card";
import BasicPage from "../../../components/basic-page";
import IDCard from "../../../components/identity-card";
export default function Neurodiversity() {
@ -8,27 +7,25 @@ export default function Neurodiversity() {
page_title="Neurodiversity, Fam"
card_title="I'm Neurodivergent!"
>
<WCard>
<IDCard
title="ADHD"
info={{
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.`,
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!`,
symptom2: `- Impulsiveness`,
symptom3: `- Impaired ability to multitask`,
symptom4: `- Time management issues`,
symptom5: `- Difficulty remembering things (especially details and things we don't find stimulating)`,
symptom6