---
import Breadcrumbs from '@/components/Breadcrumbs.astro'
import Container from '@/components/Container.astro'
import ProjectCard from '@/components/ProjectCard.astro'
import { SITE } from '@/consts'
import Layout from '@/layouts/Layout.astro'
import { getCollection } from 'astro:content'

const projects = await getCollection('projects')
---

<Layout title="About" description={SITE.DESCRIPTION}>
  <Container class="flex flex-col gap-y-6">
    <Breadcrumbs items={[{ label: 'About', icon: 'lucide:info' }]} />

    <section>
      <div class="min-w-full">
        <h1 class="mb-4 text-3xl font-bold">About Me</h1>
        <p class="prose prose-neutral mb-4 dark:prose-invert">
          Born in the heart of Appalachia, Haysi, Virginia, I grew up steeped in
          the resourcefulness of my hillbilly heritage. Living in a family that
          prized hard work and made the most of what we had, I found a deep
          passion for technology. At fourteen, I stumbled upon Linux and turned
          an old Compaq into my first server, setting me on a lifelong journey
          of exploration.
        </p>
        <p class="prose prose-neutral mb-4 dark:prose-invert">
          My experience in customer service and tech support at Intuit fueled my
          love for solving problems. I then ventured into the freelance world,
          where I honed my skills in web and graphic design. Now, as an L2 Linux
          Support Specialist at a leading web hosting company, I find great
          satisfaction in making the digital world more accessible to everyone.
        </p>
        <p class="prose prose-neutral mb-8 dark:prose-invert">
          I’m a strong advocate for open source as a driver of innovation and
          accessibility. My contributions to Rocky Linux and other open-source
          projects are a testament to this belief. My journey is marked by
          perseverance, community, and the transformative power of open
          technology.
        </p>

        <h2 class="mb-4 text-2xl font-semibold">My Work</h2>
        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {projects.map((project) => <ProjectCard project={project} />)}
        </div>
      </div>
    </section>
  </Container>
</Layout>