Updated content, created modal and changed skills card to style nicer on smaller screens

src/main.svelte

@@ -2,6 +2,11 @@
     import { getJson } from "$lib/data";
 	import { Toast, ToastType } from "$lib/toast";
     import { addToast } from "$lib/store";
+
+    import Modal from './Modal.svelte';
+
+	let showModal: boolean = false;
+    let activeModal: any = null;
 </script>
 
 <style>
@@ -46,10 +51,19 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        color: var(--red);
-        /*text-decoration: underline 5px solid var(--bg-grad);*/
-        border-bottom: 5px solid var(--bg-grad);
-        margin-bottom: 1em;
+        margin-bottom: 0em;
+    }
+
+    .card-header h1 {
+        font-size: 2em;
+    }
+
+    .card-header h2 {
+        font-size: 1.5em;
+    }
+
+    .card-header h3 {
+        font-size: 1.5em;
     }
 
     .card-header .logo {
@@ -62,7 +76,7 @@
     .skills-container {
         max-width: 90%;
         padding: 0em 2em;
-        margin: 0em auto;
+        margin: em auto;
     }
 
     .cards {
@@ -80,7 +94,8 @@
         display: flex;
         flex-direction: column;
         flex-wrap: wrap;
-        flex: 0 0 20%;
+        flex: 2 1 20%;
+        min-width: 10em;
         padding: .5em 2.5em 2em 2.5em;
         background: var(--bg-grad);
         border-radius: .5em;
@@ -92,12 +107,13 @@
     }
 
     .card .card-content {
-        margin: 1em 0;
+        margin: 2em 0em;
         max-width: 85%;
     }
 
-    .card .card-footer {
+    .card-footer {
         display: flex;
+        gap: 1.5em;
         justify-content: space-between;
         margin-top: auto;
     }
@@ -116,7 +132,7 @@
             <h1>{info.name}</h1>
             <h3 class="not-required">{info.job_title}</h3>
         </div>
-
+        <hr />
         <div class="flex-container">
             <img class="profile not-required" src={info.profile_photo} alt="{info.name}'s Profile Photo">
             <p class="about">{@html info.about}</p>
@@ -126,12 +142,15 @@
     <div class="skills-container">
         <ul class="cards">
             {#each info.skills as skill}
-                <li class="card">
+                <!-- 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>
@@ -151,4 +170,22 @@
         </div>
     </div>
     <div style="display: none;">{addToast(new Toast("Unable to load me.json", ToastType.Error, true, 3000))}</div>
-{/await}
+{/await}
+
+{#if activeModal != null}
+    <Modal bind:showModal>
+        <h2 slot="header" class="card-header">
+            {activeModal.skill}
+            <i class="{activeModal.logo} logo"></i>
+        </h2>
+
+        <p>
+            {activeModal.about}
+        </p>
+
+        <div class="card-footer">
+            <a href="{activeModal.link}">Learn More</a>
+            <a href="/repos">Repos</a>
+        </div>
+    </Modal>
+{/if}