thomascole/Personal-Site
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Started work on mobile friendly layout
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Thomas Cole 2022-12-23 09:34:59 -05:00
parent 85c3cfa778
commit f3d8a46795
9 changed files with 62 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/nav/Nav.astro
View File

@ -4,7 +4,20 @@
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">
<style>
[data-shown="true"] {
transform: translateX(0);
}
</style>
<div id="menu" data-shown=""
class="fixed top-0 left-0 w-72 h-screen p-4 flex flex-col bg-base-200 sm:-translate-x-full md:-translate-x-full lg:translate-x-0 xl:translate-x-0 2xl: 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">
<span class="material-symbols-outlined">
close
</span>
</button>
<a href="/">
<div class="transition ease-in-out w-1/2 hover:scale-105 block mx-auto mt-3 mb-6">
@ -40,7 +53,8 @@
</a>
</li>
<li class="flex">
<a href="mailto:thomas.patrick.cole@gmail.com" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
<a href="mailto:thomas.patrick.cole@gmail.com"
class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
<button class="p-2">Contact</button>
</a>
</li>
@ -48,4 +62,29 @@
<Divider />
<ThemeToggle />
</div>
</div>
<div
class="hidden h-12 w-full sm:block md:block lg:hidden xl:hidden 2xl:hidden bg-base-200 text-left transition-all duration-100">
<button id="menubtn" class="w-12 h-12 m-auto">
<span class="material-symbols-outlined mt-1">
menu
</span>
</button>
</div>
<script is:inline>
const btn = document.getElementById("menubtn");
const menu = document.getElementById("menu");
const closebtn = document.getElementById("menu-close")
btn.addEventListener('click', () => {
menu.dataset.shown = "true";
});
closebtn.addEventListener('click', () => {
menu.dataset.shown = "false";
})
</script>

2
src/layouts/BlogLayout.astro
View File

@ -6,7 +6,7 @@ const { frontmatter } = Astro.props;
---
<Layout>
<main class="w-1/2 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4 mb-6 flex flex-col justify-center">
<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 mb-6 flex flex-col justify-center">
<img class="aspect-video object-cover mb-4" src={frontmatter.image} alt="">
<p class="my-2 font-bold text-5xl">{frontmatter.title}</p>
<p>{frontmatter.date}</p>

2
src/layouts/InteractiveDemoLayout.astro
View File

@ -6,7 +6,7 @@ const { frontmatter } = Astro.props;
---
<Layout>
<main class="w-1/2 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4 mb-6 flex flex-col justify-center">
<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 mb-6 flex flex-col justify-center">
<img class="aspect-video object-cover mb-4" src={frontmatter.image} alt="">
<p class="my-2 font-bold text-5xl">{frontmatter.title}</p>
<p>{frontmatter.date}</p>

2
src/layouts/Layout.astro
View File

@ -50,7 +50,7 @@
<body class="">
<Nav />
<div class="ml-72">
<div class="ml-72 sm:ml-0 md:ml-0 lg:ml-72 xl:ml-72 2xl:ml-72">
<slot />
<Footer/>
</div>

2
src/pages/blog/[page].astro
View File

@ -17,7 +17,7 @@
---
<Layout title=" | Blog">
<main class="w-1/2 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4">
<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">
<div class="flex flex-col">
{
page.data.map((post: any) => (

2
src/pages/index.astro
View File

@ -18,7 +18,7 @@ const projects = (await Astro.glob("./projects/*.{md,mdx}")).sort(
---
<Layout>
<main class="flex flex-col m-6 w-1/2 mx-auto md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2">
<main class="flex flex-col m-6 w-1/2 mx-auto sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2">
<section>
<p class="text-xl py-1">Hello World 👋</p>
<p>I'm glad you are here!</p>

2
src/pages/projects/[page].astro
View File

@ -17,7 +17,7 @@
---
<Layout title=" | Blog">
<main class="w-1/2 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4">
<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">
<div class="flex flex-col">
{
page.data.map((post: any) => (

18
src/pages/projects/demo/quicksort.svelte
View File

@ -22,7 +22,15 @@
p5.shuffle(data, true)
quicksort(data, 0, data.length-1);
animArray.push(new arrayFrame(data.toString(), null, null, null));
p5.createCanvas(850,400)
//setup the canvas
let div = p5.createDiv('');
div.addClass('w-full');
div.addClass('mx-auto');
div.addClass('flex');
div.addClass('place-content-center');
let canvas = p5.createCanvas(600,400);
canvas.parent(div);
p5.frameRate(30);
}
@ -143,14 +151,14 @@
</script>
<P5 {sketch}/>
<div class="flex justify-evenly">
<button on:click={prevFrame}>Prev Frame</button>
<div class="flex justify-evenly mt-6">
<button on:click={prevFrame}>Prev Frame</button>
<button on:click={()=>(playpause = !playpause)}>
{#if playpause}
Pause
{:else}
Play
{/if}
</button>
</button>
<button on:click={nextFrame}>Next Frame</button>
</div>
</div>

2
src/pages/resume.astro
View File

@ -12,7 +12,7 @@
}
</style>
<main class="w-1/2 mx-auto md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2">
<main class="w-1/2 mx-auto sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2">
<p class="font-bold text-2xl py-6">About Me</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus esse inventore iusto earum asperiores necessitatibus, dolores id cumque nesciunt libero eligendi vel reprehenderit eius officia. Veritatis dolorum illum exercitationem suscipit.</p>