Added technologies, other approach for image loading

src/pages/about.astro

@@ -2,23 +2,36 @@
 import Layout from '../layouts/Layout.astro';
 import BasicSection from '../layouts/basicSection.astro';
 
-import Navbar from '../components/navbar.astro';
-import NavbarEntry from '../components/navbarEntry.astro';
-import navdata from '../../static/_navdata.json'
-
 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"
+	},]
 ---
 
 <Layout title="About - Firq FGO Site" currentpage="about">
     <BasicSection title="About">
-        This is a small sideproject that I'm creating. It uses Astro for developing and Gitlab for providing the site.
+        This is a small sideproject that I'm creating.
+    </BasicSection>
+    <BasicSection title="Technologies used">
+        {techologydata.map((item) => (<TechnologyCard {...item}/>))}
     </BasicSection>
     <ContactSection title="Contact me">
 		{contactdata.map((item) => (<ContactCard {...item}/>))}
 	</ContactSection>
-    
+    <CustomFooter />
 </Layout>
 
 <style>