Re-ish design.

public/particlesjs-config-dark.json

@@ -1,7 +1,7 @@
 {
   "particles": {
     "number": {
-      "value": 80,
+      "value": 100,
       "density": {
         "enable": true,
         "value_area": 800

public/particlesjs-config-light.json

@@ -1,102 +0,0 @@
-{
-  "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

@@ -4,9 +4,8 @@
 ---
 
 <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">
+    <div class="container flex flex-col items-center px-5 pt-8 pb-2 mx-auto place-content-center sm:flex-row">
-        <p class="mt-4 text-sm text-gray-500 align-middle dark:text-gray-400">© 2023
+        <p class="mt-4 text-sm text-gray-500 align-middle dark:text-gray-400">© 2024
             Thomas Cole</p>
-        <SocialLinks />
     </div>
 </footer>

src/components/Particles.astro

@@ -20,17 +20,5 @@
 <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/Button.astro

@@ -0,0 +1,13 @@
+---
+    export interface Props {
+		text: string;
+        link: string;
+		width?: string;
+		icon?: string;
+	}
+
+	const { text, link, width, icon } = Astro.props;
+	let baseClass = "flex items-center p-2 mx-auto font-bold text-center text-white transition-all border-2 border-white rounded-md place-content-center hover:text-black hover:bg-white " + width;
+---
+
+<a class={baseClass} href={link}>{text}{icon && <span class="ml-2 material-symbols-outlined">{icon}</span>}</a>

src/components/nav/Nav.astro

@@ -3,8 +3,6 @@
     pageName?: string;
   }
 
-  import ThemeToggle from "../misc/ThemeToggle.astro";
-
   const { pageName } = Astro.props;
   let displayedName = "";
   if (pageName) {
@@ -12,20 +10,13 @@
   }
 ---
 
-<header class="z-10 text-gray-600 dark:text-gray-400 body-font">
+<header class="z-10 text-white">
   <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">
-        <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
-      </svg> -->
-      <img src="/icon-512-maskable.png" alt="TC" class="w-10 h-10 rounded-full">
-      <span class="ml-3 text-xl">thomaspcole.com</span>
-    </a>
     <nav class="flex flex-wrap items-center justify-center text-base md:ml-auto">
-      <a href="/projects/1" class="mr-5 hover:text-gray-900 dark:hover:text-white">Projects</a>
+      <a href="/" class="mr-5">Home</a>
-      <a href="/about" class="mr-5 hover:text-gray-900 dark:hover:text-white">About</a>
+      <a href="/projects/1" class="mr-5">Projects</a>
-      <a href="/contact" class="mr-5 hover:text-gray-900 dark:hover:text-white">Contact</a>
+      <a href="/about" class="mr-5">About</a>
-      <ThemeToggle/>
+      <a href="/contact" class="mr-5">Contact</a>
     </nav>
   </div>
 </header>

src/components/nav/SocialLinks.astro

@@ -1,5 +1,5 @@
-<span class="inline-flex justify-center mt-4 sm:justify-start sm:ml-auto">
+<span class="flex justify-center gap-4 mt-2">
-    <a class="ml-3 text-gray-500 dark:text-gray-400" href="https://git.thomaspcole.com/thomascole">
+    <a class="text-white" href="https://git.thomaspcole.com/thomascole">
         <svg class="w-5 h-5" id="main_outline" viewBox="0 0 640 550" xml:space="preserve" stroke="currentColor">
             <g>
                 <path id="teabag" class="fill-none"
@@ -15,14 +15,14 @@
             </g>
         </svg>
     </a>
-    <a class="ml-3 text-gray-500 dark:text-gray-400" href="https://github.com/thomaspcole">
+    <a class="text-white" href="https://github.com/thomaspcole">
         <svg class="w-5 h-5" viewBox="0 0 98 96" fill="currentColor" stroke="currentColor" stroke-linecap="round"
             stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
             <path fill-rule="evenodd" clip-rule="evenodd"
                 d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" />
         </svg>
     </a>
-    <a class="ml-3 text-gray-500 dark:text-gray-400" href="https://www.linkedin.com/in/thomaspcole">
+    <a class="text-white" href="https://www.linkedin.com/in/thomaspcole">
         <svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"
             class="w-5 h-5" viewBox="0 0 24 24">
             <path stroke="none"

src/components/resume/Timeline.astro

@@ -9,8 +9,8 @@ const { title, subtitle } = Astro.props;
 
 <div class="flex">
     <div>
-        <span class="block w-4 h-4 mt-2 bg-indigo-500 rounded-full"></span>
+        <span class="block w-4 h-4 mt-2 bg-white rounded-full"></span>
-        <span class="bg-indigo-500 block h-full w-[2px] translate-x-[7px]"></span>
+        <span class="bg-white block h-full w-[2px] translate-x-[7px]"></span>
     </div>
     <div class="px-5">
         <p class="text-xl font-semibold">{title}</p>

src/layouts/Layout.astro

@@ -1,17 +1,17 @@
 ---
-	export interface Props {
-		title?: string;
-	}
-
 	import Nav from '../components/nav/Nav.astro';
 	import Footer from '../components/Footer.astro';
 	import Particles from '../components/Particles.astro';
 
+	export interface Props {
+		title?: string;
+	}
+
 	const { title } = Astro.props;
 ---
 
 <!DOCTYPE html>
-<html lang="en" class="bg-gray-900">
+<html lang="en" class="light">
 
 <head>
 	<meta charset="UTF-8" />
@@ -35,26 +35,25 @@
 				'GRAD' 0,
 				'opsz' 48
 		}
-	</style>
-	<script is:inline>
-		if (!('theme' in localStorage)) {
-			localStorage.setItem("theme", "dark")
-		}
 
-		if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+		.bg-gradient {
-			document.documentElement.classList.add('dark')
+			background: hsla(205, 46%, 10%, 1);
-		} else {
+			background: linear-gradient(90deg, hsla(205, 46%, 10%, 1) 0%, hsla(191, 28%, 23%, 1) 50%, hsla(207, 41%, 27%, 1) 100%);
-			document.documentElement.classList.remove('dark')
+			background: -moz-linear-gradient(90deg, hsla(205, 46%, 10%, 1) 0%, hsla(191, 28%, 23%, 1) 50%, hsla(207, 41%, 27%, 1) 100%);
+			background: -webkit-linear-gradient(90deg, hsla(205, 46%, 10%, 1) 0%, hsla(191, 28%, 23%, 1) 50%, hsla(207, 41%, 27%, 1) 100%);
+			filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#0e1c26", endColorstr="#2a454b", GradientType=1);
 		}
-	</script>
+	</style>
 </head>
 
-<body class="flex flex-col w-full h-full min-h-screen bg-white dark:bg-gray-900">
+<body class="flex flex-col w-full h-full min-h-screen">
+	<div class="fixed top-0 left-0 w-full h-full min-h-screen bg-gradient"/>
 	<Particles />
-	<Nav pageName={title} />
+	<!-- <Nav pageName={title} /> -->
 	<slot />
 	<div class="grow"></div>
 	<Footer />
+	
 </body>
 
 </html>

src/pages/404.astro

@@ -1,49 +1,12 @@
-<!DOCTYPE html>
+---
-<html lang="en">
+    import Layout from "../layouts/Layout.astro";
+---
 
-<head>
+<Layout title=" | 404">
-    <meta charset="UTF-8" />
+    <main class="z-10 flex flex-col w-full text-center text-white mt-36 place-content-center">
-    <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href="/icon-512.png" />
-    <meta name="generator" content={Astro.generator} />
-    <title>thomaspcole.com | 404</title>
-
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link
-        href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
-        rel="stylesheet">
-    <link rel="stylesheet"
-        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
-    <style>
-        .material-symbols-outlined {
-            font-variation-settings:
-                'FILL' 0,
-                'wght' 400,
-                'GRAD' 0,
-                'opsz' 48
-        }
-    </style>
-    <script is:inline>
-        if (!('theme' in localStorage)) {
-            localStorage.setItem("theme", "light")
-        }
-
-        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-            document.documentElement.classList.add('dark')
-        } else {
-            document.documentElement.classList.remove('dark')
-        }
-    </script>
-</head>
-
-<body class="w-full h-screen bg-white dark:bg-gray-900">
-    <div class="flex flex-col w-full h-screen text-center text-gray-900 place-content-center dark:text-white">
         <h1 class="text-5xl">Uh Oh!</h1>
         <p class="text-2xl">Sorry about that I can't seem to find what you are looking for.</p>
         <br>
         <a href="/" class="underline">Go Home</a>
-    </div>
+    </main>
-</body>
+</Layout>
-
-</html>

src/pages/about.astro

@@ -1,6 +1,9 @@
 ---
     import Layout from "../layouts/Layout.astro";
     import Timeline from "../components/resume/Timeline.astro";	
+    import Nav from '../components/nav/Nav.astro';
+import Button from "../components/misc/Button.astro";
+
 
     const resumeRaw = await fetch('https://git.thomaspcole.com/thomascole/Resume/raw/branch/master/resume.json');
     const resume = await resumeRaw.json();
@@ -16,6 +19,7 @@
 ---
 
 <Layout title={" | Resume"}>
+    <Nav/>
 
     <style is:inline>
         .time-line-container>div:last-child>div:nth-child(1)>span:nth-child(2) {
@@ -23,20 +27,14 @@
         }
     </style>
 
-    <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">
+    <main class="z-10 w-full mx-auto 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 class="w-full h-full px-4 pt-2 bg-gray-500 sm:pt-0 rounded-xl bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-10">
-
+            <div class="container pb-6 mx-auto sm:pb-0">
-        </section>
+                <div class="flex flex-col-reverse items-start justify-between mx-auto sm:flex-row sm:items-center">
-
-        <section class="body-font">
-            <div class="container pt-6 pb-6 mx-auto sm:pb-0">
-                <div class="flex flex-col-reverse items-start mx-auto sm:flex-row sm:items-center">
                     <p class="py-0 mr-auto text-2xl font-bold sm:py-6">About Me</p>
-                    <a href="https://git.thomaspcole.com/attachments/9027185b-9841-4687-addd-0e5ba5eb0d1f" target="_blank" download
+                    <div class="hidden sm:block">
-                        class="flex items-center px-6 py-1 mb-6 ml-auto mr-auto text-lg text-white bg-indigo-500 border-0 rounded sm:mr-0 sm:mb-0 place-content-center sm:w-auto focus:outline-none hover:bg-indigo-600">Download
+                        <Button link="https://git.thomaspcole.com/attachments/9027185b-9841-4687-addd-0e5ba5eb0d1f" text="Download as PDF" icon="download"/>
-                        as PDF <span class="ml-2 material-symbols-outlined">
+                    </div>
-                            download
-                        </span></a>
                 </div>
             </div>
             <p>{resume.basics.summary}</p>
@@ -73,7 +71,7 @@
             <div class="flex flex-wrap gap-2 pb-4 mx-auto my-2">
                 {item.keywords.map((skill:any)=>
                 <div
-                    class="text-gray-600 bg-white border-gray-200 badge badge-lg dark:bg-gray-800 dark:border-gray-800 dark:text-gray-400">
+                    class="text-black bg-white border-gray-200 badge badge-lg">
                     {skill}</div>
                 )}
             </div>

src/pages/contact.astro

@@ -3,32 +3,32 @@
 ---
 
 <Layout title={" | Contact"}>
-    <section class="relative z-10 text-gray-600 body-font">
+    <section class="relative z-10 text-white">
-        <div class="container px-5 py-24 mx-auto">
+        <div class="container w-full h-full px-5 py-12 pt-0 mx-auto sm:pt-24 rounded-xl">
             <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>
+                <h1 class="mb-4 text-2xl font-medium sm:text-3xl">Contact Me</h1>
             </div>
             <div class="mx-auto lg:w-1/2 md:w-2/3">
                 <div class="flex flex-wrap -m-2">
                     <div class="w-1/2 p-2">
                         <div class="relative">
-                            <label for="name" class="text-sm leading-7 text-gray-600 dark:text-gray-400">Name</label>
+                            <label for="name" class="text-sm leading-7">Name</label>
                             <input type="text" id="name" name="name"
-                                class="w-full px-3 py-1 text-base leading-8 text-gray-700 transition-colors duration-200 ease-in-out bg-gray-100 bg-opacity-50 border border-gray-300 rounded outline-none dark:border-gray-700 dark:bg-gray-800 dark:focus:border-indigo-500 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 dark:focus:ring-indigo-500 dark:focus:bg-gray-900">
+                                class="w-full px-3 py-1 text-base leading-8 text-black transition-colors duration-200 ease-in-out bg-gray-300 rounded outline-none focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200">
                         </div>
                     </div>
                     <div class="w-1/2 p-2">
                         <div class="relative">
-                            <label for="email" class="text-sm leading-7 text-gray-600 dark:text-gray-400">Email</label>
+                            <label for="email" class="text-sm leading-7">Email</label>
                             <input type="email" id="email" name="email"
-                                class="w-full px-3 py-1 text-base leading-8 text-gray-700 transition-colors duration-200 ease-in-out bg-gray-100 bg-opacity-50 border border-gray-300 rounded outline-none focus:border-indigo-500 dark:border-gray-700 dark:focus:border-indigo-500 dark:bg-gray-800 focus:bg-white focus:ring-2 focus:ring-indigo-200 dark:focus:ring-indigo-500 dark:focus:bg-gray-900">
+                                class="w-full px-3 py-1 text-base leading-8 text-black transition-colors duration-200 ease-in-out bg-gray-300 rounded outline-none focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200">
                         </div>
                     </div>
                     <div class="w-full p-2">
                         <div class="relative">
-                            <label for="message" class="text-sm leading-7 text-gray-600 dark:text-gray-400">Message</label>
+                            <label for="message" class="text-sm leading-7">Message</label>
                             <textarea id="message" name="message"
-                                class="w-full h-32 px-3 py-1 text-base leading-6 text-gray-700 transition-colors duration-200 ease-in-out bg-gray-100 bg-opacity-50 border border-gray-300 rounded outline-none resize-none dark:border-gray-700 dark:focus:border-indigo-500 dark:bg-gray-800 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 dark:focus:ring-indigo-500 dark:focus:bg-gray-900"></textarea>
+                                class="w-full h-32 px-3 py-1 text-base leading-6 text-black transition-colors duration-200 ease-in-out bg-gray-300 rounded outline-none resize-none focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200"></textarea>
                         </div>
                     </div>
                     <div class="w-full p-2">

src/pages/index.astro

@@ -1,21 +1,22 @@
 ---
 	import Layout from "../layouts/Layout.astro";
+	import Button from "../components/misc/Button.astro";
+	import SocialLinks from "../components/nav/SocialLinks.astro";
 ---
 
 <Layout>
-	<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">
+	<main class="z-10">
-		<section class="text-gray-600 dark:text-gray-400 body-font">
+		<div class="flex flex-col w-[90%] mx-auto mt-24 text-center text-white lg:w-1/4">
-			<div class="container flex flex-col items-center justify-center px-5 py-10 mx-auto">
+			<img class="object-cover w-40 mx-auto mb-2 rounded-full aspect-square drop-shadow-md" src="/img/profile.jpg" alt="profile_img">
-				<img class="object-cover object-center w-4/6 mb-10 rounded-full lg:w-2/6 md:w-3/6 aspect-square"
+			<h1 class="mb-2 text-3xl font-bold drop-shadow-md title-font sm:text-4xl">Thomas Cole</h1>
-					alt="hero" src="/img/profile.jpg">
+			<p class="mb-8 font-thin drop-shadow-md">Web Developer, System Administrator,<br/> and Network Engineer</p>
-				<div class="w-full text-center lg:w-5/6">
+
-					<h1
+			<div class="flex flex-col gap-4">
-						class="w-full mb-4 text-4xl font-extrabold text-transparent title-font md:text-7xl lg:text-8xl whitespace-nowrap bg-clip-text bg-gradient-to-br from-blue-300 via-purple-600 to-red-600 animate-text">
+				<Button text="Projects" link="/projects/1" width="w-1/2"/>
-						Hello World!</h1>
+				<Button text="About" link="/about" width="w-1/2"/>
-					<h1 class="mb-4 text-3xl font-medium text-gray-900 title-font sm:text-4xl dark:text-white">I'm Thomas Cole</h1>
+				<Button text="Contact" link="/contact" width="w-1/2"/>
-					<p class="mb-8 leading-relaxed">Web Developer, System Administrator, Network Engineer</p>
+				<SocialLinks/>
 			</div>
 		</div>
-		</section>
 	</main>
 </Layout>

tailwind.config.cjs

@@ -6,6 +6,9 @@ module.exports = {
 	darkMode: 'class',
 	theme: {
 		extend: {
+			colors: {
+				primary: '#294861',
+			},
 			fontFamily: {
 				'sans': ['Open Sans', defaultTheme.fontFamily.sans],
 			},