Working on projects page.

astro.config.mjs

@@ -6,7 +6,10 @@ import tailwind from "@astrojs/tailwind";
 // https://astro.build/config
 import svelte from "@astrojs/svelte";
 
+// https://astro.build/config
+import mdx from "@astrojs/mdx";
+
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind(), svelte()]
+  integrations: [tailwind(), svelte(), mdx()]
 });

package.json

@@ -11,10 +11,12 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/mdx": "^0.13.0",
     "@astrojs/svelte": "^1.0.2",
     "@astrojs/tailwind": "^2.1.3",
     "astro": "^1.6.15",
     "daisyui": "^2.45.0",
+    "p5-svelte": "^3.1.2",
     "svelte": "^3.55.0",
     "tailwindcss": "^3.2.4",
     "theme-change": "^2.2.0"

src/components/nav/Nav.astro

@@ -25,7 +25,7 @@
             </a>
         </li>
         <li class="flex">
-            <a href="/" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
+            <a href="/projects/1" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
                 <button class="p-2">Projects</button>
             </a>
         </li>
@@ -40,7 +40,7 @@
             </a>
         </li>
         <li class="flex">
-            <a href="/" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
+            <a href="mailto:thomas.patrick.cole@gmail.com" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
                 <button class="p-2">Contact</button>
             </a>
         </li>

src/layouts/BlogLayout.astro

@@ -6,7 +6,7 @@ const { frontmatter } = Astro.props;
 ---
 
 <Layout>
-    <main class="w-1/2 mx-auto mt-4 mb-6 flex flex-col justify-center">
+    <main class="w-1/2 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>

src/layouts/InteractiveDemoLayout.astro

@@ -0,0 +1,16 @@
+---
+import Divider from "../components/misc/Divider.astro";
+import Layout from "./Layout.astro";
+
+const { frontmatter } = Astro.props;
+---
+
+<Layout>
+    <main class="w-1/2 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>
+        <Divider/>
+        <slot />
+    </main>
+</Layout>

src/pages/blog/[page].astro

@@ -1,65 +1,59 @@
 ---
-import Layout from "../../layouts/Layout.astro";
-import BlogProjectCard from "../../components/misc/BlogProjectCard.astro";
-import Divider from "../../components/misc/Divider.astro";
+    import Layout from "../../layouts/Layout.astro";
+    import BlogProjectCard from "../../components/misc/BlogProjectCard.astro";
+    import Divider from "../../components/misc/Divider.astro";
 
-export async function getStaticPaths({ paginate }: { paginate: any }) {
-    const posts = (await Astro.glob("./*.{md,mdx}")).sort(
-        (a, b) =>
-            new Date(b.frontmatter.date).valueOf() -
-            new Date(a.frontmatter.date).valueOf()
-    );
+    export async function getStaticPaths({ paginate }: { paginate: any }) {
+        const posts = (await Astro.glob("./*.{md,mdx}")).sort(
+            (a, b) =>
+                new Date(b.frontmatter.date).valueOf() -
+                new Date(a.frontmatter.date).valueOf()
+        );
 
-    return paginate(posts, { pageSize: 10 });
-}
+        return paginate(posts, { pageSize: 10 });
+    }
 
-const { page } = Astro.props;
+    const { page } = Astro.props;
 ---
 
 <Layout title=" | Blog">
-    <div class="flex flex-col w-1/2 mx-auto mt-4">
-        {
+    <main class="w-1/2 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4">
+        <div class="flex flex-col">
+            {
             page.data.map((post: any) => (
-                <>
-                    <BlogProjectCard
-                        title={post.frontmatter.title}
-                        subtitle={post.frontmatter.tagline}
-                        image={post.frontmatter.image}
-                        link={post.url}
-                    />
-                    <Divider />
-                </>
+                <BlogProjectCard title={post.frontmatter.title} subtitle={post.frontmatter.tagline}
+                    image={post.frontmatter.image} link={post.url} />
+                <Divider />
             ))
-        }
-    </div>
-
-    <div class="w-1/2 mx-auto flex justify-between">
-        {
+            }
+        </div>
+        <div class="w-1/2 mx-auto flex justify-between">
+            {
             page.url.prev ? (
-                <a class="w-40 flex" href={page.url.prev}>
-                    <span class="material-symbols-outlined">
-                        chevron_left
-                    </span>
-                    <p>Previous Page</p>
-                </a>
+            <a class="w-40 flex" href={page.url.prev}>
+                <span class="material-symbols-outlined">
+                    chevron_left
+                </span>
+                <p>Previous Page</p>
+            </a>
             ) : (
-                <div class="w-40" />
+            <div class="w-40" />
             )
-        }
-        
-        <h1 class="grow text-center">Page {page.currentPage}</h1>
+            }
 
-        {
+            <p class="grow text-center whitespace-nowrap">Page {page.currentPage}</p>
+            {
             page.url.next ? (
-                <a class="w-40 flex" href={page.url.next}>
-                    <p class="grow text-right">Next Page</p>
-                    <span class="material-symbols-outlined">
-                        chevron_right
-                    </span>
-                </a>
+            <a class="w-40 flex" href={page.url.next}>
+                <p class="grow text-right">Next Page</p>
+                <span class="material-symbols-outlined">
+                    chevron_right
+                </span>
+            </a>
             ) : (
-                <div class="w-40"/>
+            <div class="w-40" />
             )
-        }
-    </div>
-</Layout>
+            }
+        </div>
+    </main>
+</Layout>

src/pages/index.astro

@@ -9,10 +9,16 @@ const posts = (await Astro.glob("./blog/*.{md,mdx}"))
 			new Date(b.frontmatter.date).valueOf() -
 			new Date(a.frontmatter.date).valueOf()
 	);
+
+const projects = (await Astro.glob("./projects/*.{md,mdx}")).sort(
+	(a,b) => 
+		new Date(b.frontmatter.date).valueOf()-
+		new Date(a.frontmatter.date).valueOf()
+)
 ---
 
 <Layout>
-	<main class="flex flex-col m-6 w-4/5 mx-auto">
+	<main class="flex flex-col m-6 w-1/2 mx-auto 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>
@@ -27,7 +33,7 @@ const posts = (await Astro.glob("./blog/*.{md,mdx}"))
 		<section>
 			<p class="text-4xl font-bold py-2">Latest Projects</p>
 			{
-				posts.map((post) => (
+				projects.map((post) => (
 					<BlogProjectCard
 						title={post.frontmatter.title}
 						subtitle={post.frontmatter.tagline}
@@ -40,6 +46,17 @@ const posts = (await Astro.glob("./blog/*.{md,mdx}"))
 		</section>
 		<section>
 			<p class="text-4xl font-bold py-2">Latest Blog Posts</p>
+			{
+				posts.map((post) => (
+					<BlogProjectCard
+						title={post.frontmatter.title}
+						subtitle={post.frontmatter.tagline}
+						image={post.frontmatter.image}
+						link={post.url}
+					/>
+					<Divider/>
+				))
+			}
 		</section>
 	</main>
 </Layout>

src/pages/projects/[page].astro

@@ -0,0 +1,59 @@
+---
+    import Layout from "../../layouts/Layout.astro";
+    import Divider from "../../components/misc/Divider.astro";
+    import BlogProjectCard from "../../components/misc/BlogProjectCard.astro";
+
+    export async function getStaticPaths({ paginate }: { paginate: any }) {
+        const posts = (await Astro.glob("./*.{md,mdx}")).sort(
+            (a, b) =>
+                new Date(b.frontmatter.date).valueOf() -
+                new Date(a.frontmatter.date).valueOf()
+        );
+
+        return paginate(posts, { pageSize: 10 });
+    }
+
+    const { page } = Astro.props;
+---
+
+<Layout title=" | Blog">
+    <main class="w-1/2 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4">
+        <div class="flex flex-col">
+            {
+            page.data.map((post: any) => (
+            <BlogProjectCard title={post.frontmatter.title} subtitle={post.frontmatter.tagline}
+                image={post.frontmatter.image} link={post.url}/>
+            <Divider />
+            ))
+            }
+        </div>
+        <div class="w-1/2 mx-auto flex justify-between">
+            {
+            page.url.prev ? (
+            <a class="w-40 flex" href={page.url.prev}>
+                <span class="material-symbols-outlined">
+                    chevron_left
+                </span>
+                <p>Previous Page</p>
+            </a>
+            ) : (
+            <div class="w-40" />
+            )
+            }
+
+            <p class="grow text-center whitespace-nowrap">Page {page.currentPage}</p>
+            {
+            page.url.next ? (
+            <a class="w-40 flex" href={page.url.next}>
+                <p class="grow text-right">Next Page</p>
+                <span class="material-symbols-outlined">
+                    chevron_right
+                </span>
+            </a>
+            ) : (
+            <div class="w-40" />
+            )
+            }
+        </div>
+    </main>
+</Layout>

src/pages/projects/demo.mdx

@@ -0,0 +1,13 @@
+---
+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/>

src/pages/projects/demo/quicksort.svelte

@@ -0,0 +1,156 @@
+<script>
+    import P5 from "p5-svelte/P5.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
+
+    let data = [];
+    let animArray = [];
+    let valuesToGenerate = 200;
+    let frame = 0;
+
+    //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);                
+            }
+
+            p5.shuffle(data, true)
+            quicksort(data, 0, data.length-1);
+            animArray.push(new arrayFrame(data.toString(), null, null, null));
+            p5.createCanvas(850,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(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
+    * @param array the array of data being worked on
+    * @param low the low values
+    * @param high the high value
+    */
+    function quicksort(array, low, high){
+        //Do we need to sort?
+        if(low >= high){
+            animArray.push(new arrayFrame(array.toString(), 0, array.length, 0));
+            return;
+        }
+
+        //Pick a pivot point in the middle of the passed array.
+        let mid = Math.floor(low + ((high-low) / 2));
+        let pivot = array[mid];
+
+        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--;
+            }
+        }
+
+        if(low < h){
+            quicksort(array, low, h);
+        }
+
+        if(high > l){
+            quicksort(array, l, high);
+        }       
+    }
+
+    /**
+    * 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++;
+    }
+</script>
+
+<P5 {sketch}/>
+<div class="flex justify-evenly">
+    <button on:click={prevFrame}>Prev Frame</button>  
+    <button on:click={()=>(playpause = !playpause)}>
+    {#if playpause}
+        Pause
+    {:else}
+        Play
+    {/if}
+    </button>  
+    <button on:click={nextFrame}>Next Frame</button>
+</div>

src/pages/resume.astro

@@ -12,7 +12,7 @@
         }
     </style>
 
-    <main class="w-1/2 mx-auto">
+    <main class="w-1/2 mx-auto 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 columns-2 md:columns-6 mx-auto">
+        <ul class="list-disc sm:columns-2 md:columns-2 lg:columns-5 columns-5 mx-auto">
             <li>HTML</li>
             <li>CSS</li>
             <li>JavaScript</li>
@@ -82,6 +82,7 @@
             <li>Active Directory</li>
             <li>Cisco IOS</li>
             <li>Ubiquiti Unifi</li>
+            <li>3CX</li>
         </ul>
         <Divider/>
     </main>