Added Cameron mode to hero, including corresponding logo-text and som…

…e stickers

src/lib/components/CameronText.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+export let color: string;
+export let thickness: number;
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="{-thickness/2} {-thickness/2} {2898+thickness} {1120+thickness}" height="1em">
+  <path fill="none" stroke={color} stroke-width={thickness} stroke-linecap="round" d="M290 0C117 103 25 242 0 657c-2 85-4 205 17 249 43 95 124 198 266 214M678 519c-95-15-105 16-138 51-47 69-105 143-112 242-5 57-12 120-3 181 35 117 180 121 220 10 59-127 56-198 60-260V588 785c40 166 79 280 144 277 76-7 80-153 97-255 11-99 18-149 16-233l9 216v276V749c12-101 53-233 129-252 74 8 67 215 75 330-1-84 107-316 180-335 43 2 50 54 57 122V884c18 198 106 183 134 144 43-93 57-184 63-292v-134c-12 222 210 325 210 4 7-76-104-132-142-48-30 56-46 86-64 165v140c15 112 93 192 150 188 137-5 170-294 181-480V671c1 25 9 46 8 60v258V731c10-74 54-231 161-230 13 4 18 41 22 71l17 214c5-36 16-65 29-93 28-70 100-156 188-159h40-24c-26 0-40-10-58-9-23 0-39 2-53 17-35 42-46 153-50 266V959c7 55 81 57 109 29 78-81 99-192 105-324V531c21 64 60 109 122 93 35-9 59-127 76-184 14 28 15 118 16 125V709c0 44 6 205-11 220-11-25-8-96 1-144 15-94 64-282 151-288 21 0 29 5 37 21 34 58 67 320 68 327V974M1723 810"/>
+</svg>

src/lib/components/hopper-logo/HopperelecText.svelte

@@ -13,7 +13,7 @@ export let hopper:
 	  } = undefined;
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44.5 8" fill={textFillColor} height="100%">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44.5 8" fill={textFillColor} height="1em">
   <defs>
     <mask id="matrix">
       <rect id="letterRect" fill="#fff" width="4" height="8"/>

src/routes/Hero.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
+import CameronText from "$lib/components/CameronText.svelte";
 import HopperIcon from "$lib/components/hopper-logo/HopperIcon.svelte";
 import HopperelecText from "$lib/components/hopper-logo/HopperelecText.svelte";
-import { slide } from "svelte/transition";
-
+import HeHimSticker from "$lib/media/hero/stickers/cameron/he-him.svg";
+import MaleSticker from "$lib/media/hero/stickers/cameron/male.svg";
+import MinecraftSticker from "$lib/media/hero/stickers/cameron/minecraft.webp";
 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";
+import { fade, slide } from "svelte/transition";
 
 const rollingText: [
 	string, // verb
@@ -42,41 +45,75 @@ function changeRollingText() {
 let i: number;
 changeRollingText();
 setInterval(changeRollingText, 6000);
+
+let hopperelecMode = true;
 </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}
-    <p id="rolling-text" transition:slide={{duration: 2000}}>
-      <span class="verb">{rollingText[i][0]}</span>
-      {#if rollingText[i][1]}
-        <span class="noun">{rollingText[i][1]}</span>
-      {/if}
-      {#if rollingText[i][2]}
-        <span class="connective">{rollingText[i][2]}</span>
-      {/if}
-      {#if rollingText[i][3]}
-        <span style:color={rollingText[i][3]?.color}>{rollingText[i][3]?.text}</span>
-      {/if}
-    </p>
+  {#key hopperelecMode}
+    <div id="transition-container" transition:fade>
+      <div id="stickers">
+        {#if hopperelecMode}
+          <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%"/>
+        {:else}
+          <!-- TODO: Good Kid logo, waiting on permission and potentially an official vector -->
+          <!-- TODO: Rainbow infinity (autism symbol), waiting on higher quality versions -->
+          <enhanced:img
+            class:sticker={true}
+            src="$lib/media/hero/stickers/cameron/fidget-rings.webp?brightness=0.55"
+            alt="Three green glow-in-the-dark magnetic fidget rings"
+            style:top="20%" style:right="25%"
+          />
+          <img src={MinecraftSticker} alt="Minecraft grass block" style:top="70%" style:left="15%"/>
+          <img src={MaleSticker} alt="Blue male symbol" style:top="15%" style:left="20%"/>
+          <img src={HeHimSticker} alt="'he him' in a speech bubble" style:top="65%" style:right="20%"/>
+        {/if}
+      </div>
+      <button type="button" on:click={() => {hopperelecMode = !hopperelecMode}} title={"Switch to "+(hopperelecMode ? 'Cameron' : 'hopperelec')+" mode"}>
+        {#if hopperelecMode}
+          <HopperIcon fillColor="#646464" outlineColor="#fff" outlineWidth={6} typeOf3D="stroke" padding={{top: 3, right: 3, bottom: 3, left: 3}} scale={null}/>
+        {:else}
+          My face (PLACEHOLDER)
+          <!-- TODO: Get good photo (mostly referring to the cropping lol) -->
+        {/if}
+      </button>
+      <p>
+        <span>Hi, I'm</span>
+        <span class="name-img">
+          {#if hopperelecMode}
+            <HopperelecText/>
+          {:else}
+            <CameronText color="#fff" thickness={130}/>
+          {/if}
+        </span>
+        <span>. I</span>
+      </p>
+      {#key i}
+        <p id="rolling-text" transition:slide={{duration: 2000}}>
+          <span class="verb">{rollingText[i][0]}</span>
+          {#if rollingText[i][1]}
+            <span class="noun">{rollingText[i][1]}</span>
+          {/if}
+          {#if rollingText[i][2]}
+            <span class="connective">{rollingText[i][2]}</span>
+          {/if}
+          {#if rollingText[i][3]}
+            <span style:color={rollingText[i][3]?.color}>{rollingText[i][3]?.text}</span>
+          {/if}
+        </p>
+      {/key}
+    </div>
   {/key}
 </section>
 
 <svelte:head>
   <style>
-    /* HopperIcon */
-    section > svg {
-      max-width: 33%;
-      max-height: 33%;
-      padding-bottom: min(20px, 3%);
-      filter: drop-shadow(0 0 32px black);
+    button > * {
+      height: 100%;
+      width: 100%;
     }
   </style>
 </svelte:head>
@@ -87,20 +124,48 @@ section {
   height: 80vh;
   padding: 1.05em 15px 0;
   box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
   font-family: "Courier New", Courier, monospace;
   font-size: 1.5em;
   font-weight: bold;
   text-align: center;
 }
 
+#transition-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+button {
+  max-width: 33%;
+  max-height: 33%;
+  padding-bottom: min(20px, 3%);
+  filter: drop-shadow(0 0 32px black);
+  cursor: pointer;
+}
+
+/* Hide whitespace surrounding name-img */
+p {
+  display: flex;
+
+  & > span {
+    padding: 0 .3em;
+  }
+}
+
 .name-img {
+  vertical-align: text-top;
   display: inline-block;
   height: 1em;
-  vertical-align: text-top;
+  padding-right: 0;
+
+  & + * {
+    padding-left: 0;
+  }
 }
 
 .noun {
@@ -111,11 +176,12 @@ section {
   color: #aaa;
 }
 
-#stickers > img {
+.sticker, #stickers > img {
   opacity: 0.3;
   position: absolute;
   max-width: 25%;
   max-height: 25%;
+  width: auto;
   filter: drop-shadow(0 0 8px black);
 
   @media (aspect-ratio < 1) {