encie22/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pad content to footer, better handle carousel
Some checks are pending
Build and Deploy to Web Server / deploy (push) Has started running
Details

Browse Source
This commit is contained in:
Nathan Cummins
2025-08-21 16:19:18 +09:30
parent e790264b99
commit a37051afce
5 changed files with 51 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/ImageCarousel.astro
View File

@@ -43,8 +43,8 @@ const IDs: string[] = [];
const imagesArray = shuffle ? shuffleArray(images) : images;
---
<div class:list={[className]}>
<div class="relative h-full w-full overflow-hidden">
<div class:list={[className, "relative overflow-hidden"]}>
<div>
<div class:list={[backgroundColour, backgroundOpacity, "absolute inset-0"]}>
</div>
@@ -85,9 +85,8 @@ const imagesArray = shuffle ? shuffleArray(images) : images;
/>
)
}
<slot />
</div>
<slot />
</div>
<script define:vars={{ imagesArray, interval, IDs }}>

4
src/layouts/MainLayout.astro
View File

@@ -26,9 +26,9 @@ import MainHead from "@layouts/MainHead.astro";
<!doctype html>
<html lang="en">
<MainHead {title} {subtitle} {description} {image} />
<body>
<body class="flex min-h-svh flex-col">
<Navbar {navbarDisplay} />
<main>
<main class="grow">
<slot />
</main>
<Footer />

45
src/pages/404.astro
View File

@@ -11,32 +11,35 @@ const heroImages = import.meta.glob<{ default: ImageMetadata; eager: true }>(
const heroImagesArray = await convertEagerImagesImportGlobToArray(heroImages);
---
<MainLayout title="Oops! 404">
<div class="flex h-screen w-full items-center justify-center">
<MainLayout title="Oops! 404" navbarDisplay="transparent">
<div class="absolute inset-0 h-full w-full bg-black">
<ImageCarousel
images={heroImagesArray}
class="absolute z-10 h-full w-full"
class="h-full w-full"
foreground={true}
foreground={true}
foregroundOpacity="opacity-80"
/>
<div class="z-20 p-36 text-center">
<h1
class="font-header pb-8 text-5xl font-medium text-white uppercase text-shadow-lg/75 md:text-7xl lg:text-9xl"
>
Oops!
</h1>
<h2
class="font-header text-2xl font-medium text-gray-300 uppercase text-shadow-lg/75 md:text-2xl lg:text-4xl"
>
404 - Page not found
</h2>
</div>
<div
class="absolute inset-0 flex h-full w-full flex-col justify-center px-8 py-36 text-center"
>
<h1
class="font-header pb-8 text-5xl font-medium text-white uppercase text-shadow-lg/75 md:text-7xl lg:text-9xl"
>
Oops!
</h1>
<h2
class="font-header text-2xl font-medium text-gray-300 uppercase text-shadow-lg/75 md:text-2xl lg:text-4xl"
>
404 - Page not found
</h2>
<a
href="/"
class="bg-primary text-md font-header hover:text-primary repeat hover:ring-primary mx-auto mt-8 inline-block rounded px-6 py-3 font-light text-white uppercase drop-shadow-lg/75 transition hover:bg-white hover:ring-2"
>
Home
</a>
</div>
<a
href="/"
class="bg-primary text-md font-header hover:text-primary repeat hover:ring-primary mx-auto mt-8 inline-block rounded px-6 py-3 font-light text-white uppercase drop-shadow-lg/75 transition hover:bg-white hover:ring-2"
>
Home
</a>
</div>
</MainLayout>

20
src/pages/index.astro
View File

@@ -109,7 +109,7 @@ const tracks = (
<div class="flex h-48 w-full items-center justify-center">
<ImageCarousel
images={imagesForCTAArray}
class="absolute -z-40 h-full w-full"
class="h-full w-full"
foreground={true}
foregroundColour="bg-primary"
foregroundOpacity="opacity-75 dark:opacity-25"
@@ -118,13 +118,15 @@ const tracks = (
quality={5}
height={192}
shuffle={true}
/>
<a
href="/contact/"
class="text-md font-header repeat text-primary hover:bg-primary mx-auto inline-block rounded bg-white px-6 py-3 font-light uppercase drop-shadow-lg/75 transition hover:text-white hover:ring-2 hover:ring-white"
><div class="flex h-full w-full items-center">
<a
href="/contact/"
class="text-md font-header repeat text-primary hover:bg-primary mx-auto inline-block rounded bg-white px-6 py-3 font-light uppercase drop-shadow-lg/75 transition hover:text-white hover:ring-2 hover:ring-white"
>
Get in touch!
</a>
</div></ImageCarousel
>
Get in touch!
</a>
</div>
</section>
<section id="projects" class="overflow-hidden bg-white dark:bg-gray-950">
@@ -203,10 +205,10 @@ const tracks = (
</div>
</section>
<section id="fillerUntilServicesIsComplete" class="text-white">
<div class="flex h-64 w-full items-center justify-center">
<div class="flex h-96 w-full items-center justify-center">
<ImageCarousel
images={imagesForCTAArray}
class="absolute -z-40 h-full w-full overflow-hidden"
class="h-full w-full"
foreground={true}
foregroundColour="bg-primary"
foregroundOpacity="opacity-50 dark:opacity-25"

18
src/pages/projects/[...slug].astro
View File

@@ -57,21 +57,25 @@ import P from "@components/MDX/P.astro";
image={seoImage}
>
<div class="w-full">
<section id="cta" class="text-white">
<div class="flex h-64 w-full items-center justify-center">
<section id="title" class="text-white">
<div class="flex h-96 w-full items-center justify-center">
<ImageCarousel
images={images}
class="absolute -z-40 h-full w-full"
class="h-full w-full"
foreground={true}
interval={2000}
transitionDuration="duration-1000"
quality={50}
height={256}
shuffle={true}
/>
<h1 class="font-header text-4xl uppercase text-shadow-lg/75">
{project.data.title}
</h1>
><div
class="absolute inset-0 flex h-full w-full items-center justify-center px-8 text-center"
>
<h1 class="font-header text-4xl uppercase text-shadow-lg/75">
{project.data.title}
</h1>
</div></ImageCarousel
>
</div>
</section>
<section id="projects" class="bg-white dark:bg-gray-950">