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

feat: add interactivity with alpinejs (#34)

Browse source 
* first stages of implementing alpinejs

* add link to projects slideshow

* begin adding nav bar

* inpired hero from flaco theme

* fix posts showcase

fixed to publish current work to latest

* revert docker action

* update astro version
This commit is contained in:
Troy 2025-02-12 13:03:43 +00:00 • committed by GitHub
parent 37f4fa17b8
commit 8df8272d6d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
22 changed files with 379 additions and 320 deletions
Download patch file Download diff file Expand all files Collapse all files

91
src/pages/cv.astro
View file

@ -1,91 +0,0 @@
---
import Layout from "@layouts/Layout.astro";
import { CV } from "@consts";
import Work from "@components/Work.astro";
import Education from "@components/Education.astro";
import Skills from "@components/Skills.astro";
import { Icon } from "astro-icon/components";
import Link from "@components/Link.astro";
---
<Layout title={CV.TITLE} description={CV.DESCRIPTION}>
<section>
<div
class="flex flex-col items-start justify-between gap-6 md:flex-row md:items-center"
>
<h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
Troy Lusty
</h1>
<div
class="text-tertiary mt-4 flex flex-col items-start gap-2 md:flex-row"
>
<div class="animate-reveal flex items-center gap-2 opacity-0">
<div
class="text-tertiary hover:text-accent flex flex-row items-center gap-2 transition-colors"
>
<Icon name="mdi:email" />
<Link href="mailto:hello@troylusty.com">
<p>hello@troylusty.com</p>
</Link>
</div>
<div
class="text-tertiary hover:text-accent flex flex-row items-center gap-2 transition-colors"
>
<Icon name="mdi:web" />
<Link href="/">
<p>troylusty.com</p>
</Link>
</div>
</div>
</div>
</div>
</section>
<section class="animate-reveal opacity-0 [animation-delay:0.1s]">
<h2 class="mb-4 text-2xl font-semibold break-words capitalize">About me</h2>
<p class="mb-2">
Hi, my name is Troy and I’m a student 3D artist studying on a BA (Hons)
Game Arts and Design course in the UK.
</p>
<p class="mb-2">
In 2019 I began experimenting with Blender after having used various 2D
art applications such as Adobe Photoshop for over 5 years. After making
this change, I realised that I have a huge interest in creating 3D
graphics for video games and TV. At the moment I am working on expanding
my skillset to encompass other areas with a focus on lighting and
rendering techniques in relation to environment art.
</p>
<p class="mb-2">
My current portfolio of work can be found on my website at:
<a
class="text-secondary decoration-tertiary underline decoration-wavy"
href="/projects">troylusty.com/projects</a
>.
</p>
</section>
<section class="animate-reveal opacity-0 [animation-delay:0.2s]">
<h2 class="mb-4 text-2xl font-semibold break-words capitalize">
Education
</h2>
<Education />
</section>
<section class="animate-reveal opacity-0 [animation-delay:0.3s]">
<h2 class="mb-4 text-2xl font-semibold break-words capitalize">Skills</h2>
<p class="mb-4">
My specific chosen area of focus is design, lighting, and rendering
focusing on 3D environments within software such as Blender and Unreal
Engine. Using either real-time or offline rendering techniques. In
addition to this I am also very interested in web development, with this
site's <Link
class="text-secondary decoration-tertiary underline decoration-wavy"
href="https://github.com/troylusty/troylusty.com">source code</Link
> being public.
</p>
<Skills />
</section>
<section class="animate-reveal opacity-0 [animation-delay:0.4s]">
<h2 class="mb-4 text-2xl font-semibold break-words capitalize">
Experience
</h2>
<Work />
</section>
</Layout>

57
src/pages/index.astro
View file

@ -2,10 +2,11 @@
import Layout from "@layouts/Layout.astro";
import { HOME } from "@consts";
import { getCollection } from "astro:content";
import ShowcaseProject from "@components/ShowcaseProject.astro";
import ShowcasePost from "@components/ShowcasePost.astro";
import Hero from "@components/Hero.astro";
import Button from "@components/Button.astro";
import { Icon } from "astro-icon/components";
import Carousel from "@components/Carousel.astro";
const allPosts = await getCollection("posts");
@ -20,35 +21,43 @@ const projects = allProjects
.filter((project) => !project.data.draft && project.data.featured)
.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
.slice(0, HOME.HOMESETTINGS?.NUM_PROJECTS_ON_HOMEPAGE);
const projectsJSON = JSON.stringify(projects);
---
<Layout title={HOME.TITLE} description={HOME.DESCRIPTION}>
<Hero />
<section aria-labelledby="featured-projects">
<div class="group flex w-fit flex-row items-center">
<a href="/projects">
<h2
class="animate-reveal group-hover:text-tertiary text-2xl font-semibold break-words capitalize opacity-0 transition-colors duration-500"
id="featured-projects"
>
Featured projects
</h2>
</a>
</div>
<ol
class="animate-reveal mt-8 grid grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
<section aria-labelledby="featured-projects" class="container">
<div
class="mx-auto flex flex-col items-start justify-between sm:flex-row sm:items-center"
>
{projects.map((project) => <ShowcaseProject collection={project} />)}
</ol>
{
allProjects.length > HOME.HOMESETTINGS!.NUM_PROJECTS_ON_HOMEPAGE ? (
<div class="flex justify-center">
<Button href="/projects" link="View all" />
</div>
) : null
}
<h2
class="animate-reveal text-2xl font-semibold break-words capitalize opacity-0"
id="featured-projects"
>
Featured projects
</h2>
{
allProjects.length > HOME.HOMESETTINGS!.NUM_PROJECTS_ON_HOMEPAGE ? (
<div class="group">
<a
href="/projects"
class="group text-tertiary flex items-center justify-center gap-1 transition-colors duration-300 group-hover:text-sky-500"
>
View all
<Icon
name="mdi:chevron-right"
class="transition-all duration-300 group-hover:translate-x-2 group-hover:text-sky-500"
/>
</a>
</div>
) : null
}
</div>
<Carousel data={projectsJSON} />
</section>
<section aria-labelledby="recent-posts">
<section aria-labelledby="recent-posts" class="container max-w-[65ch]">
<div class="group flex w-fit flex-row items-center">
<a href="/posts">
<h2

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

@ -10,12 +10,14 @@ const posts = (await getCollection("posts"))
---
<Layout title={SITE.TITLE} description={POSTS.DESCRIPTION}>
<h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
{POSTS.TITLE}
</h1>
<ol
class="animate-reveal grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s]"
>
{posts.map((article: any) => <ShowcasePost collection={article} />)}
</ol>
<div class="mx-auto max-w-[65ch]">
<h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
{POSTS.TITLE}
</h1>
<ol
class="animate-reveal mt-8 grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s]"
>
{posts.map((article: any) => <ShowcasePost collection={article} />)}
</ol>
</div>
</Layout>

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

@ -10,12 +10,14 @@ const projects = (await getCollection("projects"))
---
<Layout title={SITE.TITLE} description={PROJECTS.DESCRIPTION}>
<h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
{PROJECTS.TITLE}
</h1>
<ol
class="animate-reveal grid grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
>
{projects.map((article: any) => <ShowcaseProject collection={article} />)}
</ol>
<div class="mx-auto max-w-[65ch]">
<h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
{PROJECTS.TITLE}
</h1>
<ol
class="animate-reveal mt-8 grid grid-cols-2 gap-6 opacity-0 [animation-delay:0.1s] md:grid-cols-3"
>
{projects.map((article: any) => <ShowcaseProject collection={article} />)}
</ol>
</div>
</Layout>