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; const imagesArray = shuffle ? shuffleArray(images) : images;
--- ---
<div class:list={[className]}> <div class:list={[className, "relative overflow-hidden"]}>
<div class="relative h-full w-full overflow-hidden"> <div>
<div class:list={[backgroundColour, backgroundOpacity, "absolute inset-0"]}> <div class:list={[backgroundColour, backgroundOpacity, "absolute inset-0"]}>
</div> </div>
@@ -85,9 +85,8 @@ const imagesArray = shuffle ? shuffleArray(images) : images;
/> />
) )
} }
<slot />
</div> </div>
<slot />
</div> </div>
<script define:vars={{ imagesArray, interval, IDs }}> <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> <!doctype html>
<html lang="en"> <html lang="en">
<MainHead {title} {subtitle} {description} {image} /> <MainHead {title} {subtitle} {description} {image} />
<body> <body class="flex min-h-svh flex-col">
<Navbar {navbarDisplay} /> <Navbar {navbarDisplay} />
<main> <main class="grow">
<slot /> <slot />
</main> </main>
<Footer /> <Footer />

13
src/pages/404.astro
View File

@@ -11,15 +11,19 @@ const heroImages = import.meta.glob<{ default: ImageMetadata; eager: true }>(
const heroImagesArray = await convertEagerImagesImportGlobToArray(heroImages); const heroImagesArray = await convertEagerImagesImportGlobToArray(heroImages);
--- ---
<MainLayout title="Oops! 404"> <MainLayout title="Oops! 404" navbarDisplay="transparent">
<div class="flex h-screen w-full items-center justify-center"> <div class="absolute inset-0 h-full w-full bg-black">
<ImageCarousel <ImageCarousel
images={heroImagesArray} images={heroImagesArray}
class="absolute z-10 h-full w-full" class="h-full w-full"
foreground={true}
foreground={true} foreground={true}
foregroundOpacity="opacity-80" foregroundOpacity="opacity-80"
/> />
<div class="z-20 p-36 text-center"> </div>
<div
class="absolute inset-0 flex h-full w-full flex-col justify-center px-8 py-36 text-center"
>
<h1 <h1
class="font-header pb-8 text-5xl font-medium text-white uppercase text-shadow-lg/75 md:text-7xl lg:text-9xl" class="font-header pb-8 text-5xl font-medium text-white uppercase text-shadow-lg/75 md:text-7xl lg:text-9xl"
> >
@@ -38,5 +42,4 @@ const heroImagesArray = await convertEagerImagesImportGlobToArray(heroImages);
Home Home
</a> </a>
</div> </div>
</div>
</MainLayout> </MainLayout>

10
src/pages/index.astro
View File

@@ -109,7 +109,7 @@ const tracks = (
<div class="flex h-48 w-full items-center justify-center"> <div class="flex h-48 w-full items-center justify-center">
<ImageCarousel <ImageCarousel
images={imagesForCTAArray} images={imagesForCTAArray}
class="absolute -z-40 h-full w-full" class="h-full w-full"
foreground={true} foreground={true}
foregroundColour="bg-primary" foregroundColour="bg-primary"
foregroundOpacity="opacity-75 dark:opacity-25" foregroundOpacity="opacity-75 dark:opacity-25"
@@ -118,13 +118,15 @@ const tracks = (
quality={5} quality={5}
height={192} height={192}
shuffle={true} shuffle={true}
/> ><div class="flex h-full w-full items-center">
<a <a
href="/contact/" 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" 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! Get in touch!
</a> </a>
</div></ImageCarousel
>
</div> </div>
</section> </section>
<section id="projects" class="overflow-hidden bg-white dark:bg-gray-950"> <section id="projects" class="overflow-hidden bg-white dark:bg-gray-950">
@@ -203,10 +205,10 @@ const tracks = (
</div> </div>
</section> </section>
<section id="fillerUntilServicesIsComplete" class="text-white"> <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 <ImageCarousel
images={imagesForCTAArray} images={imagesForCTAArray}
class="absolute -z-40 h-full w-full overflow-hidden" class="h-full w-full"
foreground={true} foreground={true}
foregroundColour="bg-primary" foregroundColour="bg-primary"
foregroundOpacity="opacity-50 dark:opacity-25" foregroundOpacity="opacity-50 dark:opacity-25"

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

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