Reworks to project pages
Some checks failed
Build Site / Build-Site (18.x) (push) Failing after 1m33s

This commit is contained in:
Thomas Cole 2024-01-17 16:33:53 -05:00
parent ab16219f3b
commit 14c3460c11
6 changed files with 177 additions and 210 deletions

View File

@ -1,11 +1,13 @@
--- ---
import Divider from "../components/misc/Divider.astro"; import Divider from "../components/misc/Divider.astro";
import Layout from "./Layout.astro"; import Layout from "./Layout.astro";
import Nav from "../components/nav/Nav.astro";
const { frontmatter } = Astro.props; const { frontmatter } = Astro.props;
--- ---
<Layout> <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"> <div class="relative mb-4">
<img class="object-cover aspect-video rounded-xl max-h-[50vh] w-full" src={frontmatter.image} alt="" <img class="object-cover aspect-video rounded-xl max-h-[50vh] w-full" src={frontmatter.image} alt=""
draggable="false" /> draggable="false" />
@ -13,8 +15,8 @@
<span class="material-symbols-outlined opacity-25 mr-[4px]">link</span> <span class="material-symbols-outlined opacity-25 mr-[4px]">link</span>
</a> </a>
</div> </div>
<p class="my-2 text-5xl font-bold text-gray-800 dark:text-white">{frontmatter.title}</p> <p class="my-2 text-5xl px-2 font-bold text-white">{frontmatter.title}</p>
<p class="text-gray-600 dark:text-gray-400">{frontmatter.date}</p> <p class="text-gray-200 px-2">{frontmatter.date}</p>
<Divider /> <Divider />
<!-- Render our markdown with the normal header styling and some extra padding. --> <!-- Render our markdown with the normal header styling and some extra padding. -->
<style is:inline> <style is:inline>
@ -23,46 +25,12 @@
padding: 8px; padding: 8px;
} }
/* Silly :root .prose. Why must you be difficult */ .prose p>img{
.prose-light { margin: auto;
--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;
} }
</style> </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 /> <slot />
</article> </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> </main>
</Layout> </Layout>

View File

@ -1,8 +1,11 @@
--- ---
import Layout from "../layouts/Layout.astro"; import Layout from "../layouts/Layout.astro";
import Button from "../components/misc/Button.astro";
import Nav from "../components/nav/Nav.astro";
--- ---
<Layout title={" | Contact"}> <Layout title={" | Contact"}>
<Nav/>
<section class="relative z-10 text-white"> <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="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"> <div class="flex flex-col w-full text-center">
@ -14,26 +17,25 @@
<div class="relative"> <div class="relative">
<label for="name" class="text-sm leading-7">Name</label> <label for="name" class="text-sm leading-7">Name</label>
<input type="text" id="name" name="name" <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> </div>
<div class="w-1/2 p-2"> <div class="w-1/2 p-2">
<div class="relative"> <div class="relative">
<label for="email" class="text-sm leading-7">Email</label> <label for="email" class="text-sm leading-7">Email</label>
<input type="email" id="email" name="email" <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> </div>
<div class="w-full p-2"> <div class="w-full p-2">
<div class="relative"> <div class="relative">
<label for="message" class="text-sm leading-7">Message</label> <label for="message" class="text-sm leading-7">Message</label>
<textarea id="message" name="message" <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> </div>
<div class="w-full p-2"> <div class="w-full p-2">
<button <Button text="Submit">
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>
</div> </div>
</div> </div>
</div> </div>

View File

@ -12,7 +12,6 @@ import Quicksort from './quicksort.svelte';
<Quicksort client:load/> <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. 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 used this demo as a way to learn how to visualize the quicksort algorithm.\
\ \

View File

@ -23,17 +23,17 @@
sketch = (p5) => { 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;
} }
p5.shuffle(data, true) p5.shuffle(data, true);
quicksort(data, 0, data.length - 1); quicksort(data, 0, data.length - 1);
animArray.push(new arrayFrame(data.toString(), null, null, null)); animArray.push(new arrayFrame(data.toString(), null, null, null));
//setup the canvas //setup the canvas
p5.createCanvas(sketchWidth,400); p5.createCanvas(sketchWidth, 250);
p5.frameRate(30); p5.frameRate(30);
} };
p5.draw = () => { p5.draw = () => {
if (playpause) { if (playpause) {
@ -43,30 +43,27 @@
drawFrame(frame); drawFrame(frame);
frame++; frame++;
} }
} else { } else {
drawFrame(frame); drawFrame(frame);
} }
} };
function drawFrame(index) { function drawFrame(index) {
let dataFrame = animArray[index]; let dataFrame = animArray[index];
p5.background(28); p5.clear();
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(barWidth*i+10,350, barWidth,-dataFrame.getArray()[i]); p5.rect(barWidth * i + 10, 230, barWidth, -dataFrame.getArray()[i]);
} }
} }
} };
}) });
/** /**
* Copied directly from original code * Copied directly from original code
@ -82,7 +79,7 @@
} }
//Pick a pivot point in the middle of the passed array. //Pick a pivot point in the middle of the passed array.
let mid = Math.floor(low + ((high-low) / 2)); let mid = Math.floor(low + (high - low) / 2);
let pivot = array[mid]; let pivot = array[mid];
let l = low; let l = low;
@ -135,7 +132,7 @@
this.getArray = function () { this.getArray = function () {
return this.arrayState.split(","); return this.arrayState.split(",");
} };
} }
function prevFrame() { function prevFrame() {
@ -157,39 +154,33 @@
} }
</script> </script>
<div bind:this={parentContainer} class="w-full rounded-xl"> <div bind:this={parentContainer} class="w-[90%] mx-auto rounded-xl border border-white">
<P5 {sketch} /> <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 class="flex items-center justify-center gap-8 rounded-xl pb-4">
<button on:click={prevFrame} class="h-[24px]"> <button on:click={prevFrame} class="h-[24px]">
<span class="material-symbols-outlined"> <span class="material-symbols-outlined">skip_previous</span>
skip_previous
</span>
</button> </button>
<button on:click={()=>{ <button
on:click={() => {
if (frame == animArray.length - 1) { if (frame == animArray.length - 1) {
reset(); reset();
} else { } else {
playpause = !playpause; playpause = !playpause;
} }
}} class="h-[24px]"> }}
class="h-[24px]"
>
{#if playpause} {#if playpause}
<span class="material-symbols-outlined"> <span class="material-symbols-outlined">pause</span>
pause
</span>
{:else if frame == animArray.length - 1} {:else if frame == animArray.length - 1}
<span class="material-symbols-outlined"> <span class="material-symbols-outlined">restart_alt</span>
restart_alt
</span>
{:else} {:else}
<span class="material-symbols-outlined"> <span class="material-symbols-outlined">play_arrow</span>
play_arrow
</span>
{/if} {/if}
</button> </button>
<button on:click={nextFrame} class="h-[24px]"> <button on:click={nextFrame} class="h-[24px]">
<span class="material-symbols-outlined"> <span class="material-symbols-outlined">skip_next</span>
skip_next
</span>
</button> </button>
</div> </div>
</div>

View File

@ -48,7 +48,7 @@
'text-valign' : 'center', 'text-valign' : 'center',
'shape': 'round-rectangle', 'shape': 'round-rectangle',
'width': '500px', 'width': '500px',
'height': '50px', 'height': '100px',
'background-color' : '#F8F9FA', 'background-color' : '#F8F9FA',
'border-color': '#000', 'border-color': '#000',
}, },
@ -66,7 +66,7 @@
name: "breadthfirst", name: "breadthfirst",
fit: true, // whether to fit the viewport to the graph 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) 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 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) 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) spacingFactor: 1, // positive spacing factor, larger => more space between nodes (N.B. n/a if causes overlap)

View File

@ -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" },
});
}