138 lines
5.8 KiB
JavaScript
138 lines
5.8 KiB
JavaScript
import Head from "next/head";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
|
|
export default function Home() {
|
|
return (
|
|
<div className="min-h-screen bg-werefox-grey-lighter dark:bg-werefox-grey-dark font-nerd">
|
|
<Head>
|
|
<title>About A Werefox</title>
|
|
<link rel="icon" href="/favicon.ico" />
|
|
</Head>
|
|
<div className="container space-y-4 mx-auto px-4 pt-4">
|
|
<div className="rounded-lg container bg-werefox-grey-light dark:bg-werefox-grey">
|
|
<h1 className="p-4 text-xl text-center text-werefox-blue-dark dark:text-werefox-blue">
|
|
<span className="relative inline-block w-6 h-6 align-middle">
|
|
{" "}
|
|
<Image
|
|
src="/images/pixel_alexis.png"
|
|
layout="fill"
|
|
objectFit="contain"
|
|
alt="Pixel Alexis!"
|
|
/>{" "}
|
|
</span>
|
|
-Hi! I'm Alexis Werefox!
|
|
</h1>
|
|
</div>
|
|
<div className="rounded-lg container bg-werefox-grey-light dark:bg-werefox-grey">
|
|
<div className="grid xl:grid-rows-1 xl:grid-cols-7 sm:grid-rows-3 sm:grid-cols-3 grid-rows-7 grid-cols-1 gap-2">
|
|
<div className="container p-2">
|
|
<p className="rounded-lg text-lg text-center text-werefox-grey-light dark:text-werefox-grey-dark bg-werefox-grey dark:bg-werefox-grey-light">
|
|
26
|
|
</p>
|
|
</div>
|
|
<div className="container p-2">
|
|
<p className="rounded-lg text-lg text-center text-werefox-grey-light dark:text-werefox-grey-dark bg-werefox-grey dark:bg-werefox-grey-light">
|
|
Single
|
|
</p>
|
|
</div>
|
|
<div className="container p-2">
|
|
<p className="rounded-lg text-lg text-center text-werefox-grey-light dark:text-werefox-grey-dark bg-werefox-grey dark:bg-werefox-grey-light">
|
|
<span className="relative inline-block w-4 h-4 align-middle">
|
|
{" "}
|
|
<Image
|
|
src="/emoji/polyamory_flag.svg"
|
|
layout="fill"
|
|
objectFit="contain"
|
|
alt="Polyamory flag"
|
|
/>{" "}
|
|
</span>
|
|
Polyam
|
|
</p>
|
|
</div>
|
|
<div className="container p-2">
|
|
<p className="rounded-lg text-lg xl:pt-1 xl:align-text-bottom xl:text-sm xl:min-h-full text-center text-werefox-grey-light dark:text-werefox-grey-dark bg-werefox-grey dark:bg-werefox-grey-light">
|
|
<span className="relative inline-block w-4 h-4 align-middle">
|
|
{" "}
|
|
<Image
|
|
src="/emoji/female_symbol.svg"
|
|
layout="fill"
|
|
objectFit="contain"
|
|
alt="Female symbol"
|
|
/>{" "}
|
|
</span>
|
|
<span className="relative inline-block w-4 h-4 align-middle">
|
|
{" "}
|
|
<Image
|
|
src="/emoji/transgender_flag.svg"
|
|
layout="fill"
|
|
objectFit="contain"
|
|
alt="Transgender flag"
|
|
/>{" "}
|
|
</span>{" "}
|
|
Trans-femme
|
|
</p>
|
|
</div>
|
|
<div className="container p-2">
|
|
<p className="rounded-lg text-lg text-center text-werefox-grey-light dark:text-werefox-grey-dark bg-werefox-grey dark:bg-werefox-grey-light">
|
|
<span className="relative inline-block w-4 h-4 align-middle">
|
|
{" "}
|
|
<Image
|
|
src="/emoji/pansexual_flag.svg"
|
|
layout="fill"
|
|
objectFit="contain"
|
|
alt="Pansexual flag"
|
|
/>{" "}
|
|
</span>{" "}
|
|
Pansexual
|
|
</p>
|
|
</div>
|
|
<div className="container p-2">
|
|
<p className="rounded-lg text-lg text-center text-werefox-grey-light dark:text-werefox-grey-dark bg-werefox-grey dark:bg-werefox-grey-light">
|
|
<span className="relative inline-block w-4 h-4 align-middle">
|
|
{" "}
|
|
<Image
|
|
src="/emoji/lesbian_flag.svg"
|
|
layout="fill"
|
|
objectFit="contain"
|
|
alt="Lesbian flag"
|
|
/>{" "}
|
|
</span>{" "}
|
|
Lesbian
|
|
</p>
|
|
</div>
|
|
<div className="container p-2">
|
|
<p className="rounded-lg text-lg text-center text-werefox-grey-light dark:text-werefox-grey-dark bg-werefox-grey dark:bg-werefox-grey-light">
|
|
ADHD
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="rounded-lg container bg-werefox-grey-light dark:bg-werefox-grey">
|
|
<p className="p-4 text-lg text-center text-werefox-pink-dark dark:text-werefox-pink">
|
|
Somewhere between a hot date and a hot mess. Just a witchy foxxo
|
|
programmer trying to make it in the world tbh.
|
|
</p>
|
|
</div>
|
|
<div className="rounded-lg container bg-werefox-grey-light dark:bg-werefox-grey">
|
|
<footer className="p-4">
|
|
<p className="text-center text-xs text-werefox-grey-dark dark:text-werefox-grey-light">
|
|
This site uses{" "}
|
|
<Link href="https://mutant.tech">
|
|
<a>Mutant Standard emoji</a>
|
|
</Link>
|
|
, which are licensed under a{" "}
|
|
<Link href="https://creativecommons.org/licenses/by-nc-sa/4.0/">
|
|
<a>
|
|
Creative Commons Attribution-NonCommercial-ShareAlike 4.0
|
|
International License
|
|
</a>
|
|
</Link>
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|