added a footer

src/components/Footer.astro

@@ -0,0 +1,76 @@
+---
+import Image from "astro/components/Image.astro";
+
+import nbbanner from "../media/buttons/nbbanner.png";
+import vencord from "../media/buttons/vencord.webp";
+import midna from "../media/buttons/midna.png";
+import miaowing from "../media/buttons/miaowing.png";
+import flipper from "../media/buttons/flipper.gif";
+
+// Web Buttons
+const webButtons = [
+ {
+ href: "https://flipperzero.one/",
+ img: flipper,
+ alt: "Flipper Zero Website Button",
+ },
+ {
+ href: "https://ne0nbandit.neocities.org",
+ img: nbbanner,
+ alt: "Ne0nBandit Street Button",
+ },
+ {
+ href: "https://vencord.dev/",
+ img: vencord,
+ alt: "Vencord Website Button",
+ },
+ {
+ href: "https://midna.midnight.miami/",
+ img: midna,
+ alt: "Midna Website Button",
+ },
+ {
+ href: "https://miaow.ing/",
+ img: miaowing,
+ alt: "Miaowing Website Button",
+ },
+];
+
+const links = [
+ {
+ href: "https://github.com/PolyCatDev/catplace",
+ text: "Source Code",
+ },
+ {
+ href: "https://htmlforpeople.com/",
+ text: "HTML for the People",
+ },
+];
+---
+
+<footer class="bg-background-500 p-4 mt-auto">
+ <nav class="m-1 text-center text-foreground-200">
+ {
+ links.map((link) => (
+ <a href={link.href} class="hover:underline m-1">
+ {link.text}
+ </a>
+ ))
+ }
+ </nav>
+ <div class="flex justify-center flex-wrap">
+ {
+ webButtons.map((button) => (
+ <a href={button.href} class="m-1">
+ <Image
+ width="88"
+ height="31"
+ loading="lazy"
+ src={button.img}
+ alt={button.alt}
+ />
+ </a>
+ ))
+ }
+ </div>
+</footer>

src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import Header from "../components/Header.astro";
+import Footer from "../components/Footer.astro";
 import LinkTree from "../components/LinkTree.astro";
 import Spacer from "../components/Spacer.astro";
 import Iframe from "../components/Iframe.astro";
@@ -11,6 +12,7 @@ const Description = "PolyCat's place on the web";
 
 const Mastodon = "https://sunny.garden/@PolyCat";
 
+// Link Tree
 const SocialLinks = [
  {
  href: "https://sunny.garden/@PolyCat",
@@ -61,7 +63,7 @@ const ProjectLinks = [
 ];
 ---
 
-<Layout title={Title} description={Description}>
+<Layout title={Title} description={Description} footer={true}>
  <a rel="me" href={Mastodon} aria-label="Hidden Mastodon validation link"
  ></a>
  <div class="flex justify-center">
@@ -100,4 +102,5 @@ const ProjectLinks = [
  </div>
  </div>
  </div>
+ <Footer />
 </Layout>