This commit is contained in:
parent
1f00bfa07b
commit
7ffc4f518b
@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"particles": {
|
"particles": {
|
||||||
"number": {
|
"number": {
|
||||||
"value": 80,
|
"value": 100,
|
||||||
"density": {
|
"density": {
|
||||||
"enable": true,
|
"enable": true,
|
||||||
"value_area": 800
|
"value_area": 800
|
||||||
|
|||||||
@ -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
|
|
||||||
}
|
|
||||||
@ -4,9 +4,8 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
<footer class="z-10 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">
|
<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>
|
Thomas Cole</p>
|
||||||
<SocialLinks />
|
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
@ -20,17 +20,5 @@
|
|||||||
<script is:inline src="/particles.min.js" />
|
<script is:inline src="/particles.min.js" />
|
||||||
<div id="pjs"></div>
|
<div id="pjs"></div>
|
||||||
<script>
|
<script>
|
||||||
function loadParticles(){
|
particlesJS.load('pjs', '/particlesjs-config-dark.json');
|
||||||
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>
|
</script>
|
||||||
13
src/components/misc/Button.astro
Normal file
13
src/components/misc/Button.astro
Normal 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>
|
||||||
@ -3,8 +3,6 @@
|
|||||||
pageName?: string;
|
pageName?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
import ThemeToggle from "../misc/ThemeToggle.astro";
|
|
||||||
|
|
||||||
const { pageName } = Astro.props;
|
const { pageName } = Astro.props;
|
||||||
let displayedName = "";
|
let displayedName = "";
|
||||||
if (pageName) {
|
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">
|
<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">
|
<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>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
@ -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">
|
<svg class="w-5 h-5" id="main_outline" viewBox="0 0 640 550" xml:space="preserve" stroke="currentColor">
|
||||||
<g>
|
<g>
|
||||||
<path id="teabag" class="fill-none"
|
<path id="teabag" class="fill-none"
|
||||||
@ -15,14 +15,14 @@
|
|||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</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"
|
<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">
|
stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
<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" />
|
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>
|
</svg>
|
||||||
</a>
|
</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"
|
<svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"
|
||||||
class="w-5 h-5" viewBox="0 0 24 24">
|
class="w-5 h-5" viewBox="0 0 24 24">
|
||||||
<path stroke="none"
|
<path stroke="none"
|
||||||
|
|||||||
@ -9,8 +9,8 @@ const { title, subtitle } = Astro.props;
|
|||||||
|
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<div>
|
<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>
|
||||||
<div class="px-5">
|
<div class="px-5">
|
||||||
<p class="text-xl font-semibold">{title}</p>
|
<p class="text-xl font-semibold">{title}</p>
|
||||||
|
|||||||
@ -1,17 +1,17 @@
|
|||||||
---
|
---
|
||||||
export interface Props {
|
|
||||||
title?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
import Nav from '../components/nav/Nav.astro';
|
import Nav from '../components/nav/Nav.astro';
|
||||||
import Footer from '../components/Footer.astro';
|
import Footer from '../components/Footer.astro';
|
||||||
import Particles from '../components/Particles.astro';
|
import Particles from '../components/Particles.astro';
|
||||||
|
|
||||||
|
export interface Props {
|
||||||
|
title?: string;
|
||||||
|
}
|
||||||
|
|
||||||
const { title } = Astro.props;
|
const { title } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" class="bg-gray-900">
|
<html lang="en" class="light">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
@ -35,26 +35,25 @@
|
|||||||
'GRAD' 0,
|
'GRAD' 0,
|
||||||
'opsz' 48
|
'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>
|
</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 />
|
<Particles />
|
||||||
<Nav pageName={title} />
|
<!-- <Nav pageName={title} /> -->
|
||||||
<slot />
|
<slot />
|
||||||
<div class="grow"></div>
|
<div class="grow"></div>
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@ -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>
|
<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>
|
<p class="text-2xl">Sorry about that I can't seem to find what you are looking for.</p>
|
||||||
<br>
|
<br>
|
||||||
<a href="/" class="underline">Go Home</a>
|
<a href="/" class="underline">Go Home</a>
|
||||||
</div>
|
</main>
|
||||||
</body>
|
</Layout>
|
||||||
|
|
||||||
</html>
|
|
||||||
@ -1,6 +1,9 @@
|
|||||||
---
|
---
|
||||||
import Layout from "../layouts/Layout.astro";
|
import Layout from "../layouts/Layout.astro";
|
||||||
import Timeline from "../components/resume/Timeline.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 resumeRaw = await fetch('https://git.thomaspcole.com/thomascole/Resume/raw/branch/master/resume.json');
|
||||||
const resume = await resumeRaw.json();
|
const resume = await resumeRaw.json();
|
||||||
@ -16,6 +19,7 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
<Layout title={" | Resume"}>
|
<Layout title={" | Resume"}>
|
||||||
|
<Nav/>
|
||||||
|
|
||||||
<style is:inline>
|
<style is:inline>
|
||||||
.time-line-container>div:last-child>div:nth-child(1)>span:nth-child(2) {
|
.time-line-container>div:last-child>div:nth-child(1)>span:nth-child(2) {
|
||||||
@ -23,20 +27,14 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</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>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<p>{resume.basics.summary}</p>
|
<p>{resume.basics.summary}</p>
|
||||||
@ -73,7 +71,7 @@
|
|||||||
<div class="flex flex-wrap gap-2 pb-4 mx-auto my-2">
|
<div class="flex flex-wrap gap-2 pb-4 mx-auto my-2">
|
||||||
{item.keywords.map((skill:any)=>
|
{item.keywords.map((skill:any)=>
|
||||||
<div
|
<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>
|
{skill}</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -3,32 +3,32 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
<Layout title={" | Contact"}>
|
<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">
|
<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>
|
||||||
<div class="mx-auto lg:w-1/2 md:w-2/3">
|
<div class="mx-auto lg:w-1/2 md:w-2/3">
|
||||||
<div class="flex flex-wrap -m-2">
|
<div class="flex flex-wrap -m-2">
|
||||||
<div class="w-1/2 p-2">
|
<div class="w-1/2 p-2">
|
||||||
<div class="relative">
|
<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"
|
<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>
|
</div>
|
||||||
<div class="w-1/2 p-2">
|
<div class="w-1/2 p-2">
|
||||||
<div class="relative">
|
<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"
|
<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>
|
</div>
|
||||||
<div class="w-full p-2">
|
<div class="w-full p-2">
|
||||||
<div class="relative">
|
<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"
|
<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>
|
</div>
|
||||||
<div class="w-full p-2">
|
<div class="w-full p-2">
|
||||||
|
|||||||
@ -1,21 +1,22 @@
|
|||||||
---
|
---
|
||||||
import Layout from "../layouts/Layout.astro";
|
import Layout from "../layouts/Layout.astro";
|
||||||
|
import Button from "../components/misc/Button.astro";
|
||||||
|
import SocialLinks from "../components/nav/SocialLinks.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout>
|
<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>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</Layout>
|
</Layout>
|
||||||
@ -6,6 +6,9 @@ module.exports = {
|
|||||||
darkMode: 'class',
|
darkMode: 'class',
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#294861',
|
||||||
|
},
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
'sans': ['Open Sans', defaultTheme.fontFamily.sans],
|
'sans': ['Open Sans', defaultTheme.fontFamily.sans],
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user