etheryo/frontend/src/routes/+page.svelte

<script>
	import "$lib/css/base.css";
	import "$lib/css/main.css";
	import "$lib/css/photo.css";

	import CoverImg from "$lib/components/cover-img.svelte";
	import Person from "$lib/components/person.svelte";
	import Project from "$lib/components/project.svelte";
	import Git from "$lib/components/git.svelte";
	import HoverCard from "$lib/components/hover-card.svelte";

	import anime from "animejs";
	import topics from "$lib/ts/topic.ts";
	import { filterPhotos } from "$lib/ts/photo.ts";

	import hubjson from "$lib/json/hub.json";
	import { onMount } from "svelte";
	import SvgIcon from "@jamescoyle/svelte-icon/src/svg-icon.svelte";
	import { mdiChevronRight, mdiChevronLeft } from "@mdi/js";

	export let data;
	const photoData = data.status == 0 ? data : undefined;
	let photoList = filterPhotos(photoData.content);
	$: index = 0;
	let photoDiv;
	let tempPhotoDiv;

	function canAdvance(advance) {
		return !(
			(advance && index < photoList.length - 1) ||
			(!advance && index >= 1)
		);
	}

	function swipeCanva(advance) {
		const width = window.innerWidth / 2;
		const animTranslate = advance ? [-width, width] : [width, -width];

		// Checking if we can play the animation
		if (canAdvance(advance)) return;

		anime({
			targets: photoDiv,
			translateX: animTranslate[0],
			opacity: 0,
			duration: 300,
			easing: "easeInQuad",
			complete: function () {
				index = advance ? index + 1 : index - 1;
				photoDiv.style.transform = `translateX(${animTranslate[1]}px)`;
				anime({
					targets: photoDiv,
					translateX: 0,
					opacity: 1,
					duration: 300,
					easing: "easeOutQuad",
				});
			},
		});
	}
</script>

<div class="main-banner">
	<CoverImg
		cover={hubjson.cover}
		darken={true}
		title={hubjson.welcomeTitle}
		subtitle={hubjson.welcomeSubtitle}
	/>
</div>
<div class="main-content">
	<div class="section">
		<h1>{hubjson.who}</h1>
	</div>
	<div class="flex w-100 justify-center">
		<div class="content">
			<Person
				picture={hubjson.person.picture}
				name={hubjson.person.name}
				pronouns={hubjson.person.pronouns}
				description={hubjson.person.description}
				url="/about"
			/>
		</div>
	</div>
	<div class="section">
		<h1>{hubjson.project.title}</h1>
		<p>{hubjson.project.description}</p>
	</div>
	<div class="flex w-100 justify-center">
		{#each hubjson.projects as project, index}
			<Project
				cover={hubjson.projects[index].cover}
				title={hubjson.projects[index].title}
				url={hubjson.projects[index].url}
				description={hubjson.projects[index].description}
				topic={topics[hubjson.projects[index].topic]}
			/>
		{/each}
	</div>
	<div class="section">
		<h1>{hubjson.lab.title}</h1>
		<p>{hubjson.lab.description}</p>
	</div>
	<div class="flex w-100 justify-center">
		{#each hubjson.repos as repo}
			<Git {repo} />
		{/each}
	</div>
	<div class="section">
		<h1>{hubjson.photo.title}</h1>
		<p>{hubjson.photo.description}</p>
	</div>
	<div class="flex w-100 justify-center" bind:this={photoDiv}>
		{#each photoList[index] as photo}
			<HoverCard
				picture={photo.urlcompressed}
				picturefull={photo.url}
				title={photo.title}
				localisation={photo.localisation}
				description={photo.description}
			/>
		{/each}
	</div>
	<!-- Just to load the next picture -->
	<div class="flex w-100 justify-center disabled" bind:this={tempPhotoDiv}>
		{#each photoList[index + 1] as photo}
			<img alt="nothing" src={photo.urlcompressed} />
		{/each}
	</div>
	<div class="flex w-100 justify-center">
		<div class="photo-button-container">
			<button
				class={canAdvance(false) ? "disabled" : ""}
				on:click={() => swipeCanva(false)}
			>
				<SvgIcon type="mdi" path={mdiChevronLeft} />
			</button>
			<button
				class={canAdvance(true) ? "disabled" : "flex-end"}
				on:click={() => swipeCanva(true)}
			>
				<SvgIcon type="mdi" path={mdiChevronRight} />
			</button>
		</div>
	</div>
</div>