---
const identity = [
  ["role", "soc analyst i · fortress srm"],
  ["based", "cleveland, oh · est. 2021"],
  ["stack", "go · react · typescript · linux"],
  ["infra", "proxmox · pfsense · authentik · nginx"],
  ["observ", "victoriametrics · grafana · beszel · ntfy"],
  ["certs", "comptia a+ · network+ (in progress)"],
];

const contact = [
  { key: "github", value: "lerko96", href: "https://github.com/lerko96", glyph: "↗" },
  { key: "gitea", value: "gitea.lerkolabs.com/lerko", href: "https://gitea.lerkolabs.com/lerko", glyph: "↗" },
  { key: "linkedin", value: "tyler-koenig", href: "https://www.linkedin.com/in/tyler-koenig", glyph: "↗" },
  { key: "email", value: "tyler@lerkolabs.com", href: "mailto:tyler@lerkolabs.com", glyph: "✉" },
];
---

<section class="border-b border-[var(--color-border)]">
  <div class="flex items-baseline justify-between px-5 py-3.5 border-b border-[var(--color-border)]">
    <span class="text-[var(--color-text-fg)] text-[11px] tracking-[0.16em] uppercase">identity</span>
    <span class="text-[var(--color-text-label)] text-[11px]">~/identity.toml</span>
  </div>

  <div class="px-6 py-6 grid grid-cols-1 md:grid-cols-[1.4fr_1fr] gap-9">
    <div>
      <h1 class="text-[var(--color-text-heading)] text-[38px] leading-[1.05] tracking-tight font-semibold">
        tyler koenig
      </h1>
      <p class="text-[var(--color-text)] text-sm mt-2 leading-relaxed max-w-[540px]">
        security operations, self-hosted infrastructure, and the software that holds it together.
      </p>

      <dl class="mt-6 grid grid-cols-[auto_1fr] gap-x-6 gap-y-1.5 text-[13px] tabular-nums">
        {identity.map(([k, v]) => (
          <Fragment>
            <dt class="text-[var(--color-text-label)] tracking-wide">{k}</dt>
            <dd class="text-[var(--color-text-fg)]">{v}</dd>
          </Fragment>
        ))}
      </dl>
    </div>

    <aside>
      <div class="text-[var(--color-text-label)] text-[11px] tracking-[0.12em] mb-2.5">CONTACT</div>
      <div class="grid gap-px">
        {contact.map(({ key, value, href, glyph }) => (
          <a
            href={href}
            target={href.startsWith("mailto") ? undefined : "_blank"}
            rel={href.startsWith("mailto") ? undefined : "noopener noreferrer"}
            class="grid grid-cols-[90px_1fr_16px] gap-x-2.5 items-baseline py-[7px] border-b border-[var(--color-border)] text-[13px] no-underline hover:bg-[var(--color-surface)]"
          >
            <span class="text-[var(--color-text-label)] tracking-wide">{key}</span>
            <span class="text-[var(--color-text-fg)] overflow-hidden text-ellipsis whitespace-nowrap">{value}</span>
            <span class="text-[var(--color-accent)] text-right">{glyph}</span>
          </a>
        ))}
      </div>
    </aside>
  </div>
</section>