4 files changed, 123 insertions, 0 deletions
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
new file mode 100644
index 0000000..1eaed7e
--- /dev/null
+++ b/src/components/Footer.astro
@@ -0,0 +1,25 @@
+---
+const commitSha =
+	import.meta.env.CF_PAGES_COMMIT_SHA || import.meta.env.COMMIT_SHA;
+const repositoryUrl = "https://github.com/getchoo/website";
+---
+
+<footer>
+	{
+		commitSha && (
+			<p>
+				Site version
+				<a href={`${repositoryUrl}/commit/${commitSha}`}>
+					{commitSha.substring(0, 7)}
+				</a>
+				.
+			</p>
+		)
+	}
+	<p>Content is All Rights Reserved.</p>
+	<p>
+		The <a href={repositoryUrl}>source code</a> is available under the <a
+			href="https://spdx.org/licenses/MIT.html">MIT License</a
+		>.
+	</p>
+</footer>
diff --git a/src/components/GifButtons.astro b/src/components/GifButtons.astro
new file mode 100644
index 0000000..3c88dbd
--- /dev/null
+++ b/src/components/GifButtons.astro
@@ -0,0 +1,58 @@
+---
+import type { ImageMetadata } from "astro";
+import { Image } from "astro:assets";
+
+const gifs = import.meta.glob<{ default: ImageMetadata }>(
+	"/src/assets/buttons/*.{gif,svg}",
+);
+
+const gifButtons = [
+	{ buttonName: "acab.gif", altText: "ACAB!" },
+	{
+		buttonName: "arnold.gif",
+		altText: "Hey Arnold!",
+	},
+	{
+		buttonName: "capitalism.gif",
+		altText: "Let's crush capitalism!",
+	},
+	{
+		buttonName: "legalize.gif",
+		altText: "Legalize marijuana now!",
+	},
+	{
+		buttonName: "poweredbynix.svg",
+		altText: "Powered by NixOS",
+		link: "https://github.com/sakecode",
+	},
+	{
+		buttonName: "pride.gif",
+		altText: "LGBTQ Pride now!",
+	},
+	{
+		buttonName: "steam.gif",
+		altText: "Play on Steam!",
+		link: "https://dnsense.pub/",
+	},
+	{ buttonName: "weezer.gif", altText: "Weezer fan" },
+];
+---
+
+<div class="gif-buttons">
+	{
+		gifButtons.map(({ buttonName, altText, link }) => {
+			const imageTag = (
+				<Image
+					src={gifs[`/src/assets/buttons/${buttonName}`]()}
+					alt={altText}
+				/>
+			);
+
+			return (
+				<div class="gif-button">
+					{link ? <a href={link}>{imageTag}</a> : imageTag}
+				</div>
+			);
+		})
+	}
+</div>
diff --git a/src/components/Head.astro b/src/components/Head.astro
new file mode 100644
index 0000000..d355012
--- /dev/null
+++ b/src/components/Head.astro
@@ -0,0 +1,22 @@
+---
+import "@styles/style.scss";
+import "@fontsource/noto-sans";
+import notoSansWoff2 from "@fontsource/noto-sans/files/noto-sans-latin-400-normal.woff2";
+
+const { title, description } = Astro.props;
+---
+
+<head>
+	<meta charset="UTF-8" />
+	<title>{title || "Getchoo's Website"}</title>
+	<meta name="viewport" content="width=device-width,initial-scale=1" />
+	<meta name="description" content={description || "guzzle guzzle"} />
+	<link
+		rel="preload"
+		as="font"
+		type="font/woff2"
+		href={notoSansWoff2}
+		crossorigin="anonymous"
+	/>
+	<link rel="sitemap" href="/sitemap-index.xml" />
+</head>
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
new file mode 100644
index 0000000..f122ee7
--- /dev/null
+++ b/src/components/Nav.astro
@@ -0,0 +1,18 @@
+---
+const navLinks = [
+	{ name: "Home", url: "/" },
+	{ name: "About Me", url: "/about-me" },
+	{ name: "Contact", url: "/contact" },
+	{ name: "GitHub", url: "https://github.com/getchoo" },
+];
+---
+
+<nav>
+	{
+		navLinks.map(({ name, url }) => (
+			<div>
+				<a href={url}>{name}</a>
+			</div>
+		))
+	}
+</nav>