---
import Layout from '@layouts/Layout.astro'

import ContactSection from '@layouts/contactSection.astro'
import ContactCard from '@components/cards/contactCard.astro'
import contactdata from '@content/data/contactdata.json'

import CustomFooter from '@layouts/customFooter.astro'
import TechnologyCard from '@components/cards/technologyCard.astro'
import technologydata from '@content/data/technologydata.json'
import SmallTitle from '@components/titles/smallTitle.astro'

const description =
  "A summary of the technologies used as well as my contact information. You'll also find disclaimers and thank you notes for the people that helped me."
const subtext = 
  "This is a small sideproject that I'm creating. First time doing webdev in general, and first project using Typescript."
---

<Layout
  title="About - Firq FGO Site"
  currentpage="about"
  descriptionOverride={description}
>
  <SmallTitle maintext="About" subtext={subtext} fadeout={true} />
  <ContactSection title="Technologies used">
    {technologydata.map((item) => <TechnologyCard {...item} />)}
  </ContactSection>
  <ContactSection title="Contact me">
    {contactdata.map((item) => <ContactCard {...item} />)}
  </ContactSection>
  <ContactSection title="Disclaimers">
    <CustomFooter />
  </ContactSection>
</Layout>

<style></style>