thomascole/Personal-Site
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Added custom mdx components. Tweaked layouts. Quicksort project example.
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Thomas Cole 2022-12-23 12:00:46 -05:00
parent f3d8a46795
commit 37702831c2
12 changed files with 126 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/mdx/H1.astro Normal file
View File

@ -0,0 +1,3 @@
<h1 class="text-5xl font-semibold">
<slot/>
</h1>

3
src/components/mdx/H2.astro Normal file
View File

@ -0,0 +1,3 @@
<h1 class="text-4xl font-semibold">
<slot/>
</h1>

3
src/components/mdx/H3.astro Normal file
View File

@ -0,0 +1,3 @@
<h1 class="text-3xl font-semibold">
<slot/>
</h1>

6
src/components/misc/BlogProjectCard.astro
View File

@ -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>

4
src/components/nav/Nav.astro
View File

@ -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">

2
src/layouts/InteractiveDemoLayout.astro
View File

@ -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>

2
src/layouts/Layout.astro
View File

@ -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>

6
src/pages/index.astro
View File

@ -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

13
src/pages/projects/demo.mdx
View File

@ -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/>

69
src/pages/projects/demo/quicksort.svelte
View File

@ -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,10 +11,16 @@
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(()=>{
const sketchWidth = parentContainer.offsetWidth;
const barWidth = (sketchWidth-20)/valuesToGenerate;
sketch = (p5) => {
p5.setup = () => { p5.setup = () => {
for (let i = 0; i < valuesToGenerate; i++) { for (let i = 0; i < valuesToGenerate; i++) {
data[i]=(i%700); data[i]=(i%700);
@ -24,13 +31,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
let div = p5.createDiv(''); p5.createCanvas(sketchWidth,400);
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.frameRate(30);
} }
@ -38,7 +39,6 @@
if(playpause){ if(playpause){
if(frame == animArray.length-1){ if(frame == animArray.length-1){
playpause = !playpause; playpause = !playpause;
} else { } else {
drawFrame(frame); drawFrame(frame);
frame++; frame++;
@ -51,19 +51,22 @@
function drawFrame(index){ function drawFrame(index){
let dataFrame = animArray[index]; let dataFrame = animArray[index];
p5.background(51); p5.background(28);
for (var i = 0; i < valuesToGenerate; i++){ for (var i = 0; i < valuesToGenerate; i++){
p5.fill(255); p5.fill(255)
if(dataFrame.midIndex == i){ if(dataFrame.midIndex == i){
p5.fill(255,0,0); p5.fill(255,0,0);
} }
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(i*4 + 10,350,4,-dataFrame.getArray()[i]); p5.rect(barWidth*i+10,350, barWidth,-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}>
<span class="material-symbols-outlined">
skip_next
</span>
</button>
</div> </div>

24
src/pages/projects/quicksort.mdx Normal file
View 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.

4
src/pages/resume.astro
View File

@ -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>