Reworks to project pages

src/layouts/InteractiveDemoLayout.astro

@@ -1,11 +1,13 @@
 ---
     import Divider from "../components/misc/Divider.astro";
     import Layout from "./Layout.astro";
+    import Nav from "../components/nav/Nav.astro";
     const { frontmatter } = Astro.props;
 ---
 
 <Layout>
-    <main class="z-10 flex flex-col justify-center w-5/6 mx-auto mt-4 mb-6 sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2">
+    <Nav/>
+    <main class="z-10 flex flex-col justify-center w-5/6 mx-auto mt-4 mb-6 sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 overflow-hidden bg-gray-500 rounded-lg sm:pt-0 rounded-xl bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-10">
         <div class="relative mb-4">
             <img class="object-cover aspect-video rounded-xl max-h-[50vh] w-full" src={frontmatter.image} alt=""
                 draggable="false" />
@@ -13,8 +15,8 @@
                 <span class="material-symbols-outlined opacity-25 mr-[4px]">link</span>
             </a>
         </div>
-        <p class="my-2 text-5xl font-bold text-gray-800 dark:text-white">{frontmatter.title}</p>
-        <p class="text-gray-600 dark:text-gray-400">{frontmatter.date}</p>
+        <p class="my-2 text-5xl px-2 font-bold text-white">{frontmatter.title}</p>
+        <p class="text-gray-200 px-2">{frontmatter.date}</p>
         <Divider />
         <!-- Render our markdown with the normal header styling and some extra padding. -->
         <style is:inline>
@@ -23,46 +25,12 @@
                 padding: 8px;
             }
 
-            /* Silly :root .prose. Why must you be difficult */
-            .prose-light {
-                --tw-prose-body: #374151 !important;
-                --tw-prose-headings: #111827 !important;
-                --tw-prose-lead: #4b5563 !important;
-                --tw-prose-links: #111827 !important;
-                --tw-prose-bold: #111827 !important;
-                --tw-prose-counters: #6b7280 !important;
-                --tw-prose-bullets: #d1d5db !important;
-                --tw-prose-hr: #e5e7eb !important;
-                --tw-prose-quotes: #111827 !important;
-                --tw-prose-quote-borders: #e5e7eb !important;
-                --tw-prose-captions: #6b7280 !important;
-                --tw-prose-code: #111827 !important;
-                --tw-prose-pre-code: #e5e7eb !important;
-                --tw-prose-pre-bg: #1f2937 !important;
-                --tw-prose-th-borders: #d1d5db !important;
-                --tw-prose-td-borders: #e5e7eb !important;
+            .prose p>img{
+                margin: auto;
             }
-            
         </style>
-        <article id="article" class="max-w-full prose dark:prose-invert prose-light">
+        <article id="article" class="max-w-full prose text-white px-2 pb-2">
             <slot />
         </article>
-        <script is:inline>
-            let article = document.getElementById("article");
-            //Should this be in a function? yes. Does that break everyting? Also yes.
-            if (localStorage.theme === 'light') {
-                article.classList.add("prose-light");
-            } else {
-                article.classList.remove("prose-light");
-            }
-
-            window.addEventListener("themeupdate", (event) => {
-                if (localStorage.theme === 'light') {
-                    article.classList.add("prose-light");
-                } else {
-                    article.classList.remove("prose-light");
-                }
-            });
-        </script>
     </main>
 </Layout>

src/pages/contact.astro

@@ -1,8 +1,11 @@
 ---
     import Layout from "../layouts/Layout.astro";
+    import Button from "../components/misc/Button.astro";
+    import Nav from "../components/nav/Nav.astro";
 ---
 
 <Layout title={" | Contact"}>
+    <Nav/>
     <section class="relative z-10 text-white">
         <div class="container w-full h-full px-5 py-12 pt-0 mx-auto sm:pt-24 rounded-xl">
             <div class="flex flex-col w-full text-center">
@@ -14,26 +17,25 @@
                         <div class="relative">
                             <label for="name" class="text-sm leading-7">Name</label>
                             <input type="text" id="name" name="name"
-                                class="w-full px-3 py-1 text-base leading-8 text-black transition-colors duration-200 ease-in-out bg-gray-300 rounded outline-none focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200">
+                                class="w-full px-3 py-1 text-base leading-6 text-white transition-colors duration-200 ease-in-out bg-gray-500 border border-white rounded outline-none resize-none backdrop-blur-md bg-opacity-10 focus:text-black focus:bg-white">
                         </div>
                     </div>
                     <div class="w-1/2 p-2">
                         <div class="relative">
                             <label for="email" class="text-sm leading-7">Email</label>
                             <input type="email" id="email" name="email"
-                                class="w-full px-3 py-1 text-base leading-8 text-black transition-colors duration-200 ease-in-out bg-gray-300 rounded outline-none focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200">
+                                class="w-full px-3 py-1 text-base leading-6 text-white transition-colors duration-200 ease-in-out bg-gray-500 border border-white rounded outline-none resize-none backdrop-blur-md bg-opacity-10 focus:text-black focus:bg-white">
                         </div>
                     </div>
                     <div class="w-full p-2">
                         <div class="relative">
                             <label for="message" class="text-sm leading-7">Message</label>
                             <textarea id="message" name="message"
-                                class="w-full h-32 px-3 py-1 text-base leading-6 text-black transition-colors duration-200 ease-in-out bg-gray-300 rounded outline-none resize-none focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200"></textarea>
+                                class="w-full h-32 px-3 py-1 text-base leading-6 text-white transition-colors duration-200 ease-in-out bg-gray-500 border border-white rounded outline-none resize-none backdrop-blur-md bg-opacity-10 focus:text-black focus:bg-white"></textarea>
                         </div>
                     </div>
                     <div class="w-full p-2">
-                        <button
-                            class="flex px-8 py-2 mx-auto text-lg text-white bg-indigo-500 border-0 rounded focus:outline-none hover:bg-indigo-600">Submit</button>
+                        <Button text="Submit">
                     </div>
                 </div>
             </div>

src/pages/projects/quicksort/quicksort.mdx

@@ -12,7 +12,6 @@ import Quicksort from './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.\
 \

src/pages/projects/quicksort/quicksort.svelte

@@ -1,195 +1,186 @@
 <script>
-    import P5 from "p5-svelte/P5.svelte";
-    import { onMount } from "svelte";
+  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
-    // https://github.com/thomaspcole/p5QuicksortVisualization
+  // 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
 
-    let data = [];
-    let animArray = [];
-    let valuesToGenerate = 200;
-    let frame = 0;
+  let data = [];
+  let animArray = [];
+  let valuesToGenerate = 200;
+  let frame = 0;
 
-    let parentContainer;
-    let sketch;
+  let parentContainer;
+  let sketch;
 
-    //Added controls for play/pause and stepping frame by frame.
-    let playpause = false;
+  //Added controls for play/pause and stepping frame by frame.
+  let playpause = false;
 
-    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.draw = () => {
-                if(playpause){
-                    if(frame == animArray.length-1){
-                        playpause = !playpause;
-                    } else {
-                        drawFrame(frame);                    
-                        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]);
-                }
-            }
-        }
-    })
-
-     
-
-    /**
-    * Copied directly from original code
-    * @param array the array of data being worked on
-    * @param low the low values
-    * @param high the high value
-    */
-    function quicksort(array, low, high){
-        animArray.push(new arrayFrame(array.toString(), 0, array.length, 0));
-        //Do we need to sort?
-        if(low >= high){
-            return;
+  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;
         }
 
-        //Pick a pivot point in the middle of the passed array.
-        let mid = Math.floor(low + ((high-low) / 2));
-        let pivot = array[mid];
+        p5.shuffle(data, true);
+        quicksort(data, 0, data.length - 1);
+        animArray.push(new arrayFrame(data.toString(), null, null, null));
 
-        let l = low;
-        let h = high;
+        //setup the canvas
+        p5.createCanvas(sketchWidth, 250);
+        p5.frameRate(30);
+      };
 
-        while(l <= h){
-            while(array[l] < pivot){
-                l++;
-            }
-
-            while(array[h] > pivot){
-                h--;
-            }
-
-            if(l <= h){
-                //console.log(array, l, h, mid);
-                //console.log("Switch: " + array[l] + ":" + array[h]);
-                animArray.push(new arrayFrame(array.toString(), l, h, mid));
-
-                let tmp = array[l];
-                array[l] = array[h];
-                array[h] = tmp;
-                l++;
-                h--;
-            }
+      p5.draw = () => {
+        if (playpause) {
+          if (frame == animArray.length - 1) {
+            playpause = !playpause;
+          } else {
+            drawFrame(frame);
+            frame++;
+          }
+        } else {
+          drawFrame(frame);
         }
+      };
 
-        if(low < h){
-            quicksort(array, low, h);
+      function drawFrame(index) {
+        let dataFrame = animArray[index];
+        p5.clear();
+        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, 230, barWidth, -dataFrame.getArray()[i]);
         }
+      }
+    };
+  });
 
-        if(high > l){
-            quicksort(array, l, high);
-        }       
+  /**
+   * Copied directly from original code
+   * @param array the array of data being worked on
+   * @param low the low values
+   * @param high the high value
+   */
+  function quicksort(array, low, high) {
+    animArray.push(new arrayFrame(array.toString(), 0, array.length, 0));
+    //Do we need to sort?
+    if (low >= high) {
+      return;
     }
 
-    /**
-    * Constructor for a arrayFrame object
-    * @param arrayState the array of data at a current point in time
-    * @param lowVal the low index
-    * @param highVal the high midIndex
-    * @param midIndex the pivot index
-    * @param getArray Returns the array at the current time
-    */
-    function arrayFrame(arrayState, lowVal, highVal, midIndex){
-        this.arrayState = arrayState;
-        this.lowVal = lowVal;
-        this.highVal = highVal;
-        this.midIndex = midIndex;
+    //Pick a pivot point in the middle of the passed array.
+    let mid = Math.floor(low + (high - low) / 2);
+    let pivot = array[mid];
 
-        this.getArray = function(){
-            return this.arrayState.split(",");
-        }
+    let l = low;
+    let h = high;
+
+    while (l <= h) {
+      while (array[l] < pivot) {
+        l++;
+      }
+
+      while (array[h] > pivot) {
+        h--;
+      }
+
+      if (l <= h) {
+        //console.log(array, l, h, mid);
+        //console.log("Switch: " + array[l] + ":" + array[h]);
+        animArray.push(new arrayFrame(array.toString(), l, h, mid));
+
+        let tmp = array[l];
+        array[l] = array[h];
+        array[h] = tmp;
+        l++;
+        h--;
+      }
     }
 
-    function prevFrame(){
-        if(frame == 0){
-            return;
-        }
-        frame--;
+    if (low < h) {
+      quicksort(array, low, h);
     }
 
-    function nextFrame(){
-        if(frame == animArray.length-1){
-            return;
-        }
-        frame++;
+    if (high > l) {
+      quicksort(array, l, high);
     }
+  }
 
-    function reset(){
-        frame=0;
+  /**
+   * Constructor for a arrayFrame object
+   * @param arrayState the array of data at a current point in time
+   * @param lowVal the low index
+   * @param highVal the high midIndex
+   * @param midIndex the pivot index
+   * @param getArray Returns the array at the current time
+   */
+  function arrayFrame(arrayState, lowVal, highVal, midIndex) {
+    this.arrayState = arrayState;
+    this.lowVal = lowVal;
+    this.highVal = highVal;
+    this.midIndex = midIndex;
+
+    this.getArray = function () {
+      return this.arrayState.split(",");
+    };
+  }
+
+  function prevFrame() {
+    if (frame == 0) {
+      return;
     }
+    frame--;
+  }
+
+  function nextFrame() {
+    if (frame == animArray.length - 1) {
+      return;
+    }
+    frame++;
+  }
+
+  function reset() {
+    frame = 0;
+  }
 </script>
 
-<div bind:this={parentContainer} class="w-full rounded-xl">
-    <P5 {sketch}/>
-</div>
-<div class="flex items-center p-4 mt-6 mb-4 bg-gray-200 dark:bg-gray-800 justify-evenly rounded-xl">
+<div bind:this={parentContainer} class="w-[90%] mx-auto rounded-xl border border-white">
+  <P5 {sketch} />
+
+  <div class="flex items-center justify-center gap-8 rounded-xl pb-4">
     <button on:click={prevFrame} class="h-[24px]">
-        <span class="material-symbols-outlined">
-            skip_previous
-        </span>
+      <span class="material-symbols-outlined">skip_previous</span>
     </button>
-    <button on:click={()=>{
-        if(frame==animArray.length-1){
-            reset();
+    <button
+      on:click={() => {
+        if (frame == animArray.length - 1) {
+          reset();
         } else {
-            playpause = !playpause;
+          playpause = !playpause;
         }
-    }}  class="h-[24px]">
-    {#if playpause}
-        <span class="material-symbols-outlined">
-            pause
-        </span>
-    {:else if frame==animArray.length-1}
-        <span class="material-symbols-outlined">
-            restart_alt
-        </span>
-    {:else}
-        <span class="material-symbols-outlined">
-            play_arrow
-        </span>
-    {/if}
+      }}
+      class="h-[24px]"
+    >
+      {#if playpause}
+        <span class="material-symbols-outlined">pause</span>
+      {:else if frame == animArray.length - 1}
+        <span class="material-symbols-outlined">restart_alt</span>
+      {:else}
+        <span class="material-symbols-outlined">play_arrow</span>
+      {/if}
     </button>
     <button on:click={nextFrame} class="h-[24px]">
-        <span class="material-symbols-outlined">
-            skip_next
-        </span>
+      <span class="material-symbols-outlined">skip_next</span>
     </button>
-</div>
+  </div>
+</div>

src/pages/projects/sitemap/sitemapgraph.svelte

@@ -48,7 +48,7 @@
                   'text-valign' : 'center',
                   'shape': 'round-rectangle',
                   'width': '500px',
-                  'height': '50px',
+                  'height': '100px',
                   'background-color' : '#F8F9FA',
                   'border-color': '#000',
                 },
@@ -66,7 +66,7 @@
               name: "breadthfirst",
               fit: true, // whether to fit the viewport to the graph
               directed: true, // whether the tree is directed downwards (or edges can point in any direction if false)
-              padding: 10, // padding on fit
+              padding: 5, // padding on fit
               circle: false, // put depths in concentric circles if true, put depths top down if false
               grid: false, // whether to create an even grid into which the DAG is placed (circle:false only)
               spacingFactor: 1, // positive spacing factor, larger => more space between nodes (N.B. n/a if causes overlap)

src/pages/submitContact.js

@@ -0,0 +1,7 @@
+export async function GET({ params, request }) {
+    const response = await fetch("https://docs.astro.build/assets/full-logo-light.png");
+    const buffer = Buffer.from(await response.arrayBuffer());
+    return new Response(buffer, {
+        headers: { "Content-Type": "image/png" },
+    });
+}