This commit is contained in:
parent
1f00bfa07b
commit
7ffc4f518b
@ -1,7 +1,7 @@
|
||||
{
|
||||
"particles": {
|
||||
"number": {
|
||||
"value": 80,
|
||||
"value": 100,
|
||||
"density": {
|
||||
"enable": true,
|
||||
"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">
|
||||
<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>
|
||||
@ -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>
|
||||
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;
|
||||
}
|
||||
|
||||
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>
|
||||
@ -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"
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
@ -6,6 +6,9 @@ module.exports = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#294861',
|
||||
},
|
||||
fontFamily: {
|
||||
'sans': ['Open Sans', defaultTheme.fontFamily.sans],
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user