feat: reduce page sizing complexity

This commit is contained in:
Troy 2025-02-13 18:55:50 +00:00
parent 089859e1f3
commit c5e1e5dda7
Signed by: troy
GPG key ID: DFC06C02ED3B4711
13 changed files with 95 additions and 101 deletions

View file

@ -164,11 +164,11 @@ import icon from "public/assets/icon.png";
<p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
Task:
</p>
<div class="w-full lg:inline-block lg:w-8/12">
<p class="w-full lg:inline-block lg:w-8/12">
<Link href="/projects/camouflage-store"
>CMS Migration and Rebrand
</Link>
</div>
>CMS Migration and Rebrand</Link
>
</p>
</section>
<section class="mb-6">
<p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
@ -225,9 +225,9 @@ import icon from "public/assets/icon.png";
<p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
Deployed to:
</p>
<div class="w-full lg:inline-block lg:w-8/12">
<p class="w-full lg:inline-block lg:w-8/12">
<Link href="/">troylusty.com</Link>
</div>
</p>
</section>
<section class="mb-6">
<p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
@ -255,7 +255,7 @@ import icon from "public/assets/icon.png";
<p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
Built with:
</p>
<div class="w-full lg:inline-block lg:w-8/12">
<div class="mt-5 w-full lg:inline-block lg:w-8/12">
<span class="box">Astro</span>
<span class="box">Tailwind CSS</span>
<span class="box">Alpine.js</span>

View file

@ -14,11 +14,13 @@ const projectsJSON = JSON.stringify(projects);
---
<Layout title={HOME.TITLE} description={HOME.DESCRIPTION}>
<Hero />
<section
id="featured-projects"
class="animate-reveal opacity-0 [animation-delay:0.1s]"
>
<Carousel data={projectsJSON} />
</section>
<div class="block w-full">
<Hero />
<section
id="featured-projects"
class="animate-reveal opacity-0 [animation-delay:0.1s]"
>
<Carousel data={projectsJSON} />
</section>
</div>
</Layout>

View file

@ -10,14 +10,12 @@ const posts = (await getCollection("posts"))
---
<Layout title={SITE.TITLE} description={POSTS.DESCRIPTION}>
<div class="mx-auto max-w-[65ch]">
<h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
{POSTS.TITLE}
</h1>
<ol
class="animate-reveal mt-8 grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s]"
>
{posts.map((article: any) => <ShowcasePost collection={article} />)}
</ol>
</div>
<h1 class="animate-reveal text-3xl font-semibold break-words opacity-0">
{POSTS.TITLE}
</h1>
<ol
class="animate-reveal grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s]"
>
{posts.map((article: any) => <ShowcasePost collection={article} />)}
</ol>
</Layout>

View file

@ -10,14 +10,12 @@ const projects = (await getCollection("projects"))
---
<Layout title={SITE.TITLE} description={PROJECTS.DESCRIPTION}>
<div class="mx-auto max-w-[65ch]">
<h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
{PROJECTS.TITLE}
</h1>
<ol
class="animate-reveal mt-8 grid grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
>
{projects.map((article: any) => <ShowcaseProject collection={article} />)}
</ol>
</div>
<h1 class="animate-reveal text-3xl font-semibold break-words opacity-0">
{PROJECTS.TITLE}
</h1>
<ol
class="animate-reveal grid grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
>
{projects.map((article: any) => <ShowcaseProject collection={article} />)}
</ol>
</Layout>