402 lines
14 KiB
Svelte
402 lines
14 KiB
Svelte
<style lang="scss">
|
|
@import "../../../style/pages/about";
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { navigating, page } from '$app/stores'
|
|
import { onMount, afterUpdate } from 'svelte'
|
|
import { quartOut as quartOutSvelte } from 'svelte/easing'
|
|
import { fade, fly } from 'svelte/transition'
|
|
import type { PageData } from './$types'
|
|
import { animate, inView, stagger, timeline } from 'motion'
|
|
import { mailtoClipboard, map } from '$utils/functions'
|
|
import { getAssetUrlKey } from '$utils/api'
|
|
import { DELAY } from '$utils/constants'
|
|
import { quartOut } from '$animations/easings'
|
|
// Components
|
|
import Metas from '$components/Metas.svelte'
|
|
import PageTransition from '$components/PageTransition.svelte'
|
|
import Image from '$components/atoms/Image.svelte'
|
|
import Button from '$components/atoms/Button.svelte'
|
|
import AboutGridPhoto from '$components/atoms/AboutGridPhoto.svelte'
|
|
import ProcessStep from '$components/molecules/ProcessStep.svelte'
|
|
import Banner from '$components/organisms/Banner.svelte'
|
|
import { sendEvent } from '$utils/analytics';
|
|
|
|
export let data: PageData
|
|
const { about, photos } = data
|
|
|
|
let scrollY: number, innerWidth: number, innerHeight: number
|
|
let photosGridEl: HTMLElement
|
|
let photosGridOffset: number = photosGridEl && photosGridEl.offsetTop
|
|
let currentStep: number = 0
|
|
let emailCopied: string = null
|
|
let emailCopiedTimeout: ReturnType<typeof setTimeout> | number
|
|
|
|
$: parallaxPhotos = photosGridEl && map(scrollY, photosGridOffset - innerHeight, photosGridOffset + innerHeight / 1.5, 0, innerHeight * 0.15, true)
|
|
$: fadedPhotosIndexes = innerWidth > 768
|
|
? [0, 2, 5, 7, 9, 12, 17, 20, 22, 26, 30, 32, 34]
|
|
: [1, 4, 5, 7, 11, 14, 17, 20, 24, 27, 30, 33, 34, 36, 40, 43]
|
|
|
|
|
|
onMount(() => {
|
|
/**
|
|
* Animations
|
|
*/
|
|
const animation = timeline([
|
|
// Banner
|
|
['.banner picture', {
|
|
scale: [1.06, 1],
|
|
opacity: [0, 1],
|
|
z: 0,
|
|
}, {
|
|
at: 0.4,
|
|
duration: 2.4,
|
|
}],
|
|
['.banner h1', {
|
|
y: [32, 0],
|
|
opacity: [0, 1],
|
|
}, {
|
|
at: 0.5,
|
|
}],
|
|
['.banner__top > *', {
|
|
y: [-100, 0],
|
|
opacity: [0, 1],
|
|
}, {
|
|
at: 0.4,
|
|
delay: stagger(0.25),
|
|
}],
|
|
|
|
// Intro elements
|
|
['.about__introduction .container > *', {
|
|
y: ['20%', 0],
|
|
opacity: [0, 1],
|
|
z: 0,
|
|
}, {
|
|
at: 0.75,
|
|
delay: stagger(0.25),
|
|
}],
|
|
['.first-photo', {
|
|
y: ['10%', 0],
|
|
opacity: [0, 1],
|
|
z: 0,
|
|
}, {
|
|
at: 1.2,
|
|
}],
|
|
['.first-photo img', {
|
|
scale: [1.06, 1],
|
|
opacity: [0, 1],
|
|
z: 0,
|
|
}, {
|
|
at: 1.5,
|
|
duration: 2.4,
|
|
}],
|
|
], {
|
|
delay: $navigating ? DELAY.PAGE_LOADING / 1000 : 0,
|
|
defaultOptions: {
|
|
duration: 1.6,
|
|
easing: quartOut,
|
|
},
|
|
})
|
|
animation.stop()
|
|
|
|
// Sections
|
|
inView('[data-reveal]', ({ target }) => {
|
|
animate(target, {
|
|
opacity: [0, 1],
|
|
y: ['20%', 0],
|
|
z: 0,
|
|
}, {
|
|
delay: 0.2,
|
|
duration: 1.6,
|
|
easing: quartOut,
|
|
})
|
|
})
|
|
|
|
// Global images
|
|
inView('[data-reveal-image] img', ({ target }) => {
|
|
animate(target, {
|
|
scale: [1.06, 1],
|
|
opacity: [0, 1],
|
|
z: 0,
|
|
}, {
|
|
delay: 0.3,
|
|
duration: 2.4,
|
|
easing: quartOut,
|
|
})
|
|
})
|
|
|
|
// Process
|
|
const processTimeline = timeline([
|
|
// Step links
|
|
['.about__process li a', {
|
|
y: [16, 0],
|
|
opacity: [0, 1],
|
|
z: 0,
|
|
}, {
|
|
at: 0,
|
|
delay: stagger(0.15),
|
|
}],
|
|
|
|
// First step
|
|
['.about__process .step', {
|
|
scale: [1.1, 1],
|
|
opacity: [0, 1],
|
|
x: [20, 0]
|
|
}, {
|
|
at: 0.6,
|
|
duration: 1,
|
|
}]
|
|
], {
|
|
defaultOptions: {
|
|
duration: 1.6,
|
|
easing: quartOut,
|
|
}
|
|
})
|
|
processTimeline.stop()
|
|
|
|
inView('.about__process', () => {
|
|
requestAnimationFrame(processTimeline.play)
|
|
}, {
|
|
amount: 0.35,
|
|
})
|
|
|
|
// Run animation
|
|
requestAnimationFrame(animation.play)
|
|
})
|
|
|
|
|
|
afterUpdate(() => {
|
|
// Update photos grid top offset
|
|
photosGridOffset = photosGridEl.offsetTop
|
|
})
|
|
</script>
|
|
|
|
<svelte:window bind:scrollY bind:innerWidth bind:innerHeight />
|
|
|
|
<Metas
|
|
title={about.seo_title}
|
|
description={about.seo_description}
|
|
image={about.seo_image ? getAssetUrlKey(about.seo_image.id, 'share-image') : null}
|
|
/>
|
|
|
|
|
|
<PageTransition>
|
|
<main class="about">
|
|
<Banner
|
|
title="About"
|
|
image={{
|
|
id: '699b4050-6bbf-4a40-be53-d84aca484f9d',
|
|
alt: 'Photo caption',
|
|
}}
|
|
/>
|
|
|
|
<section class="about__introduction">
|
|
<div class="container grid">
|
|
<h2 class="title-small">{about.intro_title}</h2>
|
|
<div class="heading text-big">
|
|
{@html about.intro_heading}
|
|
</div>
|
|
|
|
<div class="text text-small">
|
|
{@html about.intro_text}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="about__creation">
|
|
<div class="container grid">
|
|
<figure class="first-photo">
|
|
<Image
|
|
class="picture shadow-box-dark"
|
|
id={about.intro_firstphoto.id}
|
|
alt={about.intro_firstphoto.title}
|
|
sizeKey="photo-list"
|
|
sizes={{
|
|
small: { width: 400 },
|
|
medium: { width: 600 },
|
|
large: { width: 800 },
|
|
}}
|
|
ratio={1.5}
|
|
/>
|
|
<figcaption class="text-info">
|
|
{about.intro_firstphoto_caption}<br>
|
|
in
|
|
<a href="/{about.intro_firstlocation.country.slug}/{about.intro_firstlocation.slug}" data-sveltekit-noscroll>
|
|
<img src="{getAssetUrlKey(about.intro_firstlocation.country.flag.id, 'square-small-jpg')}" width="32" height="32" alt="{about.intro_firstlocation.country.flag.title}">
|
|
<span>Naarm Australia (Melbourne)</span>
|
|
</a>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<h2 class="title-small" data-reveal>{about.creation_title}</h2>
|
|
<div class="heading text-huge" data-reveal>
|
|
{@html about.creation_heading}
|
|
</div>
|
|
|
|
<div class="text text-small" data-reveal>
|
|
{@html about.creation_text}
|
|
</div>
|
|
|
|
<figure class="picture portrait-photo" data-reveal-image>
|
|
<Image
|
|
class="shadow-box-dark"
|
|
id={about.creation_portrait.id}
|
|
alt={about.creation_portrait.title}
|
|
sizeKey="photo-list"
|
|
sizes={{
|
|
small: { width: 400 },
|
|
medium: { width: 750 },
|
|
}}
|
|
ratio={1.425}
|
|
/>
|
|
</figure>
|
|
<span class="portrait-photo__caption text-info">
|
|
{about.creation_portrait_caption}
|
|
</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="about__present">
|
|
<div class="container grid">
|
|
<figure class="picture" data-reveal-image>
|
|
<Image
|
|
class="shadow-box-dark"
|
|
id={about.present_image.id}
|
|
alt={about.present_image.title}
|
|
sizeKey="photo-list"
|
|
sizes={{
|
|
small: { width: 400 },
|
|
medium: { width: 600 },
|
|
large: { width: 800 },
|
|
}}
|
|
ratio={1.5}
|
|
/>
|
|
</figure>
|
|
|
|
<h2 class="title-small" data-reveal>{about.present_title}</h2>
|
|
<div class="text text-small" data-reveal>
|
|
<p>{about.present_text}</p>
|
|
</div>
|
|
|
|
<div class="heading text-big" data-reveal>
|
|
{@html about.present_heading}
|
|
</div>
|
|
|
|
<div class="conclusion text-small" data-reveal>
|
|
<p>{about.present_conclusion}</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{#if about.image_showcase}
|
|
<div class="about__showcase container grid">
|
|
<Image
|
|
id={about.image_showcase.id}
|
|
alt={about.image_showcase.title}
|
|
sizeKey="showcase"
|
|
sizes={{
|
|
small: { width: 400 },
|
|
medium: { width: 1000 },
|
|
large: { width: 1800 },
|
|
}}
|
|
ratio={1.2}
|
|
/>
|
|
</div>
|
|
{/if}
|
|
|
|
<section class="about__process">
|
|
<div class="container grid">
|
|
<aside>
|
|
<div class="heading">
|
|
<h2 class="title-medium">{about.process_title}</h2>
|
|
<p class="text-xsmall">{about.process_subtitle}</p>
|
|
</div>
|
|
|
|
<ol>
|
|
{#each about.process_steps as { title }, index}
|
|
<li class:is-active={index === currentStep}>
|
|
<a href="#step-{index + 1}" class="title-big"
|
|
on:click|preventDefault={() => {
|
|
currentStep = index
|
|
sendEvent('aboutStepSwitch')
|
|
}}
|
|
>
|
|
<span>{title}</span>
|
|
</a>
|
|
</li>
|
|
{/each}
|
|
</ol>
|
|
</aside>
|
|
|
|
<div class="steps">
|
|
{#each about.process_steps as { text, image, video_mp4, video_webm }, index}
|
|
{#if index === currentStep}
|
|
<ProcessStep
|
|
{index} {text}
|
|
image={image ?? undefined}
|
|
video={{
|
|
mp4: video_mp4?.id,
|
|
webm: video_webm?.id
|
|
}}
|
|
/>
|
|
{/if}
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="about__photos" bind:this={photosGridEl}>
|
|
<div class="container-wide">
|
|
<div class="photos-grid" style:--parallax-y="{parallaxPhotos}px">
|
|
{#each photos as { image: { id }, title }, index}
|
|
<AboutGridPhoto class="grid-photo"
|
|
{id}
|
|
alt={title}
|
|
disabled={fadedPhotosIndexes.includes(index)}
|
|
/>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="about__interest container grid">
|
|
<div class="container grid">
|
|
<h2 class="title-xl">{about.contact_title}</h2>
|
|
<div class="blocks">
|
|
{#each about.contact_blocks as { title, text, link, button }}
|
|
<div class="block">
|
|
<h3 class="text-label">{title}</h3>
|
|
<div class="text text-normal">
|
|
{@html text}
|
|
</div>
|
|
<div class="button-container">
|
|
{#if link}
|
|
{#key emailCopied === link}
|
|
<div class="wrap"
|
|
in:fly={{ y: 4, duration: 325, easing: quartOutSvelte, delay: 250 }}
|
|
out:fade={{ duration: 250, easing: quartOutSvelte }}
|
|
use:mailtoClipboard
|
|
on:copied={({ detail }) => {
|
|
emailCopied = detail.email
|
|
// Clear timeout and add timeout to hide message
|
|
clearTimeout(emailCopiedTimeout)
|
|
emailCopiedTimeout = setTimeout(() => emailCopied = null, 2500)
|
|
}}
|
|
>
|
|
{#if emailCopied !== link}
|
|
<Button size="small" url="mailto:{link}" text={button} />
|
|
{:else}
|
|
<span class="clipboard">Email copied in clipboard</span>
|
|
{/if}
|
|
</div>
|
|
{/key}
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</PageTransition> |