Reworks to project pages
Some checks failed
Build Site / Build-Site (18.x) (push) Failing after 1m33s
Some checks failed
Build Site / Build-Site (18.x) (push) Failing after 1m33s
This commit is contained in:
parent
ab16219f3b
commit
14c3460c11
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -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.\
|
||||
\
|
||||
|
||||
@ -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>
|
||||
@ -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)
|
||||
|
||||
7
src/pages/submitContact.js
Normal file
7
src/pages/submitContact.js
Normal 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" },
|
||||
});
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user