updated dependencies, tweaked things, added particles

astro.config.mjs

@@ -1,15 +1,7 @@
 import { defineConfig } from 'astro/config';
-
-// https://astro.build/config
 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
 import sitemap from "@astrojs/sitemap";
 
 // https://astro.build/config

package.json

@@ -11,15 +11,15 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/mdx": "^0.13.0",
+    "@astrojs/mdx": "^2.0.1",
-    "@astrojs/sitemap": "^1.2.2",
+    "@astrojs/sitemap": "^3.0.3",
-    "@astrojs/svelte": "^1.0.2",
+    "@astrojs/svelte": "^5.0.1",
-    "@astrojs/tailwind": "^2.1.3",
+    "@astrojs/tailwind": "^5.0.3",
-    "astro": "^1.6.15",
+    "astro": "^4.0.4",
     "cytoscape": "^3.23.0",
-    "daisyui": "^2.45.0",
+    "daisyui": "^4.4.19",
     "p5-svelte": "^3.1.2",
-    "svelte": "^3.55.0",
+    "svelte": "^4.2.8",
     "tailwindcss": "^3.3.1",
     "theme-change": "^2.2.0"
   },

public/particlesjs-config-dark.json

@@ -0,0 +1,102 @@
+{
+  "particles": {
+    "number": {
+      "value": 80,
+      "density": {
+        "enable": true,
+        "value_area": 800
+      }
+    },
+    "color": {
+      "value": "#ffffff"
+    },
+    "shape": {
+      "type": "circle",
+      "stroke": {
+        "width": 0,
+        "color": "#000000"
+      }
+    },
+    "opacity": {
+      "value": 0.5,
+      "random": false,
+      "anim": {
+        "enable": false,
+        "speed": 1,
+        "opacity_min": 0.1,
+        "sync": false
+      }
+    },
+    "size": {
+      "value": 3,
+      "random": true,
+      "anim": {
+        "enable": false,
+        "speed": 40,
+        "size_min": 0.1,
+        "sync": false
+      }
+    },
+    "line_linked": {
+      "enable": true,
+      "distance": 150,
+      "color": "#ffffff",
+      "opacity": 0.4,
+      "width": 1
+    },
+    "move": {
+      "enable": true,
+      "speed": 1,
+      "direction": "none",
+      "random": false,
+      "straight": false,
+      "out_mode": "out",
+      "bounce": false,
+      "attract": {
+        "enable": false,
+        "rotateX": 600,
+        "rotateY": 1200
+      }
+    }
+  },
+  "interactivity": {
+    "detect_on": "canvas",
+    "events": {
+      "onhover": {
+        "enable": false,
+        "mode": "repulse"
+      },
+      "onclick": {
+        "enable": false,
+        "mode": "push"
+      },
+      "resize": true
+    },
+    "modes": {
+      "grab": {
+        "distance": 400,
+        "line_linked": {
+          "opacity": 1
+        }
+      },
+      "bubble": {
+        "distance": 400,
+        "size": 40,
+        "duration": 2,
+        "opacity": 8,
+        "speed": 3
+      },
+      "repulse": {
+        "distance": 200,
+        "duration": 0.4
+      },
+      "push": {
+        "particles_nb": 4
+      },
+      "remove": {
+        "particles_nb": 2
+      }
+    }
+  },
+  "retina_detect": true
+}

public/particlesjs-config-light.json

@@ -0,0 +1,102 @@
+{
+  "particles": {
+    "number": {
+      "value": 80,
+      "density": {
+        "enable": true,
+        "value_area": 800
+      }
+    },
+    "color": {
+      "value": "#000000"
+    },
+    "shape": {
+      "type": "circle",
+      "stroke": {
+        "width": 0,
+        "color": "#ffffff"
+      }
+    },
+    "opacity": {
+      "value": 0.5,
+      "random": false,
+      "anim": {
+        "enable": false,
+        "speed": 1,
+        "opacity_min": 0.1,
+        "sync": false
+      }
+    },
+    "size": {
+      "value": 3,
+      "random": true,
+      "anim": {
+        "enable": false,
+        "speed": 40,
+        "size_min": 0.1,
+        "sync": false
+      }
+    },
+    "line_linked": {
+      "enable": true,
+      "distance": 150,
+      "color": "#000000",
+      "opacity": 0.4,
+      "width": 1
+    },
+    "move": {
+      "enable": true,
+      "speed": 1,
+      "direction": "none",
+      "random": false,
+      "straight": false,
+      "out_mode": "out",
+      "bounce": false,
+      "attract": {
+        "enable": false,
+        "rotateX": 600,
+        "rotateY": 1200
+      }
+    }
+  },
+  "interactivity": {
+    "detect_on": "canvas",
+    "events": {
+      "onhover": {
+        "enable": false,
+        "mode": "repulse"
+      },
+      "onclick": {
+        "enable": false,
+        "mode": "push"
+      },
+      "resize": true
+    },
+    "modes": {
+      "grab": {
+        "distance": 400,
+        "line_linked": {
+          "opacity": 1
+        }
+      },
+      "bubble": {
+        "distance": 400,
+        "size": 40,
+        "duration": 2,
+        "opacity": 8,
+        "speed": 3
+      },
+      "repulse": {
+        "distance": 200,
+        "duration": 0.4
+      },
+      "push": {
+        "particles_nb": 4
+      },
+      "remove": {
+        "particles_nb": 2
+      }
+    }
+  },
+  "retina_detect": true
+}

src/components/Footer.astro

@@ -3,7 +3,7 @@
 
 ---
 
-<footer class="text-gray-600 dark:text-gray-400 body-font">
+<footer class="z-10 text-gray-600 dark:text-gray-400 body-font">
     <div class="container flex flex-col items-center px-5 py-8 mx-auto place-content-center sm:flex-row">
         <p class="mt-4 text-sm text-gray-500 align-middle dark:text-gray-400">© 2023
             Thomas Cole</p>

src/components/Particles.astro

@@ -0,0 +1,36 @@
+<style lang="scss">
+    #pjs {
+        position: fixed;
+        width: 100%;
+        height: 100vh;
+        z-index: 0;
+        animation: fadein .5s;
+    }
+
+    @keyframes fadein {
+        from {
+            opacity: 0;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
+</style>
+<script is:inline src="/particles.min.js" />
+<div id="pjs"></div>
+<script>
+    function loadParticles(){
+        if (localStorage.theme === 'dark') {
+            particlesJS.load('pjs', '/particlesjs-config-dark.json');
+        } else {
+            particlesJS.load('pjs', '/particlesjs-config-light.json');
+        }
+    }
+
+    window.addEventListener("themeupdate", ()=>{
+        loadParticles();
+    })
+
+    loadParticles();
+</script>

src/components/misc/BlogProjectCard.astro

@@ -12,7 +12,7 @@
 ---
 
 <div class="p-4 md:w-1/3">
-    <div class="h-full overflow-hidden border-2 border-gray-200 rounded-lg dark:border-gray-800 dark:bg-gray-800 border-opacity-60">
+    <div class="h-full overflow-hidden border-2 border-gray-200 rounded-lg border-opacity-60 dark:border-gray-800 dark:bg-gray-800">
         <img class="object-cover object-center w-full lg:h-48 md:h-36" src={image} alt="blog" draggable="false">
         <div class="p-6">
             <h2 class="mb-1 text-xs font-medium tracking-widest text-gray-400 dark:text-gray-500 title-font">{category}</h2>

src/components/nav/Nav.astro

@@ -12,7 +12,7 @@
   }
 ---
 
-<header class="text-gray-600 dark:text-gray-400 body-font">
+<header class="z-10 text-gray-600 dark:text-gray-400 body-font">
   <div class="container flex flex-col flex-wrap items-center p-5 mx-auto md:flex-row">
     <a href="/" class="flex items-center mb-4 font-medium text-gray-900 title-font dark:text-white md:mb-0">
       <!-- <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 p-2 text-white bg-indigo-500 rounded-full" viewBox="0 0 24 24">

src/layouts/InteractiveDemoLayout.astro

@@ -5,7 +5,7 @@
 ---
 
 <Layout>
-    <main class="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">
+    <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">
         <div class="relative mb-4">
             <img class="object-cover aspect-video rounded-xl max-h-[50vh] w-full" src={frontmatter.image} alt=""
                 draggable="false" />
@@ -42,6 +42,7 @@
                 --tw-prose-th-borders: #d1d5db !important;
                 --tw-prose-td-borders: #e5e7eb !important;
             }
+            
         </style>
         <article id="article" class="max-w-full prose dark:prose-invert prose-light">
             <slot />

src/layouts/Layout.astro

@@ -5,6 +5,7 @@
 
 	import Nav from '../components/nav/Nav.astro';
 	import Footer from '../components/Footer.astro';
+	import Particles from '../components/Particles.astro';
 
 	const { title } = Astro.props;
 ---
@@ -36,8 +37,8 @@
 		}
 	</style>
 	<script is:inline>
-		if(!('theme' in localStorage)){
+		if (!('theme' in localStorage)) {
-			localStorage.setItem("theme", "light")
+			localStorage.setItem("theme", "dark")
 		}
 
 		if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
@@ -49,6 +50,7 @@
 </head>
 
 <body class="flex flex-col w-full h-full min-h-screen bg-white dark:bg-gray-900">
+	<Particles />
 	<Nav pageName={title} />
 	<slot />
 	<div class="grow"></div>

src/pages/about.astro

@@ -23,7 +23,7 @@
         }
     </style>
 
-    <main class="w-5/6 mx-auto text-gray-900 dark:text-white sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2">
+    <main class="z-10 w-5/6 mx-auto text-gray-900 dark:text-white sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2">
         <section class="text-gray-600 body-font">
 
         </section>

src/pages/contact.astro

@@ -3,7 +3,7 @@
 ---
 
 <Layout title={" | Contact"}>
-    <section class="relative text-gray-600 body-font">
+    <section class="relative z-10 text-gray-600 body-font">
         <div class="container px-5 py-24 mx-auto">
             <div class="flex flex-col w-full text-center">
                 <h1 class="mb-4 text-2xl font-medium text-gray-900 sm:text-3xl title-font">Contact Me</h1>

src/pages/index.astro

@@ -1,15 +1,9 @@
 ---
 	import Layout from "../layouts/Layout.astro";
-
-	const projects = (await Astro.glob("./projects/**/*.{md,mdx}")).sort(
-		(a, b) =>
-			new Date(b.frontmatter.date).valueOf() -
-			new Date(a.frontmatter.date).valueOf()
-	).slice(0, 5);
 ---
 
 <Layout>
-	<main class="flex flex-col w-full h-full place-content-center m-6 mx-auto md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2">
+	<main class="z-10 flex flex-col w-full h-full m-6 mx-auto place-content-center md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2">
 		<section class="text-gray-600 dark:text-gray-400 body-font">
 			<div class="container flex flex-col items-center justify-center px-5 py-10 mx-auto">
 				<img class="object-cover object-center w-4/6 mb-10 rounded-full lg:w-2/6 md:w-3/6 aspect-square"

src/pages/projects/[page].astro

@@ -7,7 +7,7 @@
             (a, b) =>
                 new Date(b.frontmatter.date).valueOf() -
                 new Date(a.frontmatter.date).valueOf()
-        );
+        ).filter((record)=> record.frontmatter.active == true);
 
         return paginate(posts, { pageSize: 6 });
     }
@@ -16,7 +16,7 @@
 ---
 
 <Layout title=" | Projects">
-    <main class="w-full mx-auto mt-4 md:w-5/6 lg:w-4/5 xl:w-4/5">
+    <main class="z-10 w-full mx-auto mt-4 md:w-5/6 lg:w-4/5 xl:w-4/5">
         <section class="text-gray-600 dark:text-gray-400 body-font">
             <p class="px-5 text-2xl font-bold sm:text-2xl md:text-2xl lg:text-4xl xl:text-4xl 2xl:text-4xl">Latest
                 Projects</p>

src/pages/projects/digital-signage.mdx

@@ -6,6 +6,7 @@ date: "April 17, 2023"
 category: "Software"
 image: "https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
 imageattr: "https://unsplash.com/photos/TaCk3NspYe0"
+active: false
 ---
 
 ### Overview

src/pages/projects/pedalpi/pedal-pi.mdx

@@ -6,6 +6,7 @@ date: "May 15, 2023"
 category: "Hardware"
 image: "https://images.unsplash.com/photo-1511203438670-49f8ea8441c6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
 imageattr: "https://unsplash.com/photos/lEwyj4FiHHU"
+active: false
 ---
 
 import Audio from './audio.svelte';

src/pages/projects/quicksort/quicksort.mdx

@@ -6,6 +6,7 @@ date: "December 23, 2022"
 category: "Demo"
 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"
+active: true
 ---
 import Quicksort from './quicksort.svelte';
 

src/pages/projects/quicksort/quicksort.svelte

@@ -157,11 +157,11 @@
     }
 </script>
 
-<div bind:this={parentContainer} class="w-full">
+<div bind:this={parentContainer} class="w-full rounded-xl">
     <P5 {sketch}/>
 </div>
-<div class="flex justify-evenly mt-6 mb-4">
+<div class="flex items-center p-4 mt-6 mb-4 bg-gray-200 dark:bg-gray-800 justify-evenly rounded-xl">
-    <button on:click={prevFrame}>
+    <button on:click={prevFrame} class="h-[24px]">
         <span class="material-symbols-outlined">
             skip_previous
         </span>
@@ -172,7 +172,7 @@
         } else {
             playpause = !playpause;
         }
-    }}>
+    }}  class="h-[24px]">
     {#if playpause}
         <span class="material-symbols-outlined">
             pause
@@ -187,7 +187,7 @@
         </span>
     {/if}
     </button>
-    <button on:click={nextFrame}>
+    <button on:click={nextFrame} class="h-[24px]">
         <span class="material-symbols-outlined">
             skip_next
         </span>

src/pages/projects/resume-json.mdx

@@ -6,4 +6,5 @@ date: "August 06, 2023"
 category: "Software"
 image: "https://images.unsplash.com/photo-1602407294553-6ac9170b3ed0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1548&q=80"
 imageattr: "https://unsplash.com/photos/4YzrcDNcRVg"
+active: false
 ---

src/pages/projects/sitemap/sitemapgraph.mdx

@@ -6,6 +6,7 @@ date: "January 6, 2023"
 category: "Demo"
 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"
+active: true
 ---
 import Sitemapgraph from './sitemapgraph.svelte'
 

svelte.config.js

@@ -0,0 +1,5 @@
+import { vitePreprocess } from '@astrojs/svelte';
+
+export default {
+	preprocess: vitePreprocess(),
+};