diff --git a/components/ShapesBackground.module.css b/components/ShapesBackground.module.css
new file mode 100644
index 00000000..535a0a0f
--- /dev/null
+++ b/components/ShapesBackground.module.css
@@ -0,0 +1,15 @@
+.contentContainer {
+ position: relative;
+
+ /* This makes the footer stay at the bottom, even if there's not much content on the screen.*/
+ flex-grow: 1;
+}
+
+.shapesContainer {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: -10;
+}
diff --git a/components/ShapesBackground.tsx b/components/ShapesBackground.tsx
new file mode 100644
index 00000000..70c6c58f
--- /dev/null
+++ b/components/ShapesBackground.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+
+import styles from "./ShapesBackground.module.css";
+
+export function ShapesBackground(props: { children: React.ReactNode }) {
+ return (
+
+ );
+}
diff --git a/pages/_app.module.css b/pages/_app.module.css
index a9bb4d65..1fd1df46 100644
--- a/pages/_app.module.css
+++ b/pages/_app.module.css
@@ -3,10 +3,3 @@
flex-direction: column;
min-height: 100vh;
}
-
-/* This makes the footer stay at the bottom, even if there's not much content
- * on the screen.
- */
-.contentContainer {
- flex-grow: 1;
-}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 4fc6e4fe..0ec7d753 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -7,6 +7,7 @@ import { DefaultLayout } from "@/components/DefaultLayout";
import { Footer } from "@/components/Footer";
import { Link } from "@/components/Link";
import { Navbar } from "@/components/Navbar";
+import { ShapesBackground } from "@/components/ShapesBackground";
import { ThemeProvider } from "@/components/Theme";
import styles from "./_app.module.css";
@@ -22,12 +23,12 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
- {/* Wrapping content with a div to allow for a display: block parent */}
-
+ {/* Wrapping content with a ShapesBackground to allow for shapes in the background and a display: block parent */}
+
-
+