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

src/Modal.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	export let showModal: boolean;
+
+	let dialog: HTMLDialogElement;
+
+	$: if (dialog && showModal) dialog.showModal();
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
+<dialog
+	bind:this={dialog}
+	on:close={() => (showModal = false)}
+	on:click|self={() => dialog.close()}
+>
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div on:click|stopPropagation>
+		<slot name="header" />
+		<hr />
+		<slot />
+		<hr />
+		<!-- svelte-ignore a11y-autofocus -->
+		<button autofocus on:click={() => dialog.close()}>Close</button>
+	</div>
+</dialog>
+
+<style>
+	dialog {
+		max-width: 70%;
+		border-radius: 0.2em;
+		border: none;
+		padding: 0em 2em 2em 2em;
+        border-left: 2em;
+        border-right: 2em;
+        background: var(--bg);
+        color: var(--fg);
+        box-shadow: .5em .5em .5em var(--red);
+	}
+	dialog::backdrop {
+		background: rgba(0, 0, 0, 0.3);
+	}
+	dialog > div {
+		padding: 1em;
+	}
+	dialog[open] {
+		animation: zoom 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+	}
+	@keyframes zoom {
+		from {
+			transform: scale(0.95);
+		}
+		to {
+			transform: scale(1);
+		}
+	}
+	dialog[open]::backdrop {
+		animation: fade 0.5s ease-out;
+	}
+	@keyframes fade {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+	button {
+		display: block;
+	}
+</style>

src/app.html

@@ -30,6 +30,14 @@
 				margin: 2rem;
 			}
 
+			h1, h2, h3 {
+				color: var(--red);
+			}
+
+			hr {
+				border: .2em solid var(--bg-grad);
+  				border-radius: 5em;
+			}
 			
 			*::-webkit-scrollbar,
 			*::-webkit-scrollbar-thumb {

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}