[wip] Create About page

src/components/atoms/AboutGridPhoto.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import Image from './Image.svelte'
+
+    export let id: string
+    export let alt: string
+    export let disabled: boolean = false
+
+    let hovering: boolean = false
+    let timer: ReturnType<typeof setTimeout> | number = null
+
+    $: classes = [
+        hovering ? 'is-hovered' : undefined,
+        $$props.class
+    ].join(' ').trim()
+
+    // Hovering functions
+    const handleMouseEnter = () => {
+        clearTimeout(timer)
+        hovering = true
+    }
+    const handleMouseLeave = () => {
+        // Reset hovering to false after a delay
+        timer = setTimeout(() => hovering = false, 800)
+    }
+</script>
+
+<figure class={classes}
+    on:mouseenter={handleMouseEnter}
+    on:mouseleave={handleMouseLeave}
+>
+    <Image
+        class={disabled ? 'is-disabled' : null}
+        {id}
+        sizeKey="photo-list"
+        sizes={{
+            small: { width: 250 },
+            medium: { width: 400 },
+            large: { width: 600 },
+        }}
+        ratio={1.5}
+        {alt}
+    />
+</figure>