feat: add interactivity with alpinejs (#34)
* 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:
GitHub
parent
37f4fa17b8
commit
8df8272d6d
22 changed files with 379 additions and 320 deletions
|
|
@ -28,7 +28,7 @@ const listFormatter = new Intl.ListFormat("en-GB", {
|
|||
updated={article.data.updated}
|
||||
tags={article.data.tags}
|
||||
>
|
||||
<div class="mx-auto mb-8">
|
||||
<div class="mx-auto mb-8 max-w-[65ch]">
|
||||
<h1
|
||||
class="animate-reveal text-start text-2xl font-semibold break-words opacity-0"
|
||||
>
|
||||
|
|
@ -79,7 +79,9 @@ const listFormatter = new Intl.ListFormat("en-GB", {
|
|||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="animate-reveal mx-auto opacity-0 [animation-delay:0.2s]">
|
||||
<div
|
||||
class="animate-reveal mx-auto max-w-[65ch] opacity-0 [animation-delay:0.2s]"
|
||||
>
|
||||
<Prose>
|
||||
<Content />
|
||||
</Prose>
|
||||
|
|
|
|||
|
|
@ -2,15 +2,18 @@
|
|||
type Props = {
|
||||
href: String;
|
||||
link: String;
|
||||
class?: string;
|
||||
};
|
||||
|
||||
const { href, link } = Astro.props;
|
||||
const { href, link, class: additionalClasses } = Astro.props;
|
||||
|
||||
const baseClasses =
|
||||
"bg-tertiary text-primary hover:bg-accent flex w-fit flex-row items-center gap-1 justify-self-center rounded-md px-2 py-1 text-center text-sm font-medium text-nowrap capitalize";
|
||||
const combinedClasses = `${baseClasses} ${additionalClasses || ""}`;
|
||||
---
|
||||
|
||||
<a href={`${href}`}>
|
||||
<div
|
||||
class="animate-reveal bg-tertiary text-primary hover:bg-accent m-4 flex w-fit flex-row items-center gap-1 justify-self-center rounded-full px-2 py-1 text-center text-sm font-medium text-nowrap capitalize opacity-0 transition-colors [animation-delay:0.1s]"
|
||||
>
|
||||
<div class={combinedClasses}>
|
||||
{link}
|
||||
</div>
|
||||
</a>
|
||||
|
|
|
|||
97
src/components/Carousel.astro
Normal file
97
src/components/Carousel.astro
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
---
|
||||
interface Props {
|
||||
data: string;
|
||||
}
|
||||
|
||||
const { data } = Astro.props;
|
||||
---
|
||||
|
||||
<div
|
||||
class="pt-6"
|
||||
data-slides={data}
|
||||
x-data="{
|
||||
// Sets the time between each slides in milliseconds
|
||||
autoplayIntervalTime: 5000,
|
||||
init() {
|
||||
this.slides = JSON.parse(this.$el.dataset.slides);
|
||||
},
|
||||
currentSlideIndex: 1,
|
||||
isPaused: false,
|
||||
autoplayInterval: null,
|
||||
previous() {
|
||||
if (this.currentSlideIndex > 1) {
|
||||
this.currentSlideIndex = this.currentSlideIndex - 1
|
||||
} else {
|
||||
// If it's the first slide, go to the last slide
|
||||
this.currentSlideIndex = this.slides.length
|
||||
}
|
||||
},
|
||||
next() {
|
||||
if (this.currentSlideIndex < this.slides.length) {
|
||||
this.currentSlideIndex = this.currentSlideIndex + 1
|
||||
} else {
|
||||
// If it's the last slide, go to the first slide
|
||||
this.currentSlideIndex = 1
|
||||
}
|
||||
},
|
||||
autoplay() {
|
||||
this.autoplayInterval = setInterval(() => {
|
||||
if (! this.isPaused) {
|
||||
this.next()
|
||||
}
|
||||
}, this.autoplayIntervalTime)
|
||||
},
|
||||
// Updates interval time
|
||||
setAutoplayInterval(newIntervalTime) {
|
||||
clearInterval(this.autoplayInterval)
|
||||
this.autoplayIntervalTime = newIntervalTime
|
||||
this.autoplay()
|
||||
},
|
||||
}"
|
||||
x-init="autoplay"
|
||||
class="relative w-full overflow-hidden"
|
||||
>
|
||||
<div class="relative min-h-[50svh] w-full">
|
||||
<template x-for="(slide, index) in slides">
|
||||
<div
|
||||
x-cloak
|
||||
x-show="currentSlideIndex == index + 1"
|
||||
class="absolute inset-0"
|
||||
x-transition.opacity.duration.1000ms
|
||||
>
|
||||
<img
|
||||
class="absolute inset-0 h-full w-full rounded-md object-cover"
|
||||
x-bind:src="slide.data.image.url.src"
|
||||
x-bind:alt="slide.data.image.alt"
|
||||
/>
|
||||
<a
|
||||
class="absolute inset-0 z-20"
|
||||
x-bind:aria-label="slide.data.title"
|
||||
x-bind:href="'/' + slide.collection + '/' + slide.slug"></a>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div>
|
||||
<template x-for="(slide, index) in slides">
|
||||
<div
|
||||
x-show="currentSlideIndex == index + 1"
|
||||
class="text-secondary flex justify-end pt-1 text-right font-serif text-lg"
|
||||
>
|
||||
<div class="flex w-full flex-col items-end">
|
||||
<h3
|
||||
x-text="slide.data.title"
|
||||
x-bind:aria-describedby="'slide' + (index + 1) + 'Description'"
|
||||
class="border-tertiary/30 w-fit border-t italic"
|
||||
>
|
||||
</h3>
|
||||
<p
|
||||
class="text-tertiary w-fit text-sm text-pretty lg:w-1/2"
|
||||
x-text="slide.data.description"
|
||||
x-bind:id="'slide' + (index + 1) + 'Description'"
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -4,54 +4,22 @@ import Link from "@components/Link.astro";
|
|||
import { Icon } from "astro-icon/components";
|
||||
---
|
||||
|
||||
<footer class="mx-auto mt-auto mb-8 w-full max-w-prose space-y-6 pt-12">
|
||||
<div class="md:flex md:justify-between">
|
||||
<div class="text-secondary mb-6 md:mb-0">
|
||||
<a class="group inline-flex items-center" href="#top" title="Back to top">
|
||||
<Icon
|
||||
name="icon"
|
||||
title={SITE.TITLE}
|
||||
class="group-hover:text-tertiary h-8 w-auto transition-colors duration-500 ease-in-out"
|
||||
/>
|
||||
<div
|
||||
class="group-hover:text-tertiary ml-2 hidden flex-none text-sm font-bold capitalize transition-colors duration-500 md:visible lg:block"
|
||||
>
|
||||
Troy Lusty
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="text-left sm:gap-6 md:text-right">
|
||||
<ul class="text-tertiary font-medium">
|
||||
{
|
||||
SITE.NAVLINKS.map((i) => (
|
||||
<li class="mb-1 last:mb-0">
|
||||
<a
|
||||
data-navlink
|
||||
href={i.href}
|
||||
class="hover:text-secondary capitalize transition-colors"
|
||||
>
|
||||
{i.name}
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:flex sm:items-center sm:justify-between">
|
||||
<span class="text-tertiary text-sm sm:text-center"
|
||||
<footer class="mx-auto mt-auto mb-6 w-full max-w-prose pt-12">
|
||||
<div class="flex flex-col items-center justify-between md:flex-row">
|
||||
<span class="text-tertiary text-center text-sm font-medium"
|
||||
>© {new Date().getFullYear()}
|
||||
<a href="/" class="hover:text-secondary transition-colors">{SITE.TITLE}</a
|
||||
>. All Rights Reserved.
|
||||
<a href="/" class="hover:text-secondary transition-colors duration-300"
|
||||
>{SITE.TITLE}</a
|
||||
>. All rights reserved.
|
||||
</span>
|
||||
<div class="mt-4 flex gap-2 sm:mt-0 sm:justify-center">
|
||||
<div class="mt-4 flex gap-3 sm:mt-0 sm:justify-center">
|
||||
{
|
||||
SITE.LINKS.map((i) => (
|
||||
<Link href={i.href}>
|
||||
<Icon
|
||||
name={i.icon}
|
||||
title={i.name}
|
||||
class="text-tertiary hover:text-secondary h-5 w-5 transition-colors"
|
||||
class="text-tertiary hover:text-secondary h-5 w-auto transition-colors duration-300"
|
||||
/>
|
||||
</Link>
|
||||
))
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
---
|
||||
import { SITE } from "@consts";
|
||||
import { Icon } from "astro-icon/components";
|
||||
import Button from "@components/Button.astro";
|
||||
---
|
||||
|
||||
<header class="mx-auto mb-8 w-full max-w-prose space-y-6 pt-12">
|
||||
<div
|
||||
class="text-secondary group flex h-12 items-center justify-between leading-[0px]"
|
||||
<header class="mx-auto mb-8 w-full max-w-6xl space-y-6 px-4 pt-4">
|
||||
<nav
|
||||
x-data="{ mobileMenuIsOpen: false }"
|
||||
x-on:click.away="mobileMenuIsOpen = false"
|
||||
class="flex h-12 items-center justify-between"
|
||||
>
|
||||
<a class="inline-flex items-center" href="/" title={SITE.TITLE}>
|
||||
<a class="group inline-flex items-center" href="/" title={SITE.TITLE}>
|
||||
<Icon
|
||||
name="icon"
|
||||
title={SITE.TITLE}
|
||||
|
|
@ -19,5 +22,87 @@ import { Icon } from "astro-icon/components";
|
|||
Troy Lusty
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<ul class="hidden items-center gap-4 sm:flex">
|
||||
{
|
||||
SITE.NAVLINKS.map((i) => (
|
||||
<li class="mb-1 last:mb-0">
|
||||
<a
|
||||
data-navlink
|
||||
href={i.href}
|
||||
class="text-secondary hover:text-secondary decoration-tertiary font-medium capitalize decoration-wavy underline-offset-2 focus:underline focus:outline-hidden"
|
||||
aria-current="page"
|
||||
>
|
||||
{i.name}
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
<li>
|
||||
<a href={`mailto:${SITE.EMAIL}`}>
|
||||
<span
|
||||
class="rounded-full bg-blue-500/10 px-3 py-2 text-sm leading-6 font-medium text-blue-400 ring-1 ring-blue-500/20 ring-inset"
|
||||
>Hire me</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<button
|
||||
x-on:click="mobileMenuIsOpen = !mobileMenuIsOpen"
|
||||
x-bind:aria-expanded="mobileMenuIsOpen"
|
||||
x-bind:class="mobileMenuIsOpen ? 'fixed top-6 right-6 z-99' : null"
|
||||
type="button"
|
||||
class="text-secondary flex sm:hidden"
|
||||
aria-label="mobile menu"
|
||||
aria-controls="mobileMenu"
|
||||
>
|
||||
<Icon
|
||||
name="mdi:menu"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
x-cloak
|
||||
x-show="!mobileMenuIsOpen"
|
||||
/>
|
||||
<Icon
|
||||
name="mdi:window-close"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
x-cloak
|
||||
x-show="mobileMenuIsOpen"
|
||||
/>
|
||||
</button>
|
||||
<ul
|
||||
x-cloak
|
||||
x-show="mobileMenuIsOpen"
|
||||
x-transition:enter="transition motion-reduce:transition-none ease-out duration-300"
|
||||
x-transition:enter-start="-translate-y-full"
|
||||
x-transition:enter-end="translate-y-0"
|
||||
x-transition:leave="transition motion-reduce:transition-none ease-out duration-300"
|
||||
x-transition:leave-start="translate-y-0"
|
||||
x-transition:leave-end="-translate-y-full"
|
||||
id="mobileMenu"
|
||||
class="bg-primary fixed inset-x-0 top-0 z-98 flex max-h-svh flex-col overflow-y-auto rounded-b-md px-6 pt-20 pb-6 sm:hidden"
|
||||
>
|
||||
{
|
||||
SITE.NAVLINKS.map((i) => (
|
||||
<li class="py-4">
|
||||
<a
|
||||
data-navlink
|
||||
href={i.href}
|
||||
class="text-secondary w-full text-lg font-medium capitalize focus:underline"
|
||||
aria-current="page"
|
||||
>
|
||||
{i.name}
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
<li class="mt-4 w-full border-none">
|
||||
<Button
|
||||
href={`mailto:${SITE.EMAIL}`}
|
||||
link="Hire me"
|
||||
class="block w-full justify-center"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,33 @@
|
|||
---
|
||||
import borel from "@fontsource/borel/files/borel-latin-400-normal.woff2?url";
|
||||
import instrument from "@fontsource/instrument-serif/files/instrument-serif-latin-400-normal.woff2?url";
|
||||
---
|
||||
|
||||
<link
|
||||
rel="preload"
|
||||
as="font"
|
||||
type="font/woff2"
|
||||
href={borel}
|
||||
href={instrument}
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
|
||||
<section class="mt-6 overflow-clip">
|
||||
<h1
|
||||
class="--translate-y-full animate-logo text-4xl font-bold text-pretty md:text-6xl"
|
||||
>
|
||||
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 px-1 font-['Borel'] text-3xl text-transparent md:text-5xl"
|
||||
>United Kingdom</span
|
||||
>.
|
||||
</h1>
|
||||
<section>
|
||||
<div class="mx-auto px-8 py-32">
|
||||
<div
|
||||
class="animate-reveal mx-auto max-w-xl text-center text-4xl tracking-tight text-balance text-white md:text-6xl"
|
||||
>
|
||||
<div
|
||||
class="text-secondary flex items-center justify-center gap-3 font-semibold"
|
||||
>
|
||||
Hi, I'm Troy,
|
||||
<img
|
||||
src="/assets/icon.png"
|
||||
class="size-12 rounded-xl md:size-16"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="text-tertiary font-serif font-light tracking-wide italic">
|
||||
digital designer.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -8,12 +8,12 @@ type Props = {
|
|||
const { collection } = Astro.props;
|
||||
---
|
||||
|
||||
<li>
|
||||
<li class="border-tertiary/30 border-l">
|
||||
<a
|
||||
class="group hover:bg-tertiary/30 bg-none"
|
||||
href={`/${collection.collection}/${collection.slug}`}
|
||||
>
|
||||
<article class="flex flex-col">
|
||||
<article class="ml-2 flex flex-col">
|
||||
<h3 class="mb-1 font-semibold text-balance">
|
||||
<span class="text-secondary">{collection.data.title}</span><span
|
||||
class="text-tertiary group-hover:text-accent ml-2 transition-colors"
|
||||
|
|
|
|||
|
|
@ -10,39 +10,31 @@ const { collection } = Astro.props;
|
|||
---
|
||||
|
||||
<li>
|
||||
<article
|
||||
class="group relative isolate mx-auto flex h-full w-full flex-col justify-end overflow-hidden rounded px-8 pt-40 pb-8"
|
||||
>
|
||||
<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-all duration-300 group-hover:brightness-50"
|
||||
fit="cover"
|
||||
/>
|
||||
|
||||
<a
|
||||
class="absolute inset-0 z-20"
|
||||
href={`/${collection.collection}/${collection.slug}`}
|
||||
aria-label={collection.data.title}></a>
|
||||
<h3
|
||||
class="z-10 w-fit text-xl font-semibold text-white opacity-0 transition-opacity duration-300 group-hover:opacity-100"
|
||||
>
|
||||
{collection.data.title}
|
||||
</h3>
|
||||
<div
|
||||
class="z-10 w-fit gap-y-1 overflow-hidden text-sm leading-6 text-neutral-400 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
|
||||
>
|
||||
{
|
||||
collection.data.collection ? (
|
||||
<span>
|
||||
<FormattedDate date={collection.data.date} /> (Collection)
|
||||
</span>
|
||||
) : (
|
||||
<FormattedDate date={collection.data.date} />
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<article class="flex-col overflow-clip">
|
||||
<a href={`/${collection.collection}/${collection.slug}`} class="group">
|
||||
<div class="overflow-hidden rounded-md">
|
||||
<Image
|
||||
src={collection.data.image.url}
|
||||
alt={collection.data.image.alt}
|
||||
title={collection.data.title}
|
||||
loading="eager"
|
||||
class="aspect-square object-cover transition-transform duration-300 ease-in-out group-hover:scale-102"
|
||||
fit="cover"
|
||||
/>
|
||||
</div>
|
||||
<article class="flex flex-col">
|
||||
<h3 class="mb-1 font-semibold text-balance">
|
||||
<span class="text-secondary">{collection.data.title}</span><span
|
||||
class="text-tertiary group-hover:text-accent ml-2 transition-colors"
|
||||
>{collection.data.description}</span
|
||||
>
|
||||
</h3>
|
||||
<time class="text-accent block text-sm"
|
||||
><time>
|
||||
<FormattedDate date={collection.data.date} />
|
||||
</time></time
|
||||
>
|
||||
</article>
|
||||
</a>
|
||||
</article>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
<div
|
||||
class="mx-auto mt-2 mb-8 w-full max-w-[60ch] p-4 pb-16 md:mt-16 md:mb-32 md:p-5"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
@ -39,11 +39,21 @@ export const SITE: Site = {
|
|||
href: "mailto:hello@troylusty.com",
|
||||
icon: "mdi:email",
|
||||
},
|
||||
{
|
||||
name: "CV",
|
||||
href: "/troy-lusty-cv.pdf",
|
||||
icon: "mdi:certificate",
|
||||
},
|
||||
{
|
||||
name: "itch.io",
|
||||
href: "https://troylusty.itch.io",
|
||||
icon: "simple-icons:itchdotio",
|
||||
},
|
||||
{
|
||||
name: "LinkedIn",
|
||||
href: "https://linkedin.com/in/troylusty",
|
||||
icon: "mdi:linkedin",
|
||||
},
|
||||
{
|
||||
name: "GitHub",
|
||||
href: "https://github.com/troylusty",
|
||||
|
|
@ -56,10 +66,6 @@ export const SITE: Site = {
|
|||
},
|
||||
],
|
||||
NAVLINKS: [
|
||||
{
|
||||
name: "home",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
name: "projects",
|
||||
href: "/projects",
|
||||
|
|
@ -68,10 +74,6 @@ export const SITE: Site = {
|
|||
name: "posts",
|
||||
href: "/posts",
|
||||
},
|
||||
{
|
||||
name: "curriculum vitae",
|
||||
href: "/cv",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -27,11 +27,11 @@ const { title, description, image, date, updated, tags } = Astro.props;
|
|||
tags={tags}
|
||||
/>
|
||||
<body
|
||||
class="bg-primary text-secondary flex min-h-screen flex-col justify-start p-8 pt-0 md:pt-8"
|
||||
class="bg-primary text-secondary flex min-h-screen flex-col justify-start p-4 pt-0 md:pt-4"
|
||||
>
|
||||
<Header />
|
||||
<main
|
||||
class="mx-auto w-full max-w-prose space-y-6"
|
||||
class="mx-auto w-full max-w-[1344px] space-y-6"
|
||||
transition:animate="fade"
|
||||
>
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import "@fontsource-variable/red-hat-mono";
|
||||
@import "@fontsource-variable/outfit";
|
||||
@import "@fontsource/borel";
|
||||
@import "@fontsource/instrument-serif";
|
||||
|
||||
@import "tailwindcss";
|
||||
@plugin "@tailwindcss/typography";
|
||||
|
|
@ -14,13 +14,10 @@
|
|||
|
||||
@theme {
|
||||
--font-sans: "Outfit Variable", "sans-serif";
|
||||
--font-serif: "Instrument Serif", "serif";
|
||||
--font-mono: "Red Hat Mono Variable", "monospace";
|
||||
|
||||
--animate-reveal: reveal 0.3s forwards ease-in-out;
|
||||
--animate-logo: logo 0.5s forwards ease-out;
|
||||
--animate-gradient-x: gradient-x 6s ease infinite;
|
||||
--animate-gradient-y: gradient-y 6s ease infinite;
|
||||
--animate-gradient-xy: gradient-xy 6s ease infinite;
|
||||
|
||||
@keyframes reveal {
|
||||
0% {
|
||||
|
|
@ -34,49 +31,6 @@
|
|||
filter: blur(0px);
|
||||
}
|
||||
}
|
||||
@keyframes logo {
|
||||
0% {
|
||||
transform: translateY(100%);
|
||||
color: var(--primary);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0%);
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
@keyframes gradient-x {
|
||||
0%,
|
||||
100% {
|
||||
background-size: 200% 200%;
|
||||
background-position: left center;
|
||||
}
|
||||
50% {
|
||||
background-size: 200% 200%;
|
||||
background-position: right center;
|
||||
}
|
||||
}
|
||||
@keyframes gradient-y {
|
||||
0%,
|
||||
100% {
|
||||
background-size: 400% 400%;
|
||||
background-position: center top;
|
||||
}
|
||||
50% {
|
||||
background-size: 200% 200%;
|
||||
background-position: center center;
|
||||
}
|
||||
}
|
||||
@keyframes gradient-xy {
|
||||
0%,
|
||||
100% {
|
||||
background-size: 400% 400%;
|
||||
background-position: left center;
|
||||
}
|
||||
50% {
|
||||
background-size: 200% 200%;
|
||||
background-position: right center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
|
|
@ -98,6 +52,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
@utility container {
|
||||
margin-inline: auto;
|
||||
padding-inline: 2rem;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
@media print {
|
||||
body {
|
||||
background: none;
|
||||
|
|
@ -113,3 +73,7 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
[x-cloak] {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue