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

src/components/Article.astro

@@ -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>

src/components/Button.astro

@@ -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>

src/components/Carousel.astro

@@ -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>

src/components/Footer.astro

@@ -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"
       >&copy; {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>
         ))

src/components/Header.astro

@@ -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>

src/components/Hero.astro

@@ -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>

src/components/ShowcasePost.astro

@@ -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"

src/components/ShowcaseProject.astro

@@ -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>

src/components/SkinnyCenter.astro

@@ -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>