From 4f264b6cf84e603a599ac2294e14e79a250a9cc4 Mon Sep 17 00:00:00 2001
From: "kristenwardphl@gmail.com" <kristenwardphl@gmail.com>
Date: Tue, 8 Jul 2025 10:50:41 -0400
Subject: [PATCH 1/8] 13: add example modal to business page

---
 ui/src/lib/components/Modal.svelte  | 116 ++++++++++++++++++++++++++++
 ui/src/lib/images/modal-corner.svg  |  24 ++++++
 ui/src/routes/business/+page.svelte |  24 +++++-
 3 files changed, 163 insertions(+), 1 deletion(-)
 create mode 100644 ui/src/lib/components/Modal.svelte
 create mode 100644 ui/src/lib/images/modal-corner.svg

diff --git a/ui/src/lib/components/Modal.svelte b/ui/src/lib/components/Modal.svelte
new file mode 100644
index 0000000..8082d6a
--- /dev/null
+++ b/ui/src/lib/components/Modal.svelte
@@ -0,0 +1,116 @@
+<script lang="ts">
+    interface ComponentProps {
+        open: Boolean,
+        closeModal: () => void;
+    }
+
+	let { open, closeModal}: ComponentProps = $props();
+    // import Blob from '$lib/components/Blob.svelte';
+    // import modalCorner from '$lib/images/modal-corner.svg';
+    // let dialog = $state();
+    // import { createEventDispatcher } from 'svelte';
+    // const dispatch = createEventDispatcher();
+    // function closeModal() {
+    //     console.log('close modal called');
+    //     dispatch('modalClose', { message: 'Modal Closed' });
+    // }
+</script>
+<style>
+    .modal {
+        position:fixed;
+        top: 15%;
+        left: 10%;
+        width: 80%;
+        z-index: 99;
+    }
+    .modal-content {
+        position: relative;
+        margin: 0 10% 0 20%;
+        padding: 3rem 2rem 1rem;
+        background: rgba(0,0,0,0.3);
+        border-top: 4px solid rgba(14, 229, 163, 1);
+        border-radius: 30px;
+        border-top-right-radius: 0;
+    }
+    @media screen and (min-width: 600px) {
+        .modal-content {
+            margin: 0 10% 0 25%;
+            padding: 5rem 4rem 4rem;
+        }
+    }
+    @media screen and (min-width: 1024px) {
+        .modal-content {
+            padding: 5rem 0 4rem 10%; /* global 80% text width */
+        }
+    }
+    .modal-corner {
+        display: block;
+        position: absolute;
+        width: 50%;
+        height: 100%;
+        left: -25%;
+        top: -5rem;
+        background-image: url('$lib/images/modal-corner.svg');
+        background-size: 100% auto;
+        background-repeat: no-repeat;
+        min-width: 160px;
+    }
+    .modal-corner-image {
+        position: relative;
+        padding: 20px 15px 0;
+        /*max-width: 100%;*/
+    }
+    .modal-corner-image img {
+        width: 80%;
+        position: absolute;
+        top: 0;
+        display: block;
+        right: 0;
+        /*max-width: 100%;*/
+    }
+    .modal-backdrop {
+        position: fixed;
+        display: block;
+        top: 0;
+        left: 0;
+        z-index: 98;
+        width: 100vw;
+        height: 100vh;
+        background-color: rgba(44, 13, 93, 0.8);  /*Optional: Adjust background color and opacity*/
+        backdrop-filter: blur(10px); /*Apply blur effect*/
+        -webkit-backdrop-filter: blur(10px); /* For Webkit browsers */
+    }
+    .close-button {
+        display: block;
+        cursor: pointer;
+        border: none;
+        background: none;
+        appearance: none;
+        -webkit-appearance: none;
+        position: absolute;
+        top: -55px;
+        right: -8px;
+        font-size: 40px;
+        color: rgba(14, 229, 163, 1);
+
+    }
+</style>
+{#if open}
+    <div class="modal">
+        <div class="modal-content">
+            <div class="modal-corner">
+                <div class="modal-corner-image">
+                    <slot name="image" />
+                </div>
+            </div>
+            <h3></h3>
+            <h2 style="color: white;"><slot name="heading"/></h2>
+            <div><slot name="content"/></div>
+            <!-- <button autofocus onclick={() => dialog.close()}>close modal</button> -->
+            <button class="close-button" autofocus on:click={closeModal} aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+            </button>
+        </div>
+    </div>
+<div class="modal-backdrop"></div>
+{/if}
\ No newline at end of file
diff --git a/ui/src/lib/images/modal-corner.svg b/ui/src/lib/images/modal-corner.svg
new file mode 100644
index 0000000..855d0eb
--- /dev/null
+++ b/ui/src/lib/images/modal-corner.svg
@@ -0,0 +1,24 @@
+<svg width="447" height="347" viewBox="0 0 447 347" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<path opacity="0.75" d="M50.327 127.604C50.327 127.604 130.334 -13.5852 297.316 24.884C438.532 57.4173 414.474 257.578 292.228 249.26C208.473 243.566 178.094 271.711 137.163 307.098C72.2377 363.228 -48.611 298.187 50.327 127.598V127.604Z" fill="url(#paint0_linear_1006_2)"/>
+<path opacity="0.75" d="M78.7105 111.332C46.953 150.641 33.9361 208.275 43.2493 258.476C54.3667 318.377 126.801 338.122 178.589 292.659C230.376 247.197 256.582 250.4 313.363 254.884C364.388 258.909 401.965 242.076 416.316 211.982C430.667 181.888 414.276 141.757 368.27 145.82C329.588 149.234 297.138 129.388 284.038 90.9696C271.593 54.4811 227.321 46.4943 194.255 50.3412C161.188 54.1818 113.187 68.6651 78.7168 111.332H78.7105Z" fill="url(#paint1_linear_1006_2)"/>
+<path opacity="0.75" d="M358.803 248.671C389.434 210.749 401.987 155.152 393.005 106.732C382.284 48.9527 312.424 29.9029 262.473 73.7581C212.523 117.613 187.249 114.524 132.486 110.198C83.271 106.309 47.0305 122.554 33.1903 151.578C19.3501 180.61 35.1598 219.325 79.5313 215.406C116.845 212.109 148.135 231.259 160.772 268.321C172.773 303.515 215.473 311.223 247.369 307.511C279.264 303.807 325.559 289.837 358.803 248.671Z" fill="url(#pattern0_1006_2)"/>
+<path opacity="0.5" d="M126.309 277.554C146.001 272.894 158.197 253.112 153.55 233.368C148.902 213.625 129.17 201.398 109.477 206.058C89.7844 210.717 77.5882 230.5 82.2361 250.243C86.884 269.986 106.616 282.214 126.309 277.554Z" fill="url(#paint2_linear_1006_2)"/>
+<defs>
+<pattern id="pattern0_1006_2" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_1006_2" transform="matrix(0.00138889 0 0 0.0019733 0 -0.175855)"/>
+</pattern>
+<linearGradient id="paint0_linear_1006_2" x1="12.8266" y1="172.519" x2="393.872" y2="172.519" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FA6FF5"/>
+<stop offset="1" stop-color="#940E8C"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1006_2" x1="421.353" y1="183.538" x2="40.308" y2="183.538" gradientUnits="userSpaceOnUse">
+<stop stop-color="#260B62"/>
+<stop offset="1" stop-color="#531499"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1006_2" x1="91.9908" y1="267.776" x2="143.943" y2="215.963" gradientUnits="userSpaceOnUse">
+<stop stop-color="#940E8C"/>
+<stop offset="1" stop-color="#FA6FF5"/>
+</linearGradient>
+<image/>
+</defs>
+</svg>
diff --git a/ui/src/routes/business/+page.svelte b/ui/src/routes/business/+page.svelte
index a7b1778..43b000d 100644
--- a/ui/src/routes/business/+page.svelte
+++ b/ui/src/routes/business/+page.svelte
@@ -233,6 +233,7 @@
     import Accordion from '$lib/components/Accordion.svelte';
     import Blob from '$lib/components/Blob.svelte';
     import Globe from "$lib/components/Globe.svelte";
+    import Modal from '$lib/components/Modal.svelte';
     import blueCloud from '$lib/images/cloud-blue.png';
     import purpleCloud from '$lib/images/cloud-purple.png';
 
@@ -241,6 +242,12 @@
         {id: 'bizdev', title: 'Business Automation'},
         {id: 'design', title: 'Design & Branding'},
     ];
+
+    let showModal = '';
+    function closeModal() {
+        console.log('close modal');
+        showModal = '';
+    }
 </script>
 
 <section class="business">
@@ -342,7 +349,7 @@
             </div>
 
             <div class="projects">
-                <a href="https://chivecharities.org/">
+                <a data-href="https://chivecharities.org/" on:click={() => (showModal = 'chive-charities')}>
                     <div class="project">
                         <Blob type="5">
                             <img src="/content/business-chive-charities.jpg" alt="A screenshot of the Chive Charities Website" />
@@ -350,6 +357,20 @@
                         <div class="button wide dark">Chive Charities</div>
                     </div>
                 </a>
+                { showModal }
+                <Modal open="{showModal === 'chive-charities'}" closeModal={closeModal}>
+                    <div slot="image">
+                        <Blob type="5"  >
+                          /  <img style="width: 100%;" src="/content/business-chive-charities.jpg" alt="A screenshot of the Chive Charities Website" />
+                        </Blob>
+                    </div>
+                    <h2 slot="heading">Chive Charities</h2>
+                    <div slot="content">
+                      <p>Description of Chive Charities</p>
+                      <p>The Wetfish Communtiy is a mix of everything from queer hackers, to farmers, researchers, and artists. Some of us work at senior positions at big tech companies, others are just trying to make ends meet. We're spread out across the globe physically, but digitally united.</p>
+                      <br/><a class="button" href="https://chivecharities.org/">Visit Chive Charities</a>
+                    </div>
+                </Modal>
 
                 <a href="https://churnkey.co/">
                     <div class="project">
@@ -357,6 +378,7 @@
                             <img src="/content/business-churnkey.png" alt="A screenshot of the ChurnKey.co Website" />
                         </Blob>
                         <div class="button wide dark">Churnkey</div>
+
                     </div>
                 </a>
 

From f74a1c417f0a666038a45b30a56241a0516c1ec5 Mon Sep 17 00:00:00 2001
From: "kristenwardphl@gmail.com" <kristenwardphl@gmail.com>
Date: Tue, 8 Jul 2025 11:04:19 -0400
Subject: [PATCH 2/8] 13: update modal styles to make scrollable

---
 ui/src/lib/components/Modal.svelte  | 18 +++++++++++++++---
 ui/src/routes/business/+page.svelte |  2 +-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/ui/src/lib/components/Modal.svelte b/ui/src/lib/components/Modal.svelte
index 8082d6a..d7fce01 100644
--- a/ui/src/lib/components/Modal.svelte
+++ b/ui/src/lib/components/Modal.svelte
@@ -18,10 +18,22 @@
 <style>
     .modal {
         position:fixed;
-        top: 15%;
-        left: 10%;
-        width: 80%;
+        top: 0%;
+        left: 0%;
+        padding-top: 25vh;
+        width: 100%;
         z-index: 99;
+        max-height: 75vh;
+        overflow:auto;
+    }
+    @media screen and (min-width: 600px) {
+        .modal {
+            padding-top: 0;
+            overflow: visible;
+            top: 15%;
+            left: 10%;
+            width: 80%;
+        }
     }
     .modal-content {
         position: relative;
diff --git a/ui/src/routes/business/+page.svelte b/ui/src/routes/business/+page.svelte
index 43b000d..9870712 100644
--- a/ui/src/routes/business/+page.svelte
+++ b/ui/src/routes/business/+page.svelte
@@ -368,7 +368,7 @@
                     <div slot="content">
                       <p>Description of Chive Charities</p>
                       <p>The Wetfish Communtiy is a mix of everything from queer hackers, to farmers, researchers, and artists. Some of us work at senior positions at big tech companies, others are just trying to make ends meet. We're spread out across the globe physically, but digitally united.</p>
-                      <br/><a class="button" href="https://chivecharities.org/">Visit Chive Charities</a>
+                      <br/><a class="button full" href="https://chivecharities.org/">Visit Chive Charities</a>
                     </div>
                 </Modal>
 

From 046b36bae16ace012411bd1f84b0a840bb3195c9 Mon Sep 17 00:00:00 2001
From: "kristenwardphl@gmail.com" <kristenwardphl@gmail.com>
Date: Tue, 8 Jul 2025 12:09:13 -0400
Subject: [PATCH 3/8] 13: large screen corner styles

---
 ui/src/lib/components/Modal.svelte | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/ui/src/lib/components/Modal.svelte b/ui/src/lib/components/Modal.svelte
index d7fce01..36f44a3 100644
--- a/ui/src/lib/components/Modal.svelte
+++ b/ui/src/lib/components/Modal.svelte
@@ -66,11 +66,16 @@
         background-size: 100% auto;
         background-repeat: no-repeat;
         min-width: 160px;
+        max-width: 360px;
+    }
+    @media screen and (min-width: 1024px) {
+        .modal-corner {
+            top: -7.5rem;
+        }
     }
     .modal-corner-image {
         position: relative;
         padding: 20px 15px 0;
-        /*max-width: 100%;*/
     }
     .modal-corner-image img {
         width: 80%;

From 396dcd912a56dd032fb75af17e9e1bf2c7f5f48e Mon Sep 17 00:00:00 2001
From: "kristenwardphl@gmail.com" <kristenwardphl@gmail.com>
Date: Tue, 8 Jul 2025 16:25:48 -0400
Subject: [PATCH 4/8] 13: adjust z index

---
 ui/src/lib/components/Modal.svelte | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/ui/src/lib/components/Modal.svelte b/ui/src/lib/components/Modal.svelte
index 36f44a3..8851ed2 100644
--- a/ui/src/lib/components/Modal.svelte
+++ b/ui/src/lib/components/Modal.svelte
@@ -22,7 +22,7 @@
         left: 0%;
         padding-top: 25vh;
         width: 100%;
-        z-index: 99;
+        z-index: 999;
         max-height: 75vh;
         overflow:auto;
     }
@@ -90,12 +90,11 @@
         display: block;
         top: 0;
         left: 0;
-        z-index: 98;
+        z-index: 998;
         width: 100vw;
         height: 100vh;
-        background-color: rgba(44, 13, 93, 0.8);  /*Optional: Adjust background color and opacity*/
-        backdrop-filter: blur(10px); /*Apply blur effect*/
-        -webkit-backdrop-filter: blur(10px); /* For Webkit browsers */
+        /*background-color: rgba(44, 13, 93, 0.8);*/
+        backdrop-filter: blur(10px);/*Apply blur effect*/
     }
     .close-button {
         display: block;
@@ -129,5 +128,5 @@
             </button>
         </div>
     </div>
-<div class="modal-backdrop"></div>
+    <div class="modal-backdrop"></div>
 {/if}
\ No newline at end of file

From c548223d14eea5894f8b61ddb18d454ee4a62cb2 Mon Sep 17 00:00:00 2001
From: "kristenwardphl@gmail.com" <kristenwardphl@gmail.com>
Date: Sun, 13 Jul 2025 12:35:09 -0400
Subject: [PATCH 5/8] 13: add additional modals, move to top of dom for css
 blur compatibility"

---
 ui/src/lib/components/Modal.svelte  | 10 +----
 ui/src/routes/business/+page.svelte | 67 ++++++++++++++++++++++-------
 2 files changed, 53 insertions(+), 24 deletions(-)

diff --git a/ui/src/lib/components/Modal.svelte b/ui/src/lib/components/Modal.svelte
index 8851ed2..f6a9244 100644
--- a/ui/src/lib/components/Modal.svelte
+++ b/ui/src/lib/components/Modal.svelte
@@ -5,15 +5,7 @@
     }
 
 	let { open, closeModal}: ComponentProps = $props();
-    // import Blob from '$lib/components/Blob.svelte';
-    // import modalCorner from '$lib/images/modal-corner.svg';
-    // let dialog = $state();
-    // import { createEventDispatcher } from 'svelte';
-    // const dispatch = createEventDispatcher();
-    // function closeModal() {
-    //     console.log('close modal called');
-    //     dispatch('modalClose', { message: 'Modal Closed' });
-    // }
+
 </script>
 <style>
     .modal {
diff --git a/ui/src/routes/business/+page.svelte b/ui/src/routes/business/+page.svelte
index 9870712..a3c9639 100644
--- a/ui/src/routes/business/+page.svelte
+++ b/ui/src/routes/business/+page.svelte
@@ -251,6 +251,58 @@
 </script>
 
 <section class="business">
+    <Modal open="{showModal === 'chive-charities'}" closeModal={closeModal}>
+        <div slot="image">
+            <Blob type="5">
+              /  <img style="width: 100%;" src="/content/business-chive-charities.jpg" alt="A screenshot of the Chive Charities Website" />
+            </Blob>
+        </div>
+        <h2 slot="heading">Chive Charities</h2>
+        <div slot="content">
+          <p>Description of Chive Charities</p>
+          <p>The Wetfish Communtiy is a mix of everything from queer hackers, to farmers, researchers, and artists. Some of us work at senior positions at big tech companies, others are just trying to make ends meet. We're spread out across the globe physically, but digitally united.</p>
+          <br/><a class="button full" href="https://chivecharities.org/">Visit Chive Charities</a>
+        </div>
+    </Modal>
+    <Modal open="{showModal === 'churnkey'}" closeModal={closeModal}>
+        <div slot="image">
+            <Blob type="4">
+              /  <img style="width: 100%;" src="/content/business-churnkey.jpg" alt="A screenshot of the Churnkey Website" />
+            </Blob>
+        </div>
+        <h2 slot="heading">Churnkey</h2>
+        <div slot="content">
+          <p>Churnkey.co</p>
+          <p>The Wetfish Communtiy is a mix of everything from queer hackers, to farmers, researchers, and artists. Some of us work at senior positions at big tech companies, others are just trying to make ends meet. We're spread out across the globe physically, but digitally united.</p>
+          <br/><a class="button full" href="https://churnkey.co/">Visit Churnkey</a>
+        </div>
+    </Modal>
+    <Modal open="{showModal === 'coyote'}" closeModal={closeModal}>
+        <div slot="image">
+            <Blob type="3">
+              /  <img style="width: 100%;" src="/content/business-coyote.jpg" alt="A screenshot of the Coyote.space Website" />
+            </Blob>
+        </div>
+        <h2 slot="heading">Coyote Space</h2>
+        <div slot="content">
+          <p>Coyote.space</p>
+          <p>The Wetfish Communtiy is a mix of everything from queer hackers, to farmers, researchers, and artists. Some of us work at senior positions at big tech companies, others are just trying to make ends meet. We're spread out across the globe physically, but digitally united.</p>
+          <br/><a class="button full" href="https://coyote.space/">Visit Coyote Space</a>
+        </div>
+    </Modal>
+    <Modal open="{showModal === 'wavve'}" closeModal={closeModal}>
+        <div slot="image">
+            <Blob type="7">
+              /  <img style="width: 100%;" src="/content/business-wavve.jpg" alt="A screenshot of the Wavve.co Website" />
+            </Blob>
+        </div>
+        <h2 slot="heading">Wavve</h2>
+        <div slot="content">
+          <p>wavve.co</p>
+          <p>The Wetfish Communtiy is a mix of everything from queer hackers, to farmers, researchers, and artists. Some of us work at senior positions at big tech companies, others are just trying to make ends meet. We're spread out across the globe physically, but digitally united.</p>
+          <br/><a class="button full" href="https://wavve.co/">Visit Wavve</a>
+        </div>
+    </Modal>
     <div class="content-background">
         <div class="header"></div>
         <div class="gradient"></div>
@@ -357,21 +409,6 @@
                         <div class="button wide dark">Chive Charities</div>
                     </div>
                 </a>
-                { showModal }
-                <Modal open="{showModal === 'chive-charities'}" closeModal={closeModal}>
-                    <div slot="image">
-                        <Blob type="5"  >
-                          /  <img style="width: 100%;" src="/content/business-chive-charities.jpg" alt="A screenshot of the Chive Charities Website" />
-                        </Blob>
-                    </div>
-                    <h2 slot="heading">Chive Charities</h2>
-                    <div slot="content">
-                      <p>Description of Chive Charities</p>
-                      <p>The Wetfish Communtiy is a mix of everything from queer hackers, to farmers, researchers, and artists. Some of us work at senior positions at big tech companies, others are just trying to make ends meet. We're spread out across the globe physically, but digitally united.</p>
-                      <br/><a class="button full" href="https://chivecharities.org/">Visit Chive Charities</a>
-                    </div>
-                </Modal>
-
                 <a href="https://churnkey.co/">
                     <div class="project">
                         <Blob type="4">

From a6ea0120575e91d4f902bf5cc9eff07a8f47bedc Mon Sep 17 00:00:00 2001
From: "kristenwardphl@gmail.com" <kristenwardphl@gmail.com>
Date: Sun, 13 Jul 2025 13:52:39 -0400
Subject: [PATCH 6/8] 13: adjust padding on blobs, close modal via bg click,
 add open function

---
 ui/src/lib/components/Modal.svelte  | 15 ++++++++++++---
 ui/src/routes/business/+page.svelte | 16 ++++++++++------
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/ui/src/lib/components/Modal.svelte b/ui/src/lib/components/Modal.svelte
index f6a9244..eca7b8b 100644
--- a/ui/src/lib/components/Modal.svelte
+++ b/ui/src/lib/components/Modal.svelte
@@ -5,7 +5,6 @@
     }
 
 	let { open, closeModal}: ComponentProps = $props();
-
 </script>
 <style>
     .modal {
@@ -67,7 +66,17 @@
     }
     .modal-corner-image {
         position: relative;
-        padding: 20px 15px 0;
+        padding: 8px 15px 0;
+    }
+    @media screen and (min-width: 1024px) {
+        .modal-corner-image {
+            padding: 12px 30px 0 20px;
+        }
+    }
+    @media screen and (min-width: 1320px) {
+        .modal-corner-image {
+            padding: 12px 38px 0 20px;
+        }
     }
     .modal-corner-image img {
         width: 80%;
@@ -120,5 +129,5 @@
             </button>
         </div>
     </div>
-    <div class="modal-backdrop"></div>
+    <div class="modal-backdrop" on:click={closeModal}></div>
 {/if}
\ No newline at end of file
diff --git a/ui/src/routes/business/+page.svelte b/ui/src/routes/business/+page.svelte
index a3c9639..bc43766 100644
--- a/ui/src/routes/business/+page.svelte
+++ b/ui/src/routes/business/+page.svelte
@@ -248,6 +248,10 @@
         console.log('close modal');
         showModal = '';
     }
+    function openModal(event, modal = '') {
+        event.preventDefault();
+        showModal = modal;
+    }
 </script>
 
 <section class="business">
@@ -267,7 +271,7 @@
     <Modal open="{showModal === 'churnkey'}" closeModal={closeModal}>
         <div slot="image">
             <Blob type="4">
-              /  <img style="width: 100%;" src="/content/business-churnkey.jpg" alt="A screenshot of the Churnkey Website" />
+              /  <img style="width: 100%;" src="/content/business-churnkey.png" alt="A screenshot of the Churnkey Website" />
             </Blob>
         </div>
         <h2 slot="heading">Churnkey</h2>
@@ -293,7 +297,7 @@
     <Modal open="{showModal === 'wavve'}" closeModal={closeModal}>
         <div slot="image">
             <Blob type="7">
-              /  <img style="width: 100%;" src="/content/business-wavve.jpg" alt="A screenshot of the Wavve.co Website" />
+              /  <img style="width: 100%;" src="/content/business-wavve.png" alt="A screenshot of the Wavve.co Website" />
             </Blob>
         </div>
         <h2 slot="heading">Wavve</h2>
@@ -401,7 +405,7 @@
             </div>
 
             <div class="projects">
-                <a data-href="https://chivecharities.org/" on:click={() => (showModal = 'chive-charities')}>
+                <a href="https://chivecharities.org/" on:click={(event) => openModal(event, 'chive-charities')}>
                     <div class="project">
                         <Blob type="5">
                             <img src="/content/business-chive-charities.jpg" alt="A screenshot of the Chive Charities Website" />
@@ -409,7 +413,7 @@
                         <div class="button wide dark">Chive Charities</div>
                     </div>
                 </a>
-                <a href="https://churnkey.co/">
+                <a href="https://churnkey.co/" on:click={(event) => openModal(event, 'churnkey')}>
                     <div class="project">
                         <Blob type="4">
                             <img src="/content/business-churnkey.png" alt="A screenshot of the ChurnKey.co Website" />
@@ -419,7 +423,7 @@
                     </div>
                 </a>
 
-                <a href="https://coyote.space/">
+                <a href="https://coyote.space/" on:click={(event) => openModal(event, 'coyote')}>
                     <div class="project">
                         <Blob type="3">
                             <img src="/content/business-coyote.jpg" alt="A screenshot of the Coyote Space Website" />
@@ -428,7 +432,7 @@
                     </div>
                 </a>
 
-                <a href="https://wavve.co/">
+                <a href="https://wavve.co/" on:click={(event) => openModal(event, 'wavve')}>
                     <div class="project">
                         <Blob type="7">
                             <img src="/content/business-wavve.png" alt="A screenshot of the Wavve.co Website" />

From 3c1c8a98d127d67862b7b515bf2a92e95a1464db Mon Sep 17 00:00:00 2001
From: "kristenwardphl@gmail.com" <kristenwardphl@gmail.com>
Date: Sun, 13 Jul 2025 16:54:15 -0400
Subject: [PATCH 7/8] 13: disable background scroll, fix typos

---
 ui/src/lib/css/global.scss          |  6 ++++++
 ui/src/routes/business/+page.svelte | 19 +++++++++++--------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/ui/src/lib/css/global.scss b/ui/src/lib/css/global.scss
index c1bad32..806a642 100644
--- a/ui/src/lib/css/global.scss
+++ b/ui/src/lib/css/global.scss
@@ -5,6 +5,12 @@ html, body {
     color: #fff;
 }
 
+body.modal-open {
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+}
+
 @font-face {
     font-family: 'clash';
     src: url('$lib/fonts/ClashDisplay-Semibold.woff') format('woff');
diff --git a/ui/src/routes/business/+page.svelte b/ui/src/routes/business/+page.svelte
index bc43766..b2fa111 100644
--- a/ui/src/routes/business/+page.svelte
+++ b/ui/src/routes/business/+page.svelte
@@ -247,10 +247,13 @@
     function closeModal() {
         console.log('close modal');
         showModal = '';
+        document.body.classList.remove('modal-open');
+
     }
     function openModal(event, modal = '') {
         event.preventDefault();
         showModal = modal;
+        document.body.classList.add('modal-open');
     }
 </script>
 
@@ -258,52 +261,52 @@
     <Modal open="{showModal === 'chive-charities'}" closeModal={closeModal}>
         <div slot="image">
             <Blob type="5">
-              /  <img style="width: 100%;" src="/content/business-chive-charities.jpg" alt="A screenshot of the Chive Charities Website" />
+              <img style="width: 100%;" src="/content/business-chive-charities.jpg" alt="A screenshot of the Chive Charities Website" />
             </Blob>
         </div>
         <h2 slot="heading">Chive Charities</h2>
         <div slot="content">
           <p>Description of Chive Charities</p>
-          <p>The Wetfish Communtiy is a mix of everything from queer hackers, to farmers, researchers, and artists. Some of us work at senior positions at big tech companies, others are just trying to make ends meet. We're spread out across the globe physically, but digitally united.</p>
+          <p>The Wetfish Community is a mix of everything from queer hackers, to farmers, researchers, and artists. Some of us work at senior positions at big tech companies, others are just trying to make ends meet. We're spread out across the globe physically, but digitally united.</p>
           <br/><a class="button full" href="https://chivecharities.org/">Visit Chive Charities</a>
         </div>
     </Modal>
     <Modal open="{showModal === 'churnkey'}" closeModal={closeModal}>
         <div slot="image">
             <Blob type="4">
-              /  <img style="width: 100%;" src="/content/business-churnkey.png" alt="A screenshot of the Churnkey Website" />
+              <img style="width: 100%;" src="/content/business-churnkey.png" alt="A screenshot of the Churnkey Website" />
             </Blob>
         </div>
         <h2 slot="heading">Churnkey</h2>
         <div slot="content">
           <p>Churnkey.co</p>
-          <p>The Wetfish Communtiy is a mix of everything from queer hackers, to farmers, researchers, and artists. Some of us work at senior positions at big tech companies, others are just trying to make ends meet. We're spread out across the globe physically, but digitally united.</p>
+          <p>The Wetfish Community is a mix of everything from queer hackers, to farmers, researchers, and artists. Some of us work at senior positions at big tech companies, others are just trying to make ends meet. We're spread out across the globe physically, but digitally united.</p>
           <br/><a class="button full" href="https://churnkey.co/">Visit Churnkey</a>
         </div>
     </Modal>
     <Modal open="{showModal === 'coyote'}" closeModal={closeModal}>
         <div slot="image">
             <Blob type="3">
-              /  <img style="width: 100%;" src="/content/business-coyote.jpg" alt="A screenshot of the Coyote.space Website" />
+              <img style="width: 100%;" src="/content/business-coyote.jpg" alt="A screenshot of the Coyote.space Website" />
             </Blob>
         </div>
         <h2 slot="heading">Coyote Space</h2>
         <div slot="content">
           <p>Coyote.space</p>
-          <p>The Wetfish Communtiy is a mix of everything from queer hackers, to farmers, researchers, and artists. Some of us work at senior positions at big tech companies, others are just trying to make ends meet. We're spread out across the globe physically, but digitally united.</p>
+          <p>The Wetfish Community is a mix of everything from queer hackers, to farmers, researchers, and artists. Some of us work at senior positions at big tech companies, others are just trying to make ends meet. We're spread out across the globe physically, but digitally united.</p>
           <br/><a class="button full" href="https://coyote.space/">Visit Coyote Space</a>
         </div>
     </Modal>
     <Modal open="{showModal === 'wavve'}" closeModal={closeModal}>
         <div slot="image">
             <Blob type="7">
-              /  <img style="width: 100%;" src="/content/business-wavve.png" alt="A screenshot of the Wavve.co Website" />
+              <img style="width: 100%;" src="/content/business-wavve.png" alt="A screenshot of the Wavve.co Website" />
             </Blob>
         </div>
         <h2 slot="heading">Wavve</h2>
         <div slot="content">
           <p>wavve.co</p>
-          <p>The Wetfish Communtiy is a mix of everything from queer hackers, to farmers, researchers, and artists. Some of us work at senior positions at big tech companies, others are just trying to make ends meet. We're spread out across the globe physically, but digitally united.</p>
+          <p>The Wetfish Community is a mix of everything from queer hackers, to farmers, researchers, and artists. Some of us work at senior positions at big tech companies, others are just trying to make ends meet. We're spread out across the globe physically, but digitally united.</p>
           <br/><a class="button full" href="https://wavve.co/">Visit Wavve</a>
         </div>
     </Modal>

From 18c59d145b84a9ecf05769fd99b8557199c846c5 Mon Sep 17 00:00:00 2001
From: "kristenwardphl@gmail.com" <kristenwardphl@gmail.com>
Date: Tue, 15 Jul 2025 17:42:03 -0400
Subject: [PATCH 8/8] 13: remove hard coded blob background (coming soon)

---
 ui/src/lib/components/Modal.svelte | 14 --------------
 ui/src/lib/images/modal-corner.svg | 24 ------------------------
 2 files changed, 38 deletions(-)
 delete mode 100644 ui/src/lib/images/modal-corner.svg

diff --git a/ui/src/lib/components/Modal.svelte b/ui/src/lib/components/Modal.svelte
index eca7b8b..1534724 100644
--- a/ui/src/lib/components/Modal.svelte
+++ b/ui/src/lib/components/Modal.svelte
@@ -53,9 +53,6 @@
         height: 100%;
         left: -25%;
         top: -5rem;
-        background-image: url('$lib/images/modal-corner.svg');
-        background-size: 100% auto;
-        background-repeat: no-repeat;
         min-width: 160px;
         max-width: 360px;
     }
@@ -66,17 +63,6 @@
     }
     .modal-corner-image {
         position: relative;
-        padding: 8px 15px 0;
-    }
-    @media screen and (min-width: 1024px) {
-        .modal-corner-image {
-            padding: 12px 30px 0 20px;
-        }
-    }
-    @media screen and (min-width: 1320px) {
-        .modal-corner-image {
-            padding: 12px 38px 0 20px;
-        }
     }
     .modal-corner-image img {
         width: 80%;
diff --git a/ui/src/lib/images/modal-corner.svg b/ui/src/lib/images/modal-corner.svg
deleted file mode 100644
index 855d0eb..0000000
--- a/ui/src/lib/images/modal-corner.svg
+++ /dev/null
@@ -1,24 +0,0 @@
-<svg width="447" height="347" viewBox="0 0 447 347" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<path opacity="0.75" d="M50.327 127.604C50.327 127.604 130.334 -13.5852 297.316 24.884C438.532 57.4173 414.474 257.578 292.228 249.26C208.473 243.566 178.094 271.711 137.163 307.098C72.2377 363.228 -48.611 298.187 50.327 127.598V127.604Z" fill="url(#paint0_linear_1006_2)"/>
-<path opacity="0.75" d="M78.7105 111.332C46.953 150.641 33.9361 208.275 43.2493 258.476C54.3667 318.377 126.801 338.122 178.589 292.659C230.376 247.197 256.582 250.4 313.363 254.884C364.388 258.909 401.965 242.076 416.316 211.982C430.667 181.888 414.276 141.757 368.27 145.82C329.588 149.234 297.138 129.388 284.038 90.9696C271.593 54.4811 227.321 46.4943 194.255 50.3412C161.188 54.1818 113.187 68.6651 78.7168 111.332H78.7105Z" fill="url(#paint1_linear_1006_2)"/>
-<path opacity="0.75" d="M358.803 248.671C389.434 210.749 401.987 155.152 393.005 106.732C382.284 48.9527 312.424 29.9029 262.473 73.7581C212.523 117.613 187.249 114.524 132.486 110.198C83.271 106.309 47.0305 122.554 33.1903 151.578C19.3501 180.61 35.1598 219.325 79.5313 215.406C116.845 212.109 148.135 231.259 160.772 268.321C172.773 303.515 215.473 311.223 247.369 307.511C279.264 303.807 325.559 289.837 358.803 248.671Z" fill="url(#pattern0_1006_2)"/>
-<path opacity="0.5" d="M126.309 277.554C146.001 272.894 158.197 253.112 153.55 233.368C148.902 213.625 129.17 201.398 109.477 206.058C89.7844 210.717 77.5882 230.5 82.2361 250.243C86.884 269.986 106.616 282.214 126.309 277.554Z" fill="url(#paint2_linear_1006_2)"/>
-<defs>
-<pattern id="pattern0_1006_2" patternContentUnits="objectBoundingBox" width="1" height="1">
-<use xlink:href="#image0_1006_2" transform="matrix(0.00138889 0 0 0.0019733 0 -0.175855)"/>
-</pattern>
-<linearGradient id="paint0_linear_1006_2" x1="12.8266" y1="172.519" x2="393.872" y2="172.519" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FA6FF5"/>
-<stop offset="1" stop-color="#940E8C"/>
-</linearGradient>
-<linearGradient id="paint1_linear_1006_2" x1="421.353" y1="183.538" x2="40.308" y2="183.538" gradientUnits="userSpaceOnUse">
-<stop stop-color="#260B62"/>
-<stop offset="1" stop-color="#531499"/>
-</linearGradient>
-<linearGradient id="paint2_linear_1006_2" x1="91.9908" y1="267.776" x2="143.943" y2="215.963" gradientUnits="userSpaceOnUse">
-<stop stop-color="#940E8C"/>
-<stop offset="1" stop-color="#FA6FF5"/>
-</linearGradient>
-<image/>
-</defs>
-</svg>