Working on projects page.
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
Thomas Cole 2022-12-21 17:07:25 -05:00
parent 1d32f3239d
commit 85c3cfa778
11 changed files with 318 additions and 57 deletions

View File

@ -6,7 +6,10 @@ import tailwind from "@astrojs/tailwind";
// https://astro.build/config // https://astro.build/config
import svelte from "@astrojs/svelte"; import svelte from "@astrojs/svelte";
// https://astro.build/config
import mdx from "@astrojs/mdx";
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({
integrations: [tailwind(), svelte()] integrations: [tailwind(), svelte(), mdx()]
}); });

View File

@ -11,10 +11,12 @@
"astro": "astro" "astro": "astro"
}, },
"dependencies": { "dependencies": {
"@astrojs/mdx": "^0.13.0",
"@astrojs/svelte": "^1.0.2", "@astrojs/svelte": "^1.0.2",
"@astrojs/tailwind": "^2.1.3", "@astrojs/tailwind": "^2.1.3",
"astro": "^1.6.15", "astro": "^1.6.15",
"daisyui": "^2.45.0", "daisyui": "^2.45.0",
"p5-svelte": "^3.1.2",
"svelte": "^3.55.0", "svelte": "^3.55.0",
"tailwindcss": "^3.2.4", "tailwindcss": "^3.2.4",
"theme-change": "^2.2.0" "theme-change": "^2.2.0"

View File

@ -25,7 +25,7 @@
</a> </a>
</li> </li>
<li class="flex"> <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> <button class="p-2">Projects</button>
</a> </a>
</li> </li>
@ -40,7 +40,7 @@
</a> </a>
</li> </li>
<li class="flex"> <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> <button class="p-2">Contact</button>
</a> </a>
</li> </li>

View File

@ -6,7 +6,7 @@ const { frontmatter } = Astro.props;
--- ---
<Layout> <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=""> <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>

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"> <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) => ( page.data.map((post: any) => (
<> <BlogProjectCard title={post.frontmatter.title} subtitle={post.frontmatter.tagline}
<BlogProjectCard image={post.frontmatter.image} link={post.url} />
title={post.frontmatter.title}
subtitle={post.frontmatter.tagline}
image={post.frontmatter.image}
link={post.url}
/>
<Divider /> <Divider />
</>
)) ))
} }
</div> </div>
<div class="w-1/2 mx-auto flex justify-between"> <div class="w-1/2 mx-auto flex justify-between">
{ {
page.url.prev ? ( 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 ? ( page.url.next ? (
<a class="w-40 flex" href={page.url.next}> <a class="w-40 flex" href={page.url.next}>
@ -62,4 +55,5 @@ const { page } = Astro.props;
) )
} }
</div> </div>
</main>
</Layout> </Layout>

View File

@ -9,10 +9,16 @@ const posts = (await Astro.glob("./blog/*.{md,mdx}"))
new Date(b.frontmatter.date).valueOf() - new Date(b.frontmatter.date).valueOf() -
new Date(a.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> <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> <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>
@ -27,7 +33,7 @@ const posts = (await Astro.glob("./blog/*.{md,mdx}"))
<section> <section>
<p class="text-4xl font-bold py-2">Latest Projects</p> <p class="text-4xl font-bold py-2">Latest Projects</p>
{ {
posts.map((post) => ( projects.map((post) => (
<BlogProjectCard <BlogProjectCard
title={post.frontmatter.title} title={post.frontmatter.title}
subtitle={post.frontmatter.tagline} subtitle={post.frontmatter.tagline}
@ -40,6 +46,17 @@ const posts = (await Astro.glob("./blog/*.{md,mdx}"))
</section> </section>
<section> <section>
<p class="text-4xl font-bold py-2">Latest Blog Posts</p> <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> </section>
</main> </main>
</Layout> </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> </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 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 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>HTML</li>
<li>CSS</li> <li>CSS</li>
<li>JavaScript</li> <li>JavaScript</li>
@ -82,6 +82,7 @@
<li>Active Directory</li> <li>Active Directory</li>
<li>Cisco IOS</li> <li>Cisco IOS</li>
<li>Ubiquiti Unifi</li> <li>Ubiquiti Unifi</li>
<li>3CX</li>
</ul> </ul>
<Divider/> <Divider/>
</main> </main>