Merge Next into Master #1

Merged
thomascole merged 20 commits from next into master 2023-04-13 12:21:08 -04:00
11 changed files with 318 additions and 57 deletions
Showing only changes of commit 85c3cfa778 - Show all commits

View File

@ -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()]
});

View File

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

View File

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

View File

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

View File

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

View File

@ -17,22 +17,16 @@ 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}
/>
<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 ? (
@ -47,8 +41,7 @@ const { page } = Astro.props;
)
}
<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}>
@ -62,4 +55,5 @@ const { page } = Astro.props;
)
}
</div>
</main>
</Layout>

View File

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

View File

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

View File

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

View File

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

View File

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