Hero is animated and has a hole in the paper behind him

site/index.md

@@ -7,6 +7,104 @@ next: false
 
 I'm Anthony, or The Paper Pilot, and welcome to my [digital garden](/garden/digital-gardens/index.md)!
 
-<img class="hero" src="/paperpilot.png" />
+<div class="hero-wrapper">
+  <div class="hole"></div>
+  <img class="hero" src="/paperpilot.png" :style="`--x-offset: ${xOffset * 20}%`" />
+</div>
+
+<svg>
+  <filter id="displacementFilter">
+    <feTurbulence
+      type="turbulence"
+      baseFrequency="0.01"
+      numOctaves="5"
+      result="turbulence" />
+    <feDisplacementMap
+      in2="turbulence"
+      in="SourceGraphic"
+      scale="100"
+      xChannelSelector="R"
+      yChannelSelector="G" />
+  </filter>
+</svg>
 
 This is a public website collecting all my (public) thoughts and projects all in one place. There are a lot of pages here, that link to each other wiki-style. I suggest starting your browsing with one of the recommended pages that most closely align with your interests :).
+
+<script setup>
+  import { ref, onMounted, onUnmounted } from "vue";
+
+  const xOffset = ref(0);
+  function mouseMoveHandler(event) {
+    xOffset.value = event.pageX / window.innerWidth - .5;
+  }
+  onMounted(() => {
+    window.addEventListener("mousemove", mouseMoveHandler);
+  });
+  onUnmounted(() => {
+    window.removeEventListener("mousemove", mouseMoveHandler);
+  });
+</script>
+
+<style scoped>
+  .hero-wrapper {
+    height: 16lh;
+    position: relative;
+  }
+
+  @media (max-width: 700px) {
+    .hero-wrapper {
+      height: 12lh;
+    }
+  }
+
+  @media (max-width: 500px) {
+    .hero-wrapper {
+      height: 10lh;
+    }
+  }
+
+  @media (max-width: 400px) {
+    .hero-wrapper {
+      height: 9lh;
+    }
+  }
+
+  .hole {
+    height: 80%;
+    aspect-ratio: 1;
+    border: solid 10px lightgrey;
+    border-radius: 50%;
+    background: #3b4252;
+    position: absolute;
+    left: 33%;
+    transform: translateX(-50%);
+    filter: url(#displacementFilter);
+  }
+
+  .hero {
+    height: 80%;
+    width: unset;
+    margin: auto;
+    position: absolute;
+    right: 50%;
+    bottom: 0;
+    transform: translate(calc(50% + var(--x-offset)), 0%);
+    animation: bob 5s ease-in-out infinite;
+  }
+
+  svg {
+    display: none;
+  }
+
+  @keyframes bob {
+    0% {
+      transform: translate(calc(50% + var(--x-offset)), -10%);
+    }
+    50% {
+      transform: translate(calc(50% + var(--x-offset)), 10%);
+    }
+    100% {
+      transform: translate(calc(50% + var(--x-offset)), -10%);
+    }
+  }
+</style>