---
import { Image } from "astro:assets";
import SocialLinks from "../components/SocialLinks.astro";
import TechLinks from "../components/TechLinks.astro";
import Layout from "../layouts/Layout.astro";
import { config } from "../config";
---

<Layout
    title={config.siteConfig.pageOpenGraph.home.title}
    description={config.siteConfig.pageOpenGraph.home.description}
    ogImage={config.siteConfig.pageOpenGraph.home.image}
    ogType={config.siteConfig.pageOpenGraph.home.type}
>
    <Image
        src={config.personalInfo.profileImage.src}
        alt={config.personalInfo.profileImage.alt}
        widths={[192, 384]}
        sizes="12rem"
        layout="constrained"
        loading="eager"
        fetchpriority="high"
        class="rounded-full mx-auto opacity-0 transition-opacity duration-300"
        style="max-width: 12rem; width: 100%;"
        onload="this.classList.remove('opacity-0')"
    />

    <h1 class="text-primary text-4xl sm:text-6xl font-bold text-center">
        {config.personalInfo.name}
    </h1>

    <h2 class="text-xl sm:text-3xl font-bold text-center mx-6">
        {config.personalInfo.tagline}
    </h2>

    <h3 class="text-lg sm:text-2xl font-bold">
        {config.homepageSections.socialLinks.title}
    </h3>

    <SocialLinks />

    <h3 class="text-lg sm:text-2xl font-bold">
        {config.homepageSections.techStack.title}
    </h3>

    <TechLinks />
</Layout>