Tweaks and added github actions

This commit is contained in:
Thomas Cole 2023-04-13 12:04:57 -04:00
parent 3f29c20408
commit 94f114bb5c
14 changed files with 71 additions and 81 deletions

View File

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

View File

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

View File

@ -1,6 +1,6 @@
MIT License 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: 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:

View File

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

View File

@ -1,3 +1,3 @@
<footer class="p-4"> <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> </footer>

View File

@ -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}> <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"> <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 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> <p>{subtitle}</p>

View File

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

View File

@ -49,7 +49,7 @@
</head> </head>
<body class=""> <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"> <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 /> <slot />
<div class="grow"></div> <div class="grow"></div>

View File

@ -15,12 +15,9 @@ const projects = (await Astro.glob("./projects/**/*.{md,mdx}")).sort(
<section> <section>
<div class="flex flex-row"> <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 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> </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> </section>
<Divider/> <Divider/>
<section> <section>

View File

@ -16,8 +16,8 @@
const { page } = Astro.props; 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"> <div class="flex flex-col">
{ {
page.data.map((post: any) => ( page.data.map((post: any) => (

View File

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

View File

@ -67,27 +67,26 @@
</div> </div>
<p class="font-bold text-2xl py-6">Skills</p> <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/> <Divider/>
</main> </main>
</Layout> </Layout>

View File

@ -1,15 +1,14 @@
const defaultTheme = require('tailwindcss/defaultTheme');
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
darkMode: ["class", "[data-theme]=business"], darkMode: ["class", "[data-theme]=business"],
theme: { 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: { extend: {
fontFamily: {
'sans': ['Open Sans', defaultTheme.fontFamily.sans],
},
keyframes: { keyframes: {
wiggle: { wiggle: {
'0%, 100%': { transform: 'rotate(-5deg)' }, '0%, 100%': { transform: 'rotate(-5deg)' },