Moved cards out into seperate component to enable re-usability

src/Card.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+
+    const dispatch = createEventDispatcher();
+
+    function onClick() {
+        dispatch('click');
+    }
+</script>
+
+<style>
+    .card {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        flex: 2 1 20%;
+        min-width: 10em;
+        padding: .5em 2.5em 2em 2.5em;
+        background: var(--bg-grad);
+        border-radius: .5em;
+        scroll-snap-align: start;
+        transition: all 0.2s;
+    }
+    .card:hover {
+        box-shadow: .5em .5em .5em var(--cyan);
+    }
+
+    .card .card-header :global(div) {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 0em;
+    }
+
+    .card .card-content :global(div) {
+        margin: 2em 0em;
+        max-width: 85%;
+    }
+
+    .card .card-footer :global(div){
+        margin-bottom: 1em;
+        display: flex;
+        gap: 1.5em;
+        justify-content: space-between;
+    }
+</style>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div class="card" on:click={onClick}>
+    <div>
+        <div class="card-header">
+            <slot name="header"></slot>
+        </div>
+        <hr />
+        <div class="card-content">
+            <slot name="content"></slot>
+        </div>
+    </div>
+
+    <div class="card-footer">
+        <slot name="footer"></slot>
+    </div>
+</div>

src/app.html

@@ -37,6 +37,7 @@
 			hr {
 				border: .2em solid var(--bg-grad);
   				border-radius: 5em;
+				width: 100%;
 			}
 			
 			*::-webkit-scrollbar,

src/main.svelte

@@ -3,6 +3,7 @@
 	import { Toast, ToastType } from "$lib/toast";
     import { addToast } from "$lib/store";
 
+    import Card from './Card.svelte';
     import Modal from './Modal.svelte';
 
 	let showModal: boolean = false;
@@ -58,25 +59,27 @@
         font-size: 2em;
     }
 
-    .card-header h2 {
-        font-size: 1.5em;
-    }
-
     .card-header h3 {
         font-size: 1.5em;
     }
 
-    .card-header .logo {
+    .card-footer {
+        margin-bottom: 1em;
+        display: flex;
+        gap: 1.5em;
+        justify-content: space-between;
+    }
+
+    .logo {
         color: var(--fg);
         font-size: 3em;
     }
 
-
     /* Skills Cards CSS */
     .skills-container {
         max-width: 90%;
         padding: 0em 2em;
-        margin: em auto;
+        margin: auto;
     }
 
     .cards {
@@ -84,40 +87,11 @@
         flex-wrap: wrap;
         flex-direction: row;
         gap: 3em 3em;
-        justify-content: center;
         padding: 3em 1em 2em 0em;
         list-style: none;
         transition: all 0.2s;
     }
 
-    .card {
-        display: flex;
-        flex-direction: column;
-        flex-wrap: wrap;
-        flex: 2 1 20%;
-        min-width: 10em;
-        padding: .5em 2.5em 2em 2.5em;
-        background: var(--bg-grad);
-        border-radius: .5em;
-        scroll-snap-align: start;
-        transition: all 0.2s;
-    }
-    .card:hover {
-        box-shadow: .5em .5em .5em var(--cyan);
-    }
-
-    .card .card-content {
-        margin: 2em 0em;
-        max-width: 85%;
-    }
-
-    .card-footer {
-        display: flex;
-        gap: 1.5em;
-        justify-content: space-between;
-        margin-top: auto;
-    }
-
 </style>
 
 {#await getJson('/json/me.json')}
@@ -140,28 +114,23 @@
     </div>
 
     <div class="skills-container">
-        <ul class="cards">
+        <div class="cards">
             {#each info.skills as skill}
-                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                <Card on:click={() => {showModal = true; activeModal = skill}}>
-                <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+                    <div slot="header">
-                <li on:click={() => {showModal = true; activeModal = skill}} class="card">
+                        <h2>{skill.skill}</h2>
-                    <div>
+                        <i class="{skill.logo} logo"></i>
-                        <div class="card-header">
-                            <h2>{skill.skill}</h2>
-                            <i class="{skill.logo} logo"></i>
-                        </div>
-                        <hr />
-                        <div class="card-content">
-                            <p class="not-required">{skill.about}</p>
-                        </div>
                     </div>
-                    <div class="card-footer">
+                    <div slot="content">
+                        <p class="not-required">{skill.about}</p>
+                    </div>
+                    <div slot="footer">
                         <a href="/contact">View More</a>
                         <a href="/repos">Repos</a>
                     </div>
-                </li>
+                </Card>
             {/each}
-        </ul>
+        </div>
     </div>
 
     <div style="display: none;">{addToast(new Toast("Click on a skill to open a prompt", ToastType.Info, true, 4000))}</div>

src/routes/contact/+page.svelte

@@ -1 +1,12 @@
-<h1>Contact</h1>
+<script lang="ts">
+</script>
+
+
+
+<h1>Contact</h1>
+
+<div class="main-card">
+    <form>
+        test
+    </form>
+</div>