fun with emojis

src/lib/components/Emojis.svelte

@@ -0,0 +1,82 @@
+<script>
+  const blendMode = [
+    "normal",
+    "multiply",
+    "screen",
+    // "overlay",
+    // "darken",
+    // "lighten",
+    "color-dodge",
+    "color-burn",
+    // "hard-light",
+    // "soft-light",
+    "difference",
+    "exclusion",
+    "hue",
+    "saturation",
+    "color",
+    "luminosity",
+    // "plus-darker",
+    // "plus-lighter",
+  ]
+
+  const emojis = [
+    '🏔',
+    '🌊',
+    '🏜',
+    '🥏',
+    '👨‍🍳',
+    '👻',
+    '🌲',
+    '🦌',
+    '🦑',
+    '🤠',
+    '🍳'
+  ]
+
+  const full = emojis.map(
+    e => {
+      const bm = []
+
+      blendMode.forEach(b => {
+        return bm.push({e, b})
+      })
+
+      return bm
+    }
+  ).flat()
+
+  function shuffleArray(array) {
+    return array
+        .map(value => ({ value, sort: Math.random() }))
+        .sort((a, b) => a.sort - b.sort)
+        .map(({ value }) => value)
+        .slice(1)
+  }
+
+  let shuffled = shuffleArray(full)
+</script>
+
+<div class="block text-shadow text-4xl mt-4 lg:mt-8 w-full max-h-[400px] lg:max-h-fit overflow-hidden lg:overflow-visible">
+  {#each shuffled as f, i}
+    <!-- <span>{i}</span> -->
+    <button
+      class="emoji emoji-{i} p-1 m-1"
+      style="mix-blend-mode: {f.b}"
+      on:click={() => shuffled = shuffleArray(shuffled)}
+    >
+      {f.e}
+    </button>
+  {/each}
+</div>
+
+{#if shuffled.length < 50 && shuffled.length > 25}
+  <p class="text-accent font-semibold text-xl my-4">keep going...</p>
+{/if}
+{#if shuffled.length <= 25 && shuffled.length > 0}
+  <p class="text-accent font-semibold text-xl my-4">almost there...</p>
+{/if}
+{#if shuffled.length === 0}
+  <!-- svelte-ignore a11y-distracting-elements -->
+  <marquee class="text-shadow font-bold text-6xl py-8">🎉 {full.length} emojis clicked 🎉</marquee>
+{/if}

src/lib/components/Slice.svelte

@@ -2,6 +2,7 @@
   export let title = false
   export let date = false
   export let prose = true
+  export let full = false
 
   let slotWrapperClasses = 'w-full md:w-2/3 md:ml-4 lg:ml-12'
   if (title && prose) {
@@ -10,6 +11,10 @@
   if (title && !prose) {
     slotWrapperClasses = 'not-prose'
   }
+  // nuclear full width
+  if (full) {
+    slotWrapperClasses = 'w-full px-8'
+  }
 </script>
 
 <div

src/routes/(main)/+page.svelte

@@ -1,6 +1,7 @@
 <script>
   import Slice from '$lib/components/Slice.svelte'
   import Card from '$lib/components/Card.svelte'
+  import Emojis from '$lib/components/Emojis.svelte'
   import {
     SITE_URL,
     SITE_TITLE,
@@ -32,11 +33,11 @@
 </svelte:head>
 
 <section class="mx-auto flex w-full flex-col items-start px-4 sm:p-0">
-  <Slice>
-    <h1 class="text-shadow text-3xl font-bold lg:text-5xl oceans">
+  <Slice full={true}>
+    <h1 class="text-shadow text-3xl font-bold lg:text-5xl">
       welcome to my page
     </h1>
-    <span class="block text-shadow text-3xl max-w-80 md:hidden" aria-hidden="true">🌊 🌊 🌊 🌊 🌊 🌊 🌊 🌊 🌊 🌊 🌊 🌊 🌊 🌊 🌊 🌊</span>
+    <Emojis />
   </Slice>
 
   <Slice title="Hello World!">
@@ -87,16 +88,3 @@
     </div>
   </Slice>
 </section>
-
-<style>
-.oceans {
-  @media (min-width: 768px) {
-    &::before {
-      content: '🌊  '
-    }
-    &::after {
-      content: ' 🌊 '
-    }
-  }
-}
-</style>

src/routes/(main)/blog/+page.svelte

@@ -121,7 +121,7 @@
     Posts
   </h1>
   <p class="mb-4 text-zinc-900 dark:text-gray-400">
-    In total, I've written {items.length} posts on my blog. Use the search below
+    In total, I've written <strong>{items.length}</strong> posts on my blog. Use the search below
     to filter.
   </p>
 
@@ -157,7 +157,7 @@
   <!-- Filter Buttons -->
   <div class="my-4 flex w-full items-center">
     <span class="mr-2 text-zinc-900 dark:text-gray-400"> Filter: </span>
-    <span class="">
+    <span>
       <button
         type="button"
         on:click={() => {

src/tailwind.css

@@ -171,6 +171,15 @@
   cursor: zoom-out
 }
 
+.emoji {
+  display: inline-block;
+  cursor: pointer;
+  transition: transform .2s;
+}
+.emoji:hover {
+  transform: scale(3);
+}
+
 /*
   CUSTOM SCROLLBARS!
   - https://css-tricks.com/strut-your-stuff-with-a-custom-scrollbar/