atri.dad/src/pages/index.astro
2023-04-20 04:20:00 -06:00

158 lines
4.8 KiB
Text

---
import BaseHead from "../components/BaseHead.astro";
import Header from "../components/Header.astro";
import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
import {
SiGithub,
SiLinkedin,
SiNextdotjs,
SiPrisma,
SiSpotify,
SiTwitch,
SiTwitter,
SiYoutube,
SiAstro,
SiSvelte,
SiPostgresql,
SiRedis,
SiRailway,
} from "react-icons/si";
---
<!DOCTYPE html>
<html lang="en" data-theme="night">
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head>
<body class="block h-[100%]">
<Header title={SITE_TITLE} />
<main
class="container flex flex-col items-center justify-center gap-3 sm:gap-6 px-4 py-16 text-center mx-auto min-h-[calc(100%-64px)]"
>
<h1 class="text-4xl font-extrabold text-white sm:text-8xl">
Hi, I&apos;m <span class="text-pink-500">Atridad</span>
</h1>
<h2
class="text-2xl font-extrabold tracking-tight text-white sm:text-[2rem]"
>
I&apos;m a <span class="text-green-500">persian</span> -
<span class="text-red-500">canadian</span>{" "}
<span
class="bg-gradient-to-r from-pink-500 to-blue-500 bg-clip-text text-transparent"
>
queer
</span>{" "}
software developer who loves making things for the web.
</h2>
<h2
class="text-xl font-extrabold tracking-tight text-white sm:text-[1.5rem]"
>
Pronouns: (he/<span class="text-pink-500">they</span>)
</h2>
<span>
<h2 class="mb-2 text-xl text-white sm:text-[1.5rem]">
Places I exist:
</h2>
<div
class="flex flex-row flex-wrap items-center justify-center gap-4 text-center"
>
<a
href={"https://www.linkedin.com/in/atridad/"}
target="_blank"
aria-label="Linkedin"
>
<SiLinkedin className="text-2xl hover:text-pink-500 sm:text-4xl" />
</a>
<a
href={"https://twitter.com/atridadl/"}
target="_blank"
aria-label="Twitter"
>
<SiTwitter className="text-2xl hover:text-pink-500 sm:text-4xl" />
</a>
<a
href={"https://github.com/atridadl"}
target="_blank"
aria-label="Github"
>
<SiGithub className="text-2xl hover:text-pink-500 sm:text-4xl" />
</a>
<a
href={"https://open.spotify.com/user/31v3p4oq6im7fvpqhhbju222pbr4?si=d75830b95ed94d4f"}
target="_blank"
aria-label="Spotify"
>
<SiSpotify className="text-2xl hover:text-pink-500 sm:text-4xl" />
</a>
<a
href={"https://www.twitch.tv/himbothyswaggins"}
target="_blank"
aria-label="Twitch.tv"
>
<SiTwitch className="text-2xl hover:text-pink-500 sm:text-4xl" />
</a>
<a
href={"https://www.youtube.com/@himbothyswaggins"}
target="_blank"
aria-label="YouTube"
>
<SiYoutube className="text-2xl hover:text-pink-500 sm:text-4xl" />
</a>
</div>
</span>
<span>
<h2 class="mb-2 text-xl text-white sm:text-[1.5rem]">Stuff I use:</h2>
<div
class="flex flex-row flex-wrap items-center justify-center gap-4 text-center"
>
<a href={"https://nextjs.org/"} target="_blank" aria-label="Next.js">
<SiNextdotjs className="text-2xl hover:text-pink-500 sm:text-4xl" />
</a>
<a href={"https://astro.build/"} target="_blank" aria-label="Astro">
<SiAstro className="text-2xl hover:text-pink-500 sm:text-4xl" />
</a>
<a
href={"https://kit.svelte.dev/"}
target="_blank"
aria-label="SvelteKit"
>
<SiSvelte className="text-2xl hover:text-pink-500 sm:text-4xl" />
</a>
<a
href={"https://www.prisma.io/"}
target="_blank"
aria-label="Prisma"
>
<SiPrisma className="text-2xl hover:text-pink-500 sm:text-4xl" />
</a>
<a
href={"https://www.postgresql.org/"}
target="_blank"
aria-label="PostgreSQL"
>
<SiPostgresql
className="text-2xl hover:text-pink-500 sm:text-4xl"
/>
</a>
<a href={"https://redis.io/"} target="_blank" aria-label="Redis">
<SiRedis className="text-2xl hover:text-pink-500 sm:text-4xl" />
</a>
<a href={"https://railway.app/"} target="_blank" aria-label="Railway">
<SiRailway className="text-2xl hover:text-pink-500 sm:text-4xl" />
</a>
</div>
</span>
</main>
</body>
</html>