Added custom mdx components. Tweaked layouts. Quicksort project example.
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
f3d8a46795
commit
37702831c2
3
src/components/mdx/H1.astro
Normal file
3
src/components/mdx/H1.astro
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<h1 class="text-5xl font-semibold">
|
||||||
|
<slot/>
|
||||||
|
</h1>
|
||||||
3
src/components/mdx/H2.astro
Normal file
3
src/components/mdx/H2.astro
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<h1 class="text-4xl font-semibold">
|
||||||
|
<slot/>
|
||||||
|
</h1>
|
||||||
3
src/components/mdx/H3.astro
Normal file
3
src/components/mdx/H3.astro
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<h1 class="text-3xl font-semibold">
|
||||||
|
<slot/>
|
||||||
|
</h1>
|
||||||
@ -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">
|
<div class="rounded-lg hover:shadow-xl transition ease-in-out hover:scale-105">
|
||||||
<a href={link}>
|
<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="">
|
<img class="h-28 my-2 aspect-video object-cover rounded-lg" src={image} alt="">
|
||||||
<div class="ml-4 grow">
|
<div class="lg:ml-4 xl:ml-4 2xl:ml-4 grow">
|
||||||
<p class="mt-2 font-semibold text-3xl">{title}</p>
|
<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>
|
<p>{subtitle}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -11,7 +11,7 @@
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div id="menu" data-shown=""
|
<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">
|
<button id="menu-close" class="absolute top-0 right-0 p-2 lg:hidden 2xl:hidden">
|
||||||
<span class="material-symbols-outlined">
|
<span class="material-symbols-outlined">
|
||||||
@ -65,7 +65,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<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">
|
<button id="menubtn" class="w-12 h-12 m-auto">
|
||||||
<span class="material-symbols-outlined mt-1">
|
<span class="material-symbols-outlined mt-1">
|
||||||
|
|||||||
@ -6,7 +6,7 @@ const { frontmatter } = Astro.props;
|
|||||||
---
|
---
|
||||||
|
|
||||||
<Layout>
|
<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="">
|
<img class="aspect-video object-cover mb-4" src={frontmatter.image} alt="">
|
||||||
<p class="my-2 font-bold text-5xl">{frontmatter.title}</p>
|
<p class="my-2 font-bold text-5xl">{frontmatter.title}</p>
|
||||||
<p>{frontmatter.date}</p>
|
<p>{frontmatter.date}</p>
|
||||||
|
|||||||
@ -50,7 +50,7 @@
|
|||||||
|
|
||||||
<body class="">
|
<body class="">
|
||||||
<Nav />
|
<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 />
|
<slot />
|
||||||
<Footer/>
|
<Footer/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -18,7 +18,7 @@ const projects = (await Astro.glob("./projects/*.{md,mdx}")).sort(
|
|||||||
---
|
---
|
||||||
|
|
||||||
<Layout>
|
<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>
|
<section>
|
||||||
<p class="text-xl py-1">Hello World 👋</p>
|
<p class="text-xl py-1">Hello World 👋</p>
|
||||||
<p>I'm glad you are here!</p>
|
<p>I'm glad you are here!</p>
|
||||||
@ -31,7 +31,7 @@ const projects = (await Astro.glob("./projects/*.{md,mdx}")).sort(
|
|||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
<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) => (
|
projects.map((post) => (
|
||||||
<BlogProjectCard
|
<BlogProjectCard
|
||||||
@ -45,7 +45,7 @@ const projects = (await Astro.glob("./projects/*.{md,mdx}")).sort(
|
|||||||
}
|
}
|
||||||
</section>
|
</section>
|
||||||
<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) => (
|
posts.map((post) => (
|
||||||
<BlogProjectCard
|
<BlogProjectCard
|
||||||
|
|||||||
@ -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/>
|
|
||||||
@ -1,5 +1,6 @@
|
|||||||
<script>
|
<script>
|
||||||
import P5 from "p5-svelte/P5.svelte";
|
import P5 from "p5-svelte/P5.svelte";
|
||||||
|
import { onMount } from "svelte";
|
||||||
|
|
||||||
// Demo modified from a very old p5js sketch written in college.
|
// 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
|
// The original was part of a the application process to work for the university IT department
|
||||||
@ -10,60 +11,62 @@
|
|||||||
let valuesToGenerate = 200;
|
let valuesToGenerate = 200;
|
||||||
let frame = 0;
|
let frame = 0;
|
||||||
|
|
||||||
|
let parentContainer;
|
||||||
|
let 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;
|
||||||
|
|
||||||
const sketch = (p5) => {
|
onMount(()=>{
|
||||||
p5.setup = () => {
|
const sketchWidth = parentContainer.offsetWidth;
|
||||||
for (let i = 0; i < valuesToGenerate; i++) {
|
const barWidth = (sketchWidth-20)/valuesToGenerate;
|
||||||
data[i]=(i%700);
|
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)
|
p5.draw = () => {
|
||||||
quicksort(data, 0, data.length-1);
|
if(playpause){
|
||||||
animArray.push(new arrayFrame(data.toString(), null, null, null));
|
if(frame == animArray.length-1){
|
||||||
|
playpause = !playpause;
|
||||||
//setup the canvas
|
} else {
|
||||||
let div = p5.createDiv('');
|
drawFrame(frame);
|
||||||
div.addClass('w-full');
|
frame++;
|
||||||
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;
|
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
drawFrame(frame);
|
drawFrame(frame);
|
||||||
frame++;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
} else {
|
function drawFrame(index){
|
||||||
drawFrame(frame);
|
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
|
* Copied directly from original code
|
||||||
@ -148,17 +151,45 @@
|
|||||||
}
|
}
|
||||||
frame++;
|
frame++;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function reset(){
|
||||||
|
frame=0;
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<P5 {sketch}/>
|
<div bind:this={parentContainer} class="w-full">
|
||||||
<div class="flex justify-evenly mt-6">
|
<P5 {sketch}/>
|
||||||
<button on:click={prevFrame}>Prev Frame</button>
|
</div>
|
||||||
<button on:click={()=>(playpause = !playpause)}>
|
<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}
|
{#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}
|
{:else}
|
||||||
Play
|
<span class="material-symbols-outlined">
|
||||||
|
play_arrow
|
||||||
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</button>
|
</button>
|
||||||
<button on:click={nextFrame}>Next Frame</button>
|
<button on:click={nextFrame}>
|
||||||
</div>
|
<span class="material-symbols-outlined">
|
||||||
|
skip_next
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
24
src/pages/projects/quicksort.mdx
Normal file
24
src/pages/projects/quicksort.mdx
Normal file
@ -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.
|
||||||
@ -12,7 +12,7 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</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 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>
|
<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>
|
</div>
|
||||||
|
|
||||||
<p class="font-bold text-2xl py-6">Skills</p>
|
<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>HTML</li>
|
||||||
<li>CSS</li>
|
<li>CSS</li>
|
||||||
<li>JavaScript</li>
|
<li>JavaScript</li>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user