172 lines
3.9 KiB
Svelte
172 lines
3.9 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import { gsap } from 'gsap';
|
|
import Carousel from '$lib/components/Carousel.svelte';
|
|
let { data } = $props();
|
|
|
|
onMount(() => {
|
|
if (document.querySelector('.workclone')) {
|
|
document.querySelector('.workclone')?.remove();
|
|
}
|
|
|
|
gsap.to('.logo-wrapper', {
|
|
opacity: 0,
|
|
scale: 0.85,
|
|
zIndex: -1,
|
|
duration: 0.5,
|
|
ease: 'power2.out',
|
|
});
|
|
gsap.to('.work', {
|
|
y: '-100vh',
|
|
duration: 1,
|
|
ease: 'power4.out',
|
|
});
|
|
gsap.to('.carousel', {
|
|
y: '100vh',
|
|
duration: 1,
|
|
ease: 'power4.out',
|
|
});
|
|
|
|
return () => {
|
|
gsap.killTweensOf('.logo-wrapper, .work, .carousel');
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<div
|
|
class="
|
|
logo-wrapper
|
|
fixed z-1
|
|
w-screen h-screen text-center
|
|
"
|
|
>
|
|
<div
|
|
class="
|
|
svg-logo
|
|
flex flex-col justify-center
|
|
w-full h-full m-auto p-[3em]
|
|
text-[#440011]
|
|
[&_svg]:object-fill [&_svg]:w-full [&_svg]:h-full
|
|
md:w-3/5
|
|
"
|
|
>
|
|
{@html data.svg}
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="
|
|
subnav
|
|
fixed z-22
|
|
md:top-0 md:left-0 md:inline-block
|
|
"
|
|
>
|
|
<a
|
|
href="/work"
|
|
class="
|
|
subnav-item button
|
|
inline-flex items-center gap-2
|
|
m-(--spacing-nav)
|
|
"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
|
|
class="
|
|
w-6 h-6
|
|
inline-block
|
|
"
|
|
>
|
|
<path d="M7.82843 10.9999H20V12.9999H7.82843L13.1924 18.3638L11.7782 19.778L4 11.9999L11.7782 4.22168L13.1924 5.63589L7.82843 10.9999Z"></path>
|
|
</svg>
|
|
Back
|
|
</a>
|
|
</div>
|
|
<div
|
|
class="
|
|
carousel
|
|
relative md:landscape:absolute z-1
|
|
-top-[100vh] md:top-[calc(-100vh-10vw)]
|
|
"
|
|
>
|
|
<Carousel images={data.images} title={data.title} />
|
|
</div>
|
|
<article
|
|
class="
|
|
work
|
|
relative overflow-hidden
|
|
top-[100vh] md:landscape:top-[calc(200vh-11.25rem-2.5vw)]
|
|
px-(--spacing-outer) pb-[100px] pt-0
|
|
md:landscape:ml-[150px] md:landscape:mr-(--spacing-outer) md:landscape:my-0
|
|
md:landscape:px-(--spacing-outer) md:landscape:pb-[100px]
|
|
md:landscape:w-[calc(100%-150px-var(--spacing-outer))]
|
|
|
|
[&_h1]:mt-[0.125em] [&_h1]:mb-[0.5em] [&_h1]:text-[2.5rem] [&_h1]:text-(--color-highlight)
|
|
md:[&_h1]:text-[6rem]
|
|
"
|
|
>
|
|
<div
|
|
class="
|
|
description
|
|
mt-[1.5em] leading-[1.3] tracking-normal uppercase
|
|
text-xl md:text-[1.75rem]
|
|
"
|
|
>
|
|
{data.description}
|
|
</div>
|
|
<h1>{data.title}</h1>
|
|
<div
|
|
class="
|
|
work-content
|
|
relative z-2
|
|
md:flex md:gap-[2em]
|
|
"
|
|
>
|
|
<div
|
|
class="
|
|
infobox
|
|
text-xl pb-[2em]
|
|
md:flex-[0_0_25%]
|
|
"
|
|
>
|
|
<div class="tasks">
|
|
<div class="tasks-title font-bold italic mb-[0.125em]">What I did:</div>
|
|
<ul class="m-0 flex flex-wrap gap-[0.125em]">
|
|
{#each data.tags as tag (tag)}
|
|
<li
|
|
class="
|
|
text-base list-none border-none uppercase rounded-[3px]
|
|
m-0 py-[0.25em] px-[0.33em]
|
|
bg-(--color-highlight) text-(--color-bg)
|
|
"
|
|
>
|
|
{tag}
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</div>
|
|
<div class="reference">
|
|
<div class="reference-title font-bold italic mt-4 mb-0">Reference:</div>
|
|
<div><a href={data.reference}>{data.referenceName}</a></div>
|
|
</div>
|
|
{#if data.agency}
|
|
<div class="agency">
|
|
<div class="agency-title font-bold italic mt-4 mb-0">Agency:</div>
|
|
<div><a href={data.agency}>{data.agencyName}</a></div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
<div
|
|
class="
|
|
work-content-text
|
|
[&_p]:mt-5
|
|
[&_h2]:mt-10 [&_h2]:text-[2rem] md:[&_h2]:text-[2.5rem]
|
|
*:first:mt-0 [&>h1:first-child]:mt-0
|
|
"
|
|
>
|
|
{#await import(`../md/${data.slug}.md`) then { default: Content }}
|
|
<Content />
|
|
{:catch error}
|
|
<p>Error loading content: {error.message}</p>
|
|
{/await}
|
|
</div>
|
|
</div>
|
|
</article>
|