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

Make archive images openable in new tab

Browse source
This commit is contained in:
Troy 2025-04-26 16:59:32 +01:00
parent 4bf6f04222
commit 522392cdfc
Signed by: troy
GPG key ID: DFC06C02ED3B4711
17 changed files with 34 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

85
src/pages/about.astro
View file

@ -1,85 +0,0 @@
---
import Layout from "@layouts/Layout.astro";
import { SITE, ABOUT } from "@consts";
import { Image } from "astro:assets";
import { Icon } from "astro-icon/components";
import Link from "@components/Link.astro";
import icon from "public/assets/icon.png";
import Button from "@components/Button.astro";
---
<Layout title={SITE.TITLE} description={ABOUT.DESCRIPTION}>
<div class="animate-reveal flex items-center justify-between opacity-0">
<div class="flex-1 space-y-1.5">
<h1
class="animate-reveal flex flex-col text-start text-3xl font-semibold opacity-0 sm:block"
>
<span class="text-secondary text-nowrap">{SITE.AUTHOR}</span><span
class="text-tertiary sm:ml-2">{ABOUT.DESCRIPTION}</span
>
</h1>
<p class="text-secondary/70 max-w-md text-pretty">Digital designer.</p><p
class="text-secondary/70 max-w-md items-center text-sm text-pretty"
>
<Link
class="inline-flex gap-x-1.5 align-baseline leading-none hover:underline"
href="https://www.google.com/maps/place/Devon"
>
<Icon name="mdi:earth" class="h-3 w-3" />
Devon, United Kingdom, GMT
</Link>
</p><div class="text-secondary/70 flex gap-x-1 pt-1 text-sm print:hidden">
<a
href={`mailto:${SITE.EMAIL}`}
class="bg-button text-secondary hover:bg-button-active flex w-fit flex-row items-center gap-1 justify-self-center rounded-full p-2 text-center text-sm text-nowrap capitalize transition-colors duration-300"
>
<Icon name="mdi:email" title="Email" class="h-4 w-4" />
</a>
<Link
href="/"
class="bg-button text-secondary hover:bg-button-active flex w-fit flex-row items-center gap-1 justify-self-center rounded-full p-2 text-center text-sm text-nowrap capitalize transition-colors duration-300"
>
<Icon name="mdi:link-variant" title="Website" class="h-4 w-4" />
</Link>
<Link
href="https://code.troylusty.com"
class="bg-button text-secondary hover:bg-button-active flex w-fit flex-row items-center gap-1 justify-self-center rounded-full p-2 text-center text-sm text-nowrap capitalize transition-colors duration-300"
>
<Icon name="mdi:git" title="Git" class="h-4 w-4" />
</Link>
<Link
href="https://store.steampowered.com/developer/troy"
class="bg-button text-secondary hover:bg-button-active flex w-fit flex-row items-center gap-1 justify-self-center rounded-full p-2 text-center text-sm text-nowrap capitalize transition-colors duration-300"
>
<Icon name="mdi:steam" title="Steamworks" class="h-4 w-4" />
</Link>
</div>
<p
class="text-secondary/70 hidden max-w-md items-center text-sm text-pretty print:flex"
>
<Link
class="inline-flex gap-x-1.5 align-baseline leading-none hover:underline"
href={`mailto:${SITE.EMAIL}`}
>
<Icon name="mdi:email" class="h-3 w-3" />
{SITE.EMAIL}
</Link>
</p>
</div><span
class="relative flex h-28 w-28 shrink-0 overflow-hidden rounded-xl"
>
<Image
src={icon}
alt="Troy Lusty"
class="aspect-square h-full w-full"
loading="eager"
/>
</span>
</div>
<div
class="animate-reveal mx-auto max-w-full opacity-0 [animation-delay:0.2s]"
>
<Button href="/cv" link="CV" />
</div>
</Layout>

18
src/pages/archive/index.astro
View file

@ -26,15 +26,19 @@ const imageList = await Promise.all(
class="text-tertiary ml-2">{ARCHIVE.DESCRIPTION}</span
>
</h1>
<div class="animate-reveal grid grid-cols-2 md:grid-cols-3 gap-2 [animation-delay:0.1s]">
<div
class="animate-reveal grid grid-cols-2 gap-2 [animation-delay:0.1s] md:grid-cols-3"
>
{
imageList.map((item) => (
<Image
src={item.image}
alt={item.alt}
loading="eager"
class="aspect-square h-full w-full rounded-sm object-cover"
/>
<a href={item.image.src} target="_blank">
<Image
src={item.image}
alt={item.alt}
loading="eager"
class="aspect-square h-full w-full cursor-zoom-in rounded-sm object-cover transition-all duration-300 ease-in-out hover:brightness-50"
/>
</a>
))
}
</div>