100 lines
3.1 KiB
TypeScript
100 lines
3.1 KiB
TypeScript
import { createFileRoute } from "@tanstack/react-router";
|
|
import Jet from "~/assets/Jet.txt?ansi";
|
|
import { FrostedBox } from "~/components/frosted-box";
|
|
|
|
export const Route = createFileRoute("/")({
|
|
head: () => ({
|
|
meta: [{ title: "Jet Pham - Home" }],
|
|
}),
|
|
component: HomePage,
|
|
});
|
|
|
|
function HomePage() {
|
|
return (
|
|
<div className="flex flex-col items-center justify-start">
|
|
<FrostedBox>
|
|
<div className="flex flex-col items-center justify-center gap-[1.25ch] md:flex-row md:gap-[2ch]">
|
|
<div className="order-1 flex flex-col items-center md:order-2">
|
|
<h1 className="sr-only">Jet Pham</h1>
|
|
<div
|
|
aria-hidden="true"
|
|
data-emitter-ansi
|
|
dangerouslySetInnerHTML={{ __html: Jet }}
|
|
/>
|
|
<p className="mt-[2ch]">Software Extremist</p>
|
|
</div>
|
|
<div className="order-2 shrink-0 md:order-1">
|
|
<img
|
|
data-emitter-image
|
|
src="/jet.svg"
|
|
alt="A picture of Jet wearing a beanie in purple and blue lighting"
|
|
width="250"
|
|
height="250"
|
|
className="aspect-square w-full max-w-[220px] object-cover md:h-[263px] md:w-[175px] md:max-w-none"
|
|
style={{ backgroundColor: "#a80055", color: "transparent" }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<fieldset
|
|
className="section-block mt-[2ch] border-2 px-[calc(1.5ch-0.5px)] pt-0 pb-[1ch]"
|
|
style={{ borderColor: "var(--white)" }}
|
|
>
|
|
<legend
|
|
className="-mx-[0.5ch] px-[0.5ch]"
|
|
style={{ color: "var(--white)" }}
|
|
>
|
|
Contact
|
|
</legend>
|
|
<a href="mailto:jet@extremist.software" className="qa-inline-action">
|
|
jet@extremist.software
|
|
</a>
|
|
</fieldset>
|
|
<fieldset
|
|
className="section-block mt-[2ch] border-2 px-[calc(1.5ch-0.5px)] pt-0 pb-[1ch]"
|
|
style={{ borderColor: "var(--white)" }}
|
|
>
|
|
<legend
|
|
className="-mx-[0.5ch] px-[0.5ch]"
|
|
style={{ color: "var(--white)" }}
|
|
>
|
|
Links
|
|
</legend>
|
|
<ol>
|
|
<li>
|
|
<a
|
|
href="https://git.extremist.software"
|
|
className="inline-flex items-center"
|
|
>
|
|
Forgejo
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="https://github.com/jetpham"
|
|
className="inline-flex items-center"
|
|
>
|
|
GitHub
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="https://x.com/exmistsoftware"
|
|
className="inline-flex items-center"
|
|
>
|
|
X
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="https://bsky.app/profile/extremist.software"
|
|
className="inline-flex items-center"
|
|
>
|
|
Bluesky
|
|
</a>
|
|
</li>
|
|
</ol>
|
|
</fieldset>
|
|
</FrostedBox>
|
|
</div>
|
|
);
|
|
}
|