From 3cb4b9b71f51c17f15ffbbb1bd332a733724c05f Mon Sep 17 00:00:00 2001
From: Jaron <jaron@hat.fish>
Date: Fri, 12 Jun 2026 20:22:56 -0500
Subject: [PATCH] Added some animations and tweaked some styles

---
 app/assets/css/main.css         |  37 +++-
 app/layouts/main.vue            | 136 +++++++++++---
 app/pages/index.vue             | 320 +++++++++++++++++++-------------
 app/pages/writing/[...slug].vue |   8 +-
 app/pages/writing/index.vue     |  87 +++++----
 app/plugins/gsap.client.ts      |  13 ++
 bun.lock                        |   3 +
 nuxt.config.ts                  |   1 +
 package.json                    |   1 +
 9 files changed, 404 insertions(+), 202 deletions(-)
 create mode 100644 app/plugins/gsap.client.ts

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index df92ac5..1239605 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -25,8 +25,8 @@
 
 .dark-mode {
     --text: #fbfbf7;
-    --bg: #111111;
-    --muted: #d1d1d1;
+    --bg: #0c0c0c;
+    --muted: #a3a3a3;
 
     --color-white-500: #fbfbf7;
 }
@@ -73,6 +73,34 @@ body {
     line-height: 1.6;
 }
 
+/* full-page film grain */
+body::after {
+    content: '';
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    pointer-events: none;
+    opacity: 0.06;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+    mix-blend-mode: multiply;
+}
+
+.dark-mode body::after {
+    mix-blend-mode: screen;
+    opacity: 0.045;
+}
+
+/* quick page transition */
+.page-enter-active,
+.page-leave-active {
+    transition: opacity 0.18s ease;
+}
+
+.page-enter-from,
+.page-leave-to {
+    opacity: 0;
+}
+
 .basic-link {
     color: var(--text);
     transition: opacity 0.2s ease;
@@ -92,7 +120,10 @@ body {
     transition: all 200ms ease;
     padding: 0 4px;
     margin: 0 -4px;
-    background-image: linear-gradient(var(--color-white-500), var(--color-white-500));
+    background-image: linear-gradient(
+        var(--color-white-500),
+        var(--color-white-500)
+    );
     background-size: 100% 1px;
     background-position: bottom;
     background-repeat: no-repeat;
diff --git a/app/layouts/main.vue b/app/layouts/main.vue
index ee08000..3ad5a66 100644
--- a/app/layouts/main.vue
+++ b/app/layouts/main.vue
@@ -1,3 +1,9 @@
+<script lang="ts">
+// module-scoped so it survives client-side navigation —
+// the intro should only ever play once per visit
+let introPlayed = false;
+</script>
+
 <script setup lang="ts">
 defineProps<{
     title?: string;
@@ -9,6 +15,60 @@ const theme = useColorMode();
 const toggleTheme = () => {
     theme.preference = theme.preference === 'light' ? 'dark' : 'light';
 };
+
+const { $gsap } = useNuxtApp();
+const pageEl = ref<HTMLElement | null>(null);
+
+onMounted(() => {
+    if (!$gsap || !pageEl.value || introPlayed) return;
+    introPlayed = true;
+
+    const reduced = window.matchMedia(
+        '(prefers-reduced-motion: reduce)',
+    ).matches;
+
+    const ctx = $gsap.context(() => {
+        if (reduced) return;
+
+        const tl = $gsap.timeline({
+            defaults: { ease: 'power3.out' },
+        });
+
+        // trace lines draw down the page
+        tl.from('.trace', {
+            scaleY: 0,
+            transformOrigin: 'top center',
+            duration: 1.4,
+            ease: 'power3.inOut',
+        })
+            // header panel fades in as the lines pass it
+            .from(
+                '.header-lower',
+                { autoAlpha: 0, duration: 0.9, ease: 'power2.out' },
+                0.3,
+            )
+            // masked title reveal
+            .from('.name', { yPercent: 110, duration: 0.9 }, 0.55)
+            .from('.title', { yPercent: 120, autoAlpha: 0, duration: 0.8 }, 0.7)
+            // footer appears as the lines reach the bottom
+            .from(
+                ['.footer-upper', '.footer-lower'],
+                { autoAlpha: 0, duration: 0.7, ease: 'power2.out' },
+                0.9,
+            )
+            // nav chrome fades in last
+            .from('.header-upper', { autoAlpha: 0, duration: 0.7 }, 0.9);
+
+        // body content waits for the intro
+        tl.from(
+            'main',
+            { autoAlpha: 0, y: 16, duration: 0.8, ease: 'power2.out' },
+            0.7,
+        );
+    }, pageEl.value);
+
+    onBeforeUnmount(() => ctx.revert());
+});
 </script>
 
 <template>
@@ -24,7 +84,7 @@ const toggleTheme = () => {
                 <feBlend mode="multiply" in="SourceGraphic"></feBlend>
             </filter>
         </svg>
-        <div class="page-wrapper">
+        <div class="page-wrapper" ref="pageEl">
             <div class="trace left"></div>
 
             <div class="trace right"></div>
@@ -41,24 +101,36 @@ const toggleTheme = () => {
                                 {{ theme.value === 'dark' ? '🌚' : '🌝' }}
                             </button>
                             <div class="flex-ff"></div>
+                            <a
+                                class="basic-link"
+                                href="https://github.com/jaronpate"
+                            >
+                                GitHub
+                            </a>
                             <!-- <NuxtLink to="/resume" class="basic-link"
                                 >Resume</NuxtLink
                             > -->
-                            <!-- <NuxtLink to="/writing" class="basic-link">
+                            <NuxtLink to="/writing" class="basic-link">
                                 Writing
-                            </NuxtLink> -->
+                            </NuxtLink>
                         </div>
                     </slot>
                 </div>
                 <div class="header-lower">
                     <slot name="header-lower">
-                        <h1 class="name">{{ title || "Hello, I'm Jaron" }}</h1>
-                        <p class="title">
-                            {{
-                                description ||
-                                'Software Engineer by trade — builder by nature.'
-                            }}
-                        </p>
+                        <div class="mask">
+                            <h1 class="name">
+                                {{ title || "Hello, I'm Jaron" }}
+                            </h1>
+                        </div>
+                        <div class="mask">
+                            <p class="title">
+                                {{
+                                    description ||
+                                    'Software Engineer by trade — builder by nature.'
+                                }}
+                            </p>
+                        </div>
                     </slot>
                 </div>
             </header>
@@ -69,33 +141,27 @@ const toggleTheme = () => {
             </main>
 
             <footer class="footer">
-                <div class="footer-upper">
-                    <div class="flex-center">
-                        <p>
-                            <a class="punch-link" href="mailto:yo@jp.wtf"
-                                >Say hi.</a
-                            >
-                        </p>
-                        <div class="flex-ff"></div>
-                        <p style="text-align: right">
-                            Let's make something cool.
-                        </p>
-                    </div>
+                <div class="footer-upper flex-center">
+                    <p>
+                        <a class="punch-link" href="mailto:yo@jp.wtf"
+                            >Say hi.</a
+                        >
+                    </p>
+                    <div class="flex-ff"></div>
+                    <p style="text-align: right">Let's make something cool.</p>
                 </div>
-                <div class="footer-lower">
-                    <div class="flex-center" style="gap: var(--gap)">
-                        <p style="text-align: right">Est. 2003</p>
-                        <!-- <p style="font-family: monospace">🐟🎩.dev</p> -->
-                        <div class="flex-ff"></div>
-                        <p style="text-align: right">Austin, TX</p>
-                    </div>
+                <div class="footer-lower flex-center" style="gap: var(--gap)">
+                    <p style="text-align: right">Est. 2003</p>
+                    <!-- <p style="font-family: monospace">🐟🎩.dev</p> -->
+                    <div class="flex-ff"></div>
+                    <p style="text-align: right">Austin, TX</p>
                 </div>
             </footer>
         </div>
     </div>
 </template>
 
-<style>
+<style scoped>
 .page-wrapper {
     --main-width: 50vw;
     width: var(--main-width);
@@ -133,6 +199,10 @@ svg[height='0'] {
     position: fixed;
 }
 
+.mask {
+    overflow: hidden;
+}
+
 .name {
     font-size: 3rem;
     font-weight: 400;
@@ -144,6 +214,7 @@ svg[height='0'] {
     font-weight: 300;
     margin: 0;
     font-style: italic;
+    color: var(--color-white-500);
 }
 
 .header {
@@ -226,12 +297,17 @@ svg[height='0'] {
     font-weight: bold;
     color: var(--text);
     transition: opacity 0.2s ease;
+    padding: 0;
 }
 
 .theme-toggle:hover {
     opacity: 0.5;
 }
 
+.footer p {
+    margin: 0;
+}
+
 @media (max-width: 1024px) {
     .page-wrapper {
         --main-width: 80vw;
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 6fe0f4d..38a4deb 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,3 +1,8 @@
+<script lang="ts">
+// module-scoped so the reveal only plays once per visit
+let sectionsRevealed = false;
+</script>
+
 <script setup lang="ts">
 import { ref } from 'vue';
 
@@ -26,148 +31,188 @@ useHead({
 });
 
 definePageMeta({
-    layout: 'main',
+    layout: false,
+});
+
+const { $gsap } = useNuxtApp();
+const pageRoot = ref<HTMLElement | null>(null);
+
+onMounted(() => {
+    if (!$gsap || !pageRoot.value || sectionsRevealed) return;
+    sectionsRevealed = true;
+
+    const reduced = window.matchMedia(
+        '(prefers-reduced-motion: reduce)',
+    ).matches;
+
+    const ctx = $gsap.context(() => {
+        if (reduced) return;
+
+        // sections in view on load are revealed by the layout's intro;
+        // below-the-fold sections rise in as they enter the viewport
+        $gsap.utils.toArray<HTMLElement>('main section').forEach((el) => {
+            const inView = el.getBoundingClientRect().top < window.innerHeight;
+            if (inView) return;
+
+            $gsap.from(el, {
+                autoAlpha: 0,
+                y: 24,
+                duration: 0.6,
+                ease: 'power2.out',
+                scrollTrigger: {
+                    trigger: el,
+                    start: 'top 92%',
+                },
+            });
+        });
+    }, pageRoot.value);
+
+    onBeforeUnmount(() => ctx.revert());
 });
 </script>
 
 <template>
-    <NuxtLayout name="main">
-        <section class="projects">
-            <h5>Selected Work</h5>
-            <div class="section__content">
-                <a
-                    href="https://unicord.hat.fish/"
-                    target="_blank"
-                    class="project"
-                >
-                    <h3 class="project__title">Unicord</h3>
-                    <p class="project__description">
-                        Discord bot SDK inspired by webserver architecture.
+    <div ref="pageRoot">
+        <NuxtLayout name="main">
+            <section class="projects">
+                <h5>Selected Work</h5>
+                <div class="section__content">
+                    <a
+                        href="https://unicord.hat.fish/"
+                        target="_blank"
+                        class="project"
+                    >
+                        <h3 class="project__title">Unicord</h3>
+                        <p class="project__description">
+                            Discord bot SDK inspired by webserver architecture.
+                        </p>
+                    </a>
+                    <a
+                        href="https://mystwright.com/"
+                        target="_blank"
+                        class="project"
+                    >
+                        <h3 class="project__title">Mystwright</h3>
+                        <p class="project__description">
+                            An AI-driven mystery detective game. Generate,
+                            investigate, solve.
+                        </p>
+                    </a>
+                    <a
+                        href="https://github.com/jaronpate/rift-buddy"
+                        target="_blank"
+                        class="project"
+                    >
+                        <h3 class="project__title">Rune Buddy</h3>
+                        <p class="project__description">
+                            League of Legends runepage manager. Save & organise
+                            your pages for free.
+                        </p>
+                    </a>
+                </div>
+            </section>
+            <section class="about">
+                <h5>About</h5>
+                <div class="section__content">
+                    <p>
+                        I enjoy the entire process of building things; backend,
+                        frontend, product, etc.
                     </p>
-                </a>
-                <a
-                    href="https://mystwright.com/"
-                    target="_blank"
-                    class="project"
-                >
-                    <h3 class="project__title">Mystwright</h3>
-                    <p class="project__description">
-                        An AI-driven mystery detective game. Generate,
-                        investigate, solve.
+                    <p>
+                        I left school and my job at Chick-fil-A in 2022 to write
+                        code full time. It's definitely one of the best
+                        decisions I've ever made. I've learned so much since
+                        then and
+                        <em>still</em> have so much more to learn.
                     </p>
-                </a>
-                <a
-                    href="https://github.com/jaronpate/rift-buddy"
-                    target="_blank"
-                    class="project"
-                >
-                    <h3 class="project__title">Rune Buddy</h3>
-                    <p class="project__description">
-                        League of Legends runepage manager. Save & organise your
-                        pages for free.
+                    <p>
+                        If you want to build something cool or connect hit me
+                        up! I still dont know enough people to form a band yet
+                        ;)
                     </p>
-                </a>
-            </div>
-        </section>
-        <section class="about">
-            <h5>About</h5>
-            <div class="section__content">
-                <p>
-                    I enjoy the entire process of building things; backend,
-                    frontend, product, etc.
-                </p>
-                <p>
-                    I left school and my job at Chick-fil-A in 2022 to write
-                    code full time. It's definitely one of the best decisions
-                    I've ever made. I've learned so much since then and
-                    <em>still</em> have so much more to learn.
-                </p>
-                <p>
-                    If you want to build something cool or connect hit me up! I
-                    still dont know enough people to form a band yet ;)
-                </p>
-            </div>
-        </section>
-        <!-- <section class="photos">
-            <h5>Photos</h5>
-            <div class="section__content">
-                <div class="photo-grid">
-                    <div class="photo-grid__item">
-                        <div class="photo__image">
-                            <img
-                                src="/photography/athens_red_scooter.jpg"
-                                alt="Red scooter in Athens"
-                            />
+                </div>
+            </section>
+            <section class="photos">
+                <h5>Photos</h5>
+                <div class="section__content">
+                    <div class="photo-grid">
+                        <div class="photo-grid__item">
+                            <div class="photo__image">
+                                <img
+                                    src="/photography/athens_red_scooter.jpg"
+                                    alt="Red scooter in Athens"
+                                />
+                            </div>
+                            <div class="photo__overlay">
+                                <p>Athens</p>
+                                <p>2026</p>
+                            </div>
                         </div>
-                        <div class="photo__overlay">
-                            <p>Athens</p>
-                            <p>2026</p>
+                        <div class="photo-grid__item">
+                            <div class="photo__image">
+                                <img
+                                    src="/photography/athens_subway.jpg"
+                                    alt="Athens metro station"
+                                />
+                            </div>
+                            <div class="photo__overlay">
+                                <p>Athens</p>
+                                <p>2026</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="photo-grid__item">
-                        <div class="photo__image">
-                            <img
-                                src="/photography/athens_subway.jpg"
-                                alt="Athens metro station"
-                            />
+                        <div class="photo-grid__item">
+                            <div class="photo__image">
+                                <img
+                                    src="/photography/athens_sunset.jpg"
+                                    alt="Athens at sunset"
+                                />
+                            </div>
+                            <div class="photo__overlay">
+                                <p>Athens</p>
+                                <p>2026</p>
+                            </div>
                         </div>
-                        <div class="photo__overlay">
-                            <p>Athens</p>
-                            <p>2026</p>
+                        <div class="photo-grid__item">
+                            <div class="photo__image">
+                                <img
+                                    src="/photography/london_porsche.jpg"
+                                    alt="Porsche shop in London"
+                                />
+                            </div>
+                            <div class="photo__overlay">
+                                <p>London</p>
+                                <p>2025</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="photo-grid__item">
-                        <div class="photo__image">
-                            <img
-                                src="/photography/athens_sunset.jpg"
-                                alt="Athens at sunset"
-                            />
+                        <div class="photo-grid__item">
+                            <div class="photo__image">
+                                <img
+                                    src="/photography/underground.jpg"
+                                    alt="Entrace to the London underground"
+                                />
+                            </div>
+                            <div class="photo__overlay">
+                                <p>London</p>
+                                <p>2026</p>
+                            </div>
                         </div>
-                        <div class="photo__overlay">
-                            <p>Athens</p>
-                            <p>2026</p>
-                        </div>
-                    </div>
-                    <div class="photo-grid__item">
-                        <div class="photo__image">
-                            <img
-                                src="/photography/london_porsche.jpg"
-                                alt="Porsche shop in London"
-                            />
-                        </div>
-                        <div class="photo__overlay">
-                            <p>London</p>
-                            <p>2025</p>
-                        </div>
-                    </div>
-                    <div class="photo-grid__item">
-                        <div class="photo__image">
-                            <img
-                                src="/photography/underground.jpg"
-                                alt="Entrace to the London underground"
-                            />
-                        </div>
-                        <div class="photo__overlay">
-                            <p>London</p>
-                            <p>2026</p>
-                        </div>
-                    </div>
-                    <div class="photo-grid__item">
-                        <div class="photo__image">
-                            <img
-                                src="/photography/austin_parking.jpg"
-                                alt="Parking garage in Austin"
-                            />
-                        </div>
-                        <div class="photo__overlay">
-                            <p>Austin</p>
-                            <p>2024</p>
+                        <div class="photo-grid__item">
+                            <div class="photo__image">
+                                <img
+                                    src="/photography/austin_parking.jpg"
+                                    alt="Parking garage in Austin"
+                                />
+                            </div>
+                            <div class="photo__overlay">
+                                <p>Austin</p>
+                                <p>2024</p>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
-        </section> -->
-    </NuxtLayout>
+            </section>
+        </NuxtLayout>
+    </div>
 </template>
 
 <style scoped>
@@ -244,6 +289,25 @@ section:last-of-type {
     font-weight: 400;
 }
 
+.project__title::after {
+    content: '↗';
+    position: relative;
+    display: inline-block;
+    margin-left: 0.4em;
+    font-size: 0.75em;
+    opacity: 0;
+    vertical-align: center;
+    transform: translate(-6px, 6px);
+    transition:
+        opacity 0.25s ease,
+        transform 0.25s ease;
+}
+
+.project:hover .project__title::after {
+    opacity: 1;
+    transform: translate(0, 0);
+}
+
 .project__description {
     margin: 0;
     font-size: small;
@@ -287,7 +351,7 @@ section:last-of-type {
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     backdrop-filter: blur(2px);
-    color: var(--bg);
+    color: var(--color-white-500);
     z-index: 2;
     transition: opacity 0.2s ease-in-out;
     display: flex;
diff --git a/app/pages/writing/[...slug].vue b/app/pages/writing/[...slug].vue
index 73bd5f7..3ef9c5f 100644
--- a/app/pages/writing/[...slug].vue
+++ b/app/pages/writing/[...slug].vue
@@ -16,12 +16,13 @@ useSeoMeta({
 });
 
 definePageMeta({
-    layout: 'main',
+    layout: false,
 });
 </script>
 
 <template>
-    <NuxtLayout
+    <div>
+        <NuxtLayout
         name="main"
         :title="page?.title"
         :description="page?.description"
@@ -39,7 +40,8 @@ definePageMeta({
             </div>
         </template>
         <ContentRenderer class="writing__content" v-if="page" :value="page" />
-    </NuxtLayout>
+        </NuxtLayout>
+    </div>
 </template>
 
 <style scoped>
diff --git a/app/pages/writing/index.vue b/app/pages/writing/index.vue
index 1695e32..d2494b0 100644
--- a/app/pages/writing/index.vue
+++ b/app/pages/writing/index.vue
@@ -1,55 +1,66 @@
 <script setup lang="ts">
-const { data: pages } = await useAsyncData('writing-pages', () =>
-    queryCollection('writing').all(),
-);
+// const { data: pages } = await useAsyncData('writing-pages', () =>
+//     queryCollection('writing').all(),
+// );
+const pages: any[] = [];
 
 const formatDate = (dateString: string) => {
     const date = new Date(dateString);
     // ex. May 5, 2026
     return `${date.toLocaleDateString('en-US', { month: 'short' })} ${date.getDate()}, ${date.getFullYear()}`;
 };
+
+definePageMeta({
+    layout: false,
+});
 </script>
 
 <template>
-    <NuxtLayout
-        name="main"
-        title="Writing"
-        description="Thoughts I've had here and there. Maybe you'll find something helpful or interesting here."
-    >
-        <template #header-upper>
-            <div class="header-upper-inner">
-                <NuxtLink to="/" class="back-link" aria-label="Back to Home">
-                    <span class="arrow">←</span>
-                    <span>Home</span>
-                </NuxtLink>
-            </div>
-        </template>
-        <section>
-            <div class="section__content">
-                <template v-if="pages?.length">
+    <div>
+        <NuxtLayout
+            name="main"
+            title="Writing"
+            description="Thoughts I've had here and there. Maybe you'll find something helpful or interesting here."
+        >
+            <template #header-upper>
+                <div class="header-upper-inner">
                     <NuxtLink
-                        v-for="page in pages"
-                        :to="'/writing/' + page.path"
-                        :key="page.path"
-                        class="article"
+                        to="/"
+                        class="back-link"
+                        aria-label="Back to Home"
                     >
-                        <h3 class="article__title">{{ page.title }}</h3>
-                        <!-- <p class="article__date">
+                        <span class="arrow">←</span>
+                        <span>Home</span>
+                    </NuxtLink>
+                </div>
+            </template>
+            <section>
+                <div class="section__content">
+                    <template v-if="pages?.length">
+                        <NuxtLink
+                            v-for="page in pages"
+                            :to="'/writing/' + page.path"
+                            :key="page.path"
+                            class="article"
+                        >
+                            <h3 class="article__title">{{ page.title }}</h3>
+                            <!-- <p class="article__date">
                             {{ formatDate(page.date) }}
                         </p> -->
-                        <p class="article__description">
-                            {{ page.description }}
-                        </p>
-                    </NuxtLink>
-                </template>
-                <template v-else>
-                    <div class="empty-state">
-                        <p>Nothing here yet.</p>
-                    </div>
-                </template>
-            </div>
-        </section>
-    </NuxtLayout>
+                            <p class="article__description">
+                                {{ page.description }}
+                            </p>
+                        </NuxtLink>
+                    </template>
+                    <template v-else>
+                        <div class="empty-state">
+                            <p>No thoughts...head empty</p>
+                        </div>
+                    </template>
+                </div>
+            </section>
+        </NuxtLayout>
+    </div>
 </template>
 
 <style scoped>
diff --git a/app/plugins/gsap.client.ts b/app/plugins/gsap.client.ts
new file mode 100644
index 0000000..5cdb712
--- /dev/null
+++ b/app/plugins/gsap.client.ts
@@ -0,0 +1,13 @@
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+export default defineNuxtPlugin(() => {
+    gsap.registerPlugin(ScrollTrigger);
+
+    return {
+        provide: {
+            gsap,
+            ScrollTrigger,
+        },
+    };
+});
diff --git a/bun.lock b/bun.lock
index d1be0d9..cdaef7c 100644
--- a/bun.lock
+++ b/bun.lock
@@ -7,6 +7,7 @@
       "dependencies": {
         "@nuxt/content": "3.13.0",
         "better-sqlite3": "^12.9.0",
+        "gsap": "^3.15.0",
         "nuxt": "^4.4.2",
         "vue": "^3.5.33",
         "vue-router": "^5.0.6",
@@ -981,6 +982,8 @@
 
     "graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
 
+    "gsap": ["gsap@3.15.0", "", {}, "sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A=="],
+
     "gzip-size": ["gzip-size@7.0.0", "", { "dependencies": { "duplexer": "^0.1.2" } }, "sha512-O1Ld7Dr+nqPnmGpdhzLmMTQ4vAsD+rHwMm1NLUmoUFFymBOMKxCCrtDxqdBRYXdeEPEi3SyoR4TizJLQrnKBNA=="],
 
     "h3": ["h3@1.15.11", "", { "dependencies": { "cookie-es": "^1.2.3", "crossws": "^0.3.5", "defu": "^6.1.6", "destr": "^2.0.5", "iron-webcrypto": "^1.2.1", "node-mock-http": "^1.0.4", "radix3": "^1.1.2", "ufo": "^1.6.3", "uncrypto": "^0.1.3" } }, "sha512-L3THSe2MPeBwgIZVSH5zLdBBU90TOxarvhK9d04IDY2AmVS8j2Jz2LIWtwsGOU3lu2I5jCN7FNvVfY2+XyF+mg=="],
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 4de897a..511de73 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -30,6 +30,7 @@ export default defineNuxtConfig({
     },
 
     app: {
+        pageTransition: { name: 'page', mode: 'out-in' },
         head: {
             htmlAttrs: { lang: 'en' },
             charset: 'utf-8',
diff --git a/package.json b/package.json
index ddec410..ca5e28d 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "dependencies": {
         "@nuxt/content": "3.13.0",
         "better-sqlite3": "^12.9.0",
+        "gsap": "^3.15.0",
         "nuxt": "^4.4.2",
         "vue": "^3.5.33",
         "vue-router": "^5.0.6",