Refined modal sizing. Added option to footer to enable/disable boot animation

src/App.svelte

@@ -6,7 +6,6 @@
   import NameSplash from "./components/NameSplash.svelte";
   import About from "./components/About.svelte";
   import Projects from "./components/Projects.svelte";
-    import Modal from "./utils/Modal.svelte";
 
   let bootDone = false;
   let mainContent;

src/components/Footer.svelte

@@ -1,3 +1,26 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+
+    let showAnimationCheck;
+
+    function updateBootPrefrence(){
+        console.log(showAnimationCheck)
+        if(!showAnimationCheck){
+            localStorage.clear();
+        } else {
+            localStorage.setItem("skip_boot", "");
+        }
+    }
+
+    onMount(()=>{
+        if ("skip_boot" in localStorage) {
+            showAnimationCheck = false;
+        } else {
+            showAnimationCheck = true;
+        }
+    })
+</script>
+
 <footer
     class="w-5/6 xl:lg:w-4/5 mx-auto text-neutral-50 drop-shadow-screen font-mono font-light m-2 p-4"
 >
@@ -6,6 +29,8 @@
         <a href="https://github.com/thomaspcole">Github</a>
         <a href="https://git.thomaspcole.com/thomascole">Gitea</a>
         <a href="https://www.linkedin.com/in/thomaspcole/">Linkedin</a>
+        <span>'Boot' animation:</span>
+        <input type="checkbox" bind:checked={showAnimationCheck} on:click={updateBootPrefrence}>
     </div>
     <br />
     <p class="text-sm text-center font-sans">&copy; 2023 Thomas Cole</p>

src/components/Projects.svelte

@@ -9,6 +9,36 @@
     class="w-5/6 lg:xl:w-4/5 mx-auto font-mono text-neutral-50 rounded-xl drop-shadow-screen p-4 border-2 border-solid border-green-700"
 >
     <p class="font-bold text-2xl pb-6 ">&gt; Projects and Demos</p>
-    <ProjectCard title="Pedal-pi" subtitle="A custom effects processor using MODEP" image="https://images.unsplash.com/photo-1511203438670-49f8ea8441c6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" link="#" callback={undefined}/>
-    <LocalDemo title="Quicksort Demo" subtitle="A simple visualization of the quicksort algorithm using p5.js" modalComponent="" image="https://images.unsplash.com/photo-1669399213378-2853e748f217?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80"/>
+    <ProjectCard
+        title="Pedal-pi"
+        subtitle="A custom effects processor using MODEP"
+        image="https://images.unsplash.com/photo-1511203438670-49f8ea8441c6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
+        link="#"
+        callback={undefined}
+    />
+    <LocalDemo
+        title="Quicksort Demo"
+        subtitle="A simple visualization of the quicksort algorithm using p5.js"
+        image="https://images.unsplash.com/photo-1669399213378-2853e748f217?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80"
+    >
+        <p class="text-xl underline">Quicksort</p>
+        <p>
+            This demo was originally written as part of a job application to
+            work for the IT department at my university. It was the first
+            project I wrote with the aid of the p5.js library. I used this demo
+            as a way to learn how to visualize the quicksort algorithm. I took
+            inspiration from the YouTube video: <a
+                class="underline"
+                href="https://www.youtube.com/watch?v=kPRA0W1kECg"
+                >15 Sorting Algorithms in 6 Minutes</a
+            >. The source code for those interested can be found on my
+            <a
+                class="underline"
+                href="https://github.com/thomaspcole/p5QuicksortVisualization"
+                >Github</a
+            >.
+        </p>
+        <br />
+        <Quicksort />
+    </LocalDemo>
 </section>

src/demos/quicksort.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import P5, { type Sketch } from "p5-svelte";
     import { onMount } from "svelte";
-
+    
     // Demo modified from a very old p5js sketch written in college.
     // The original was part of a the application process to work for the university IT department
     // https://github.com/thomaspcole/p5QuicksortVisualization
@@ -11,14 +11,17 @@
     let valuesToGenerate = 200;
     let frame = 0;
 
-    let parentContainer;
+    let width;
     let sketch:Sketch;
 
     //Added controls for play/pause and stepping frame by frame.
     let playpause = false;
 
     onMount(()=>{
-        const sketchWidth = parentContainer.offsetWidth;
+        if(width < 1000){
+            valuesToGenerate = 75;
+        }
+        const sketchWidth = Math.floor(width*.8);
         const barWidth = (sketchWidth-20)/valuesToGenerate;
         sketch = (p5) => {
             p5.setup = () => {
@@ -31,7 +34,7 @@
                 animArray.push(new arrayFrame(data.toString(), null, null, null));
                 
                 //setup the canvas
-                p5.createCanvas(sketchWidth,400);
+                p5.createCanvas(sketchWidth,valuesToGenerate*2);
                 p5.frameRate(30);
             }
 
@@ -60,7 +63,7 @@
                     if(dataFrame.lowVal == i || dataFrame.highVal == i){
                         p5.fill(0,255,0);
                     }
-                    p5.rect(barWidth*i+10,350, barWidth,-dataFrame.getArray()[i]);
+                    p5.rect(barWidth*i+10,valuesToGenerate*2-10, barWidth,-dataFrame.getArray()[i]);
                 }
             }
         }
@@ -157,7 +160,8 @@
     }
 </script>
 
-<div bind:this={parentContainer} class="w-full">
+<svelte:window bind:innerWidth={width}/>
+<div class="w-fit mx-auto">
     <P5 {sketch}/>
 </div>
 <div class="flex justify-evenly mt-6 mb-4">

src/utils/LocalDemo.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">
     import ProjectCard from "./ProjectCard.svelte";
     import Modal from "./Modal.svelte";
-    import type { SvelteComponent } from "svelte";
-    import Quicksort from "../demos/quicksort.svelte";
 
     export let image:string;
     export let title:string;
     export let subtitle:string;
-    export let modalComponent:string;
     let showModal = false;
 
     function callback(){
@@ -18,6 +15,5 @@
 
 <ProjectCard title={title} subtitle={subtitle} image={image} link={undefined} callback={callback}/>
 <Modal bind:showModal>
-    <!-- <svelte:component this={modalComponent.component}/> -->
-    <Quicksort/>
+    <slot/>
 </Modal>

src/utils/Modal.svelte

@@ -6,38 +6,32 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-autofocus -->
 <dialog
 	bind:this={dialog}
 	on:close={() => (showModal = false)}
 	on:click|self={() => dialog.close()}
-	class="w-4/5"
+	autofocus={false}
+	class="w-full lg:xl:w-5/6 rounded-lg bg-green-700/90 border-2 border-solid border-green-300/50 text-white"
 >
 	<div on:click|stopPropagation>
-		<slot name="header"/>
-		<hr>
 		<slot />
 		<hr />
-		<!-- svelte-ignore a11y-autofocus -->
-		<button autofocus on:click={() => dialog.close()}>close modal</button>
+		<div class="flex">
+			<div class="grow"></div>
+			<button class="pt-4" on:click={() => dialog.close()}>
+				Close
+			</button>
+		</div>
 	</div>
 </dialog>
 
 <style>
-	dialog {
-		max-width: 32em;
-		width: 80%;
-		border-radius: 0.2em;
-		border: none;
-		padding: 0;
-	}
 	dialog::backdrop {
 		background: rgba(0, 0, 0, 0.3);
 	}
-	dialog > div {
-		padding: 1em;
-	}
 	dialog[open] {
-		animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+		animation: zoom 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
 	}
 	@keyframes zoom {
 		from {
@@ -58,7 +52,4 @@
 			opacity: 1;
 		}
 	}
-	button {
-		display: block;
-	}
-</style>
+</style>