Merge Next into Master #1
@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<div class="w-full h-0.5 bg-base-100 rounded"></div>
|
|
||||||
3
src/components/Footer.astro
Normal file
3
src/components/Footer.astro
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<footer>
|
||||||
|
<p class="text-center text-sm">© 2022 Thomas Cole</p>
|
||||||
|
</footer>
|
||||||
1
src/components/misc/Divider.astro
Normal file
1
src/components/misc/Divider.astro
Normal file
@ -0,0 +1 @@
|
|||||||
|
<div class="w-full h-0.5 rounded divider"></div>
|
||||||
44
src/components/misc/ThemeToggle.astro
Normal file
44
src/components/misc/ThemeToggle.astro
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
<!-- Could be remade as svelte component.
|
||||||
|
For the 3 lines of javascript needed I think its okay to use a script tag -->
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#themetoggle~.dot {
|
||||||
|
background-color: #e2e2e2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#themetoggle:checked~.dot {
|
||||||
|
transform: translateX(100%);
|
||||||
|
background-color: #202020;
|
||||||
|
}
|
||||||
|
|
||||||
|
#themetoggle~.capsule {
|
||||||
|
background-color: #181a2a;
|
||||||
|
}
|
||||||
|
|
||||||
|
#themetoggle:checked~.capsule {
|
||||||
|
background-color: #cecece;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let theme = localStorage.getItem("theme");
|
||||||
|
if (theme == "business") {
|
||||||
|
document.getElementById("themetoggle").checked = true;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-center w-full">
|
||||||
|
<span class="material-symbols-outlined mx-2">
|
||||||
|
light_mode
|
||||||
|
</span>
|
||||||
|
<label for="themetoggle" class="flex items-center cursor-pointer">
|
||||||
|
<div class="relative">
|
||||||
|
<input type="checkbox" id="themetoggle" class="sr-only" data-toggle-theme="business,corporate">
|
||||||
|
<div class="capsule block w-14 h-8 rounded-full"></div>
|
||||||
|
<div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition"></div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
<span class="material-symbols-outlined mx-2">
|
||||||
|
nightlight
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
@ -1,5 +1,7 @@
|
|||||||
---
|
---
|
||||||
import Divider from "./Divider.astro";
|
import Divider from "../misc/Divider.astro";
|
||||||
|
import SocialLinks from "./SocialLinks.astro";
|
||||||
|
import ThemeToggle from "../misc/ThemeToggle.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="fixed top-0 left-0 w-72 h-screen p-4 flex flex-col bg-base-200">
|
<div class="fixed top-0 left-0 w-72 h-screen p-4 flex flex-col bg-base-200">
|
||||||
@ -11,30 +13,34 @@
|
|||||||
</a>
|
</a>
|
||||||
|
|
||||||
<p class="text-2xl">Thomas Cole</p>
|
<p class="text-2xl">Thomas Cole</p>
|
||||||
<p>Some flavor text</p>
|
<p class="font-thin text-sm">Developer, Linux Enthusiast, System Administrator</p>
|
||||||
|
|
||||||
|
<SocialLinks />
|
||||||
<Divider />
|
<Divider />
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li class="flex">
|
<li class="flex">
|
||||||
<a href="/" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-300">
|
<a href="/" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
|
||||||
<button class="p-2">Home</button>
|
<button class="p-2">Home</button>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="flex">
|
<li class="flex">
|
||||||
<a href="/" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-300">
|
<a href="/" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
|
||||||
<button class="p-2">Projects</button>
|
<button class="p-2">Projects</button>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="flex">
|
<li class="flex">
|
||||||
<a href="/" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-300">
|
<a href="/resume" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
|
||||||
<button class="p-2">Home</button>
|
<button class="p-2">Resume/CV</button>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="flex">
|
||||||
|
<a href="/" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
|
||||||
|
<button class="p-2">Contact</button>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<button data-set-theme="corprate">Light</button>
|
<Divider />
|
||||||
<button data-set-theme="business">Dark</button>
|
<ThemeToggle />
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
37
src/components/nav/SocialLinks.astro
Normal file
37
src/components/nav/SocialLinks.astro
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
<div class="flex place-content-center mt-4">
|
||||||
|
<a class="mx-2" href="https://git.thomaspcole.com/thomascole">
|
||||||
|
<svg class="inline-block w-7 h-7 transition ease-in-out hover:scale-125" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
version="1.1" id="main_outline" viewBox="0 0 640 640" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<path id="teabag" class="fill-none"
|
||||||
|
d="M395.9,484.2l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5,21.2-17.9,33.8-11.8 c17.2,8.3,27.1,13,27.1,13l-0.1-109.2l16.7-0.1l0.1,117.1c0,0,57.4,24.2,83.1,40.1c3.7,2.3,10.2,6.8,12.9,14.4 c2.1,6.1,2,13.1-1,19.3l-61,126.9C423.6,484.9,408.4,490.3,395.9,484.2z" />
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path class="fill-current"
|
||||||
|
d="M622.7,149.8c-4.1-4.1-9.6-4-9.6-4s-117.2,6.6-177.9,8c-13.3,0.3-26.5,0.6-39.6,0.7c0,39.1,0,78.2,0,117.2 c-5.5-2.6-11.1-5.3-16.6-7.9c0-36.4-0.1-109.2-0.1-109.2c-29,0.4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5 c-9.8-0.6-22.5-2.1-39,1.5c-8.7,1.8-33.5,7.4-53.8,26.9C-4.9,212.4,6.6,276.2,8,285.8c1.7,11.7,6.9,44.2,31.7,72.5 c45.8,56.1,144.4,54.8,144.4,54.8s12.1,28.9,30.6,55.5c25,33.1,50.7,58.9,75.7,62c63,0,188.9-0.1,188.9-0.1s12,0.1,28.3-10.3 c14-8.5,26.5-23.4,26.5-23.4s12.9-13.8,30.9-45.3c5.5-9.7,10.1-19.1,14.1-28c0,0,55.2-117.1,55.2-231.1 C633.2,157.9,624.7,151.8,622.7,149.8z M125.6,353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6,321.8,60,295.4 c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5,38.5-30c13.8-3.7,31-3.1,31-3.1s7.1,59.4,15.7,94.2c7.2,29.2,24.8,77.7,24.8,77.7 S142.5,359.9,125.6,353.9z M425.9,461.5c0,0-6.1,14.5-19.6,15.4c-5.8,0.4-10.3-1.2-10.3-1.2s-0.3-0.1-5.3-2.1l-112.9-55 c0,0-10.9-5.7-12.8-15.6c-2.2-8.1,2.7-18.1,2.7-18.1L322,273c0,0,4.8-9.7,12.2-13c0.6-0.3,2.3-1,4.5-1.5c8.1-2.1,18,2.8,18,2.8 l110.7,53.7c0,0,12.6,5.7,15.3,16.2c1.9,7.4-0.5,14-1.8,17.2C474.6,363.8,425.9,461.5,425.9,461.5z" />
|
||||||
|
<path class="fill-current"
|
||||||
|
d="M326.8,380.1c-8.2,0.1-15.4,5.8-17.3,13.8c-1.9,8,2,16.3,9.1,20c7.7,4,17.5,1.8,22.7-5.4 c5.1-7.1,4.3-16.9-1.8-23.1l24-49.1c1.5,0.1,3.7,0.2,6.2-0.5c4.1-0.9,7.1-3.6,7.1-3.6c4.2,1.8,8.6,3.8,13.2,6.1 c4.8,2.4,9.3,4.9,13.4,7.3c0.9,0.5,1.8,1.1,2.8,1.9c1.6,1.3,3.4,3.1,4.7,5.5c1.9,5.5-1.9,14.9-1.9,14.9 c-2.3,7.6-18.4,40.6-18.4,40.6c-8.1-0.2-15.3,5-17.7,12.5c-2.6,8.1,1.1,17.3,8.9,21.3c7.8,4,17.4,1.7,22.5-5.3 c5-6.8,4.6-16.3-1.1-22.6c1.9-3.7,3.7-7.4,5.6-11.3c5-10.4,13.5-30.4,13.5-30.4c0.9-1.7,5.7-10.3,2.7-21.3 c-2.5-11.4-12.6-16.7-12.6-16.7c-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3c4.7-9.7,9.4-19.3,14.1-29 c-4.1-2-8.1-4-12.2-6.1c-4.8,9.8-9.7,19.7-14.5,29.5c-6.7-0.1-12.9,3.5-16.1,9.4c-3.4,6.3-2.7,14.1,1.9,19.8 C343.2,346.5,335,363.3,326.8,380.1z" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a class="mx-2" href="https://github.com/thomaspcole">
|
||||||
|
<svg class="inline-block w-6 h-6 fill-current transition ease-in-out hover:scale-125" viewBox="0 0 96 98" 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="mx-2" href="https://www.linkedin.com/in/thomaspcole">
|
||||||
|
<svg class="inline-block w-6 h-6 fill-current transition ease-in-out hover:scale-125" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 455 455"
|
||||||
|
style="enable-background:new 0 0 455 455;" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<path style="fill-rule:evenodd;clip-rule:evenodd;"
|
||||||
|
d="M246.4,204.35v-0.665c-0.136,0.223-0.324,0.446-0.442,0.665H246.4z" />
|
||||||
|
<path style="fill-rule:evenodd;clip-rule:evenodd;"
|
||||||
|
d="M0,0v455h455V0H0z M141.522,378.002H74.016V174.906h67.506V378.002z M107.769,147.186h-0.446C84.678,147.186,70,131.585,70,112.085c0-19.928,15.107-35.087,38.211-35.087 c23.109,0,37.31,15.159,37.752,35.087C145.963,131.585,131.32,147.186,107.769,147.186z M385,378.002h-67.524V269.345 c0-27.291-9.756-45.92-34.195-45.92c-18.664,0-29.755,12.543-34.641,24.693c-1.776,4.34-2.24,10.373-2.24,16.459v113.426h-67.537 c0,0,0.905-184.043,0-203.096H246.4v28.779c8.973-13.807,24.986-33.547,60.856-33.547c44.437,0,77.744,29.02,77.744,91.398V378.002 z" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
16
src/components/resume/Timeline.astro
Normal file
16
src/components/resume/Timeline.astro
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
---
|
||||||
|
export interface Props{
|
||||||
|
title: string,
|
||||||
|
subtitle: string,
|
||||||
|
description?: string,
|
||||||
|
}
|
||||||
|
|
||||||
|
const {title, subtitle, description} = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="flex">
|
||||||
|
<div class="timeline_line">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
@ -1,9 +1,10 @@
|
|||||||
---
|
---
|
||||||
export interface Props {
|
export interface Props {
|
||||||
title: string;
|
title?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
import Nav from '../components/Nav.astro'
|
import Nav from '../components/nav/Nav.astro';
|
||||||
|
import Footer from '../components/Footer.astro';
|
||||||
|
|
||||||
const { title } = Astro.props;
|
const { title } = Astro.props;
|
||||||
---
|
---
|
||||||
@ -16,7 +17,7 @@
|
|||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<meta name="generator" content={Astro.generator} />
|
<meta name="generator" content={Astro.generator} />
|
||||||
<title>{title}</title>
|
<title>thomaspcole.com {title}</title>
|
||||||
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
@ -51,6 +52,7 @@
|
|||||||
<Nav />
|
<Nav />
|
||||||
<div class="ml-72">
|
<div class="ml-72">
|
||||||
<slot />
|
<slot />
|
||||||
|
<Footer/>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
@ -2,8 +2,18 @@
|
|||||||
import Layout from '../layouts/Layout.astro';
|
import Layout from '../layouts/Layout.astro';
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Thomas Cole">
|
<Layout>
|
||||||
<main class="flex flex-col m-4">
|
<main class="flex flex-col m-6">
|
||||||
<p class="text-white">Hello world</p>
|
<section>
|
||||||
|
<p class="text-xl py-1">Hello World 👋</p>
|
||||||
|
<p>I'm glad you are here!</p>
|
||||||
|
<p class="font-thin">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed natus ullam perferendis expedita quas deleniti consectetur dolorum, non explicabo neque deserunt architecto minus consequuntur accusantium optio ratione eveniet dignissimos nihil.</p>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<p class="text-4xl font-bold py-2">Latest Projects</p>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<p class="text-4xl font-bold py-2">Latest Blog Posts</p>
|
||||||
|
</section>
|
||||||
</main>
|
</main>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|||||||
6
src/pages/resume.astro
Normal file
6
src/pages/resume.astro
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
---
|
||||||
|
import Layout from "../layouts/Layout.astro";
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout title={" | Resume"}>
|
||||||
|
</Layout>
|
||||||
Loading…
Reference in New Issue
Block a user