Re-ish design.
Some checks failed
Build Site / Build-Site (18.x) (push) Failing after 41s

This commit is contained in:
Thomas Cole 2024-01-14 15:10:41 -05:00
parent 1f00bfa07b
commit 7ffc4f518b
14 changed files with 91 additions and 238 deletions

View File

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

View File

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

View File

@ -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">
<p class="mt-4 text-sm text-gray-500 align-middle dark:text-gray-400">© 2023
<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">© 2024
Thomas Cole</p>
<SocialLinks />
</div>
</footer>

View File

@ -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();
particlesJS.load('pjs', '/particlesjs-config-dark.json');
</script>

View File

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

View File

@ -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="/about" class="mr-5 hover:text-gray-900 dark:hover:text-white">About</a>
<a href="/contact" class="mr-5 hover:text-gray-900 dark:hover:text-white">Contact</a>
<ThemeToggle/>
<a href="/" class="mr-5">Home</a>
<a href="/projects/1" class="mr-5">Projects</a>
<a href="/about" class="mr-5">About</a>
<a href="/contact" class="mr-5">Contact</a>
</nav>
</div>
</header>

View File

@ -1,5 +1,5 @@
<span class="inline-flex justify-center mt-4 sm:justify-start sm:ml-auto">
<a class="ml-3 text-gray-500 dark:text-gray-400" href="https://git.thomaspcole.com/thomascole">
<span class="flex justify-center gap-4 mt-2">
<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"

View File

@ -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="bg-indigo-500 block h-full w-[2px] translate-x-[7px]"></span>
<span class="block w-4 h-4 mt-2 bg-white rounded-full"></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>

View File

@ -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)) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
.bg-gradient {
background: hsla(205, 46%, 10%, 1);
background: linear-gradient(90deg, hsla(205, 46%, 10%, 1) 0%, hsla(191, 28%, 23%, 1) 50%, hsla(207, 41%, 27%, 1) 100%);
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>

View File

@ -1,49 +1,12 @@
<!DOCTYPE html>
<html lang="en">
---
import Layout from "../layouts/Layout.astro";
---
<head>
<meta charset="UTF-8" />
<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">
<Layout title=" | 404">
<main class="z-10 flex flex-col w-full text-center text-white mt-36 place-content-center">
<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>
</body>
</html>
</main>
</Layout>

View File

@ -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">
<section class="text-gray-600 body-font">
</section>
<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">
<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="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">
<div class="flex flex-col-reverse items-start justify-between 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
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
as PDF <span class="ml-2 material-symbols-outlined">
download
</span></a>
<div class="hidden sm:block">
<Button link="https://git.thomaspcole.com/attachments/9027185b-9841-4687-addd-0e5ba5eb0d1f" text="Download as PDF" icon="download"/>
</div>
</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>

View File

@ -3,32 +3,32 @@
---
<Layout title={" | Contact"}>
<section class="relative z-10 text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto">
<section class="relative z-10 text-white">
<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">

View File

@ -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">
<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"
alt="hero" src="/img/profile.jpg">
<div class="w-full text-center lg:w-5/6">
<h1
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">
Hello World!</h1>
<h1 class="mb-4 text-3xl font-medium text-gray-900 title-font sm:text-4xl dark:text-white">I'm Thomas Cole</h1>
<p class="mb-8 leading-relaxed">Web Developer, System Administrator, Network Engineer</p>
</div>
<main class="z-10">
<div class="flex flex-col w-[90%] mx-auto mt-24 text-center text-white lg:w-1/4">
<img class="object-cover w-40 mx-auto mb-2 rounded-full aspect-square drop-shadow-md" src="/img/profile.jpg" alt="profile_img">
<h1 class="mb-2 text-3xl font-bold drop-shadow-md title-font sm:text-4xl">Thomas Cole</h1>
<p class="mb-8 font-thin drop-shadow-md">Web Developer, System Administrator,<br/> and Network Engineer</p>
<div class="flex flex-col gap-4">
<Button text="Projects" link="/projects/1" width="w-1/2"/>
<Button text="About" link="/about" width="w-1/2"/>
<Button text="Contact" link="/contact" width="w-1/2"/>
<SocialLinks/>
</div>
</section>
</div>
</main>
</Layout>

View File

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