Moved cards out into seperate component to enable re-usability

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 -->
-                <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-                <li on:click={() => {showModal = true; activeModal = skill}} class="card">
-                    <div>
-                        <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>
+                <Card on:click={() => {showModal = true; activeModal = skill}}>
+                    <div slot="header">
+                        <h2>{skill.skill}</h2>
+                        <i class="{skill.logo} logo"></i>
                     </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>