Created base template for contact and repo pages.

Fixed styling issues on toasts on small screens.

src/Modal.svelte

@@ -36,7 +36,7 @@
         box-shadow: .5em .5em .5em var(--red);
 	}
 	dialog::backdrop {
-		background: rgba(0, 0, 0, 0.3);
+		background: rgba(0, 0, 0, 0.7);
 	}
 	dialog > div {
 		padding: 1em;
@@ -53,7 +53,7 @@
 		}
 	}
 	dialog[open]::backdrop {
-		animation: fade 0.5s ease-out;
+		animation: fade 0.3s ease-out;
 	}
 	@keyframes fade {
 		from {

src/Toasts/Toast.svelte

@@ -41,6 +41,7 @@
     align-items: center;
     margin: 0 auto 0.5rem auto;
     width: 20rem;
+    max-width: 80%;
   }
   .error {
     background: IndianRed;

src/main.svelte

@@ -163,6 +163,9 @@
             {/each}
         </ul>
     </div>
+
+    <div style="display: none;">{addToast(new Toast("Click on a skill to open a prompt", ToastType.Info, true, 4000))}</div>
+    <div style="display: none;">{addToast(new Toast("Welcome!", ToastType.Success, true, 3000))}</div>
 {:catch}
     <div class="card">
         <div class="card-header">
@@ -172,6 +175,8 @@
     <div style="display: none;">{addToast(new Toast("Unable to load me.json", ToastType.Error, true, 3000))}</div>
 {/await}
 
+
+<!--Modal to be displayed on click-->
 {#if activeModal != null}
     <Modal bind:showModal>
         <h2 slot="header" class="card-header">

src/routes/contact/+page.svelte

@@ -0,0 +1 @@
+<h1>Contact</h1>

src/routes/repos/+page.svelte

@@ -0,0 +1,3 @@
+<h1>Repos</h1>
+<p>Stay tunded! This is still in development.</p>
+<p>Come back later to find out what projects I'm currently working on!</p>