119 lines
2.7 KiB
Svelte
119 lines
2.7 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte'
|
|
import { slides } from '@state/slides.svelte'
|
|
import { slideTo } from '@router'
|
|
|
|
import Header from '@components/layout/Header.svelte'
|
|
import Cursor from '@components/layout/Cursor.svelte'
|
|
|
|
import Home from '@views/Home.svelte'
|
|
import About from '@views/About.svelte'
|
|
import Expertise from '@views/Expertise.svelte'
|
|
import Portfolio from '@views/Portfolio.svelte'
|
|
import Project from '@views/Project.svelte'
|
|
import Jouer from '@views/Jouer.svelte'
|
|
import Game from '@views/Game.svelte'
|
|
import Blog from '@views/Blog.svelte'
|
|
import Article from '@views/Article.svelte'
|
|
import Default from '@views/Default.svelte'
|
|
|
|
const templates = {
|
|
home: Home,
|
|
about: About,
|
|
expertise: Expertise,
|
|
portfolio: Portfolio,
|
|
project: Project,
|
|
jouer: Jouer,
|
|
game: Game,
|
|
blog: Blog,
|
|
article: Article,
|
|
default: Default
|
|
}
|
|
|
|
const wrapperWidth = $derived(`${slides.all.length * 100}vw`)
|
|
const wrapperTransform = $derived(`translateX(-${slides.activeIndex * 100}vw)`)
|
|
|
|
onMount(() => {
|
|
const handleKeydown = (e) => {
|
|
if (e.key === 'ArrowRight') {
|
|
const next = slides.all[slides.activeIndex + 1]
|
|
if (next) slideTo(next.path)
|
|
} else if (e.key === 'ArrowLeft') {
|
|
const prev = slides.all[slides.activeIndex - 1]
|
|
if (prev) slideTo(prev.path)
|
|
}
|
|
}
|
|
window.addEventListener('keydown', handleKeydown)
|
|
return () => window.removeEventListener('keydown', handleKeydown)
|
|
})
|
|
</script>
|
|
|
|
<div class="app">
|
|
<Cursor />
|
|
<Header />
|
|
|
|
<main class="main">
|
|
<div
|
|
class="slides-wrapper"
|
|
style="width: {wrapperWidth}; transform: {wrapperTransform}"
|
|
>
|
|
{#each slides.all as slide}
|
|
<div class="slide" data-slide={slide.id}>
|
|
{#if slide.loaded}
|
|
<svelte:component
|
|
this={templates[slide.template] ?? Default}
|
|
data={slide.data}
|
|
/>
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<style>
|
|
:global(*) {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:global(body) {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
background: #000;
|
|
color: #fff;
|
|
overflow: hidden;
|
|
}
|
|
|
|
:global(a) {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
:global(img) {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.app {
|
|
height: 100vh;
|
|
}
|
|
|
|
.main {
|
|
position: relative;
|
|
overflow: hidden;
|
|
height: 100vh;
|
|
}
|
|
|
|
.slides-wrapper {
|
|
display: flex;
|
|
height: 100%;
|
|
transition: transform 1000ms cubic-bezier(0.77, 0, 0.175, 1);
|
|
}
|
|
|
|
.slide {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
flex-shrink: 0;
|
|
}
|
|
</style>
|