Tweaks and added github actions

.drone.yml

@@ -1,28 +0,0 @@
-kind: pipeline
-name: buildsite
-
-steps:
-- name: build
-  image: node
-  commands:
-  - npm install
-  - npm run build
-  when:
-    branch:
-      - master
-
-- name: copy
-  image: appleboy/drone-scp
-  settings:
-    host: 192.168.10.5
-    username: thomas
-    password: 
-      from_secret: ssh_password
-    port: 22
-    target: /home/thomas/swag/www
-    source: ./dist/*
-    strip_components: 1
-  when:
-    branch:
-      - master
-

.gitea/workflows/build.yaml

@@ -0,0 +1,7 @@
+name: Build Site
+run-name: ${{ github.actor }} is building Personal Site
+jobs: 
+  Build-Site:
+    runs-on: ubuntu-latest
+    steps: 
+      - run: echo "Starting build job"

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) <year> <copyright holders>
+Copyright (c) 2023 Thomas Cole
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package.json

@@ -19,7 +19,7 @@
     "daisyui": "^2.45.0",
     "p5-svelte": "^3.1.2",
     "svelte": "^3.55.0",
-    "tailwindcss": "^3.2.4",
+    "tailwindcss": "^3.3.1",
     "theme-change": "^2.2.0"
   }
 }

src/components/Footer.astro

@@ -1,3 +1,3 @@
 <footer class="p-4">
-    <p class="text-center text-sm">&copy; 2023 Thomas Cole</p>
+    <p class="text-center text-sm">&copy; 2023 Thomas Cole.</p>
 </footer>

src/components/misc/BlogProjectCard.astro

@@ -10,10 +10,10 @@ const { title, subtitle, image, link } = Astro.props;
 ---
 
 
-<div class="rounded-lg  transition ease-in-out hover:scale-105">
+<div class="rounded-lg transition ease-in-out hover:scale-105">
     <a href={link}>
-        <div class="ml-2 my-2 flex flex-col sm:flex-col md:flex-col lg:flex-row xl:flex-row 2xl:flex-row w-11/12 mx-auto">
+        <div class="my-2 flex flex-col sm:flex-col md:flex-col lg:flex-row xl:flex-row 2xl:flex-row w-11/12 mx-auto">
-            <img class="h-28 my-2 aspect-video object-cover rounded-lg" src={image} alt="">
+            <img class="h-44 lg:h-28 xl:h-28 my-2 aspect-video object-cover rounded-lg" src={image} alt="">
             <div class="lg:ml-4 xl:ml-4 2xl:ml-4 grow">
                 <p class="mt-2 font-semibold text-2xl py-2 sm:text-2xl md:text-2xl lg:text-3xl xl:text-3xl 2xl:text-3xl">{title}</p>
                 <p>{subtitle}</p>

src/components/nav/Nav.astro

@@ -1,7 +1,17 @@
 ---
+    export interface Props {
+		pageName?: string;
+	}
+
     import Divider from "../misc/Divider.astro";
     import SocialLinks from "./SocialLinks.astro";
     import ThemeToggle from "../misc/ThemeToggle.astro";
+
+    const { pageName } = Astro.props;
+    let displayedName = "";
+    if(pageName){
+        displayedName = pageName.replace("|","").trim();
+    }
 ---
 
 <style>
@@ -11,23 +21,20 @@
 </style>
 
 <div id="menu" data-shown=""
-    class="fixed top-0 left-0 w-72 h-screen p-4 flex flex-col bg-base-200 -translate-x-full sm:-translate-x-full md:-translate-x-full lg:translate-x-0 xl:translate-x-0 2xl: transition-all duration-100 z-50">
+    class="fixed top-0 left-0 w-72 h-screen p-4 flex flex-col bg-base-200 -translate-x-full lg:translate-x-0 xl:translate-x-0 transition-all duration-100 z-50">
 
-    <button id="menu-close" class="absolute top-0 right-0 p-2 lg:hidden 2xl:hidden">
+    <button id="menu-close" class="absolute top-0 right-0 p-2 lg:hidden">
         <span class="material-symbols-outlined">
             close
         </span>
     </button>
 
     <a href="/">
-        <div class="transition ease-in-out w-1/2 hover:scale-105 block mx-auto mt-3 mb-6">
+        <div class="transition ease-in-out w-1/2 hover:scale-105 block mx-auto mt-2 mb-2">
             <img class="rounded-full aspect-square w-full object-cover" src="/img/profile.jpg" alt="">
         </div>
     </a>
 
-    <p class="text-2xl">Thomas Cole</p>
-    <p class="font-thin text-sm">Developer, Linux Enthusiast, System Administrator</p>
-
     <SocialLinks />
     <Divider />
 
@@ -61,26 +68,33 @@
 </div>
 
 <div
-    class="h-12 w-full sm:block md:block lg:hidden xl:hidden 2xl:hidden block bg-base-200 text-left transition-all duration-100">
+    class="h-12 w-full flex lg:hidden xl:hidden bg-base-200 text-left transition-all duration-100">
-
+    <button id="menubtn" class="w-12 h-12">
-    <button id="menubtn" class="w-12 h-12 m-auto">
         <span class="material-symbols-outlined mt-1">
             menu
         </span>
     </button>
-
+    <p class="my-auto mx-auto -translate-x-1/2 font-semibold text-xl">{displayedName}</p>
 </div>
 
+<div id="draweroverlay" class="hidden fixed top-0 left-0 w-full h-[100vh] z-10 bg-black/50"/>
+
 <script is:inline>
     const btn = document.getElementById("menubtn");
     const menu = document.getElementById("menu");
     const closebtn = document.getElementById("menu-close")
+    const draweroverlay = document.getElementById("draweroverlay")
 
     btn.addEventListener('click', () => {
         menu.dataset.shown = "true";
+        draweroverlay.classList.remove("hidden");
     });
 
-    closebtn.addEventListener('click', () => {
+    closebtn.addEventListener('click', closeMenu);
+    draweroverlay.addEventListener('click', closeMenu);
+
+    function closeMenu(){
         menu.dataset.shown = "false";
-    })
+        draweroverlay.classList.add("hidden");
+    }
 </script>

src/layouts/Layout.astro

@@ -49,7 +49,7 @@
 </head>
 
 <body class="">
-	<Nav />
+	<Nav pageName={title} />
 	<div class="ml-0 sm:ml-0 md:ml-0 lg:ml-72 xl:ml-72 2xl:ml-72 flex flex-col min-h-[calc(100vh-48px)] lg:min-h-screen xl:min-h-screen">
 		<slot />
 		<div class="grow"></div>

src/pages/index.astro

@@ -15,12 +15,9 @@ const projects = (await Astro.glob("./projects/**/*.{md,mdx}")).sort(
 		<section>
 			<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 class="text-3xl font-semibold">I'm Thomas Cole</p>
-			<p>
+			<p class="font-thin">Web Developer, System Administrator, Network Engineer</p>
-				Feel free to stay as long as you like. There are cool projects to explore and more to come. Stay awesome and thanks for visiting!
-			</p>
 		</section>
 		<Divider/>
 		<section>

src/pages/projects/[page].astro

@@ -16,8 +16,8 @@
     const { page } = Astro.props;
 ---
 
-<Layout title=" | Blog">
+<Layout title=" | Projects">
-    <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">
+    <main class="w-full md:w-5/6 lg:w-4/5 xl:w-4/5 mx-auto mt-4">
         <div class="flex flex-col">
             {
             page.data.map((post: any) => (

src/pages/projects/sitemap/sitemapgraph.svelte

@@ -60,6 +60,8 @@
                 }
               }
             ],
+            userZoomingEnabled: false,
+            userPanningEnabled: false,
             layout: {
               name: "breadthfirst",
               fit: true, // whether to fit the viewport to the graph

src/pages/resume.astro

@@ -67,27 +67,26 @@
         </div>
 
         <p class="font-bold text-2xl py-6">Skills</p>
-        <ul class="list-disc sm:columns-2 md:columns-2 lg:columns-5 columns-2 mx-auto">
+        <div class="flex flex-wrap gap-2 mx-auto">
-            <li>HTML</li>
+            <div class="badge badge-lg">HTML</div>
-            <li>CSS</li>
+            <div class="badge badge-lg">CSS</div>
-            <li>JavaScript</li>
+            <div class="badge badge-lg">Javascript</div>
-            <li>Astro</li>
+            <div class="badge badge-lg">Astro</div>
-            <li>Svelte</li>
+            <div class="badge badge-lg">Svelte</div>
-            <li>Java</li>
+            <div class="badge badge-lg">Java</div>
-            <li>C#</li>
+            <div class="badge badge-lg">C#</div>
-            <li>Tailwind</li>
+            <div class="badge badge-lg">Tailwind</div>
-            <li>Python</li>
+            <div class="badge badge-lg">Python</div>
-            <li>MySQL</li>
+            <div class="badge badge-lg">SQL</div>
-            <li>Linux</li>
+            <div class="badge badge-lg">Linux</div>
-            <li>Bash</li>
+            <div class="badge badge-lg">Bash</div>
-            <li>Docker</li>
+            <div class="badge badge-lg">Docker</div>
-            <li>Mosyle MDM</li>
+            <div class="badge badge-lg">Active Directory</div>
-            <li>Windows Server</li>
+            <div class="badge badge-lg">Cisco IOS</div>
-            <li>Active Directory</li>
+            <div class="badge badge-lg">Unifi Networks</div>
-            <li>Cisco IOS</li>
+            <div class="badge badge-lg">3CX</div>
-            <li>Ubiquiti Unifi</li>
+            <div class="badge badge-lg">Mosyle MDM</div>
-            <li>3CX</li>
+        </div>
-        </ul>
         <Divider/>
     </main>
 </Layout>

tailwind.config.cjs

@@ -1,15 +1,14 @@
+const defaultTheme = require('tailwindcss/defaultTheme');
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
 	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
 	darkMode: ["class", "[data-theme]=business"],
 	theme: {
-		fontFamily: {
-			'sans': ['Open Sans', 'ui-sans-serif, system-ui', '-apple-system', 'BlinkMacSystemFont', "Segoe UI", 'Roboto', "Helvetica Neue", 'Arial', "Noto Sans", 'sans-serif', "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"],
-			'serif': ['ui-serif', 'Georgia', 'Cambria', "Times New Roman", 'Times', 'serif'],
-			'mono': ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', "Liberation Mono", "Courier New", 'monospace'],
-			'code': [],
-		},
 		extend: {
+			fontFamily: {
+				'sans': ['Open Sans', defaultTheme.fontFamily.sans],
+			},
 			keyframes: {
 				wiggle: {
 				  '0%, 100%': { transform: 'rotate(-5deg)' },