From 37702831c26375006f15074e1e855a58c2b69b45 Mon Sep 17 00:00:00 2001
From: Thomas Cole <thomas.patrick.cole@gmail.com>
Date: Fri, 23 Dec 2022 12:00:46 -0500
Subject: [PATCH] Added custom mdx components. Tweaked layouts. Quicksort
 project example.

---
 src/components/mdx/H1.astro               |   3 +
 src/components/mdx/H2.astro               |   3 +
 src/components/mdx/H3.astro               |   3 +
 src/components/misc/BlogProjectCard.astro |   6 +-
 src/components/nav/Nav.astro              |   4 +-
 src/layouts/InteractiveDemoLayout.astro   |   2 +-
 src/layouts/Layout.astro                  |   2 +-
 src/pages/index.astro                     |   6 +-
 src/pages/projects/demo.mdx               |  13 ---
 src/pages/projects/demo/quicksort.svelte  | 131 +++++++++++++---------
 src/pages/projects/quicksort.mdx          |  24 ++++
 src/pages/resume.astro                    |   4 +-
 12 files changed, 126 insertions(+), 75 deletions(-)
 create mode 100644 src/components/mdx/H1.astro
 create mode 100644 src/components/mdx/H2.astro
 create mode 100644 src/components/mdx/H3.astro
 delete mode 100644 src/pages/projects/demo.mdx
 create mode 100644 src/pages/projects/quicksort.mdx

diff --git a/src/components/mdx/H1.astro b/src/components/mdx/H1.astro
new file mode 100644
index 0000000..f93f262
--- /dev/null
+++ b/src/components/mdx/H1.astro
@@ -0,0 +1,3 @@
+<h1 class="text-5xl font-semibold">
+    <slot/>
+</h1>
\ No newline at end of file
diff --git a/src/components/mdx/H2.astro b/src/components/mdx/H2.astro
new file mode 100644
index 0000000..d53dcc8
--- /dev/null
+++ b/src/components/mdx/H2.astro
@@ -0,0 +1,3 @@
+<h1 class="text-4xl font-semibold">
+    <slot/>
+</h1>
\ No newline at end of file
diff --git a/src/components/mdx/H3.astro b/src/components/mdx/H3.astro
new file mode 100644
index 0000000..100801d
--- /dev/null
+++ b/src/components/mdx/H3.astro
@@ -0,0 +1,3 @@
+<h1 class="text-3xl font-semibold">
+    <slot/>
+</h1>
\ No newline at end of file
diff --git a/src/components/misc/BlogProjectCard.astro b/src/components/misc/BlogProjectCard.astro
index c02596d..fa43717 100644
--- a/src/components/misc/BlogProjectCard.astro
+++ b/src/components/misc/BlogProjectCard.astro
@@ -12,10 +12,10 @@ const { title, subtitle, image, link } = Astro.props;
 
 <div class="rounded-lg hover:shadow-xl transition ease-in-out hover:scale-105">
     <a href={link}>
-        <div class="ml-2 flex w-11/12 mx-auto">
+        <div class="ml-2 my-2 flex flex-col sm:flex-col md:flex-col lg:flex-row xl:flex-row 2xl:flex-row w-11/12 mx-auto">
             <img class="h-28 my-2 aspect-video object-cover rounded-lg" src={image} alt="">
-            <div class="ml-4 grow">
-                <p class="mt-2 font-semibold text-3xl">{title}</p>
+            <div class="lg:ml-4 xl:ml-4 2xl:ml-4 grow">
+                <p class="mt-2 font-semibold text-2xl py-2 sm:text-2xl md:text-2xl lg:text-3xl xl:text-3xl 2xl:text-3xl">{title}</p>
                 <p>{subtitle}</p>
             </div>
         </div>
diff --git a/src/components/nav/Nav.astro b/src/components/nav/Nav.astro
index 9146dda..8c91598 100644
--- a/src/components/nav/Nav.astro
+++ b/src/components/nav/Nav.astro
@@ -11,7 +11,7 @@
 </style>
 
 <div id="menu" data-shown=""
-    class="fixed top-0 left-0 w-72 h-screen p-4 flex flex-col bg-base-200 sm:-translate-x-full md:-translate-x-full lg:translate-x-0 xl:translate-x-0 2xl: translate-x-0 transition-all duration-100 z-50">
+    class="fixed top-0 left-0 w-72 h-screen p-4 flex flex-col bg-base-200 -translate-x-full sm:-translate-x-full md:-translate-x-full lg:translate-x-0 xl:translate-x-0 2xl: transition-all duration-100 z-50">
 
     <button id="menu-close" class="absolute top-0 right-0 p-2 lg:hidden 2xl:hidden">
         <span class="material-symbols-outlined">
@@ -65,7 +65,7 @@
 </div>
 
 <div
-    class="hidden h-12 w-full sm:block md:block lg:hidden xl:hidden 2xl:hidden bg-base-200 text-left transition-all duration-100">
+    class="h-12 w-full sm:block md:block lg:hidden xl:hidden 2xl:hidden block bg-base-200 text-left transition-all duration-100">
 
     <button id="menubtn" class="w-12 h-12 m-auto">
         <span class="material-symbols-outlined mt-1">
diff --git a/src/layouts/InteractiveDemoLayout.astro b/src/layouts/InteractiveDemoLayout.astro
index 986b9b1..43cc8e4 100644
--- a/src/layouts/InteractiveDemoLayout.astro
+++ b/src/layouts/InteractiveDemoLayout.astro
@@ -6,7 +6,7 @@ const { frontmatter } = Astro.props;
 ---
 
 <Layout>
-    <main class="w-1/2 sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4 mb-6 flex flex-col justify-center">
+    <main class="w-5/6 sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4 mb-6 flex flex-col justify-center">
         <img class="aspect-video object-cover mb-4" src={frontmatter.image} alt="">
         <p class="my-2 font-bold text-5xl">{frontmatter.title}</p>
         <p>{frontmatter.date}</p>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 7fd7ae0..47498df 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -50,7 +50,7 @@
 
 <body class="">
 	<Nav />
-	<div class="ml-72 sm:ml-0 md:ml-0 lg:ml-72 xl:ml-72 2xl:ml-72">
+	<div class="ml-0 sm:ml-0 md:ml-0 lg:ml-72 xl:ml-72 2xl:ml-72">
 		<slot />
 		<Footer/>
 	</div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 9a5459c..31ddaa3 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -18,7 +18,7 @@ const projects = (await Astro.glob("./projects/*.{md,mdx}")).sort(
 ---
 
 <Layout>
-	<main class="flex flex-col m-6 w-1/2 mx-auto sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2">
+	<main class="flex flex-col m-6 mx-auto w-5/6 sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2">
 		<section>
 			<p class="text-xl py-1">Hello World 👋</p>
 			<p>I'm glad you are here!</p>
@@ -31,7 +31,7 @@ const projects = (await Astro.glob("./projects/*.{md,mdx}")).sort(
 			</p>
 		</section>
 		<section>
-			<p class="text-4xl font-bold py-2">Latest Projects</p>
+			<p class="text-2xl font-bold py-2 sm:text-2xl md:text-2xl lg:text-4xl xl:text-4xl 2xl:text-4xl">Latest Projects</p>
 			{
 				projects.map((post) => (
 					<BlogProjectCard
@@ -45,7 +45,7 @@ const projects = (await Astro.glob("./projects/*.{md,mdx}")).sort(
 			}
 		</section>
 		<section>
-			<p class="text-4xl font-bold py-2">Latest Blog Posts</p>
+			<p class="text-2xl font-bold py-2 sm:text-2xl md:text-2xl lg:text-4xl xl:text-4xl 2xl:text-4xl">Latest Blog Posts</p>
 			{
 				posts.map((post) => (
 					<BlogProjectCard
diff --git a/src/pages/projects/demo.mdx b/src/pages/projects/demo.mdx
deleted file mode 100644
index 5043427..0000000
--- a/src/pages/projects/demo.mdx
+++ /dev/null
@@ -1,13 +0,0 @@
----
-layout: "../../layouts/InteractiveDemoLayout.astro"
-title: "Quicksort Demo"
-tagline: "A simple visualization of the quicksort algorithm using svelte"
-date: "Sep 10 2022"
-image: "/img/profile.jpg"
----
-
-import Quicksort from './demo/quicksort.svelte';
-
-# Quicksort
-
-<Quicksort client:load/>
\ No newline at end of file
diff --git a/src/pages/projects/demo/quicksort.svelte b/src/pages/projects/demo/quicksort.svelte
index f05dcb3..68a4738 100644
--- a/src/pages/projects/demo/quicksort.svelte
+++ b/src/pages/projects/demo/quicksort.svelte
@@ -1,5 +1,6 @@
 <script>
     import P5 from "p5-svelte/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
@@ -10,60 +11,62 @@
     let valuesToGenerate = 200;
     let frame = 0;
 
+    let parentContainer;
+    let sketch;
+
     //Added controls for play/pause and stepping frame by frame.
     let playpause = false;
 
-    const sketch = (p5) => {
-        p5.setup = () => {
-            for (let i = 0; i < valuesToGenerate; i++) {
-                data[i]=(i%700);                
+    onMount(()=>{
+        const sketchWidth = parentContainer.offsetWidth;
+        const barWidth = (sketchWidth-20)/valuesToGenerate;
+        sketch = (p5) => {
+            p5.setup = () => {
+                for (let i = 0; i < valuesToGenerate; i++) {
+                    data[i]=(i%700);                
+                }
+
+                p5.shuffle(data, true)
+                quicksort(data, 0, data.length-1);
+                animArray.push(new arrayFrame(data.toString(), null, null, null));
+                
+                //setup the canvas
+                p5.createCanvas(sketchWidth,400);
+                p5.frameRate(30);
             }
 
-            p5.shuffle(data, true)
-            quicksort(data, 0, data.length-1);
-            animArray.push(new arrayFrame(data.toString(), null, null, null));
-            
-            //setup the canvas
-            let div = p5.createDiv('');
-            div.addClass('w-full');
-            div.addClass('mx-auto');
-            div.addClass('flex');
-            div.addClass('place-content-center');
-            let canvas = p5.createCanvas(600,400);
-            canvas.parent(div);
-            p5.frameRate(30);
-        }
-
-        p5.draw = () => {
-            if(playpause){
-                if(frame == animArray.length-1){
-                    playpause = !playpause;
+            p5.draw = () => {
+                if(playpause){
+                    if(frame == animArray.length-1){
+                        playpause = !playpause;
+                    } else {
+                        drawFrame(frame);                    
+                        frame++;
+                    }
 
                 } else {
-                    drawFrame(frame);                    
-                    frame++;
+                    drawFrame(frame);
                 }
+            }
 
-            } else {
-                drawFrame(frame);
+            function drawFrame(index){
+                let dataFrame = animArray[index];
+                p5.background(28);
+                for (var i = 0; i < valuesToGenerate; i++){
+                    p5.fill(255)
+                    if(dataFrame.midIndex == i){
+                        p5.fill(255,0,0);
+                    }
+                    if(dataFrame.lowVal == i || dataFrame.highVal == i){
+                        p5.fill(0,255,0);
+                    }
+                    p5.rect(barWidth*i+10,350, barWidth,-dataFrame.getArray()[i]);
+                }
             }
         }
+    })
 
-        function drawFrame(index){
-            let dataFrame = animArray[index];
-            p5.background(51);
-            for (var i = 0; i < valuesToGenerate; i++){
-                p5.fill(255);
-                if(dataFrame.midIndex == i){
-                    p5.fill(255,0,0);
-                }
-                if(dataFrame.lowVal == i || dataFrame.highVal == i){
-                    p5.fill(0,255,0);
-                }
-                p5.rect(i*4 + 10,350,4,-dataFrame.getArray()[i]);
-            }
-        }
-    } 
+     
 
     /**
     * Copied directly from original code
@@ -148,17 +151,45 @@
         }
         frame++;
     }
+
+    function reset(){
+        frame=0;
+    }
 </script>
 
-<P5 {sketch}/>
-<div class="flex justify-evenly mt-6">
-    <button on:click={prevFrame}>Prev Frame</button>
-    <button on:click={()=>(playpause = !playpause)}>
+<div bind:this={parentContainer} class="w-full">
+    <P5 {sketch}/>
+</div>
+<div class="flex justify-evenly mt-6 mb-4">
+    <button on:click={prevFrame}>
+        <span class="material-symbols-outlined">
+            skip_previous
+        </span>
+    </button>
+    <button on:click={()=>{
+        if(frame==animArray.length-1){
+            reset();
+        } else {
+            playpause = !playpause;
+        }
+    }}>
     {#if playpause}
-        Pause
+        <span class="material-symbols-outlined">
+            pause
+        </span>
+    {:else if frame==animArray.length-1}
+        <span class="material-symbols-outlined">
+            restart_alt
+        </span>
     {:else}
-        Play
+        <span class="material-symbols-outlined">
+            play_arrow
+        </span>
     {/if}
     </button>
-    <button on:click={nextFrame}>Next Frame</button>
-</div>
+    <button on:click={nextFrame}>
+        <span class="material-symbols-outlined">
+            skip_next
+        </span>
+    </button>
+</div>
\ No newline at end of file
diff --git a/src/pages/projects/quicksort.mdx b/src/pages/projects/quicksort.mdx
new file mode 100644
index 0000000..e2d2caf
--- /dev/null
+++ b/src/pages/projects/quicksort.mdx
@@ -0,0 +1,24 @@
+---
+layout: "../../layouts/InteractiveDemoLayout.astro"
+title: "Quicksort Demo"
+tagline: "A simple visualization of the quicksort algorithm using p5.js"
+date: "December 23, 2022"
+image: "https://images.unsplash.com/photo-1669399213378-2853e748f217?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80"
+---
+{/* Bring in override/custom render components. Tailwind does some default things to header tags. */}
+import H1 from '../../components/mdx/H1.astro';
+export const components = {h1: H1}
+
+import Quicksort from './demo/quicksort.svelte';
+
+<Quicksort client:load/>
+
+---
+
+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: *[15 Sorting Algorithms in 6 Minutes](https://www.youtube.com/watch?v=kPRA0W1kECg)*. The source code for those interested can be found on my *[Github](https://github.com/thomaspcole/p5QuicksortVisualization)*.\
+\
+The demo works by generating an array of 200 values then randomly shuffling the array. We then call the ```quicksort``` function to sort the array. At each iteration of the function, the code takes a 'snapshot' of the data array at that iteration. 
+By iterating through the 'snapshot' array we get our final animation. It also allows for stepping forward and backwards to see each step of the animation.
\ No newline at end of file
diff --git a/src/pages/resume.astro b/src/pages/resume.astro
index 7bad196..e3dc4ea 100644
--- a/src/pages/resume.astro
+++ b/src/pages/resume.astro
@@ -12,7 +12,7 @@
         }
     </style>
 
-    <main class="w-1/2 mx-auto sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2">
+    <main class="w-5/6 mx-auto sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2">
         <p class="font-bold text-2xl py-6">About Me</p>
         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus esse inventore iusto earum asperiores necessitatibus, dolores id cumque nesciunt libero eligendi vel reprehenderit eius officia. Veritatis dolorum illum exercitationem suscipit.</p>
 
@@ -63,7 +63,7 @@
         </div>
 
         <p class="font-bold text-2xl py-6">Skills</p>
-        <ul class="list-disc sm:columns-2 md:columns-2 lg:columns-5 columns-5 mx-auto">
+        <ul class="list-disc sm:columns-2 md:columns-2 lg:columns-5 columns-2 mx-auto">
             <li>HTML</li>
             <li>CSS</li>
             <li>JavaScript</li>