troy/troylusty.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

feat: shuffle hero slideshow projects
All checks were successful
Docker / build-and-push-image (push) Successful in 2m49s
Details

Browse source
This commit is contained in:
Troy 2025-07-18 23:29:03 +01:00
parent 4e9ffa8771
commit 8e42e17da5
Signed by: troy
GPG key ID: DFC06C02ED3B4711
5 changed files with 82 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/Hero.astro
View file

@ -10,13 +10,13 @@
>
I’m a recent <a
href="/about#education"
class="text-secondary underline hover:no-underline"
class="text-secondary decoration-tertiary underline hover:no-underline"
>Game Arts and Design</a
> graduate with a chosen area of focus on the design, lighting, and rendering
of 3D environments. On the side I manage online operations for a family run
<a
href="/projects/camouflage-store"
class="text-secondary underline hover:no-underline"
class="text-secondary decoration-tertiary underline hover:no-underline"
>outdoor apparel business</a
>.
</p>

30
src/components/Slideshow.astro
View file

@ -43,21 +43,33 @@ const { interval = 3000, images } = Astro.props;
</div>
<script>
const images = document.querySelectorAll<HTMLElement>("[data-slide-index]");
const images = Array.from(
document.querySelectorAll<HTMLElement>("[data-slide-index]"),
);
let currentImageIndex = 0;
const interval =
Number(
(
document
.querySelector<HTMLElement>("[data-slide-index]")
?.closest(".relative") as HTMLElement
)?.dataset?.interval,
) || 3000;
const closestRelativeElement = document
.querySelector<HTMLElement>("[data-slide-index]")
?.closest(".relative") as HTMLElement | null;
const interval = Number(closestRelativeElement?.dataset?.interval) || 3000;
for (let i = images.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[images[i], images[j]] = [images[j], images[i]];
}
images.forEach((img, index) => {
img.style.opacity = index === 0 ? "1" : "0";
img.style.zIndex = index === 0 ? "10" : "1";
});
function showNextImage() {
images[currentImageIndex].style.opacity = "0";
images[currentImageIndex].style.zIndex = "1";
currentImageIndex = (currentImageIndex + 1) % images.length;
images[currentImageIndex].style.opacity = "1";
images[currentImageIndex].style.zIndex = "10";
}

14
src/pages/about.astro
View file

@ -158,7 +158,7 @@ const sortedEducation = [...education].sort((a, b) => a.id - b.id);
</h1>
<p class="text-secondary/70 max-w-md text-pretty">
<Link
class="inline-flex items-center gap-x-1.5 align-baseline leading-none hover:underline hover:decoration-2 hover:underline-offset-2"
class="decoration-tertiary inline-flex items-center gap-x-1.5 align-baseline leading-none hover:underline hover:decoration-2 hover:underline-offset-2"
href="https://www.google.com/maps/place/Devon"
>
<Icon name="mdi:earth" class="h-3 w-3" />
@ -221,7 +221,7 @@ const sortedEducation = [...education].sort((a, b) => a.id - b.id);
<p class="text-secondary/70 text-lg font-medium">
I’m a recent <a
href="#education"
class="text-secondary underline hover:no-underline"
class="text-secondary decoration-tertiary underline hover:no-underline"
>Game Arts and Design</a
> graduate with a chosen area of focus on the design, lighting, and rendering
of 3D environments. Using either real-time or offline rendering techniques
@ -230,7 +230,7 @@ const sortedEducation = [...education].sort((a, b) => a.id - b.id);
and cyber security in addition to motorbike touring. An up-to-date portfolio
of my work can be found on my website at <a
href="/projects"
class="text-secondary underline hover:no-underline"
class="text-secondary decoration-tertiary underline hover:no-underline"
>troylusty.com/projects</a
>.
</p>
@ -248,7 +248,7 @@ const sortedEducation = [...education].sort((a, b) => a.id - b.id);
Do you think I'd be a good fit to help out on a project you're working
on, or maybe just want to chat? <Link
href={`mailto:${SITE.EMAIL}`}
class="underline hover:no-underline"
class="decoration-tertiary underline hover:no-underline"
>
Send me an email!</Link
>
@ -339,7 +339,7 @@ const sortedEducation = [...education].sort((a, b) => a.id - b.id);
{experience.link ? (
<Link
href={experience.link}
class="text-secondary/70 underline hover:no-underline"
class="text-secondary/70 decoration-tertiary underline hover:no-underline"
>
{experience.name}
</Link>
@ -372,7 +372,7 @@ const sortedEducation = [...education].sort((a, b) => a.id - b.id);
<h3 class="mt-0 text-base font-semibold tracking-tight">
<Link
href={project.link}
class="inline-flex items-center gap-1 font-medium underline hover:no-underline"
class="decoration-tertiary inline-flex items-center gap-1 font-medium underline hover:no-underline"
>
{project.done ? (
<span class="mr-1 h-1.5 w-1.5 rounded-full bg-green-600 dark:bg-green-400" />
@ -394,7 +394,7 @@ const sortedEducation = [...education].sort((a, b) => a.id - b.id);
{project.tags.map((tag) => (
<a
href={`/tags/${createSlug(tag)}`}
class="bg-button text-secondary hover:bg-button-active flex w-fit flex-row items-center gap-1 justify-self-center rounded-sm px-2 py-1 text-center font-sans text-xs font-light text-nowrap capitalize no-underline transition-colors duration-300"
class="bg-button text-secondary hover:bg-button-active decoration-tertiary flex w-fit flex-row items-center gap-1 justify-self-center rounded-sm px-2 py-1 text-center font-sans text-xs font-light text-nowrap capitalize no-underline transition-colors duration-300"
>
{tag}
</a>