Added hero stickers

src/routes/Hero.svelte

@@ -3,6 +3,11 @@ import HopperIcon from "$lib/components/hopper-logo/HopperIcon.svelte";
 import HopperelecText from "$lib/components/hopper-logo/HopperelecText.svelte";
 import { slide } from "svelte/transition";
 
+import JDASticker from "$lib/media/hero/stickers/hopperelec/jda.svg";
+import PaperMCSticker from "$lib/media/hero/stickers/hopperelec/papermc.svg";
+import PythonSticker from "$lib/media/hero/stickers/hopperelec/python.svg";
+import SvelteSticker from "$lib/media/hero/stickers/hopperelec/svelte.svg";
+
 const rollingText: [
 	string, // verb
 	string?, // noun
@@ -40,6 +45,12 @@ setInterval(changeRollingText, 6000);
 </script>
 
 <section id="hero">
+  <div id="stickers">
+    <img src={SvelteSticker} alt="Svelte logo" style:top="15%" style:right="20%"/>
+    <img src={PythonSticker} alt="Python logo" style:top="60%" style:left="10%"/>
+    <img src={PaperMCSticker} alt="PaperMC logo" style:top="20%" style:left="25%"/>
+    <img src={JDASticker} alt="JDA logo" style:top="70%" style:right="15%"/>
+  </div>
   <HopperIcon fillColor="#646464" outlineColor="#fff" outlineWidth={6} typeOf3D="stroke" padding={{top: 3, right: 3, bottom: 3, left: 3}} scale={null}/>
   <p>Hi, I'm <span class="name-img"><HopperelecText/></span>. I</p>
   {#key i}
@@ -65,20 +76,21 @@ setInterval(changeRollingText, 6000);
       max-width: 33%;
       max-height: 33%;
       padding-bottom: min(20px, 3%);
+      filter: drop-shadow(0 0 32px black);
     }
   </style>
 </svelte:head>
 
 <style>
 section {
+  position: relative;
   height: 80vh;
   padding: 1.05em 15px 0;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  filter: drop-shadow(0 0 32px black);
   font-family: "Courier New", Courier, monospace;
   font-size: 1.5em;
   font-weight: bold;
@@ -98,4 +110,16 @@ section {
 .verb, .connective {
   color: #aaa;
 }
+
+#stickers > img {
+  opacity: 0.3;
+  position: absolute;
+  max-width: 25%;
+  max-height: 25%;
+  filter: drop-shadow(0 0 8px black);
+
+  @media (aspect-ratio < 1) {
+    display: none;
+  }
+}
 </style>