Project Modals

ui/src/lib/components/Modal.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+    interface ComponentProps {
+        open: Boolean,
+        closeModal: () => void;
+    }
+
+	let { open, closeModal}: ComponentProps = $props();
+</script>
+<style>
+    .modal {
+        position:fixed;
+        top: 0%;
+        left: 0%;
+        padding-top: 25vh;
+        width: 100%;
+        z-index: 999;
+        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;
+        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;
+        min-width: 160px;
+        max-width: 360px;
+    }
+    @media screen and (min-width: 1024px) {
+        .modal-corner {
+            top: -7.5rem;
+        }
+    }
+    .modal-corner-image {
+        position: relative;
+    }
+    .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: 998;
+        width: 100vw;
+        height: 100vh;
+        /*background-color: rgba(44, 13, 93, 0.8);*/
+        backdrop-filter: blur(10px);/*Apply blur effect*/
+    }
+    .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" on:click={closeModal}></div>
+{/if}

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');

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,9 +242,74 @@
         {id: 'bizdev', title: 'Business Automation'},
         {id: 'design', title: 'Design & Branding'},
     ];
+
+    let showModal = '';
+    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>
 
 <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 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" />
+            </Blob>
+        </div>
+        <h2 slot="heading">Churnkey</h2>
+        <div slot="content">
+          <p>Churnkey.co</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" />
+            </Blob>
+        </div>
+        <h2 slot="heading">Coyote Space</h2>
+        <div slot="content">
+          <p>Coyote.space</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" />
+            </Blob>
+        </div>
+        <h2 slot="heading">Wavve</h2>
+        <div slot="content">
+          <p>wavve.co</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>
     <div class="content-background">
         <div class="header"></div>
         <div class="gradient"></div>
@@ -342,25 +408,25 @@
             </div>
 
             <div class="projects">
-                <a href="https://chivecharities.org/">
+                <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" />
                         </Blob>
                         <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" />
                         </Blob>
                         <div class="button wide dark">Churnkey</div>
+
                     </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" />
@@ -369,7 +435,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" />