---
import { Image } from "astro:assets";
import ButtonLink from "../components/button-link.astro";
import InlineLink from "../components/inline-link.astro";
import GitHubLogo from "../images/GitHub.svg";
import GitLabLogo from "../images/GitLab.svg";
import KeyoxideLogo from "../images/Keyoxide.svg";
import LinkedInLogo from "../images/LinkedIn.svg";
import MatrixLogo from "../images/Matrix-logo.svg";
import portrait from "../images/portrait.jpg";
import BaseLayout from "../layouts/BaseLayout.astro";
---

<BaseLayout title="kmoschcau.de">
  <main>
    <article class="flex flex-col items-center gap-10">
      <Image
        alt="Portrait von Kai Moschcau"
        class="rounded-full"
        priority
        src={portrait}
        width={200}
        height={200}
      />
      <h1>Kai Moschcau</h1>
      <section class="text-soft">
        <p>Fachinformatiker für Anwendungsentwicklung</p>
      </section>
      <nav aria-label="Seitennavigation" class="page-nav">
        <ul class="flex">
          <li>
            <a href="/skills" class="font-medium underline">Skills</a>
          </li>
          <li>
            <InlineLink
              href="https://blecon.de"
              external
              class="font-medium underline">blecon.de</InlineLink
            >
          </li>
        </ul>
      </nav>
      <nav aria-label="Externe Links">
        <ul class="flex flex-col gap-2">
          <li>
            <ButtonLink
              class="link-matrix"
              href="https://matrix.to/#/@kmoschcau:matrix.org"
              title="Mein Matrix-Konto"
              external="me"
            >
              <MatrixLogo
                class="size-6"
                fill="currentColor"
                role="presentation"
                slot="logo"
              />
              <span>@kmoschcau:matrix.org</span>
            </ButtonLink>
          </li>
          <li>
            <ButtonLink
              class="link-github"
              href="https://github.com/kmoschcau/"
              title="Mein GitHub-Konto"
              external="me"
            >
              <GitHubLogo
                class="size-6"
                fill="currentColor"
                role="presentation"
                slot="logo"
              />
              <span>kmoschcau</span>
            </ButtonLink>
          </li>
          <li>
            <ButtonLink
              class="link-gitlab"
              href="https://gitlab.com/kmoschcau"
              title="Mein GitLab-Konto"
              external="me"
            >
              <GitLabLogo
                class="size-6"
                fill="currentColor"
                role="presentation"
                slot="logo"
              />
              <span>kmoschcau</span>
            </ButtonLink>
          </li>
          <li>
            <ButtonLink
              class="link-linked-in"
              href="https://www.linkedin.com/in/kmoschcau/"
              title="Mein LinkedIn-Konto"
              external="me"
            >
              <LinkedInLogo
                class="size-6"
                fill="currentColor"
                role="presentation"
                slot="logo"
              />
              <span>kmoschcau</span>
            </ButtonLink>
          </li>
          <li>
            <ButtonLink
              class="link-keyoxide"
              href="https://keyoxide.org/8CE00E9495B5030DA9217208DF16F424177090BB"
              title="Mein Keyoxide-Eintrag"
              external="me"
            >
              <KeyoxideLogo
                class="size-6"
                fill="currentColor"
                role="presentation"
                slot="logo"
              />
              <span>Keyoxide</span>
            </ButtonLink>
          </li>
        </ul>
      </nav>
    </article>
  </main>
</BaseLayout>