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

add animated hero text to index page (#13)

Browse source
This commit is contained in:
Troy 2025-01-05 18:49:48 +00:00 • committed by GitHub
parent fe60d3846f
commit 4079f9e872
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 141 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/Head.astro
View file

@ -20,7 +20,7 @@ if (typeof tags !== "undefined") {
tags = SITE.KEYWORDS.concat(tags);
}
import inter from "@fontsource-variable/inter/files/inter-latin-wght-normal.woff2?url";
import outfit from "@fontsource-variable/outfit/files/outfit-latin-wght-normal.woff2?url";
import redhatmono from "@fontsource-variable/red-hat-mono/files/red-hat-mono-latin-wght-normal.woff2?url";
---
@ -103,7 +103,7 @@ import redhatmono from "@fontsource-variable/red-hat-mono/files/red-hat-mono-lat
rel="preload"
as="font"
type="font/woff2"
href={inter}
href={outfit}
crossorigin="anonymous"
/>
<link

14
src/components/Hero.astro Normal file
View file

@ -0,0 +1,14 @@
---
---
<section class="mb-32">
<h1
class="text-pretty font-['Outfit_Variable'] text-8xl font-bold md:text-9xl"
>
Digital designer based in the <span
class="animate-gradient-x bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% bg-clip-text font-['Playwrite_CA_Variable'] text-7xl font-light text-transparent md:text-8xl"
>United Kingdom</span
>.
</h1>
</section>

2
src/components/Prose.astro
View file

@ -1,5 +1,5 @@
<div
class="prose max-w-full prose-headings:text-secondary prose-h1:text-xl prose-h1:font-bold prose-p:max-w-full prose-p:text-pretty prose-p:break-words prose-p:text-lg prose-p:text-secondary prose-a:text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy prose-blockquote:border-secondary prose-strong:text-secondary prose-code:whitespace-pre-wrap prose-code:font-semibold prose-code:text-accent prose-code:before:content-none prose-code:after:content-none prose-pre:w-fit prose-pre:max-w-full prose-pre:border prose-pre:border-accent prose-pre:bg-primary prose-li:text-secondary prose-li:marker:text-secondary prose-img:max-h-[90vh] prose-img:w-auto prose-img:max-w-full prose-img:rounded prose-video:max-h-[90vh] prose-video:w-auto prose-video:max-w-full prose-video:rounded"
class="prose max-w-full prose-headings:text-secondary prose-h1:text-xl prose-h1:font-bold prose-p:max-w-full prose-p:text-pretty prose-p:break-words prose-p:text-lg prose-p:text-secondary prose-a:text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy prose-blockquote:border-secondary prose-strong:text-secondary prose-code:whitespace-pre-wrap prose-code:font-medium prose-code:text-secondary prose-code:before:content-none prose-code:after:content-none prose-pre:w-fit prose-pre:max-w-full prose-pre:border prose-pre:border-tertiary prose-pre:bg-primary prose-li:text-secondary prose-li:marker:text-secondary prose-img:max-h-[90vh] prose-img:w-auto prose-img:max-w-full prose-img:rounded prose-video:max-h-[90vh] prose-video:w-auto prose-video:max-w-full prose-video:rounded"
>
<slot />
</div>

80
src/components/RelatedArticles.astro
View file

@ -18,43 +18,43 @@ const prev = items[(index - 1 + items.length) % items.length];
const next = items[(index + 1) % items.length];
---
<div
class="mx-auto mt-8 flex max-w-prose flex-col justify-between gap-4 md:flex-row md:gap-0"
>
<div class="group flex w-fit flex-row items-center justify-between gap-6">
<a
href={`/${prev.collection}/${prev.slug}`}
class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-colors group-hover:bg-tertiary"
>
<Icon
name="mdi:arrow-left"
title="All projects"
class="h-4 w-auto text-primary"
/>
</a>
<a href={`/${prev.collection}/${prev.slug}`}>
<p class="animate-reveal break-words text-xl font-medium opacity-0">
{prev.data.title}
</p>
</a>
</div>
<div
class="group flex w-fit flex-row items-center justify-between gap-6 self-end"
>
<a href={`/${next.collection}/${next.slug}`}>
<p class="animate-reveal break-words text-xl font-medium opacity-0">
{next.data.title}
</p>
</a>
<a
href={`/${next.collection}/${next.slug}`}
class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-colors group-hover:bg-tertiary"
>
<Icon
name="mdi:arrow-right"
title="All projects"
class="h-4 w-auto text-primary"
/>
</a>
</div>
</div>
{
items.length > 1 ? (
<div class="mx-auto mt-8 flex max-w-prose justify-between gap-4 md:gap-0">
<div class="group flex w-fit flex-row items-center justify-between gap-2">
<a
href={`/${prev.collection}/${prev.slug}`}
class="animate-reveal opacity-0"
>
<Icon
name="mdi:arrow-left"
title="All projects"
class="h-4 w-auto text-tertiary transition-colors duration-300 group-hover:text-accent"
/>
</a>
<a href={`/${prev.collection}/${prev.slug}`}>
<p class="animate-reveal break-words text-xl font-medium text-tertiary opacity-0 transition-colors duration-300 group-hover:text-accent">
{prev.data.title}
</p>
</a>
</div>
<div class="group flex w-fit flex-row items-center justify-between gap-2 self-end">
<a href={`/${next.collection}/${next.slug}`}>
<p class="animate-reveal break-words text-xl font-medium text-tertiary opacity-0 transition-colors duration-300 group-hover:text-accent">
{next.data.title}
</p>
</a>
<a
href={`/${next.collection}/${next.slug}`}
class="animate-reveal opacity-0"
>
<Icon
name="mdi:arrow-right"
title="All projects"
class="h-4 w-auto text-tertiary transition-colors duration-300 group-hover:text-accent"
/>
</a>
</div>
</div>
) : null
}

13
src/components/ShowcaseProject.astro
View file

@ -11,31 +11,28 @@ const { collection } = Astro.props;
<li>
<article
class="group relative isolate mx-auto flex h-full w-full flex-col justify-end overflow-hidden rounded-lg px-8 pb-8 pt-40"
class="group relative isolate mx-auto flex h-full w-full flex-col justify-end overflow-hidden rounded px-8 pb-8 pt-40"
>
<Image
src={collection.data.image.url}
alt={collection.data.image.alt}
title={collection.data.title}
loading="eager"
class="absolute inset-0 h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
class="absolute inset-0 h-full w-full object-cover transition-all duration-300 group-hover:brightness-50"
fit="cover"
/>
<div
class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"
>
</div>
<a
class="absolute inset-0 z-20"
href={`/${collection.collection}/${collection.slug}`}
aria-label={collection.data.title}></a>
<h3
class="z-10 mt-3 w-fit text-xl font-semibold text-primary dark:text-secondary"
class="z-10 mt-3 w-fit text-xl font-semibold text-primary opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:text-secondary"
>
{collection.data.title}
</h3>
<div
class="z-10 w-fit gap-y-1 overflow-hidden text-sm leading-6 text-accent"
class="z-10 w-fit gap-y-1 overflow-hidden text-sm leading-6 text-accent opacity-0 transition-opacity duration-500 group-hover:opacity-100"
>
{
collection.data.collection ? (