[wip] Make About page Process step a component

Also an attempt to manage the stacking effect of the steps but still not good 🙃 tricky shit

src/components/molecules/ProcessStep.svelte

@@ -0,0 +1,58 @@
+<style lang="scss">
+    @import "../../style/molecules/process-step";
+</style>
+
+<script lang="ts">
+    import { lerp } from '$utils/functions'
+    // Components
+    import Image from '$components/atoms/Image.svelte'
+
+    export let index: number
+    export let title: string
+    export let text: string
+    export let image: any = undefined
+    export let progress: number = 0
+
+    let stepEl: HTMLElement
+    let scrollY: number, innerWidth: number, innerHeight: number
+    const imageRatio = image ? image.width / image.height : undefined
+    const scale = lerp(0.925, 1, progress)
+
+    $: isMobile = innerWidth < 550
+    $: offsetTop = stepEl && stepEl.offsetTop
+    $: offsetStagger = lerp(isMobile ? 16 : 48, isMobile ? 64 : 120, progress)
+    $: isPinned = scrollY - innerHeight * 1.4 >= offsetTop
+</script>
+
+<svelte:window bind:scrollY bind:innerWidth bind:innerHeight />
+
+<div bind:this={stepEl}
+    class="step"
+    class:is-pinned={isPinned}
+    style:--index={index}
+    style:--opacity-index={lerp(0.3, 0.05, progress)}
+    style:--scale={scale}
+    style:--offset-top="{offsetStagger}px"
+>
+    <div class="step__card grid">
+        {#if image}
+            <Image
+                class="image shadow-box-dark"
+                id={image.id}
+                sizeKey="photo-grid"
+                sizes={{
+                    small: { width: 400 },
+                    medium: { width: 600 },
+                }}
+                ratio={imageRatio}
+                alt={image.title}
+            />
+        {/if}
+        <div class="content">
+            <h3 class="title-medium">{title}</h3>
+            <div class="text text-small">
+                {@html text}
+            </div>
+        </div>
+    </div>
+</div>