---
import Layout from '../layouts/Layout.astro';
import BasicSection from '../layouts/basicSection.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"
	},]

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}>
    <BasicSection title="About">
        This is a small sideproject that I'm creating. First time doing webdev in general, and first project using Typescript.
    </BasicSection>
    <BasicSection title="Technologies used">
        {techologydata.map((item) => (<TechnologyCard {...item}/>))}
    </BasicSection>
    <ContactSection title="Contact me">
		{contactdata.map((item) => (<ContactCard {...item}/>))}
	</ContactSection>
	<BasicSection title="Disclaimers">
		<CustomFooter />
	</BasicSection>
</Layout>

<style>
</style>