From a93fb4a98a0735abc75179a55dc1c990614f1b7e Mon Sep 17 00:00:00 2001 From: Thomas Cole Date: Fri, 6 Jan 2023 11:05:44 -0500 Subject: [PATCH] Tweaked index. Added image attribution link in blog and project posts. Added link on hero images to attribution link. --- src/layouts/BlogLayout.astro | 14 ++++++++++---- src/layouts/InteractiveDemoLayout.astro | 7 ++++++- src/pages/blog/contentmanagement.md | 1 + src/pages/blog/writingmarkdown.md | 1 + src/pages/index.astro | 16 ++++++++-------- src/pages/projects/quicksort.mdx | 8 ++------ .../{demo => quicksort_extra}/quicksort.svelte | 0 src/pages/projects/sitemapgraph.mdx | 18 ++++++++++++++++++ tailwind.config.cjs | 18 +++++++++++++++++- 9 files changed, 63 insertions(+), 20 deletions(-) rename src/pages/projects/{demo => quicksort_extra}/quicksort.svelte (100%) create mode 100644 src/pages/projects/sitemapgraph.mdx diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro index 986b9b1..8f7e281 100644 --- a/src/layouts/BlogLayout.astro +++ b/src/layouts/BlogLayout.astro @@ -6,11 +6,17 @@ const { frontmatter } = Astro.props; --- -
- +
+
+ + + link + +

{frontmatter.title}

{frontmatter.date}

- +
- \ No newline at end of file + diff --git a/src/layouts/InteractiveDemoLayout.astro b/src/layouts/InteractiveDemoLayout.astro index 43cc8e4..2085268 100644 --- a/src/layouts/InteractiveDemoLayout.astro +++ b/src/layouts/InteractiveDemoLayout.astro @@ -7,7 +7,12 @@ const { frontmatter } = Astro.props;
- +
+ + + link + +

{frontmatter.title}

{frontmatter.date}

diff --git a/src/pages/blog/contentmanagement.md b/src/pages/blog/contentmanagement.md index 9514cd0..1566062 100644 --- a/src/pages/blog/contentmanagement.md +++ b/src/pages/blog/contentmanagement.md @@ -4,6 +4,7 @@ title: "Content Management vs Flat Files" tagline: "How posts are managed for this blog" date: "Jan 3 2023" image: "https://images.unsplash.com/photo-1569235186275-626cb53b83ce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1472&q=80" +imageattr: "https://unsplash.com/photos/Q9y3LRuuxmg" --- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. diff --git a/src/pages/blog/writingmarkdown.md b/src/pages/blog/writingmarkdown.md index 7c16ce9..b8e7e42 100644 --- a/src/pages/blog/writingmarkdown.md +++ b/src/pages/blog/writingmarkdown.md @@ -4,6 +4,7 @@ title: "Blogging for the non blogger" tagline: "Getting thoughts into markdown" date: "Jan 4 2023" image: "https://images.unsplash.com/photo-1524668951403-d44b28200ce0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80" +imageattr: "https://unsplash.com/photos/qFH7-yKoxik" --- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. diff --git a/src/pages/index.astro b/src/pages/index.astro index 8a156fe..7407410 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -20,16 +20,16 @@ const projects = (await Astro.glob("./projects/*.{md,mdx}")).sort(
-

Hello World 👋

-

I'm glad you are here!

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed - natus ullam perferendis expedita quas deleniti consectetur - dolorum, non explicabo neque deserunt architecto minus - consequuntur accusantium optio ratione eveniet dignissimos - nihil. +

+

Hello World!

+ +
+

I'm glad you are here!

+

+ Feel free to stay as long as you like. There are cool projects to explore and some mostly ok-ish blog posts. Stay awesome and thanks for visiting!

+

Latest Projects

{ diff --git a/src/pages/projects/quicksort.mdx b/src/pages/projects/quicksort.mdx index e2d2caf..0caabe1 100644 --- a/src/pages/projects/quicksort.mdx +++ b/src/pages/projects/quicksort.mdx @@ -4,15 +4,11 @@ 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" +imageattr: "https://unsplash.com/photos/5dgXQJ7ezuU" --- -{/* 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'; +import Quicksort from './quicksort_extra/quicksort.svelte'; - --- 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. diff --git a/src/pages/projects/demo/quicksort.svelte b/src/pages/projects/quicksort_extra/quicksort.svelte similarity index 100% rename from src/pages/projects/demo/quicksort.svelte rename to src/pages/projects/quicksort_extra/quicksort.svelte diff --git a/src/pages/projects/sitemapgraph.mdx b/src/pages/projects/sitemapgraph.mdx new file mode 100644 index 0000000..58d441d --- /dev/null +++ b/src/pages/projects/sitemapgraph.mdx @@ -0,0 +1,18 @@ +--- +layout: "../../layouts/InteractiveDemoLayout.astro" +title: "Visual Sitemap" +tagline: "Using d3.js to visualize all the pages of a website." +date: "January 6, 2023" +image: "https://images.unsplash.com/photo-1639322537228-f710d846310a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80" +imageattr: "https://unsplash.com/photos/T9rKvI3N0NM" +--- + + + +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. \ No newline at end of file diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 78cc216..79a881b 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -9,7 +9,23 @@ module.exports = { 'mono': ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', "Liberation Mono", "Courier New", 'monospace'], 'code': [], }, - extend: {}, + extend: { + keyframes: { + wiggle: { + '0%, 100%': { transform: 'rotate(-5deg)' }, + '50%': { transform: 'rotate(5deg)' }, + }, + 'bg-animate':{ + '0%,100%': {'background-position': '25% 50%'}, + '50%': {'background-position': '75% 50%'}, + } + }, + animation: { + 'wiggle-infinite': 'wiggle 1s ease-in-out infinite', + wiggle: 'wiggle 1s ease-in-out', + 'bg-animate': 'bg-animate 5s ease-in-out infinite', + } + }, }, plugins: [require("daisyui")], daisyui: {