src/lib/components/Cards/SlidingCard.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+
+    const dispatch = createEventDispatcher();
+
+    function onClick() {
+        dispatch('click');
+    }
+</script>
+
+<style>
+    .sliding-card {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        flex: 2 1 15em;
+        padding: 0.5em 2.5em 2em 2.5em;
+        background: var(--bg-secondary);
+        border-radius: 0.5em;
+        scroll-snap-align: start;
+        transition: all 0.3s ease-in-out;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .sliding-card:hover {
+        box-shadow: .5em .5em .5em var(--hover);
+    }
+
+    .sliding-card .sliding-card-header :global(div) {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 0em;
+    }
+
+    .content-wrapper {
+        position: relative;
+        width: 100%;
+        overflow: hidden; /* Ensure smooth sliding */
+    }
+
+    .sliding-card-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        max-width: 100%;
+        flex-grow: 1;
+        z-index: 1; /* Keep it below the sliding content */
+    }
+
+    .sliding-content {
+        position: absolute; /* Now it sits on top */
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%; /* Cover entire content */
+        background: var(--bg-secondary);
+        transform: translateY(100%); /* Start hidden */
+        transition: transform 0.3s ease-in-out;
+        z-index: 2; /* Now above main content */
+    }
+
+    .sliding-card:hover .sliding-content {
+        transform: translateY(0);
+    }
+
+    .sliding-card .sliding-card-footer :global(div){
+        margin-bottom: 1em;
+        display: flex;
+        gap: 1em;
+        max-width: 100%;
+        justify-content: space-between;
+    }
+</style>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div class="sliding-card" on:click={onClick}>
+    <div class="sliding-card-header">
+        <slot name="header"></slot>
+    </div>
+    <hr />
+    
+    <!-- Wrapper to stack sliding-card-content and sliding-content -->
+    <div class="content-wrapper">
+        <div class="sliding-card-content">
+            <slot name="content"></slot>
+        </div>
+        <div class="sliding-content">
+            <slot name="sliding-content"></slot>
+        </div>
+    </div>
+
+    <hr class="not-required"/>
+    <div class="sliding-card-footer">
+        <slot name="footer"></slot>
+    </div>
+</div>

src/lib/index.ts

@@ -14,7 +14,8 @@ import InfoIcon from '$lib/components/Toasts/InfoIcon.svelte';
 import SuccessIcon from '$lib/components/Toasts/SuccessIcon.svelte';
 import ErrorIcon from '$lib/components/Toasts/ErrorIcon.svelte';
 
-import Card from '$lib/components/Card.svelte';
+import Card from '$lib/components/Cards/Card.svelte';
+import SlidingCard from '$lib/components/Cards/SlidingCard.svelte';
 import Modal from '$lib/components/Modal.svelte';
 
 
@@ -35,5 +36,6 @@ export {
     ErrorIcon,
 
     Card,
+    SlidingCard,
     Modal
 };

src/routes/contact/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Card from '$lib/components/Card.svelte';
+    import Card from '$lib/components/Cards/Card.svelte';
     import { Toast, ToastType } from "$lib/toast";
     import { addToast } from "$lib/store";
 

src/skills.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     export let skills: any;
 
-    import Card from '$lib/components/Card.svelte';
+    import Card from '$lib/components/Cards/Card.svelte';
     import Modal from '$lib/components/Modal.svelte';
 
     let showModal: boolean = false;