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

This commit is contained in:
Thomas Cole 2023-03-24 22:27:32 -04:00
parent bb8c83bb9b
commit ff34fe0a14
6 changed files with 79 additions and 34 deletions

View File

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

View File

@ -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 <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" 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://github.com/thomaspcole">Github</a>
<a href="https://git.thomaspcole.com/thomascole">Gitea</a> <a href="https://git.thomaspcole.com/thomascole">Gitea</a>
<a href="https://www.linkedin.com/in/thomaspcole/">Linkedin</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> </div>
<br /> <br />
<p class="text-sm text-center font-sans">&copy; 2023 Thomas Cole</p> <p class="text-sm text-center font-sans">&copy; 2023 Thomas Cole</p>

View File

@ -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" 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> <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}/> <ProjectCard
<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"/> 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> </section>

View File

@ -11,14 +11,17 @@
let valuesToGenerate = 200; let valuesToGenerate = 200;
let frame = 0; let frame = 0;
let parentContainer; let width;
let sketch:Sketch; let sketch:Sketch;
//Added controls for play/pause and stepping frame by frame. //Added controls for play/pause and stepping frame by frame.
let playpause = false; let playpause = false;
onMount(()=>{ onMount(()=>{
const sketchWidth = parentContainer.offsetWidth; if(width < 1000){
valuesToGenerate = 75;
}
const sketchWidth = Math.floor(width*.8);
const barWidth = (sketchWidth-20)/valuesToGenerate; const barWidth = (sketchWidth-20)/valuesToGenerate;
sketch = (p5) => { sketch = (p5) => {
p5.setup = () => { p5.setup = () => {
@ -31,7 +34,7 @@
animArray.push(new arrayFrame(data.toString(), null, null, null)); animArray.push(new arrayFrame(data.toString(), null, null, null));
//setup the canvas //setup the canvas
p5.createCanvas(sketchWidth,400); p5.createCanvas(sketchWidth,valuesToGenerate*2);
p5.frameRate(30); p5.frameRate(30);
} }
@ -60,7 +63,7 @@
if(dataFrame.lowVal == i || dataFrame.highVal == i){ if(dataFrame.lowVal == i || dataFrame.highVal == i){
p5.fill(0,255,0); 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> </script>
<div bind:this={parentContainer} class="w-full"> <svelte:window bind:innerWidth={width}/>
<div class="w-fit mx-auto">
<P5 {sketch}/> <P5 {sketch}/>
</div> </div>
<div class="flex justify-evenly mt-6 mb-4"> <div class="flex justify-evenly mt-6 mb-4">

View File

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

View File

@ -6,38 +6,32 @@
</script> </script>
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-autofocus -->
<dialog <dialog
bind:this={dialog} bind:this={dialog}
on:close={() => (showModal = false)} on:close={() => (showModal = false)}
on:click|self={() => dialog.close()} 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> <div on:click|stopPropagation>
<slot name="header"/>
<hr>
<slot /> <slot />
<hr /> <hr />
<!-- svelte-ignore a11y-autofocus --> <div class="flex">
<button autofocus on:click={() => dialog.close()}>close modal</button> <div class="grow"></div>
<button class="pt-4" on:click={() => dialog.close()}>
Close
</button>
</div>
</div> </div>
</dialog> </dialog>
<style> <style>
dialog {
max-width: 32em;
width: 80%;
border-radius: 0.2em;
border: none;
padding: 0;
}
dialog::backdrop { dialog::backdrop {
background: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.3);
} }
dialog > div {
padding: 1em;
}
dialog[open] { 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 { @keyframes zoom {
from { from {
@ -58,7 +52,4 @@
opacity: 1; opacity: 1;
} }
} }
button {
display: block;
}
</style> </style>