mirror of
https://github.com/jaronpate/folio.git
synced 2026-10-19 01:07:39 +00:00
Added some animations and tweaked some styles
This commit is contained in:
+106
-30
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user