index.astro

---
import Footer from "../components/footer.astro";
import Icon from "../components/icon.astro";
import Navbar from "../components/navbar.astro";
import Title from "../components/title.astro";
import icons from "../constants/icons.json";
import Layout from "../layouts/Layout.astro";
---

<Layout>
	<div class="background"></div>
	<Navbar />
	<Title h1="Hello there." h2="My Name is Aiden" />
	<div class="subarea">
		<p>
			I like to work with computers, and often like to develop various
			things.
		</p>
		<p>Things I like to work with:</p>
		<div class="icons">
			{
				icons.map((icon) => (
					<div class="icon-container">
						<Icon
							class="icon"
							name={icon.file}
							desc={icon.alt}
							color={icon.color}
						/>
						<p>{icon.alt}</p>
					</div>
				))
			}
		</div>
	</div>
	<Footer github="index.astro" />
</Layout>
<style>
	@import "../styles/index.css";
</style>