Initial commit of Astro version
This commit is contained in:
commit
e3d1f6999b
79 changed files with 9880 additions and 0 deletions
171
src/pages/contact.astro
Normal file
171
src/pages/contact.astro
Normal 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue