Initial commit

2023-04-20 04:20:00 -06:00
commit 84591f3a2d
23 changed files with 4795 additions and 0 deletions
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@ -0,0 +1,158 @@
+---
+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>