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

<Layout>
    <Image
        src={personalInfo.profileImage.src}
        alt={personalInfo.profileImage.alt}
        width={300}
        height={300}
        layout="constrained"
        priority={true}
        class="rounded-full mx-auto"
        style="max-width: 12rem; width: 100%;"
    />

    <h1
        class="bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent text-4xl sm:text-6xl font-bold text-center"
    >
        {personalInfo.name}
    </h1>

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

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

    <SocialLinks />

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

    <TechLinks />
</Layout>
