---
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/_contactdata.json'

import CustomFooter from '../layouts/customFooter.astro'
import TechnologyCard from '../components/technologyCard.astro'

const techologydata = [
  {
    title: 'Astro',
    link: 'https://astro.build',
    image: 'astro',
  },
  {
    title: 'GitLab',
    link: 'https://gitlab.io',
    image: 'gitlab',
  },
  {
    title: 'Typescript',
    link: 'https://www.typescriptlang.org/',
    image: 'typescript',
  },
  {
    title: 'Alpine Linux',
    link: 'https://alpinelinux.org/',
    image: 'alpine-linux',
  },
  {
    title: 'Ubuntu',
    link: 'https://ubuntu.com/',
    image: 'ubuntu',
  },
]

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">
    {techologydata.map((item) => <TechnologyCard {...item} />)}
  </AboutSection>
  <ContactSection title="Contact me">
    {contactdata.map((item) => <ContactCard {...item} />)}
  </ContactSection>
  <AboutSection title="Disclaimers">
    <CustomFooter />
  </AboutSection>
</Layout>

<style></style>