---
import { Image } from "astro:assets";
import profileImage from "@/assets/images/profile.jpg";
import socialEmail from "@/assets/images/social-email.svg";
import socialFacebook from "@/assets/images/social-facebook.svg";
import socialGithub from "@/assets/images/social-github.svg";
import socialLinkedIn from "@/assets/images/social-linkedin.svg";
import socialX from "@/assets/images/social-x.svg";
import SocialLink from "@/components/SocialLink.astro";
---

<div class="flex flex-col min-h-full items-center justify-center">
  <Image
    src={profileImage}
    loading="eager"
    alt="Dhemas Nurjaya"
    class="size-36 sm:size-48 rounded-2xl"
  />
  <h1 class="text-3xl sm:text-5xl font-bold mt-4 text-center">
    Dhemas Nurjaya
  </h1>
  <h2 class="text-lg sm:text-xl mt-2 text-center">
    Passionate Software Engineer
  </h2>
  <div class="flex flex-row gap-8 mt-8" aria-label="social links">
    <SocialLink
      href="https://www.linkedin.com/in/dhemas-nurjaya-030890bb"
      label="Linkedin"
      icon={socialLinkedIn}
      alt="LinkedIn"
    />
    <SocialLink
      href="https://github.com/dhemasnurjaya"
      label="Github"
      icon={socialGithub}
      alt="Github"
    />
    <SocialLink
      href="https://x.com/dhemaseka"
      label="X"
      icon={socialX}
      alt="X"
    />
    <SocialLink
      href="https://www.facebook.com/Dhemas"
      label="Facebook"
      icon={socialFacebook}
      alt="Facebook"
    />
    <SocialLink
      href="mailto:dhemasnurjaya@gmail.com"
      label="Email"
      icon={socialEmail}
      alt="Email"
    />
  </div>
  <div class="mt-24"></div>
</div>