---
import { readSingleton } from '@directus/sdk';

import HeroSection from '@components/sections/HeroSection.astro';
import ExperienceSection from '@components/sections/ExperienceSection.astro';
import EducationSection from '@components/sections/EducationSection.astro';
import ProjectSection from '@components/sections/ProjectSection.astro';
import SkillsSliderSection from '@components/sections/SkillsSliderSection.astro';
import BaseLayout from '@layouts/BaseLayout.astro';
import directus from '@lib/directus';

const global = await directus.request(readSingleton('site_global'));
---

<BaseLayout
  title="About Me"
  description="About me."
  structuredData={{
    '@context': 'https://schema.org',
    '@type': 'WebPage',
    inLanguage: 'en-US',
    '@id': Astro.url.href,
    url: Astro.url.href,
    name: `About | ${global.name}`,
    description: 'About me.',
    isPartOf: {
      '@type': 'WebSite',
      url: global.site_url,
      name: global.name,
      description: global.about,
    },
  }}
>

  <HeroSection
    title="About Me"
    subTitle={global.about}
  />

  <section class="max-w-7xl px-4 sm:px-6 lg:px-8 py-10 lg:py-14 mx-auto">
    <div class="flex flex-col gap-y-12 md:gap-y-20">
      <ExperienceSection className="smooth-reveal" />
      <EducationSection className="smooth-reveal" />
      <ProjectSection className="smooth-reveal" />
      <SkillsSliderSection className="smooth-reveal" />
    </div>
  </section>

</BaseLayout>
