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

Refactor tailwind calsses with the headwind extension
All checks were successful
Build Site / Build-Site (18.x) (push) Successful in 49s
Details

Browse Source
This commit is contained in:
Thomas Cole 2023-07-30 08:17:02 -04:00
parent 664fe17610
commit 8c7cec7e7c
12 changed files with 50 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Footer.astro
View File

@ -1,3 +1,3 @@
<footer class="p-4">
<p class="text-center text-sm">&copy; 2023 Thomas Cole.</p>
<p class="text-sm text-center">&copy; 2023 Thomas Cole.</p>
</footer>

6
src/components/misc/BlogProjectCard.astro
View File

@ -12,10 +12,10 @@ const { title, subtitle, image, link } = Astro.props;
<div class="rounded-lg ">
<a href={link}>
<div class="my-2 flex flex-col sm:flex-col md:flex-col lg:flex-row xl:flex-row 2xl:flex-row w-11/12 mx-auto">
<img class="h-44 lg:h-28 xl:h-28 my-2 aspect-video object-cover rounded-lg" src={image} alt="" loading="lazy">
<div class="flex flex-col w-11/12 mx-auto my-2 sm:flex-col md:flex-col lg:flex-row xl:flex-row 2xl:flex-row">
<img class="object-cover my-2 rounded-lg h-44 lg:h-28 xl:h-28 aspect-video" src={image} alt="" loading="lazy">
<div class="lg:ml-4 xl:ml-4 2xl:ml-4 grow">
<p class="mt-2 font-semibold text-2xl py-2 sm:text-2xl md:text-2xl lg:text-3xl xl:text-3xl 2xl:text-3xl">{title}</p>
<p class="py-2 mt-2 text-2xl font-semibold sm:text-2xl md:text-2xl lg:text-3xl xl:text-3xl 2xl:text-3xl">{title}</p>
<p>{subtitle}</p>
</div>
</div>

6
src/components/misc/ThemeToggle.astro
View File

@ -7,13 +7,13 @@ For the 3 lines of javascript needed I think its okay to use a script tag -->
}
</script>
<label class="swap swap-rotate transition ease-in-out hover:scale-125">
<label class="transition ease-in-out swap swap-rotate hover:scale-125">
<!-- this hidden checkbox controls the state -->
<input id="themetoggle" type="checkbox" data-toggle-theme="business,corporate" />
<span class="swap-off material-symbols-outlined mx-2">
<span class="mx-2 swap-off material-symbols-outlined">
light_mode
</span>
<span class="swap-on material-symbols-outlined mx-2">
<span class="mx-2 swap-on material-symbols-outlined">
dark_mode
</span>
</label>

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

@ -20,7 +20,7 @@
</style>
<div id="menu" data-shown=""
class="fixed top-0 left-0 w-72 h-screen p-4 flex flex-col bg-base-200 -translate-x-full lg:translate-x-0 xl:translate-x-0 transition-all duration-100 z-50">
class="fixed top-0 left-0 z-50 flex flex-col h-screen p-4 transition-all duration-100 -translate-x-full w-72 bg-base-200 lg:translate-x-0 xl:translate-x-0">
<button id="menu-close" class="absolute top-0 right-0 p-2 lg:hidden">
<span class="material-symbols-outlined">
@ -29,8 +29,8 @@
</button>
<a href="/">
<div class="transition ease-in-out w-1/2 hover:scale-105 block mx-auto mt-2 mb-2">
<img class="rounded-full aspect-square w-full object-cover" src="/img/profile.jpg" alt="">
<div class="block w-1/2 mx-auto mt-2 mb-2 transition ease-in-out hover:scale-105">
<img class="object-cover w-full rounded-full aspect-square" src="/img/profile.jpg" alt="">
</div>
</a>
@ -39,22 +39,22 @@
<ul>
<li class="flex flex-col">
<a href="/" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
<a href="/" class="w-full duration-200 ease-in-out rounded hover:bg-base-100 transation">
<button class="p-2">Home</button>
</a>
</li>
<li class="flex">
<a href="/projects/1" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
<a href="/projects/1" class="w-full duration-200 ease-in-out rounded hover:bg-base-100 transation">
<button class="p-2">Projects</button>
</a>
</li>
<li class="flex">
<a href="/resume" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
<a href="/resume" class="w-full duration-200 ease-in-out rounded hover:bg-base-100 transation">
<button class="p-2">Resume/CV</button>
</a>
</li>
<li class="flex">
<a href="/contact" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
<a href="/contact" class="w-full duration-200 ease-in-out rounded hover:bg-base-100 transation">
<button class="p-2">Contact</button>
</a>
</li>
@ -64,13 +64,13 @@
<div class="grow"></div>
</div>
<div class="h-12 w-full flex lg:hidden xl:hidden bg-base-200 text-left transition-all duration-100">
<div class="flex w-full h-12 text-left transition-all duration-100 lg:hidden xl:hidden bg-base-200">
<button id="menubtn" class="w-12 h-12">
<span class="material-symbols-outlined mt-1">
<span class="mt-1 material-symbols-outlined">
menu
</span>
</button>
<p class="my-auto mx-auto -translate-x-1/2 font-semibold text-xl">{displayedName}</p>
<p class="mx-auto my-auto text-xl font-semibold -translate-x-1/2">{displayedName}</p>
</div>
<div id="draweroverlay" class="hidden fixed top-0 left-0 w-full h-[100vh] z-10 bg-black/50" />

8
src/components/nav/SocialLinks.astro
View File

@ -2,9 +2,9 @@
import ThemeToggle from "../misc/ThemeToggle.astro";
---
<div class="flex place-content-center mt-4">
<div class="flex mt-4 place-content-center">
<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"
<svg class="inline-block transition ease-in-out w-7 h-7 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"
@ -21,13 +21,13 @@ import ThemeToggle from "../misc/ThemeToggle.astro";
</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">
<svg class="inline-block w-6 h-6 transition ease-in-out fill-current 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"
<svg class="inline-block w-6 h-6 transition ease-in-out fill-current 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>

4
src/components/resume/Timeline.astro
View File

@ -9,11 +9,11 @@ const { title, subtitle } = Astro.props;
<div class="flex">
<div>
<span class="w-4 h-4 bg-primary block rounded-full mt-2"></span>
<span class="block w-4 h-4 mt-2 rounded-full bg-primary"></span>
<span class="bg-primary block h-full w-[2px] translate-x-[7px]"></span>
</div>
<div class="px-5">
<p class="font-semibold text-xl">{title}</p>
<p class="text-xl font-semibold">{title}</p>
<span class="text-sm font-light">{subtitle}</span>
<slot></slot>
</div>

6
src/layouts/BlogLayout.astro
View File

@ -7,14 +7,14 @@ const { frontmatter } = Astro.props;
<Layout>
<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">
class="flex flex-col justify-center w-1/2 mx-auto mt-4 mb-6 sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2">
<div class="relative mb-4">
<img class="aspect-video object-cover" src={frontmatter.image} alt="" loading="lazy"/>
<img class="object-cover aspect-video" src={frontmatter.image} alt="" loading="lazy"/>
<a href={frontmatter.imageattr} class="absolute bottom-0 right-0 h-[24px]">
<span class="material-symbols-outlined opacity-25 mr-[4px]">link</span>
</a>
</div>
<p class="my-2 font-bold text-5xl">{frontmatter.title}</p>
<p class="my-2 text-5xl font-bold">{frontmatter.title}</p>
<p>{frontmatter.date}</p>
<Divider />
<slot />

6
src/layouts/InteractiveDemoLayout.astro
View File

@ -5,14 +5,14 @@
---
<Layout>
<main class="w-5/6 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">
<main class="flex flex-col justify-center w-5/6 mx-auto mt-4 mb-6 sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2">
<div class="relative mb-4">
<img class="aspect-video object-cover rounded-xl" src={frontmatter.image} alt="" />
<img class="object-cover aspect-video rounded-xl" src={frontmatter.image} alt="" />
<a href={frontmatter.imageattr} class="absolute bottom-0 right-0 h-[24px]">
<span class="material-symbols-outlined opacity-25 mr-[4px]">link</span>
</a>
</div>
<p class="my-2 font-bold text-5xl">{frontmatter.title}</p>
<p class="my-2 text-5xl font-bold">{frontmatter.title}</p>
<p>{frontmatter.date}</p>
<Divider />
<!-- Render our markdown with the normal header styling and some extra padding. -->

14
src/pages/contact.astro
View File

@ -3,15 +3,15 @@
---
<Layout title={" | Contact"}>
<div class="my-2 flex flex-col sm:flex-col md:flex-col lg:flex-row xl:flex-row 2xl:flex-row w-5/6 mx-auto">
<div class="w-full lg:w-1/2 text-center">
<div class="flex flex-col w-5/6 mx-auto my-2 sm:flex-col md:flex-col lg:flex-row xl:flex-row 2xl:flex-row">
<div class="w-full text-center lg:w-1/2">
<p>Picture here</p>
</div>
<div class="w-full lg:w-1/2 text-center flex flex-col gap-4">
<input type="text" placeholder="Name" class="input input-bordered w-full" />
<input type="text" placeholder="Email" class="input input-bordered w-full" />
<textarea class="textarea textarea-bordered w-full" placeholder="Message" style="resize:none"></textarea>
<button class="btn w-full">Submit</button>
<div class="flex flex-col w-full gap-4 text-center lg:w-1/2">
<input type="text" placeholder="Name" class="w-full input input-bordered" />
<input type="text" placeholder="Email" class="w-full input input-bordered" />
<textarea class="w-full textarea textarea-bordered" placeholder="Message" style="resize:none"></textarea>
<button class="w-full btn">Submit</button>
</div>
</div>
</Layout>

4
src/pages/index.astro
View File

@ -11,7 +11,7 @@ const projects = (await Astro.glob("./projects/**/*.{md,mdx}")).sort(
---
<Layout>
<main class="flex flex-col m-6 mx-auto w-5/6 sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2">
<main class="flex flex-col w-5/6 m-6 mx-auto sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2">
<section>
<div class="flex flex-row">
<p class="text-5xl sm:text-5xl md:text-5xl lg:text-6xl py-1 font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-[#1f89db] to-[#f42a8b]">Hello World!</p>
@ -21,7 +21,7 @@ const projects = (await Astro.glob("./projects/**/*.{md,mdx}")).sort(
</section>
<div class="divider"/>
<section>
<p class="text-2xl font-bold py-2 sm:text-2xl md:text-2xl lg:text-4xl xl:text-4xl 2xl:text-4xl">Latest Projects</p>
<p class="py-2 text-2xl font-bold sm:text-2xl md:text-2xl lg:text-4xl xl:text-4xl 2xl:text-4xl">Latest Projects</p>
{
projects.map((post) => (
<BlogProjectCard

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

@ -17,7 +17,7 @@
---
<Layout title=" | Projects">
<main class="w-full md:w-5/6 lg:w-4/5 xl:w-4/5 mx-auto mt-4">
<main class="w-full mx-auto mt-4 md:w-5/6 lg:w-4/5 xl:w-4/5">
<div class="flex flex-col">
{
page.data.map((post: any) => (
@ -27,10 +27,10 @@
))
}
</div>
<div class="w-1/2 mx-auto flex justify-between">
<div class="flex justify-between w-1/2 mx-auto">
{
page.url.prev ? (
<a class="w-40 flex" href={page.url.prev}>
<a class="flex w-40" href={page.url.prev}>
<span class="material-symbols-outlined">
chevron_left
</span>
@ -41,11 +41,11 @@
)
}
<p class="grow text-center whitespace-nowrap">Page {page.currentPage}</p>
<p class="text-center grow whitespace-nowrap">Page {page.currentPage}</p>
{
page.url.next ? (
<a class="w-40 flex" href={page.url.next}>
<p class="grow text-right">Next Page</p>
<a class="flex w-40" href={page.url.next}>
<p class="text-right grow">Next Page</p>
<span class="material-symbols-outlined">
chevron_right
</span>

12
src/pages/resume.astro
View File

@ -24,11 +24,11 @@
</style>
<main class="w-5/6 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 class="py-6 text-2xl font-bold">About Me</p>
<p>{resume.basics.summary}</p>
<div class="divider"/>
<p class="font-bold text-2xl pb-6">Work Experience</p>
<p class="pb-6 text-2xl font-bold">Work Experience</p>
<div class="time-line-container">
{resume.work.map((item:any)=>
<Timeline title={item.position} subtitle={item.name + " | " + parseDate(item.startDate) + " - " + parseDate(item.endDate)}>
@ -41,24 +41,24 @@
)}
</div>
<p class="font-bold text-2xl py-6">Education</p>
<p class="py-6 text-2xl font-bold">Education</p>
<div class="time-line-container">
{resume.education.map((item:any)=>
<Timeline title={item.institution} subtitle={item.area + " | " + parseDate(item.endDate)}/>
)}
</div>
<p class="font-bold text-2xl py-6">Professional Certificates</p>
<p class="py-6 text-2xl font-bold">Professional Certificates</p>
<div class="time-line-container">
{resume.certificates.map((item:any)=>
<Timeline title={item.name} subtitle={item.issuer + " | " + parseDate(item.date)}/>
)}
</div>
<p class="font-bold text-2xl py-6">Skills</p>
<p class="py-6 text-2xl font-bold">Skills</p>
{resume.skills.map((item:any)=>
<div class="divider">{item.name}</div>
<div class="flex flex-wrap gap-2 mx-auto my-2 pb-4">
<div class="flex flex-wrap gap-2 pb-4 mx-auto my-2">
{item.keywords.map((skill:any)=>
<div class="badge badge-lg">{skill}</div>
)}