Initial commit of Astro version

This commit is contained in:
Bad Manners 2024-08-15 21:27:00 -03:00
commit e3d1f6999b
79 changed files with 9880 additions and 0 deletions

15
src/pages/404.astro Normal file
View file

@ -0,0 +1,15 @@
---
import BaseLayout from "../layouts/BaseLayout.astro";
---
<BaseLayout pageTitle="Not found">
<meta slot="head-description" property="og:description" content="Not found." />
<article aria-labelledby="title-not-found">
<h1 id="title-not-found" class="text-2xl sm:text-3xl">404 &ndash; Not found</h1>
<section>
<p class="mb-2 mt-5 sm:mb-3 sm:mt-6 sm:px-5 md:px-6">
The requested resource does not exist! Use the header above to navigate between pages.
</p>
</section>
</article>
</BaseLayout>

46
src/pages/about.astro Normal file
View file

@ -0,0 +1,46 @@
---
import { Image } from "astro:assets";
import BaseLayout from "../layouts/BaseLayout.astro";
import IconArrowUpRightFromSquare from "../components/icons/IconArrowUpRightFromSquare.astro";
import samStickerJuicebox from "../assets/images/sam_sticker_juicebox.webp";
---
<BaseLayout pageTitle="About me">
<meta slot="head-description" property="og:description" content="About Bad Manners." />
<article aria-labelledby="title-about-me">
<h1 id="title-about-me" class="text-2xl sm:text-3xl">About me</h1>
<section>
<p class="my-5 sm:my-6 sm:px-5 md:px-6">
You can call me <b>Bad Manners</b>, <b>Manners</b>, <b>BM</b>, <b>Bad</b>, <b>Bananas</b>... many choices to
pick from! My pronouns are "he/him". You can also call me <b>Sam</b> &ndash; which is my fursona's name. He is a
mimic and maned wolf hybrid, and you can learn more about him by clicking on him below!
</p>
<div class="mt-4">
<a
href="/sam_brendan"
class="group mx-auto mb-1 block w-max max-w-full pb-0 sm:mb-3"
aria-label="Learn more about Sam"
>
<Image
src={samStickerJuicebox}
alt="Sam Brendan with googly eyes and fangs showing from his lips, sipping from the straw of a banana juice box as some of the liquid escapes his mouth. Art by OliveCow."
class="max-w-full transition-transform group-hover:scale-105 motion-reduce:transition-none motion-reduce:group-hover:scale-100"
loading="lazy"
height={320}
/>
</a>
<span class="text-base">
A sticker of Sam by
<a
class="text-link transition-colors motion-reduce:transition-none"
href="https://olivecow.carrd.co/"
target="_blank"
>
<span class="underline">OliveCow</span>
<IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" />
</a>.
</span>
</div>
</section>
</article>
</BaseLayout>

171
src/pages/contact.astro Normal file
View file

@ -0,0 +1,171 @@
---
import BaseLayout from "../layouts/BaseLayout.astro";
import IconBluesky from "../components/icons/brands/IconBluesky.astro";
import IconDiscord from "../components/icons/brands/IconDiscord.astro";
import IconMastodon from "../components/icons/brands/IconMastodon.astro";
import IconSignal from "../components/icons/brands/IconSignal.astro";
import IconTelegram from "../components/icons/brands/IconTelegram.astro";
import IconArrowUpRightFromSquare from "../components/icons/IconArrowUpRightFromSquare.astro";
import IconClone from "../components/icons/IconClone.astro";
import IconEnvelope from "../components/icons/IconEnvelope.astro";
---
<BaseLayout pageTitle="Contact">
<meta slot="head-description" property="og:description" content="Where to find me." />
<article aria-labelledby="title-contact">
<h1 id="title-contact" class="text-2xl sm:text-3xl">Contact</h1>
<section>
<p class="mb-4 mt-5 sm:mb-3 sm:mt-6 sm:px-5 md:px-6">
Feel free to reach out to me through any of my socials below, or by
<a href="/work" class="text-link underline transition-colors motion-reduce:transition-none"
>messaging me on any of my galleries</a
>, if you wanna talk about anything!
</p>
<ul class="h-card flex flex-col items-center">
<li class="mb-2 w-max sm:mb-1">
<button
id="discord"
class="text-link mx-1 transition-colors motion-reduce:transition-none"
aria-label="Copy my Discord username to clipboard"
>
<IconDiscord width="1.75rem" height="1.75rem" class="mr-1 inline" />
<span class="p-nickname underline">badmanners</span>
<IconClone width="0.75rem" height="0.75rem" class="inline" />
</button>
</li>
<li class="h-card mb-2 w-max sm:mb-1">
<a
class="u-url text-link mx-1 transition-colors motion-reduce:transition-none"
href="https://t.me/bad_manners"
target="_blank"
aria-label="Add me on Telegram"
rel="me"
>
<IconTelegram width="1.75rem" height="1.75rem" class="mr-1 inline" />
<span class="p-nickname underline">@bad_manners</span>
<IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" />
</a>
</li>
<li class="h-card mb-2 w-max sm:mb-1">
<a
class="u-url text-link mx-1 transition-colors motion-reduce:transition-none"
href="https://signal.me/#eu/ytt_rk0fFmAB2JAW-x2PbUiJyc_H3kYmfL_Pq4QNh5QIDsiFtjdFHaqFRs1D36tB"
target="_blank"
aria-label="Add me on Signal"
rel="me"
>
<IconSignal width="1.75rem" height="1.75rem" class="mr-1 inline" />
<span class="p-nickname underline">badmanners.10</span>
<IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" />
</a>
</li>
<li class="h-card mb-2 w-max sm:mb-1">
<a
class="u-url text-link mx-1 transition-colors motion-reduce:transition-none"
href="https://meow.social/@BadManners"
target="_blank"
aria-label="Visit me on Mastodon"
rel="me"
>
<IconMastodon width="1.75rem" height="1.75rem" class="mr-1 inline" />
<span class="p-nickname underline">@BadManners@meow.social</span>
<IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" />
</a>
</li>
<li class="h-card mb-2 w-max sm:mb-1">
<a
class="u-url text-link mx-1 transition-colors motion-reduce:transition-none"
href="https://bsky.app/profile/badmanners.xyz"
target="_blank"
aria-label="Visit me on Bluesky"
rel="me"
>
<IconBluesky width="1.75rem" height="1.75rem" class="mr-1 inline" />
<span class="p-nickname underline">@badmanners.xyz</span>
<IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" />
</a>
</li>
<li class="mb-2 w-max sm:mb-1">
<button
id="email"
class="text-link mx-1 transition-colors motion-reduce:transition-none"
aria-label="Copy my e-mail address to clipboard"
>
<IconEnvelope width="1.75rem" height="1.75rem" class="mr-1 inline" />
<span class="underline" data-user="em" data-website="zyx.srennamdab" aria-label="Obfuscated e-mail address"
></span>
<IconClone width="0.75rem" height="0.75rem" class="inline" />
</button>
</li>
</ul>
</section>
</article>
</BaseLayout>
<style>
#email span:before {
content: attr(data-website) "\0040" attr(data-user);
unicode-bidi: bidi-override;
direction: rtl;
}
</style>
<script>
import tippy from "tippy.js";
import "tippy.js/dist/tippy.css";
(function () {
const discordButton = document.querySelector<HTMLElementTagNameMap["button"]>("button#discord")!;
const discordTooltip = tippy(discordButton, {
content: "Username copied to clipboard!",
trigger: "manual",
theme: "bm",
});
const emailButton = document.querySelector<HTMLElementTagNameMap["button"]>("button#email")!;
const emailTooltip = tippy(emailButton, {
content: "E-mail address copied to clipboard!",
trigger: "manual",
theme: "bm",
});
let tooltipTimeout: any = null;
discordButton.addEventListener("click", (ev) => {
ev.preventDefault();
tooltipTimeout && clearTimeout(tooltipTimeout);
discordTooltip.hide();
emailTooltip.hide();
const text = discordButton.querySelector("span")!.innerText;
navigator.clipboard
.writeText(text)
.then(() => {
discordTooltip.show();
tooltipTimeout = setTimeout(() => {
discordTooltip.hide();
}, 2000);
})
.catch((e) => {
console.error("Unable to copy text to clipboard", e);
});
});
emailButton.addEventListener("click", (ev) => {
ev.preventDefault();
tooltipTimeout && clearTimeout(tooltipTimeout);
discordTooltip.hide();
emailTooltip.hide();
const emailData = emailButton.querySelector("span")!;
const text = `${emailData.dataset.user!.split("").reverse().join("")}@${emailData.dataset.website!.split("").reverse().join("")}`;
navigator.clipboard
.writeText(text)
.then(() => {
emailTooltip.show();
tooltipTimeout = setTimeout(() => {
emailTooltip.hide();
}, 2000);
})
.catch((e) => {
console.error("Unable to copy text to clipboard", e);
});
});
})();
</script>

27
src/pages/feed.xml.ts Normal file
View file

@ -0,0 +1,27 @@
import rss from "@astrojs/rss";
import type { APIRoute } from "astro";
import { set as dateSet, subMinutes } from "date-fns";
import { TOS_COMMISSION_STATUS, TOS_UPDATED_AT } from "../data/tos";
export const GET: APIRoute = async ({ site }) => {
return rss({
title: "Bad Manners",
description: "Bad Manners status updates",
site: site!,
items: [
{
title: {
CLOSED: "Story commissions are closed.",
OPEN: "Story commissions are open!",
SEMI_OPEN: "Story commissions are semi-open, and I may accept them less frequently.",
PRIVATE: "Story commissions are private; they are only open to select commissioners.",
}[TOS_COMMISSION_STATUS],
link: "https://badmanners.xyz/terms_of_service",
pubDate: subMinutes(
dateSet(TOS_UPDATED_AT, { hours: 12, minutes: 0, seconds: 0 }),
TOS_UPDATED_AT.getTimezoneOffset(),
),
},
],
});
};

183
src/pages/index.astro Normal file
View file

@ -0,0 +1,183 @@
---
import BaseLayout from "../layouts/BaseLayout.astro";
import IconBluesky from "../components/icons/brands/IconBluesky.astro";
import IconEkasPortal from "../components/icons/brands/IconEkasPortal.astro";
import IconFurAffinity from "../components/icons/brands/IconFurAffinity.astro";
import IconInkbunny from "../components/icons/brands/IconInkbunny.astro";
import IconMastodon from "../components/icons/brands/IconMastodon.astro";
import IconSoFurry from "../components/icons/brands/IconSoFurry.astro";
import IconTwitter from "../components/icons/brands/IconTwitter.astro";
import IconWeasyl from "../components/icons/brands/IconWeasyl.astro";
import IconSignal from "../components/icons/brands/IconSignal.astro";
import IconTelegram from "../components/icons/brands/IconTelegram.astro";
import IconKeybase from "../components/icons/brands/IconKeybase.astro";
import IconSubscribeStar from "../components/icons/brands/IconSubscribeStar.astro";
---
<BaseLayout>
<meta
slot="head-description"
property="og:description"
content="Safe vore enthusiast, mimic hybrid, and occasional writer."
/>
<article class="h-card" aria-labelledby="title-home">
<h1 id="title-home" class="pb-4 text-3xl tracking-tight sm:text-5xl">
Hi, I'm <span class="p-name">Bad Manners</span>!
</h1>
<section>
<img
loading="eager"
src="/logo.webp"
alt="Logo for Bad Manners"
class="u-logo mx-auto my-4 h-screen max-h-48 rounded-full transition-transform hover:scale-110 motion-reduce:transition-none motion-reduce:hover:scale-100 sm:max-h-72"
/>
<p class="p-note mt-6 sm:px-5 md:px-6">I'm a safe vore enthusiast, and a furry who occasionally writes stuff.</p>
<ul class="grid grid-cols-3 gap-4 px-4 pt-8 sm:grid-cols-4 sm:px-20 md:px-32">
<li>
<a
class="u-url text-link transition-colors motion-reduce:transition-none"
href="https://www.furaffinity.net/user/BadManners"
target="_blank"
rel="me"
title="Fur Affinity"
>
<IconFurAffinity height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">BadManners</span>
</a>
</li>
<li>
<a
class="u-url text-link transition-colors motion-reduce:transition-none"
href="https://aryion.com/g4/user/BadManners"
target="_blank"
rel="me"
title="Eka's Portal"
>
<IconEkasPortal height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">BadManners</span>
</a>
</li>
<li>
<a
class="u-url text-link transition-colors motion-reduce:transition-none"
href="https://inkbunny.net/BadManners"
target="_blank"
rel="me"
title="Inkbunny"
>
<IconInkbunny height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">BadManners</span>
</a>
</li>
<li>
<a
class="u-url text-link transition-colors motion-reduce:transition-none"
href="https://bad-manners.sofurry.com/"
target="_blank"
rel="me"
title="SoFurry"
>
<IconSoFurry height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">Bad Manners</span>
</a>
</li>
<li>
<a
class="u-url text-link transition-colors motion-reduce:transition-none"
href="https://www.weasyl.com/~badmanners"
target="_blank"
rel="me"
title="Weasyl"
>
<IconWeasyl height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">BadManners</span>
</a>
</li>
<li>
<a
class="u-url text-link transition-colors motion-reduce:transition-none"
rel="me"
href="https://meow.social/@BadManners"
target="_blank"
title="Mastodon"
>
<IconMastodon height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">@BadManners@meow.social</span>
</a>
</li>
<li>
<a
class="u-url text-link transition-colors motion-reduce:transition-none"
rel="me"
href="https://bsky.app/profile/badmanners.xyz"
target="_blank"
title="Bluesky"
>
<IconBluesky height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">@badmanners.xyz</span>
</a>
</li>
<li>
<a
class="u-url text-link transition-colors motion-reduce:transition-none"
rel="me"
href="https://x.com/BadManners__"
target="_blank"
title="X"
>
<IconTwitter height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">@BadManners__</span>
</a>
</li>
<li>
<a
class="u-url text-link transition-colors motion-reduce:transition-none"
rel="me"
href="https://t.me/bad_manners"
target="_blank"
title="Telegram"
>
<IconTelegram height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">@bad_manners</span>
</a>
</li>
<li>
<a
class="u-url text-link transition-colors motion-reduce:transition-none"
rel="me"
href="https://keybase.io/badmanners"
target="_blank"
title="Keybase"
>
<IconKeybase height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">badmanners</span>
</a>
</li>
<li>
<a
class="u-url text-link transition-colors motion-reduce:transition-none"
rel="me"
href="https://signal.me/#eu/ytt_rk0fFmAB2JAW-x2PbUiJyc_H3kYmfL_Pq4QNh5QIDsiFtjdFHaqFRs1D36tB"
target="_blank"
title="Signal"
>
<IconSignal height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">badmanners.10</span>
</a>
</li>
<li>
<a
class="u-url text-link transition-colors motion-reduce:transition-none"
rel="me"
href="https://subscribestar.adult/bad-manners"
target="_blank"
title="SubscribeStar"
>
<IconSubscribeStar height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">bad-manners</span>
</a>
</li>
</ul>
</section>
</article>
</BaseLayout>

173
src/pages/sam_brendan.astro Normal file
View file

@ -0,0 +1,173 @@
---
import { Image } from "astro:assets";
import BaseLayout from "../layouts/BaseLayout.astro";
import IconArrowUpRightFromSquare from "../components/icons/IconArrowUpRightFromSquare.astro";
import samRefsheet from "../assets/images/sam_refsheet.webp";
import samAllStickers from "../assets/images/sam_all_stickers.webp";
---
<BaseLayout pageTitle="Sam Brendan">
<meta slot="head-description" property="og:description" content="Mimic x maned wolf hybrid." />
<article aria-labelledby="title-sam-brendan">
<h1 id="title-sam-brendan" class="text-2xl sm:text-3xl">Sam Brendan</h1>
<section>
<p class="my-4 text-justify sm:my-6 sm:px-5 md:px-12">
<b>Sam Brendan</b> (or simply <b>Sam</b>) is a mimic x maned wolf hybrid. The main color of his fur is lime
green, with light teal and white details. His most noticeable feature, however, is the metal briefcase that he
has in lieu of a face &ndash; the mimic portion of his body.
</p>
</section>
<section aria-labelledby="title-physical-description">
<h2 id="title-physical-description" class="my-4 text-lg sm:my-6 sm:text-2xl">Physical description</h2>
<div class="my-4">
<a
class="group mx-auto mb-1 block w-max max-w-full pb-0 sm:mb-3"
href="https://booru.badmanners.xyz/index.php?q=post/view/1"
target="_blank"
>
<Image
src={samRefsheet}
alt="A reference sheet of Sam Brendan, a mimic x maned wolf hybrid. Art by Rimmi."
class="max-w-full transition-transform group-hover:scale-105 motion-reduce:transition-none motion-reduce:group-hover:scale-100"
loading="lazy"
height={512}
/>
</a>
<span class="text-base">
A reference sheet of Sam Brendan, by
<a class="text-link transition-colors" href="https://linktr.ee/Rimmi1357" target="_blank">
<span class="underline">Rimmi</span>
<IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" /></a
>. Click to view in higher quality.
</span>
</div>
<p class="mt-3 text-justify indent-6 sm:mt-2 sm:px-5 sm:indent-12 md:px-12">
He has big, pointy, forward-facing ears, with big tufts in a light teal-to-white gradient coming out from the
inside. The rest of his head is different from a regular maned wolf's, however. Everything from the top of his
forehead down to the front of his neck is replaced by a metal briefcase ₋ including his eyes and snout &ndash;
due to partially being a mimic of the object. More specifically, the briefcase has a gray matte texture, with
its hinges at the bottom. On top, there are two latches by the sides, and a dark gray pull handle in the middle
&ndash; all three clamp down towards the front. There is no discernible unlocking mechanism for the latches. On
the flat sides, the briefcase has several thin ridges across the width.
</p>
<p class="mt-3 text-justify indent-6 sm:mt-2 sm:px-5 sm:indent-12 md:px-12">
His mimic half can split in half longitudinally to reveal his green maw, with irregular and crooked white fangs,
muscular buccinators on the sides, and a long prehensile and sticky tongue that is pastel yellow at the tip. It
is connected to his lime-green digestive system.
</p>
<p class="mb-5 mt-3 text-justify indent-6 sm:mb-4 sm:mt-2 sm:px-5 sm:indent-12 md:px-12">
Sam's body is slim, and his claws are short and white. His extremities are also white (instead of dark like most
maned wolves). His upper paws are similar to hands, his digitigrade feet have lime green pads, and his fluffy
tail is medium in size. These limbs connect to the lime green on his torso with a light teal gradient. The
center of his torso is white, with more light teal gradients on the sides of the ribs. He has some excess
fluffiness throughout his whole body, including a tuft above his chest. On his shoulders, the back of his head,
and the inner side of each thigh, he has small white markings of three triangles of differing sizes. He features
a similar but larger pattern on his back, containing five white triangles.
</p>
</section>
<section aria-labelledby="title-personality">
<h2 id="title-personality" class="my-4 text-lg sm:my-6 sm:text-2xl">Personality</h2>
<div class="my-4">
<a
class="group mx-auto mb-1 block w-max max-w-full pb-0 sm:mb-3"
href="https://booru.badmanners.xyz/index.php?q=post/view/2"
target="_blank"
>
<Image
src={samAllStickers}
alt="A set with ten stickers of Sam Brendan displaying different actions and emotions. Art by OliveCow."
class="max-w-full transition-transform group-hover:scale-105 motion-reduce:transition-none motion-reduce:group-hover:scale-100"
loading="lazy"
height={512}
/>
</a>
<span class="text-base">
A set of stickers featuring Sam Brendan, by
<a class="text-link transition-colors" href="https://olivecow.carrd.co/" target="_blank">
<span class="underline">OliveCow</span>
<IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" /></a
>. Click to view in higher quality.
</span>
</div>
<p class="mt-3 text-justify indent-6 sm:mt-2 sm:px-5 sm:indent-12 md:px-12">
Sam is normally solitary and anxious but friendly and extremely curious, with a particular interest in sciences.
Sometimes introverted and shy, sometimes loud and active, he's quite prone to mood swings, although he tries to
be reasonable and act on good intentions and manners whenever possible. He is quite fond of anagrams and
wordplay. His main weaknesses are ear scritches and constantly focusing on others' approval. His main strength
is finding humor in little things.
</p>
<p class="mt-3 text-justify indent-6 sm:mt-2 sm:px-5 sm:indent-12 md:px-12">
Due to his inability to display facial expressions, he usually resorts to stereotypical conveyances of emotions
by sticking adhesive accessories on the briefcase. For this purpose, he can make use of googly eyes (his
favorite accessories), removable paint and powder, stickers (e.g. to simulate smiles or expressions), and more.
He dislikes being nicknamed Briefcase or anything along those lines but is fine being called by either of his
species. It's very rare for him to ever open his case.
</p>
<p class="mb-5 mt-3 text-justify indent-6 sm:mb-4 sm:mt-2 sm:px-5 sm:indent-12 md:px-12">
He's quite self-conscious about his mimic maw and normally avoids showing it in public. These factors lead to
him usually eating alone, as well as being confused and flustered by people who seem keenly interested in his
maw. However, in specific moods (such as vorish ones), he has no qualms about displaying and using his maw. He
can be either predator or prey, depending on the situation. When prey, his predator may notice how his fur has a
citric and sweet taste and perfume, similar to lime pie.
</p>
</section>
<section aria-labelledby="title-abilities">
<h2 id="title-abilities" class="my-4 text-lg sm:my-6 sm:text-2xl">Abilities</h2>
<ul class="mb-5 text-justify sm:mb-4 sm:px-5 md:px-12">
<li class="mx-7 mb-1 list-disc indent-0 sm:mx-10">
Mimicking voices or simple sounds, and speak without moving his mouth.
</li>
<li class="mx-7 mb-1 list-disc indent-0 sm:mx-10">
Materializing adhesive facial accessories out of thin air into his paws.
</li>
<li class="mx-7 mb-1 list-disc indent-0 sm:mx-10">
Controlling the movable parts of his mimic half (hinges, latches, handle), like any other limb. Even when
unconscious, he's able to keep his case tightly shut.
</li>
<li class="mx-7 mb-1 list-disc indent-0 sm:mx-10">
Opening his face like a normal briefcase would open (only when his maw is closed), revealing a single
compartment that exists extra-spatially &ndash; i.e. in a pocket dimension separate from the rest of his maw.
</li>
<li class="mx-7 mb-1 list-disc indent-0 sm:mx-10">
Making his maned wolf body temporarily disappear, becoming indistinguishable from a briefcase mimic except for
a patch of green and white fur on the backside.
</li>
</ul>
</section>
<section aria-labelledby="title-sensorial-report">
<h2 id="title-sensorial-report" class="my-4 text-lg sm:my-6 sm:text-2xl">Sensorial report</h2>
<p class="mb-5 mt-3 text-justify indent-6 sm:mb-4 sm:mt-2 sm:px-5 sm:indent-12 md:px-12">
His mimic parts (henceforth referred to as 'face') are mostly organic, but still contain traces of metallic
elements, making non-invasive examinations such as X-ray and MRI difficult. However, stimulation through short
electrical impulses at the junction between his head and his face results in messages reaching the brain,
indicating that there is a rich nervous network through the seam. The following data has been collected based on
empirical observations and Sam's self-reporting.
</p>
<ul class="mb-5 mt-3 text-justify sm:mb-4 sm:mt-2 sm:px-5 md:px-12">
<li class="mx-7 mb-1 list-disc indent-0 sm:mx-10">
<b>Sense of sight:</b> Mimics' skins are photosensitive, and Sam's face similarly has almost 360° of vision, with
minor loss of focus outside the center. This ability is restricted by perceiving the world as black and white,
therefore minimizing sensory overload, but he's able to focus on a single object to perceive trichromatic hues.
</li>
<li class="mx-7 mb-1 list-disc indent-0 sm:mx-10">
<b>Sense of hearing:</b> Excellent hearing, unaffected by the obstruction from his face. Normal sense of balance.
</li>
<li class="mx-7 mb-1 list-disc indent-0 sm:mx-10">
<b>Sense of touch:</b> He's able to perceive pressure on his face, albeit with considerably diminished capacity
than the rest of his body. The region also has even dimmer senses of temperature and pain. But being of magical
origin, it is sensitive to such energies.
</li>
<li class="mx-7 mb-1 list-disc indent-0 sm:mx-10">
<b>Sense of taste:</b> With the maw that appears in front of his face, Sam is capable of tasting and consuming
anything. He reports that "certain flavors are extremely vivid" (further clarification has been requested to amend
this report).
</li>
<li class="mx-7 mb-1 list-disc indent-0 sm:mx-10">
<b>Sense of smell:</b> Capable of discerning strong smells with chemoreceptors in his face, while normally breathing
through air diffusion instead of his lungs. Sam reports that most smells are quite weak, but those pertaining to
living beings are particularly pronounced.
</li>
</ul>
</section>
</article>
</BaseLayout>

View file

@ -0,0 +1,136 @@
---
import BaseLayout from "../layouts/BaseLayout.astro";
import IconSquareRSS from "../components/icons/IconSquareRSS.astro";
import { TOS_COMMISSION_STATUS, TOS_UPDATED_AT } from "../data/tos";
---
<BaseLayout pageTitle="Terms of Service">
<meta slot="head-description" property="og:description" content="My Terms of Service for story commissions." />
<article aria-labelledby="title-tos">
<h1 id="title-tos" class="mb-4 text-2xl sm:mb-5 sm:text-3xl">Terms of Service for story commissions</h1>
<section aria-label="Commission status">
<div class="my-2 flex items-center justify-end">
<p class="mr-1 text-sm font-normal italic">
Last update: {TOS_UPDATED_AT.toLocaleDateString("en-US", { dateStyle: "long" })}
</p>
<a
class="text-link transition-colors motion-reduce:transition-none"
href="/feed.xml"
rel="alternate"
type="application/rss+xml"
target="_blank"
title="RSS feed"><IconSquareRSS width="2rem" height="2rem" class="p-1" /></a
>
</div>
{
TOS_COMMISSION_STATUS == "CLOSED" ? (
<p class="mb-4 text-2xl font-normal uppercase sm:mb-8 sm:px-5 md:px-6">
Commissions are
<span class="text-red-600 dark:text-red-500">closed</span>.
</p>
) : TOS_COMMISSION_STATUS == "OPEN" ? (
<p class="mb-4 text-2xl font-normal uppercase sm:mb-8 sm:px-5 md:px-6">
Commissions are <span class="text-bm-500 dark:text-bm-400">open</span>.
</p>
) : TOS_COMMISSION_STATUS == "SEMI_OPEN" ? (
<p class="mb-4 text-2xl font-normal sm:mb-8 sm:px-5 md:px-6">
<span class="uppercase">
Commissions are <span class="text-orange-600 dark:text-orange-500">semi-open</span>
</span>
. I'll be more picky about which commissions to take.
</p>
) : TOS_COMMISSION_STATUS == "PRIVATE" ? (
<p class="mb-4 text-2xl font-normal sm:mb-8 sm:px-5 md:px-6">
<span class="uppercase">
Commissions are <span class="text-red-600 dark:text-red-500">private</span>
</span>
. I'm only taking commissions from select clients.
</p>
) : null
}
</section>
<section>
<p class="mb-2 text-justify indent-6 sm:px-5 sm:indent-12 md:px-6">
To stay flexible with both the word count and the deadline, I'm taking payments <em>after</em> the commission is
done. My rate is <b>US$&nbsp;1.50 per 100 words</b>, and the final price is only set when the story is finished<a
class="hover:underline"
href="#note-1"
aria-label="See note 1"><sup>[1]</sup></a
>. The word count will be rounded to the nearest hundredth for pricing purposes, and the finished story will be
published in my public galleries.
</p>
<p class="mb-2 text-justify indent-6 sm:px-5 sm:indent-12 md:px-6">
We can discuss your budget, taking into consideration how big I expect the project to turn out and how much
you're willing to pay. If the finished story ends up under the limit, then the actual price will be lowered to
match. But if I go over the budget instead, you're under no obligation to pay for anything other than what was
originally agreed.
</p>
<p class="mb-3 text-justify indent-6 sm:px-5 sm:indent-12 md:px-6">
By asking me for a commission, you acknowledge: a)&nbsp;that you are 18+ years old; b)&nbsp;that you are readily
committed to paying me right after the commission is done, and; c)&nbsp;that you agree to these terms.
</p>
<p id="note-1" class="mb-6 text-justify text-sm font-normal sm:px-5 md:px-6">
[1] For first-time commissioners requesting a budget of 8,000+ words, a deposit equivalent to the first 4,000
words <em>may</em> be requested. In such a case, the final payment will have that amount discounted.
</p>
</section>
<section aria-labelledby="title-commission-subjects">
<h2 id="title-commission-subjects" class="my-4 text-lg sm:my-6 sm:text-2xl">Commission subjects</h2>
<ul class="mb-8 text-justify text-base sm:px-3 sm:text-lg md:px-6">
<li class="mx-6 mb-1 list-disc sm:mx-8">
I can work with any kind of safe vore, as long as there's no digestion, fatality, reformation, absorption, or
disposal &ndash; in other words, anything considered "endosoma" is fine. As for characters, I can write any
ferals or anthros, of any gender or sexuality.
</li>
<li class="mx-6 mb-1 list-disc sm:mx-8">
I won't write real-life characters, or extreme content like non-consensual sex, underage characters in
sexual/fetishistic/suggestive situations, bestiality (sex with non-sapient ferals), scat, gore, or snuff.
</li>
<li class="mx-6 mb-1 list-disc sm:mx-8">
Despite my focus being on vore, other subjects and scenarios are generally fine to work with. I don't mind
working outside my comfort zone, save for the exceptions above &ndash; but reach out to discuss any subjects
beforehand.
</li>
</ul>
</section>
<section aria-labelledby="title-additional-information">
<h2 id="title-additional-information" class="my-4 text-lg sm:my-6 sm:text-2xl">Additional information</h2>
<ul class="mb-6 text-justify text-base sm:px-3 sm:text-lg md:px-6">
<li class="mx-6 mb-1 list-disc sm:mx-8">
These prices and terms, including my availability for commission work, are subject to change in the future.
</li>
<li class="mx-6 mb-1 list-disc sm:mx-8">
I reserve the right to refuse commission requests, before payment, for any reason.
</li>
<li class="mx-6 mb-1 list-disc sm:mx-8">
If you need any modifications to the concluded draft, let me know before I send you an invoice. Any minor
additions will be included in the final word count, according to the previously agreed budget. Major changes
or additions may incur extra fees.
</li>
<li class="mx-6 mb-1 list-disc sm:mx-8">
Currently, I can receive payments through PayPal or Pix (for Brazilian customers, after the appropriate price
conversion to BRL). For longer commissions, payment in multiple parts can be arranged as long as you request
it in advance.
</li>
<li class="mx-6 mb-1 list-disc sm:mx-8">
You are allowed to distribute the final version of the story for free with proper attribution. But you are NOT
allowed to claim that you wrote it, sell it, monetize its distribution, use it for plagiarism, or modify it in
any form.
<ul>
<li class="ml-6 list-disc sm:ml-8">
As for any unfinished WIPs or unpaid commissions, on top of the restrictions above, you are NOT allowed to
save them, distribute them, or use them as a reference for someone else's work.
</li>
</ul>
</li>
<li class="mx-6 mb-1 list-disc sm:mx-8">
If you have any doubts, or are considering getting a commission from me,
<a href="/contact" class="text-link underline transition-colors motion-reduce:transition-none"
>please reach out</a
>!
</li>
</ul>
</section>
</article>
</BaseLayout>

236
src/pages/work.astro Normal file
View file

@ -0,0 +1,236 @@
---
import BaseLayout from "../layouts/BaseLayout.astro";
import IconEkasPortal from "../components/icons/brands/IconEkasPortal.astro";
import IconFurAffinity from "../components/icons/brands/IconFurAffinity.astro";
import IconInkbunny from "../components/icons/brands/IconInkbunny.astro";
import IconSoFurry from "../components/icons/brands/IconSoFurry.astro";
import IconSubscribeStar from "../components/icons/brands/IconSubscribeStar.astro";
import IconWeasyl from "../components/icons/brands/IconWeasyl.astro";
import IconArrowUpRightFromSquare from "../components/icons/IconArrowUpRightFromSquare.astro";
import IconBriefcase from "../components/icons/IconBriefcase.astro";
import { TOS_COMMISSION_STATUS } from "../data/tos";
import { SUBSCRIBESTAR_ENABLED } from "../data/subscribestar";
---
<BaseLayout pageTitle="My work">
<meta slot="head-description" property="og:description" content="The things I've made." />
<article aria-labelledby="title-my-work" class="sm:px-5 md:px-6">
<h1 id="title-my-work" class="text-2xl sm:text-3xl">My work</h1>
<section>
<p class="mb-4 mt-5 sm:mb-3 sm:mt-6">
I've been a lurker in the furry vore community for a long time before I decided to start writing
<a
class="text-link transition-colors motion-reduce:transition-none"
href="https://gallery.badmanners.xyz/stories/1"
target="_blank"
>
<span class="underline">safe vore stories</span>
<IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" />
</a>. Since there's a lot in furry endosoma that I enjoy, my stories tend to
<a
class="text-link underline transition-colors motion-reduce:transition-none"
href="https://gallery.badmanners.xyz/tags"
target="_blank"
>
<span class="underline">have all sorts of themes and scenarios</span>
<IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" />
</a>, including exotic ones. My content is all tagged with the appropriate content warnings, so if you enjoy
safe vore, chances are that you'll find something in my gallery that is right up your alley.
</p>
<p class="mb-4 mt-5 sm:mb-3 sm:mt-6">
I've also made a game called
<a
class="text-link underline transition-colors motion-reduce:transition-none"
href="https://gallery.badmanners.xyz/games/crossing-over"
target="_blank"
>
<span>"Crossing Over"</span>
<IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" /></a
>, as part of Strawberry Jam 8 (a game jam hosted by eevee on Feb. 2024).
</p>
<p class="mb-4 mt-5 sm:mb-3 sm:mt-6">
You can find my gallery on the following websites, which include all of my content. Aside from the first link,
my other galleries also include some of the art that I've gotten from others (commissions, gifts, etc.).
</p>
<ul class="flex flex-col items-center">
<li class="mb-2 w-max sm:mb-1">
<a
class="text-link mx-1 transition-colors motion-reduce:transition-none"
href="https://gallery.badmanners.xyz/"
target="_blank"
>
<IconBriefcase height="1.75rem" width="1.75rem" class="mr-1 inline" />
<span class="underline">gallery.badmanners.xyz</span>
<IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" />
</a>
</li>
<li class="mb-2 w-max sm:mb-1">
<a
class="text-link mx-1 transition-colors motion-reduce:transition-none"
href="https://www.furaffinity.net/user/BadManners"
target="_blank"
rel="me"
>
<IconFurAffinity height="1.75rem" width="1.75rem" class="mr-1 inline" />
<span class="underline">Fur Affinity</span>
<IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" />
</a>
</li>
<li class="mb-2 w-max sm:mb-1">
<a
class="text-link mx-1 transition-colors motion-reduce:transition-none"
href="https://aryion.com/g4/user/BadManners"
target="_blank"
rel="me"
>
<IconEkasPortal height="1.75rem" width="1.75rem" class="mr-1 inline" />
<span class="underline">Eka's Portal</span>
<IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" />
</a>
</li>
<li class="mb-2 w-max sm:mb-1">
<a
class="text-link mx-1 transition-colors motion-reduce:transition-none"
href="https://inkbunny.net/BadManners"
target="_blank"
rel="me"
>
<IconInkbunny height="1.75rem" width="1.75rem" class="mr-1 inline" />
<span class="underline">Inkbunny</span>
<IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" />
</a>
</li>
<li class="mb-2 w-max sm:mb-1">
<a
class="text-link mx-1 transition-colors motion-reduce:transition-none"
href="https://bad-manners.sofurry.com/"
target="_blank"
rel="me"
>
<IconSoFurry height="1.75rem" width="1.75rem" class="mr-1 inline" />
<span class="underline">SoFurry</span>
<IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" />
</a>
</li>
<li class="mb-2 w-max sm:mb-1">
<a
class="text-link mx-1 transition-colors motion-reduce:transition-none"
href="https://www.weasyl.com/~badmanners"
target="_blank"
rel="me"
>
<IconWeasyl height="1.75rem" width="1.75rem" class="mr-1 inline" />
<span class="underline">Weasyl</span>
<IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" />
</a>
</li>
</ul>
</section>
<section aria-labelledby="title-story-commissions">
<h2 id="title-story-commissions" class="my-4 text-lg sm:my-6 sm:text-2xl">Story commissions</h2>
{
TOS_COMMISSION_STATUS == "CLOSED" ? (
<p class="mb-6 mt-2 sm:mt-3">
My story commissions are currently closed, but regardless, feel free to
<a href="/terms_of_service" class="text-link underline transition-colors motion-reduce:transition-none">
check out my Terms of Service
</a>
if interested.
</p>
) : TOS_COMMISSION_STATUS == "OPEN" ? (
<p class="mb-6 mt-2 sm:mt-3">
My story commissions are currently open! Feel free to
<a href="/terms_of_service" class="text-link underline transition-colors motion-reduce:transition-none">
check out my Terms of Service
</a>
if interested.
</p>
) : TOS_COMMISSION_STATUS == "SEMI_OPEN" ? (
<p class="mb-6 mt-2 sm:mt-3">
My story commissions are currently semi-open, meaning that I may take some commissions, but might reject or
postpone them more easily. Feel free to
<a href="/terms_of_service" class="text-link underline transition-colors motion-reduce:transition-none">
check out my Terms of Service
</a>
if interested.
</p>
) : TOS_COMMISSION_STATUS == "PRIVATE" ? (
<p class="mb-6 mt-2 sm:mt-3">
My story commissions are currently private, meaning that I'm not offering slots publicly, but I may still
work on commissions for specific clients. Regardless of whether this applies to you or not, feel free to
<a href="/terms_of_service" class="text-link underline transition-colors motion-reduce:transition-none">
check out my Terms of Service
</a>
if interested.
</p>
) : (
<p class="mb-6 mt-2 sm:mt-3">
Feel free to
<a href="/terms_of_service" class="text-link underline transition-colors motion-reduce:transition-none">
check out my Terms of Service
</a>
if interested.
</p>
)
}
</section>
<section aria-labelledby="title-paid-subscriptions">
<h2 id="title-paid-subscriptions" class="my-4 text-lg sm:my-6 sm:text-2xl">Paid subscriptions and tips</h2>
{
SUBSCRIBESTAR_ENABLED ? (
<p class="mb-4 mt-5 sm:mb-3 sm:mt-6">
For continued support, I'm using SubscribeStar as a patronage subscription service! Although I intend to
publish all of my stories publicly, I'm exploring options on how to reward people who are able to
financially support my work with recurring payments.
</p>
) : (
<p class="mb-4 mt-5 sm:mb-3 sm:mt-6">
In the past, I've used SubscribeStar as a subscription service. Currently, this option is disabled, although
my profile page is still accessible through the link below.
</p>
)
}
<a
class="text-link mx-auto transition-colors motion-reduce:transition-none"
href="https://subscribestar.adult/bad-manners"
target="_blank"
>
<IconSubscribeStar width="1.75rem" height="1.75rem" class="mr-1 inline" />
<span class="underline">Check out my SubscribeStar!</span>
<IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" />
</a>
{
SUBSCRIBESTAR_ENABLED ? (
<p class="mt-3 sm:mt-4">
If you'd like to tip me once, you can still do it through SubscribeStar! Simply subscribe through the link
above, then immediately cancel the renewal. That way, you'll even get subscriber benefits for that month!
</p>
) : null
}
</section>
<section aria-labelledby="title-other-work">
<h2 id="title-other-work" class="my-4 text-lg sm:my-6 sm:text-2xl">Other work</h2>
<p class="mb-6 mt-3 sm:mb-8 sm:mt-4">
Other than the above, I've done some miscellaneous work. This includes
<a
href="https://git.badmanners.xyz/badmanners?tab=repositories"
target="_blank"
class="text-link transition-colors motion-reduce:transition-none"
>
<span class="underline">writing code (such as both of my websites)</span>
<IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="mb-1 inline" />
</a>, and localizing
<a
href="https://desiran.itch.io/wrangler"
target="_blank"
class="text-link transition-colors motion-reduce:transition-none"
>
<span class="underline">Wrangler</span>
<IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="mb-1 inline" />
</a>
to Brazilian Portuguese.
</p>
</section>
</article>
</BaseLayout>