{{ block "about-partial" . }}
<!-- Hero Section -->
<section
  class="flex flex-col items-center justify-center text-center flex-grow py-16 px-6"
>
  <h1 class="text-4xl md:text-6xl font-bold mb-4">
    Hi, I'm <span class="text-blue-600">Your Name</span>
  </h1>
  <p class="text-lg md:text-xl mb-2 max-w-2xl">
    A <span class="font-semibold">[Your Role]</span> who loves building
    [something about what you do].
  </p>
</section>

<!-- 🌟 Glass Bubble Section -->
<div class="flex flex-wrap justify-center gap-8 py-3">
  <a
    id="projectButton"
    hx-get="/projects"
    hx-target="#content"
    hx-push-url="true"
    class="cursor-pointer px-6 py-4 rounded-full bg-accent/5 dark:bg-darkaccent/40 backdrop-blur-xl border border-white/20 shadow-xl text-xl font-semibold hover:bg-accent/10 hover:dark:bg-darkaccent/30 transition"
  >
    Projects
  </a>

  <a
    id="experienceButton"
    hx-get="/experience"
    hx-target="#content"
    hx-push-url="true"
    class="cursor-pointer px-6 py-4 rounded-full bg-accent/5 dark:bg-darkaccent/40 backdrop-blur-xl border border-white/20 shadow-xl text-xl font-semibold hover:bg-accent/10 hover:dark:bg-darkaccent/30 transition"
  >
    Experience
  </a>
</div>

<section
  id="about"
  class="flex flex-col items-center justify-center text-center flex-grow py-16 px-6"
>
  <h2 class="text-3xl font-bold mb-6">About Me</h2>
  <p class="text-lg leading-relaxed max-w-3xl">
    I'm a [Your Profession] with experience in [key skills]. I enjoy solving
    problems, learning new technologies, and building applications that make an
    impact. Currently exploring
    <span class="text-blue-600 font-semibold">Go</span>,
    <span class="text-blue-600 font-semibold">htmx</span>, and modern web tools.
  </p>
</section>

<div class="flex items-center justify-center">
    <a
      id="downloadCVButton"
      hx-get="/download"
      hx-swap="none"
      class="underline cursor-pointer text-blue-600"
    >
      Download CV
    </a>
  </div>
{{ end }}