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

add prev & next article buttons (#3)

Browse source 
solution inspired by https://github.com/markhorn-dev/astro-sphere
This commit is contained in:
Troy 2024-12-26 15:02:43 +00:00 • committed by GitHub
parent 93d8c4f67d
commit 3aa7ca486b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 212 additions and 753 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/pages/404.astro
View file

@ -17,12 +17,12 @@ import { Icon } from "astro-icon/components";
404
</h2>
<h3
class="mt-2 animate-reveal text-xl font-bold opacity-0 [animation-delay:0.3s]"
class="mt-2 animate-reveal text-xl font-bold opacity-0 [animation-delay:0.1s]"
>
Content not found
</h3>
</div>
<div class="animate-reveal opacity-0 [animation-delay:0.6s]">
<div class="animate-reveal opacity-0 [animation-delay:0.2s]">
<a
href="/"
class="flex items-center gap-1 rounded bg-secondary px-3.5 py-2.5 text-sm font-semibold text-primary"

13
src/pages/cv.astro
View file

@ -20,9 +20,7 @@ import Prose from "@components/Prose.astro";
<div
class="mt-4 flex flex-col items-start gap-2 text-lg text-tertiary md:flex-row"
>
<div
class="flex animate-reveal items-center gap-2 opacity-0 [animation-delay:0.3s]"
>
<div class="flex animate-reveal items-center gap-2 opacity-0">
<Icon name="mdi:email" />
<Link href="mailto:hello@troylusty.com">
<p>hello@troylusty.com</p>
@ -35,7 +33,7 @@ import Prose from "@components/Prose.astro";
</div>
</div>
</section>
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.4s]">
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.1s]">
<Prose>
<h2>About me</h2>
<p>
@ -56,13 +54,13 @@ import Prose from "@components/Prose.astro";
</p>
</Prose>
</section>
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.5s]">
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.2s]">
<Prose>
<h2>Education</h2>
<Education />
</Prose>
</section>
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.6s]">
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.3s]">
<Prose>
<h2>Skills</h2>
<p>
@ -71,12 +69,11 @@ import Prose from "@components/Prose.astro";
Engine. Using either real-time or offline rendering techniques. In
addition to this, I am also very interested in web development.
</p>
<p>Please note, this skills section is a only placeholder.</p>
<Skills />
<ul><li>Full drivers licence for cars and motorbikes</li></ul>
</Prose>
</section>
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.7s]">
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.4s]">
<Prose>
<h2>Experience</h2>
<Work />

14
src/pages/index.astro
View file

@ -18,7 +18,7 @@ const projects = (await getCollection("projects"))
<Layout title={HOME.TITLE} description={HOME.DESCRIPTION}>
<section class="mb-32" id="postHero" aria-labelledby="featured-projects">
<div class="flex flex-row items-center justify-between gap-6">
<div class="group flex flex-row items-center justify-between gap-6">
<a href="/projects">
<h2
class="animate-reveal break-words text-4xl font-medium opacity-0"
@ -29,7 +29,7 @@ const projects = (await getCollection("projects"))
</a>
<a
href="/projects"
class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-all ease-in-out [animation-delay:0.3s] hover:scale-90 hover:bg-tertiary"
class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-all ease-in-out group-hover:scale-90 group-hover:bg-tertiary"
>
<Icon
name="mdi:arrow-right"
@ -39,16 +39,16 @@ const projects = (await getCollection("projects"))
</a>
</div>
<div
class="mt-16 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.4s] md:grid-cols-3 md:[&>*:nth-child(4n+2)]:col-span-2 md:[&>*:nth-child(4n+3)]:col-span-2 md:[&>*:only-child]:col-span-3"
class="mt-16 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s] md:grid-cols-3 md:[&>*:nth-child(4n+2)]:col-span-2 md:[&>*:nth-child(4n+3)]:col-span-2 md:[&>*:only-child]:col-span-3"
>
{projects.map((project) => <Showcase collection={project} />)}
</div>
</section>
<section aria-labelledby="recent-posts">
<div class="flex flex-row items-center justify-between gap-6">
<div class="group flex flex-row items-center justify-between gap-6">
<a href="/posts">
<h2
class="animate-reveal break-words text-4xl font-medium opacity-0 [animation-delay:0.5s]"
class="animate-reveal break-words text-4xl font-medium opacity-0 [animation-delay:0.2s]"
id="recent-posts"
>
Recent posts
@ -56,7 +56,7 @@ const projects = (await getCollection("projects"))
</a>
<a
href="/posts"
class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-all ease-in-out [animation-delay:0.8s] hover:scale-90 hover:bg-tertiary"
class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-all ease-in-out [animation-delay:0.2s] group-hover:scale-90 group-hover:bg-tertiary"
>
<Icon
name="mdi:arrow-right"
@ -66,7 +66,7 @@ const projects = (await getCollection("projects"))
</a>
</div>
<div
class="mt-16 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.9s] md:grid-cols-3 md:[&>*:nth-child(4n+2)]:col-span-2 md:[&>*:nth-child(4n+3)]:col-span-2 md:[&>*:only-child]:col-span-3"
class="mt-16 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.3s] md:grid-cols-3 md:[&>*:nth-child(4n+2)]:col-span-2 md:[&>*:nth-child(4n+3)]:col-span-2 md:[&>*:only-child]:col-span-3"
>
{posts.map((post) => <Showcase collection={post} />)}
</div>