From a9babdc5ad446085cfca7fef35190f072a295194 Mon Sep 17 00:00:00 2001
From: Tanner Heffner <tannerjheffner@gmail.com>
Date: Sun, 21 Jan 2024 19:46:26 -0800
Subject: [PATCH 1/3] more housekeeping

---
 src/lib/components/Footer.svelte              | 45 +++++++++++++++++--
 src/lib/components/PostItem.svelte            | 16 ++++---
 src/lib/siteConfig.js                         |  4 ++
 src/mdsvexlayout.svelte                       |  9 +---
 src/routes/(main)/+page.svelte                | 18 +++++++-
 src/routes/(main)/[slug=string]/+page.svelte  | 11 +----
 src/routes/(main)/about/+page.svx             |  2 +-
 src/routes/(main)/blog/+page.svelte           | 19 ++------
 src/routes/(main)/blogroll/+page.svx          |  2 +-
 src/routes/(main)/gallery/+page.svelte        | 12 +++--
 src/routes/(main)/gallery/[slug]/+page.svelte | 14 ++----
 src/routes/(main)/resume/+page.svelte         |  7 +--
 src/routes/(main)/work/+page.svelte           |  7 +--
 src/routes/(main)/work/[slug]/+page.svelte    |  5 +--
 14 files changed, 92 insertions(+), 79 deletions(-)

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 32a924f..1a7058d 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -1,12 +1,23 @@
 <script>
   import Icon from '$lib/components/Icon.svelte'
   import NavLink from '$lib/components/NavLink.svelte'
-  import { MY_TWITTER_HANDLE, GH_USER } from '$lib/siteConfig'
+  import { MY_TWITTER_HANDLE, LASTFM_ID, LETTERBOXD_ID, GH_USER } from '$lib/siteConfig'
+
+  let isDark = false
+  if (typeof localStorage !== 'undefined') {
+    if (
+      localStorage.theme === 'dark' ||
+      (!('theme' in localStorage) &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches)
+    ) {
+      isDark = true
+    }
+  }
 </script>
 
 <footer
   id="menu"
-  class="flex flex-col justify-center bg-orange-100 px-4 py-12 sm:px-8 dark:bg-slate-900"
+  class="flex flex-col justify-center bg-orange-100 px-4 py-4 sm:px-8 dark:bg-slate-900"
 >
   <hr class="mb-8" />
   <div
@@ -37,12 +48,40 @@
         </svg>
       </Icon>
 
-      <Icon href={'https://www.last.fm/user/lob_'} label="last.fm">
+      <Icon href={`https://www.last.fm/user/${LASTFM_ID}`} label="last.fm">
         <svg viewBox="0 0 256 256" class="h-12 w-12 p-1" fill="currentColor">
           <path d="M102.9,158.4c-4.9,4.4-14.4,13.3-30.3,13.3C54,171.8,36,155.4,36,129.3c0-33.5,21.5-44.3,38-44.3c23.8,0,29,14.4,35.5,34.2l8.7,27.2c8.6,26.4,24.9,47.7,71.6,47.7c33.5,0,56.2-10.4,56.2-37.6c0-22.1-12.5-33.5-35.7-39l-17.3-3.8c-11.9-2.7-15.4-7.6-15.4-15.8c0-9.3,7.3-14.7,19.2-14.7c13,0,20,4.9,21.1,16.6l27-3.3C242.7,72,226,61.9,198.4,61.9c-24.3,0-48.1,9.3-48.1,39c0,18.5,8.9,30.2,31.4,35.7l18.4,4.4c13.8,3.3,18.4,9,18.4,16.9c0,10.1-9.7,14.2-28.1,14.2c-27.3,0-41-14.4-47.5-34.3l-8.9-27.2C122.5,75,109.1,61.9,73.2,61.9C41.1,61.9,10,87.3,10,130.3c0,41.4,29.9,63.8,61.3,63.8c22.7,0,34.2-8,39.9-12.1L102.9,158.4z"/>
         </svg>
       </Icon>
 
+      <Icon href={`https://letterboxd.com/${LETTERBOXD_ID}/`} label="Letterboxd">
+        <svg viewBox="0 0 500 500" class="h-12 w-12 p-1" fill="currentColor">
+          <defs>
+            <rect id="path-1" x="0" y="0" width="129.847328" height="141.443299"></rect>
+            <rect id="path-3" x="0" y="0" width="129.847328" height="141.443299"></rect>
+          </defs>
+          <g id="letterboxd-decal-dots-neg-mono" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g id="Dots" transform="translate(61.000000, 180.000000)">
+              <ellipse id="Green" fill="currentColor" cx="189" cy="70" rx="70.0786517" ry="70"></ellipse>
+              <g id="Blue" transform="translate(248.152672, 0.000000)">
+                <mask id="mask-2" fill="white">
+                  <use xlink:href="#path-1"></use>
+                </mask>
+                <g id="Mask"></g>
+                <ellipse fill="currentcolor" mask="url(#mask-2)" cx="59.7686766" cy="70" rx="70.0786517" ry="70"></ellipse>
+              </g>
+              <g id="Orange">
+                  <mask id="mask-4" fill="white">
+                    <use xlink:href="#path-3"></use>
+                  </mask>
+                  <g id="Mask"></g>
+                  <ellipse fill="currentColor" mask="url(#mask-4)" cx="70.0786517" cy="70" rx="70.0786517" ry="70"></ellipse>
+              </g>
+            </g>
+          </g>
+        </svg>
+      </Icon>
+
       <Icon href={`https://github.com/${GH_USER}`} label="Github">
         <svg
           aria-hidden="true"
diff --git a/src/lib/components/PostItem.svelte b/src/lib/components/PostItem.svelte
index 88c4d50..4fe6322 100644
--- a/src/lib/components/PostItem.svelte
+++ b/src/lib/components/PostItem.svelte
@@ -6,14 +6,16 @@
 </script>
 
 <a data-sveltekit-prefetch class="post w-full" href={'/' + href}>
-  <div class="grid grid-cols-4 px-0 pt-8 my-4 sm:p-4">
-    <h2 class="col-span-4 text-lg font-bold text-accent sm:col-span-3">
-      {item.title}
-    </h2>
+  <div class="grid grid-cols-4 px-0 m-6">
+    <div class="col-span-4 sm:col-span-3 row-start-1">
+      <h2 class="text-lg font-bold text-accent">
+        {item.title}
+      </h2>
 
-    <p class="col-span-4 mb-2 text-slate-800 sm:col-span-3 dark:text-gray-400">
-      <slot />
-    </p>
+      <p class="mb-2 text-slate-800 dark:text-gray-400">
+        <slot />
+      </p>
+    </div>
 
     <div
       class="col-span-4 row-start-1 md:col-span-1 md:col-start-4 md:row-start-1 md:row-span-2 md:justify-self-end w-full text-right"
diff --git a/src/lib/siteConfig.js b/src/lib/siteConfig.js
index 20f55c9..fbd02a9 100644
--- a/src/lib/siteConfig.js
+++ b/src/lib/siteConfig.js
@@ -5,7 +5,11 @@ export const GH_USER_REPO = 'tjheffner/heffdotdev' // used for pulling github is
 export const SITE_TITLE = 'heffner.dev'
 export const SITE_DESCRIPTION = 'personal site of tanner heffner'
 export const DEFAULT_OG_IMAGE = 'https://heffner.dev/og?message=heffner.dev'
+
 export const MY_TWITTER_HANDLE = 'foodpyramids'
+export const LETTERBOXD_ID = 'tjheffner'
+export const LASTFM_ID = 'lob_'
+export const STEAM_ID = ''
 
 export const APPROVED_POSTERS_GH_USERNAME = ['tjheffner']
 export const GH_PUBLISHED_TAGS = ['Published']
diff --git a/src/mdsvexlayout.svelte b/src/mdsvexlayout.svelte
index 6093b4c..ead9770 100644
--- a/src/mdsvexlayout.svelte
+++ b/src/mdsvexlayout.svelte
@@ -1,9 +1,4 @@
-<!-- https://tailwindcss.com/docs/typography-plugin#element-modifiers -->
-<article
-  class="container prose mx-auto mb-16 flex w-full flex-col items-start px-4 dark:prose-invert hover:prose-a:text-blue-300
-prose-ul:list-disc
-sm:p-0
-"
->
+<!-- this file gets used for any .svx file -->
+<article class="mx-auto mb-16 flex w-full flex-col items-start px-4 sm:p-0 prose dark:prose-invert">
   <slot />
 </article>
diff --git a/src/routes/(main)/+page.svelte b/src/routes/(main)/+page.svelte
index 4adaa8e..b65c536 100644
--- a/src/routes/(main)/+page.svelte
+++ b/src/routes/(main)/+page.svelte
@@ -33,9 +33,10 @@
 
 <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">
-      🌊 welcome to my page 🌊
+    <h1 class="text-shadow text-3xl font-bold lg:text-5xl oceans">
+      welcome to my page
     </h1>
+    <span class="block text-shadow text-3xl max-w-80 md:hidden" aria-hidden="true">🌊 🌊 🌊 🌊 🌊 🌊 🌊 🌊 🌊 🌊 🌊 🌊 🌊 🌊 🌊 🌊</span>
   </Slice>
 
   <Slice title="Hello World!">
@@ -86,3 +87,16 @@
     </div>
   </Slice>
 </section>
+
+<style>
+.oceans {
+  @media (min-width: 768px) {
+    &::before {
+      content: '🌊  '
+    }
+    &::after {
+      content: ' 🌊 '
+    }
+  }
+}
+</style>
diff --git a/src/routes/(main)/[slug=string]/+page.svelte b/src/routes/(main)/[slug=string]/+page.svelte
index e39429d..bbab2ba 100644
--- a/src/routes/(main)/[slug=string]/+page.svelte
+++ b/src/routes/(main)/[slug=string]/+page.svelte
@@ -28,27 +28,18 @@
   <meta name="twitter:description" content={json.description} />
   {#if json.image}
     <meta property="og:image" content={json.image} />
-    <meta
-      name="twitter:card"
-      content={json.image ? 'summary_large_image' : 'summary'}
-    />
     <meta name="twitter:image" content={json.image} />
   {:else}
     <meta
       content={`https://heffner.dev/og?message=${json.title}`}
       property="og:image"
     />
-    <meta
-      name="twitter:card"
-      content={`https://heffner.dev/og?message=${json.title}`
-        ? 'summary_large_image'
-        : 'summary'}
-    />
     <meta
       name="twitter:image"
       content={`https://heffner.dev/og?message=${json.title}`}
     />
   {/if}
+  <meta name="twitter:card" content={'summary'} />
 </svelte:head>
 
 <a href="/blog" class="back-link"> Back </a>
diff --git a/src/routes/(main)/about/+page.svx b/src/routes/(main)/about/+page.svx
index 26f47a7..80c5300 100644
--- a/src/routes/(main)/about/+page.svx
+++ b/src/routes/(main)/about/+page.svx
@@ -6,7 +6,7 @@
   <title>heffner.dev | about</title>
   <meta name="description" content="About this site." />
 	<meta property="og:image" content={`https://heffner.dev/og?message=about`}>
-	<meta name="twitter:card" content={`https://heffner.dev/og?message=about` ? 'summary_large_image' : 'summary'} />
+	<meta name="twitter:card" content={'summary'} />
 	<meta name="twitter:image" content={`https://heffner.dev/og?message=about`} />
 </svelte:head>
 
diff --git a/src/routes/(main)/blog/+page.svelte b/src/routes/(main)/blog/+page.svelte
index d28631d..1e24ecd 100644
--- a/src/routes/(main)/blog/+page.svelte
+++ b/src/routes/(main)/blog/+page.svelte
@@ -108,12 +108,7 @@
   <title>heffner.dev | posts</title>
   <meta name="description" content="Latest musings fit to print." />
   <meta property="og:image" content={`https://heffner.dev/og?message=posts`} />
-  <meta
-    name="twitter:card"
-    content={`https://heffner.dev/og?message=posts`
-      ? 'summary_large_image'
-      : 'summary'}
-  />
+  <meta name="twitter:card" content={'summary'} />
   <meta name="twitter:image" content={`https://heffner.dev/og?message=posts`} />
 </svelte:head>
 
@@ -215,13 +210,10 @@
       {/each}
     </ul>
     {#if !showAll}
-      <div class="flex justify-center">
+      <div class="flex justify-center mx-auto">
         <button
           on:click={() => (showAll = true)}
-          class="my-4 rounded-lg bg-sky-600 p-2 font-bold text-orange-100 ring-red-600
-					transition-all duration-200 ease-in-out hover:ring-2
-					dark:bg-yellow-800 dark:text-yellow-100 dark:ring-yellow-400
-					"
+          class="filter"
         >
           See more posts
         </button>
@@ -234,10 +226,7 @@
     </div>
     <button
       on:click={() => (filterStr = '')}
-      class="my-4 rounded-lg bg-yellow-400 p-2 font-bold text-yellow-800 ring-yellow-800
-			transition-all duration-200 ease-in-out hover:ring-2
-			dark:bg-yellow-800 dark:text-yellow-100 dark:ring-yellow-400
-			"
+      class="filter my-4"
     >
       Clear your search
     </button>
diff --git a/src/routes/(main)/blogroll/+page.svx b/src/routes/(main)/blogroll/+page.svx
index 4bca065..a77e4d1 100644
--- a/src/routes/(main)/blogroll/+page.svx
+++ b/src/routes/(main)/blogroll/+page.svx
@@ -2,7 +2,7 @@
   <title>heffner.dev | blogroll</title>
   <meta name="description" content="other cool blogs I enjoy reading" />
 	<meta property="og:image" content={`https://heffner.dev/og?message=blogroll`}>
-	<meta name="twitter:card" content={`https://heffner.dev/og?message=blogroll` ? 'summary_large_image' : 'summary'} />
+	<meta name="twitter:card" content={'summary'} />
 	<meta name="twitter:image" content={`https://heffner.dev/og?message=blogroll`} />
 </svelte:head>
 
diff --git a/src/routes/(main)/gallery/+page.svelte b/src/routes/(main)/gallery/+page.svelte
index 0100dbf..2f0935e 100644
--- a/src/routes/(main)/gallery/+page.svelte
+++ b/src/routes/(main)/gallery/+page.svelte
@@ -11,12 +11,7 @@
     property="og:image"
     content={`https://heffner.dev/og?message=adventure%20log`}
   />
-  <meta
-    name="twitter:card"
-    content={`https://heffner.dev/og?message=adventure%20log`
-      ? 'summary_large_image'
-      : 'summary'}
-  />
+  <meta name="twitter:card" content={'summary'} />
   <meta
     name="twitter:image"
     content={`https://heffner.dev/og?message=adventure%20log`}
@@ -29,7 +24,10 @@
       Gallery
     </h1>
     <p class="text-xl font-semibold text-accent">
-      details, photos, etc. from past adventures
+      details, photos<sup>*</sup>, etc. from past adventures
+    </p>
+    <p class="text-sm text-accent mt-2">
+      <sup>*</sup>advance warning many of the pages are very image heavy
     </p>
   </Slice>
 
diff --git a/src/routes/(main)/gallery/[slug]/+page.svelte b/src/routes/(main)/gallery/[slug]/+page.svelte
index d887d27..f4d8ee3 100644
--- a/src/routes/(main)/gallery/[slug]/+page.svelte
+++ b/src/routes/(main)/gallery/[slug]/+page.svelte
@@ -28,27 +28,21 @@
   <meta name="twitter:description" content={json.description} />
   {#if json.image}
     <meta property="og:image" content={json.image} />
-    <meta
-      name="twitter:card"
-      content={json.image ? 'summary_large_image' : 'summary'}
-    />
     <meta name="twitter:image" content={json.image} />
   {:else}
     <meta
       content={`https://heffner.dev/og?message=${json.title}`}
       property="og:image"
     />
-    <meta
-      name="twitter:card"
-      content={`https://heffner.dev/og?message=${json.title}`
-        ? 'summary_large_image'
-        : 'summary'}
-    />
     <meta
       name="twitter:image"
       content={`https://heffner.dev/og?message=${json.title}`}
     />
   {/if}
+  <meta
+    name="twitter:card"
+    content={'summary'}
+  />
 </svelte:head>
 
 <a href="/gallery" class="back-link"> Back </a>
diff --git a/src/routes/(main)/resume/+page.svelte b/src/routes/(main)/resume/+page.svelte
index 55a55ae..02621ef 100644
--- a/src/routes/(main)/resume/+page.svelte
+++ b/src/routes/(main)/resume/+page.svelte
@@ -7,12 +7,7 @@
   <title>Tanner Heffner's Resume</title>
   <meta name="description" content="digital resume of tanner heffner" />
   <meta property="og:image" content={`https://heffner.dev/og?message=resume`} />
-  <meta
-    name="twitter:card"
-    content={`https://heffner.dev/og?message=resume`
-      ? 'summary_large_image'
-      : 'summary'}
-  />
+  <meta name="twitter:card" content={'summary'} />
   <meta
     name="twitter:image"
     content={`https://heffner.dev/og?message=resume`}
diff --git a/src/routes/(main)/work/+page.svelte b/src/routes/(main)/work/+page.svelte
index 3827f85..09789c8 100644
--- a/src/routes/(main)/work/+page.svelte
+++ b/src/routes/(main)/work/+page.svelte
@@ -23,12 +23,7 @@
     property="og:image"
     content={`https://heffner.dev/og?message=heffner.dev%20|%20work`}
   />
-  <meta
-    name="twitter:card"
-    content={`https://heffner.dev/og?message=heffner.dev%20|%20work`
-      ? 'summary_large_image'
-      : 'summary'}
-  />
+  <meta name="twitter:card" content={'summary'} />
   <meta
     name="twitter:image"
     content={`https://heffner.dev/og?message=heffner.dev%20|%20work`}
diff --git a/src/routes/(main)/work/[slug]/+page.svelte b/src/routes/(main)/work/[slug]/+page.svelte
index c97d6bb..3c84ccc 100644
--- a/src/routes/(main)/work/[slug]/+page.svelte
+++ b/src/routes/(main)/work/[slug]/+page.svelte
@@ -16,10 +16,7 @@
   <meta property="og:title" content={name} />
   <meta name="Description" content={description} />
   <meta property="og:description" content={description} />
-  <meta
-    name="twitter:card"
-    content={image ? 'summary_large_image' : 'summary'}
-  />
+  <meta name="twitter:card" content={'summary'} />
   <meta name="twitter:creator" content={'@' + MY_TWITTER_HANDLE} />
   <meta name="twitter:title" content={name} />
   <meta name="twitter:description" content={description} />

From e2c488220d1ef73608a932b5812768aa7631c9ad Mon Sep 17 00:00:00 2001
From: Tanner Heffner <tannerjheffner@gmail.com>
Date: Mon, 22 Jan 2024 19:26:46 -0800
Subject: [PATCH 2/3] fun with emojis

---
 src/lib/components/Emojis.svelte    | 82 +++++++++++++++++++++++++++++
 src/lib/components/Slice.svelte     |  5 ++
 src/routes/(main)/+page.svelte      | 20 ++-----
 src/routes/(main)/blog/+page.svelte |  4 +-
 src/tailwind.css                    |  9 ++++
 5 files changed, 102 insertions(+), 18 deletions(-)
 create mode 100644 src/lib/components/Emojis.svelte

diff --git a/src/lib/components/Emojis.svelte b/src/lib/components/Emojis.svelte
new file mode 100644
index 0000000..f71f942
--- /dev/null
+++ b/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}
diff --git a/src/lib/components/Slice.svelte b/src/lib/components/Slice.svelte
index 15f715d..54f85cd 100644
--- a/src/lib/components/Slice.svelte
+++ b/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
diff --git a/src/routes/(main)/+page.svelte b/src/routes/(main)/+page.svelte
index b65c536..e865913 100644
--- a/src/routes/(main)/+page.svelte
+++ b/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>
diff --git a/src/routes/(main)/blog/+page.svelte b/src/routes/(main)/blog/+page.svelte
index 1e24ecd..dbf6401 100644
--- a/src/routes/(main)/blog/+page.svelte
+++ b/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={() => {
diff --git a/src/tailwind.css b/src/tailwind.css
index be8bbec..a3a7dce 100644
--- a/src/tailwind.css
+++ b/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/

From 06a444da8c9f420c622fb3ad2c6ec877444939c5 Mon Sep 17 00:00:00 2001
From: Tanner Heffner <tannerjheffner@gmail.com>
Date: Mon, 22 Jan 2024 19:55:53 -0800
Subject: [PATCH 3/3] more fun with emojis

---
 src/lib/components/Emojis.svelte | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/Emojis.svelte b/src/lib/components/Emojis.svelte
index f71f942..5a94431 100644
--- a/src/lib/components/Emojis.svelte
+++ b/src/lib/components/Emojis.svelte
@@ -34,6 +34,8 @@
     '🍳'
   ]
 
+  // all combinations of the above two arrays
+  // ex: { e: '🌊', b: 'exclusion'}
   const full = emojis.map(
     e => {
       const bm = []
@@ -46,14 +48,24 @@
     }
   ).flat()
 
+  // sort by random map, unmap to get new order
   function shuffleArray(array) {
     return array
         .map(value => ({ value, sort: Math.random() }))
         .sort((a, b) => a.sort - b.sort)
         .map(({ value }) => value)
-        .slice(1)
   }
 
+  // reconstruct item from what was clicked, filter array to remove it
+  function handleRemoval(event) {
+    const data = event.target.dataset
+    const r = {e: data.emoji, b: data.blend}
+
+    const items = shuffled.filter(e => !(e.e === r.e && e.b === r.b))
+    shuffled = shuffleArray(items)
+  }
+
+  // set initial shuffle to full list
   let shuffled = shuffleArray(full)
 </script>
 
@@ -63,7 +75,9 @@
     <button
       class="emoji emoji-{i} p-1 m-1"
       style="mix-blend-mode: {f.b}"
-      on:click={() => shuffled = shuffleArray(shuffled)}
+      data-emoji={f.e}
+      data-blend={f.b}
+      on:click={(event) => handleRemoval(event)}
     >
       {f.e}
     </button>