Extract to box component

src/components/Box.astro

@@ -0,0 +1,28 @@
+---
+const { style, float } = Astro.props;
+---
+
+{(<div class={`box ${float ? "animate" : ""}`} style={style} />)}
+
+<style>
+  .box {
+    width: 2rem;
+    height: 2rem;
+    position: fixed;
+    border-radius: 0.25rem;
+    animation-duration: 7s;
+  }
+
+  .animate {
+    animation: float infinite alternate ease-in-out;
+  }
+
+  @keyframes float {
+    0% {
+      transform: translate(0, 0);
+    }
+    100% {
+      transform: translate(50px, 50px);
+    }
+  }
+</style>

src/components/FloatingBoxes.astro

@@ -1,4 +1,6 @@
 ---
+import Box from "./Box.astro";
+
 const boxColors = ["#11d4b1", "#035a4f", "#333333"];
 
 function getRandom(min: number, max: number) {
@@ -28,31 +30,5 @@ const boxes = Array.from({ length: numBoxes }, () => generateRandomStyles());
 ---
 
 <div class="container">
-  {boxes.map((style) => <div class="box" style={style} />)}
+  {boxes.map((style) => <Box style={style} float={true} />)}
 </div>
-
-<!-- <div class="box"></div> -->
-
-<style>
-  .box {
-    width: 2rem;
-    height: 2rem;
-    position: fixed;
-    border-radius: 0.25rem;
-    background-color: #11d4b1;
-    animation: float infinite alternate ease-in-out;
-    animation-duration: 7s;
-  }
-
-  @keyframes float {
-    0% {
-      transform: translate(0, 0);
-    }
-    100% {
-      transform: translate(
-        50px,
-        50px
-      ); /* Adjust this to control the floating range */
-    }
-  }
-</style>

src/pages/fa24.astro

@@ -2,16 +2,52 @@
 import Layout from "../layouts/Layout.astro";
 import Contributors from "../components/Contributors.svelte";
 import type { Fa2024MarkdownEntry } from "../types";
+import Box from "../components/Box.astro";
 
 const contributors: Fa2024MarkdownEntry[] = Object.values(
   import.meta.glob("../contributors/fa24/*.md", {
     eager: true,
   }),
 );
+
+const boxStyles = [
+  {
+    bottom: "8%",
+    left: "5%",
+    backgroundColor: "#333333",
+    opacity: 0.4,
+  },
+  {
+    bottom: "8%",
+    left: "8%",
+    backgroundColor: "#035a4f",
+    opacity: 0.7,
+  },
+  {
+    bottom: "14%",
+    left: "5%",
+    backgroundColor: "#11d4b1",
+    opacity: 0.9,
+  },
+  {
+    bottom: "10%",
+    right: "5%",
+    backgroundColor: "#11d4b1",
+    opacity: 0.8,
+  },
+  {
+    bottom: "8%",
+    right: "8%",
+    backgroundColor: "#035a4f",
+    opacity: 0.8,
+  },
+];
 ---
 
 <Layout title="Fall 2024 Contributors | 1st">
   <main>
+    {boxStyles.map((boxStyle) => <Box style={boxStyle} float={false} />)}
+
     <h1>Fall 2024 Contributors</h1>
     <Contributors client:only="svelte" contributors={contributors} />
   </main>