thomascole/Personal-Site
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Tweaked index. Added image attribution link in blog and project posts. Added link on hero images to attribution link.

Browse Source
This commit is contained in:
Thomas Cole 2023-01-06 11:05:44 -05:00
parent ed0d311326
commit a93fb4a98a
9 changed files with 63 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/layouts/BlogLayout.astro
View File

@ -6,11 +6,17 @@ const { frontmatter } = Astro.props;
---
<Layout>
<main class="w-1/2 sm:w-5/6 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="">
<main
class="w-1/2 sm:w-5/6 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">
<div class="relative mb-4">
<img class="aspect-video object-cover" src={frontmatter.image} alt=""/>
<a href={frontmatter.imageattr} class="absolute bottom-0 right-0 h-[24px]">
<span class="material-symbols-outlined opacity-25 mr-[4px]">link</span>
</a>
</div>
<p class="my-2 font-bold text-5xl">{frontmatter.title}</p>
<p>{frontmatter.date}</p>
<Divider/>
<Divider />
<slot />
</main>
</Layout>
</Layout>

7
src/layouts/InteractiveDemoLayout.astro
View File

@ -7,7 +7,12 @@ const { frontmatter } = Astro.props;
<Layout>
<main class="w-5/6 sm:w-5/6 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="">
<div class="relative mb-4">
<img class="aspect-video object-cover" src={frontmatter.image} alt="">
<a href={frontmatter.imageattr} class="absolute bottom-0 right-0 h-[24px]">
<span class="material-symbols-outlined opacity-25 mr-[4px]">link</span>
</a>
</div>
<p class="my-2 font-bold text-5xl">{frontmatter.title}</p>
<p>{frontmatter.date}</p>
<Divider/>

1
src/pages/blog/contentmanagement.md
View File

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

1
src/pages/blog/writingmarkdown.md
View File

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

16
src/pages/index.astro
View File

@ -20,16 +20,16 @@ const projects = (await Astro.glob("./projects/*.{md,mdx}")).sort(
<Layout>
<main class="flex flex-col m-6 mx-auto w-5/6 sm:w-5/6 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>
<p class="font-thin">
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.
<div class="flex flex-row">
<p class="text-5xl sm:text-5xl md:text-5xl lg:text-6xl py-1 font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-[#1f89db] to-[#f42a8b]">Hello World!</p>
<!-- <p class="text-5xl ml-1 animate-wiggle hover:animate-wiggle-infinite">👋</p> -->
</div>
<p class="text-3xl font-semibold">I'm glad you are here!</p>
<p>
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!
</p>
</section>
<Divider/>
<section>
<p class="text-2xl font-bold py-2 sm:text-2xl md:text-2xl lg:text-4xl xl:text-4xl 2xl:text-4xl">Latest Projects</p>
{

8
src/pages/projects/quicksort.mdx
View File

@ -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';
<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.

0
src/pages/projects/demo/quicksort.svelte → src/pages/projects/quicksort_extra/quicksort.svelte
View File

18
src/pages/projects/sitemapgraph.mdx Normal file
View File

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

18
tailwind.config.cjs
View File

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