From 5e27698f51a26b7eeee5a31ce7a5d7b608af1b8c Mon Sep 17 00:00:00 2001
From: Ben C <ben@bwc9876.dev>
Date: Sat, 25 Apr 2026 10:48:15 -0400
Subject: [PATCH] Background effect

---
 src/assets/bg-tile.webp                   | Bin 0 -> 2878 bytes
 src/components/projects/ProjectCard.astro |   2 ++
 src/layouts/Layout.astro                  |   1 +
 src/styles/style.css                      |  21 +++++++++++++++++++++
 4 files changed, 24 insertions(+)
 create mode 100644 src/assets/bg-tile.webp

diff --git a/src/assets/bg-tile.webp b/src/assets/bg-tile.webp
new file mode 100644
index 0000000000000000000000000000000000000000..ceba0740ebbaa440844ed865a2a1318107d46b91
GIT binary patch
literal 2878
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
Z;<klMGs|xIUocmB-*1DPb>~|`7y#UBtjYiY

literal 0
HcmV?d00001

diff --git a/src/components/projects/ProjectCard.astro b/src/components/projects/ProjectCard.astro
index 97d7057..b623c6c 100644
--- a/src/components/projects/ProjectCard.astro
+++ b/src/components/projects/ProjectCard.astro
@@ -39,6 +39,8 @@ const { project } = Astro.props;
       <Image
         style={{ filter: getHueFromText(project.id) }}
         class="backdrop"
+        aria-hidden="true"
+        role="presentation"
         src={backdrop}
         alt="Backdrop"
       />
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index bd226cb..37fe466 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -72,6 +72,7 @@ const canonical = Astro.url.toString();
     </style>
   </head>
   <body id="top">
+    <div class="backdrop" aria-hidden role="presentation"></div>
     <header class="container">
       <nav aria-label="Main navigation">
         <a href="/"
diff --git a/src/styles/style.css b/src/styles/style.css
index 33add57..e44ec1a 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -8,6 +8,27 @@
 @custom-media --lg (width >=1200px);
 @custom-media --xl (width >=1700px);
 
+@keyframes rainbow {
+  0% {
+    filter: hue-rotate(0deg);
+  }
+  50% {
+    filter: hue-rotate(180deg);
+  }
+  100% {
+    filter: hue-rotate(360deg);
+  }
+}
+
+.backdrop {
+  z-index: -50;
+  position: fixed;
+  inset: 0;
+  background-image: url("@assets/bg-tile.webp");
+  animation: rainbow 5s linear infinite;
+  opacity: 3%;
+}
+
 .container {
   --gutter: var(--2);
   margin: 0 var(--gutter);
-- 
2.51.2