Merge pull request #4 from efergus/svelte-fix

Add mobile menu and fix svelte
efergus · Jun 30, 2024 · db2a8aa · db2a8aa
2 parents fda5296 + a33d85e
commit db2a8aa
Show file tree

Hide file tree

Showing 6 changed files with 141 additions and 24 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install Node.js
         uses: actions/setup-node@v3

diff --git a/src/lib/components/Card.svelte b/src/lib/components/Card.svelte
@@ -18,7 +18,7 @@
     {#if subtitle}
       <p class="text-contrast/60 pb-2">{subtitle}</p>
     {/if}
-    <div class="flex flex-col gap-3 overflow-auto">
+    <div class="flex flex-col justify-start gap-3 overflow-auto">
       <slot />
     </div>
   </div>

diff --git a/src/lib/components/Gallery.svelte b/src/lib/components/Gallery.svelte
@@ -31,10 +31,14 @@
       x: window.innerWidth,
       y: window.innerHeight,
     };
+    const scale = Math.min(screen.x / rect.width, screen.y / rect.height) * 0.8;
+    if (scale <= 1) {
+      return;
+    }
     const position = {
       x: screen.x / 2 - (rect.x + rect.width / 2),
       y: screen.y / 2 - (rect.y + rect.height / 2),
-      scale: Math.min(screen.x / rect.width, screen.y / rect.height) * 0.8,
+      scale,
     };
     selected = {
       index,
@@ -64,7 +68,7 @@
 <div>
   {#each images as image, idx}
     <button
-      class="transition-transform drop-shadow hover:scale-110 hover:z-10"
+      class="transition-transform drop-shadow lg:hover:scale-105 hover:z-10"
       on:click={onClick(idx)}
       style={idx === selected?.index ? getStyle(selected) : ""}
     >

diff --git a/src/lib/components/PageMenu.svelte b/src/lib/components/PageMenu.svelte
@@ -0,0 +1,88 @@
+<script>
+  import clsx from "clsx";
+
+  export let open = false;
+  export let duration = 0.15;
+</script>
+
+<div class="relative flex justify-end md:justify-start w-full">
+  <label class={clsx("menu md:hidden place-self-end", { open })}>
+    <input type="checkbox" class="menu hidden" bind:checked={open} />
+    <svg
+      style="--duration:{duration}"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="-12 -12 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="feather feather-menu"
+    >
+      <line class="line1" x1="-9" y1="0" x2="9" y2="0" />
+      <line class="line2" x1="-9" y1="0" x2="9" y2="0" />
+      <line class="line3" x1="-9" y1="0" x2="9" y2="0" />
+    </svg>
+  </label>
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    class="menu"
+    on:click={() => {
+      open = false;
+    }}
+  >
+    <slot />
+  </div>
+</div>
+
+<style lang="postcss">
+  div.menu {
+    @apply absolute transition-transform -translate-y-full w-full;
+  }
+  @media screen(md) {
+    div.menu {
+      transform: translateY(0px);
+      position: static;
+    }
+  }
+
+  label.menu:has(input.menu:checked) ~ div.menu,
+  label.menu.open ~ div.menu {
+    transform: translateY(0);
+  }
+
+  label.menu {
+    @apply p-2 z-10;
+  }
+  line {
+    transition-property: transform;
+    transition-duration: calc(var(--duration) * 1s);
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .line1 {
+    transform: translateY(30%);
+  }
+  .line2 {
+    transform: scaleX(1);
+  }
+  .line3 {
+    transform: translateY(-30%);
+  }
+  input.menu:checked ~ svg > line.line1,
+  .open line.line1 {
+    transform: translateY(0) rotate(-45deg);
+  }
+
+  input.menu:checked ~ svg > line.line2,
+  .open line.line2 {
+    transform: scaleX(0);
+  }
+
+  input.menu:checked ~ svg > line.line3,
+  .open line.line3 {
+    transform: translateY(0) rotate(45deg);
+  }
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -3,26 +3,31 @@
   import "../style.css";
   import "$lib/markdown/markdown.css";
   import NavLink from "$lib/components/NavLink.svelte";
+  import PageMenu from "$lib/components/PageMenu.svelte";
 </script>
 
 <svelte:head>
   <title>Ethan Ferguson</title>
 </svelte:head>
 
-<div class="bg-theme w-full h-screen flex flex-col overflow-scroll absolute">
-  <header class="bg-primary p-4">
+<div class="bg-theme w-full h-screen flex flex-col overflow-auto absolute">
+  <header class="bg-primary p-4 z-50">
     <div>
       <h1>Ethan Ferguson</h1>
     </div>
   </header>
-  <div
-    class="bg-secondary px-8 pt-2 pb-3 flex flex-col lg:flex-row gap-4 flex-wrap sticky top-0"
-  >
-    <NavLink href="/">Home</NavLink>
-    <NavLink href="/experience">Experience</NavLink>
-    <NavLink href="/projects">Projects</NavLink>
-    <NavLink href="/photography">Photography</NavLink>
-    <NavLink href="/art">Art</NavLink>
+  <div class="sticky top-0 bg-secondary w-full z-40">
+    <PageMenu
+      ><div
+        class="bg-secondary flex flex-col md:flex-row flex-wrap px-8 pt-2 pb-3 gap-4"
+      >
+        <NavLink href="/">Home</NavLink>
+        <NavLink href="/experience">Experience</NavLink>
+        <NavLink href="/projects">Projects</NavLink>
+        <NavLink href="/photography">Photography</NavLink>
+        <NavLink href="/art">Art</NavLink>
+      </div>
+    </PageMenu>
   </div>
   <div class="w-full grow flex flex-col justify-center p-4">
     <div class="grow-[1]" />

diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
@@ -5,21 +5,24 @@
 
 <h1 class="emphasize">Projects and Writeups</h1>
 
-<div class="max-w-[80vw]">
+<div id="grid" class="max-w-[80vw]">
   <Project
     title="Fermidle"
     subtitle="why do they call them dle's when they're anything but?"
     link="https://eferg.us/fermidle"
   >
-    <p>
-      How many golf balls would it take to fill the oceans? How many Empire
-      State Buildings would it take to reach the altitude of the ISS?
-    </p>
+    <div>
+      <p>How many golf balls would it take to fill the oceans?</p>
+      <p>
+        How many Empire State Buildings would it take to reach the altitude of
+        the ISS?
+      </p>
+    </div>
   </Project>
   <Project
     title="WebGPU-Spy"
     subtitle="Paper: A hardware-based microarchitectural attack"
-    link=""
+    link="https://arxiv.org/pdf/2401.04349"
   >
     <p>
       WebGPU-Spy is a hardware-based michroarchitectural attack that takes
@@ -51,8 +54,10 @@
       my colleague's initial numpy implementation.
     </p>
     <p>
-      The overall process is is to go from SMILES string (a) to 3D grid (f). For
-      more info, take a look at the paper!
+      The overall process is is to go from SMILES string <i>(a)</i> to 3D grid
+      <i>(f)</i>. For more info, take a look at the paper! We were able to
+      generate these grids, and then create a model using Pytorch to predict the
+      homo-lumo gap of a material.
     </p>
     <img src={molecule} alt="The principle of ParticleGrid" />
   </Project>
@@ -86,6 +91,17 @@
       it even has a fancy animation! It doesn't even use <code>calc()</code>!
     </p>
   </Project>
+  <Project
+    title="Basic Backprop"
+    subtitle="Numpy-based machine learning"
+    link="https://github.com/efergus/basic-backprop"
+  >
+    <p>
+      I wanted to understand how backpropagation works, so I built a
+      backpropagation algorithm in python using numpy. It's not exactly
+      high-speed.
+    </p>
+  </Project>
   <Project
     title="Burnt Umber"
     subtitle="3D Color picker"
@@ -102,13 +118,17 @@
       >
     </p>
   </Project>
+  <!-- TODO <Project
+    title="Image Gallery"
+  >
+  </Project> -->
 </div>
 
 <style lang="postcss">
-  div {
+  div#grid {
     gap: 1em;
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(min(90vw, 24rem), 1fr));
     grid-auto-rows: 24rem;
   }
 </style>