Added basic <Popup/>.

src/lib/components/hover-card.svelte

@@ -3,9 +3,10 @@
     import "$lib/css/hover-card.css";
 
     import anime from "animejs";
-    import { compile } from "svelte/compiler";
     import SvgIcon from "@jamescoyle/svelte-icon";
     import { mdiEye } from "@mdi/js";
+    import { popupComponent } from "$lib/ts/popup.ts";
+    import HoverCardPopup from "$lib/components/popup/hover-card.svelte";
 
     import text from "$lib/json/hover-card.json";
 
@@ -54,6 +55,13 @@
             easing: "easeInOutQuad",
         });
     }
+
+    function showPopup() {
+        popupComponent.set({
+            component: HoverCardPopup,
+            props: { title: "Hello", description: "This is a custom Popup" },
+        });
+    }
 </script>
 
 <div
@@ -66,6 +74,8 @@
     on:mouseleave={() => {
         animateCard(false);
     }}
+    on:click={showPopup}
+    on:keydown={(e) => e.key === "Enter" && showPopup()} 
 >
     <div class="hover-card">
         <img alt="hover-card" src={picture} />

src/lib/components/popup.svelte

@@ -0,0 +1,26 @@
+<script>
+    import "$lib/css/popup.css";
+    import { popupComponent } from "$lib/ts/popup.ts";
+
+    let component = null;
+
+    popupComponent.subscribe((value) => {
+        component = value;
+    });
+
+    function close() {
+        popupComponent.set(null);
+    }
+</script>
+
+{#if component}
+    <div
+        class="popup"
+        role="button"
+        tabindex="0"
+        on:click={close}
+        on:keydown={(e) => e.key === "Escape" && close()}
+    >
+        <svelte:component this={component.component} {...component.props} />
+    </div>
+{/if}

src/lib/components/popup/hover-card.svelte

@@ -0,0 +1,11 @@
+<script>
+    import "$lib/css/hover-card.css"
+
+    export let title=""
+    export let description=""
+</script>
+
+<div class="hover-card-popup-container">
+    <h1>{title}</h1>
+    <p>{description}</p>
+</div>

src/lib/css/hover-card.css

@@ -112,3 +112,15 @@
     -webkit-line-clamp: 2;
     line-clamp: 2;
 }
+
+/* Pop-up Hover Card */
+
+.hover-card-popup-container {
+    width: calc(100% - 12rem);
+    height: calc(100% - 12rem);
+    margin: 5rem;
+    padding: 1rem;
+    background-image: var(--background-dark);
+    border-radius: 1rem;
+    box-shadow: var(--shadow);
+}

src/lib/css/popup.css

@@ -0,0 +1,15 @@
+:root {
+    --popup-blur: blur(1rem);
+}
+
+.popup {
+    width: 100dvw;
+    height: 100dvh;
+    position: fixed;
+    left: 0;
+    top: 0;
+    background-color: #150f1aa0;
+    z-index: var(--z-index-popup);
+    -webkit-backdrop-filter: var(--popup-blur);
+    backdrop-filter: var(--popup-blur);
+}

src/lib/ts/popup.ts

@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const popupComponent = writable(null);

src/routes/+layout.svelte

@@ -1,14 +1,17 @@
 <script>
-	import { page } from '$app/stores';
-	import '$lib/css/base.css';
-	import '$lib/css/navbar.css';
+	import { page } from "$app/stores";
+	import "$lib/css/base.css";
+	import "$lib/css/navbar.css";
+	import "$lib/css/popup.css";
 
-	import Navbar from '$lib/components/navbar.svelte';
-	import Footer from '$lib/components/footer.svelte';
+	import Navbar from "$lib/components/navbar.svelte";
+	import Footer from "$lib/components/footer.svelte";
+	import Popup from "$lib/components/popup.svelte";
 
 	// $: pageUrl = $page.url.pathname;
 </script>
 
+<Popup />
 <Navbar />
 <div class="base">
 	<slot />