---
import Layout from '../layouts/Layout.astro'
import AboutSection from '../layouts/aboutSection.astro'

import ContactSection from '../layouts/contactSection.astro'
import ContactCard from '../components/contactCard.astro'
import contactdata from '../../static/assets/data/_contactdata.json'

import CustomFooter from '../layouts/customFooter.astro'
import TechnologyCard from '../components/technologyCard.astro'
import technologydata from '../../static/assets/data/_technologydata.json'

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."
---

<Layout
  title="About - Firq FGO Site"
  currentpage="about"
  descriptionOverride={description}
>
  <AboutSection title="About">
    This is a small sideproject that I'm creating. First time doing webdev in
    general, and first project using Typescript.
  </AboutSection>
  <AboutSection title="Technologies used">
    {technologydata.map((item) => <TechnologyCard {...item} />)}
  </AboutSection>
  <ContactSection title="Contact me">
    {contactdata.map((item) => <ContactCard {...item} />)}
  </ContactSection>
  <AboutSection title="Disclaimers">
    <CustomFooter />
  </AboutSection>
</Layout>

<style></style>