carousel

package.json

@@ -17,14 +17,19 @@
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
+		"sharp": "^0.33.2",
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.0",
+		"svgo": "^3.2.0",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
-		"vite": "^5.0.3"
+		"vite": "^5.0.3",
+		"vite-plugin-image-optimizer": "^1.1.7"
 	},
 	"type": "module",
 	"dependencies": {
-		"@sveltejs/enhanced-img": "^0.1.8"
+		"@sveltejs/adapter-static": "^3.0.1",
+		"@sveltejs/enhanced-img": "^0.1.8",
+		"vite-plugin-vsharp": "^1.7.3"
 	}
 }

src/components/Card.svelte

@@ -1,9 +1,72 @@
-<div class="card">mayro odisy</div>
+<script lang="ts">
+	export let compatibility: "goated" | "based" | "cringe";
+	export let image: string;
+	export let title: string;
+	export let releaseYear: number;
+
+	function capitalizeFirstLetter(string: string) {
+		return string.charAt(0).toUpperCase() + string.slice(1);
+	}
+</script>
+
+<div class="card">
+	<div class="card-image">
+		<img src={image || ""} alt="Mario Odyssey" />
+	</div>
+	<div class="info">
+		<h3 class="header">{title}</h3>
+		<div class="content">Released: {releaseYear}</div>
+		<div>
+			Compatibility: <span class={compatibility}>{capitalizeFirstLetter(compatibility)}</span>
+		</div>
+	</div>
+</div>
 
 <style>
 	.card {
 		aspect-ratio: 1.5/2;
-		width: 300px;
+		width: fit-content;
-		background-color: red;
+		height: 450px;
+		background-color: rgb(47, 57, 76);
+		border-radius: 8px;
+		padding: 12px;
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		box-shadow: 0 0 24px rgb(32, 33, 45);
+		border: solid thin rgb(101, 109, 132);
+	}
+
+	.card-image {
+		border-radius: 4px;
+		overflow: hidden;
+		width: 100%;
+		height: 100%;
+		border: solid thin rgb(101, 109, 132);
+	}
+
+	.card-image > img {
+		object-fit: cover;
+		width: 100%;
+		height: 100%;
+	}
+
+	.header {
+		font-size: 28px;
+	}
+
+	.goated {
+		color: #78dca0;
+		text-shadow: 0px 0px 8px #78dca0;
+	}
+
+	.based {
+		color: #eab876;
+		text-shadow: 0px 0px 8px #eab876;
+	}
+
+	.cringe {
+		color: #ff3a3a;
+		text-shadow: 0px 0px 8px #ff3a3a;
 	}
 </style>

src/components/CardCarousel.svelte

@@ -0,0 +1,283 @@
+<script lang="ts">
+	import { onMount, tick } from "svelte";
+	import Card from "$components/Card.svelte";
+	import type { ICard } from "$lib/util/types";
+
+	export let cards: ICard[];
+
+	let selectedCard = 0;
+	let instantSelectedCard = 0;
+
+	let animating = false;
+
+	async function go(dir: number) {
+		if (dir > 0) {
+			cardScroll({
+				deltaY: 100,
+				shiftKey: true,
+				preventDefault: () => {},
+			} as any);
+		} else {
+			cardScroll({
+				deltaY: -100,
+				shiftKey: true,
+				preventDefault: () => {},
+			} as any);
+		}
+	}
+
+	onMount(() => {
+		const key = (e: KeyboardEvent) => {
+			// right arrow, run cardScroll with positive
+			if (e.key === "ArrowRight") {
+				e.preventDefault();
+				go(1);
+			}
+			if (e.key === "ArrowLeft") {
+				e.preventDefault();
+				go(-1);
+			}
+		};
+
+		window.addEventListener("keydown", key);
+
+		return () => {
+			window.removeEventListener("keydown", key);
+		};
+	});
+
+	async function cardScroll(e: WheelEvent) {
+		if (!e.shiftKey || window.innerWidth < 560) return;
+		e.preventDefault();
+		const animations: Animation[] = [];
+		const duration = 500;
+		const easing = "cubic-bezier(.29,1.03,.5,1)";
+		if (animating) return;
+		animating = true;
+		if (e.deltaY > 0) {
+			instantSelectedCard = (selectedCard + 1) % cards.length;
+		} else {
+			instantSelectedCard = (selectedCard - 1 + cards.length) % cards.length;
+		}
+		const cardLeft = document.querySelector(".card-3d.left") as HTMLElement;
+		const cardRight = document.querySelector(".card-3d.right") as HTMLElement;
+		const cardCenter = document.querySelector(
+			".card-3d:not(.left):not(.right):not(.transition-left):not(.transition-right)",
+		) as HTMLElement;
+		const cardTransitionLeft = document.querySelector(
+			".card-3d.transition-left",
+		) as HTMLElement;
+		const cardTransitionRight = document.querySelector(
+			".card-3d.transition-right",
+		) as HTMLElement;
+		cardTransitionLeft.style.display = "block";
+		cardTransitionRight.style.display = "block";
+		setTimeout(async () => {
+			selectedCard = instantSelectedCard;
+			await tick();
+			cardTransitionLeft.style.display = "none";
+			cardTransitionRight.style.display = "none";
+			animations.forEach((anim) => anim.cancel());
+			setTimeout(() => {
+				animating = false;
+			}, 10);
+		}, duration);
+		const cardLeftBounds = cardLeft.getBoundingClientRect();
+		const cardRightBounds = cardRight.getBoundingClientRect();
+		const cardCenterBounds = cardCenter.getBoundingClientRect();
+		if (e.deltaY > 0) {
+			animations.push(
+				cardRight.animate(
+					[
+						{
+							transform: `translateX(${cardCenterBounds.left - cardRightBounds.left + 62}px)`,
+						},
+					],
+					{
+						duration,
+						fill: "forwards",
+						easing,
+					},
+				),
+				cardCenter.animate(
+					[
+						{
+							transform: `translateX(${cardLeftBounds.left - cardCenterBounds.left - 83}px) perspective(1000px) translateZ(-150px) rotateY(-50deg)`,
+						},
+					],
+					{
+						duration,
+						fill: "forwards",
+						easing,
+					},
+				),
+				cardLeft.animate(
+					[
+						{
+							opacity: 0,
+							transform:
+								"perspective(1000px) translateZ(-150px) rotateY(-80deg) translateX(-400px)",
+						},
+					],
+					{
+						duration,
+						fill: "forwards",
+						easing,
+					},
+				),
+				cardTransitionLeft.animate(
+					[
+						{
+							transform:
+								"translateX(1150px) perspective(1000px) translateZ(-400px) rotateY(80deg)",
+							opacity: 0,
+						},
+						{
+							transform:
+								"translateX(1013px) perspective(1000px) translateZ(-150px) rotateY(50deg)",
+							opacity: 1,
+						},
+					],
+					{
+						duration,
+						fill: "forwards",
+						easing,
+					},
+				),
+			);
+		} else {
+			animations.push(
+				cardLeft.animate(
+					[
+						{
+							transform: `translateX(${cardCenterBounds.left - cardLeftBounds.left + 83}px)`,
+						},
+					],
+					{
+						duration,
+						fill: "forwards",
+						easing,
+					},
+				),
+				cardCenter.animate(
+					[
+						{
+							transform: `translateX(${cardRightBounds.left - cardCenterBounds.left - 62}px) perspective(1000px) translateZ(-150px) rotateY(50deg)`,
+						},
+					],
+					{
+						duration,
+						fill: "forwards",
+						easing,
+					},
+				),
+				cardRight.animate(
+					[
+						{
+							opacity: 0,
+							transform:
+								"perspective(1000px) translateZ(-150px) rotateY(80deg) translateX(400px)",
+						},
+					],
+					{
+						duration,
+						fill: "forwards",
+						easing,
+					},
+				),
+				cardTransitionRight.animate(
+					[
+						{
+							transform:
+								"translateX(-1150px) perspective(1000px) translateZ(-400px) rotateY(-80deg)",
+							opacity: 0,
+						},
+						{
+							transform:
+								"translateX(-1013px) perspective(1000px) translateZ(-150px) rotateY(-50deg)",
+							opacity: 1,
+						},
+					],
+					{
+						duration,
+						fill: "forwards",
+						easing,
+					},
+				),
+			);
+		}
+	}
+</script>
+
+<!-- look, i don't hate the disabled, but this
+     site's concept is pretty inaccessible as it
+	 is (and i just so happen to be partially blind
+	 in an eye, so), also we do have keyboard events
+	 we just register them through onMount() so fuck
+	 you a11y -->
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div class="cards" on:wheel={cardScroll}>
+	<div class="card-3d transition-left">
+		<Card {...cards[(instantSelectedCard + 1) % cards.length]} />
+	</div>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div class="card-3d left" on:click={() => go(-1)}>
+		<Card {...cards[selectedCard - 1 < 0 ? cards.length - 1 : selectedCard - 1]} />
+	</div>
+	<div class="card-3d">
+		<Card {...cards[selectedCard]} />
+	</div>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<div class="card-3d right" on:click={() => go(1)}>
+		<Card {...cards[(selectedCard + 1) % cards.length]} />
+	</div>
+	<div class="card-3d transition-right">
+		<Card {...cards[(instantSelectedCard + 2) % cards.length]} />
+	</div>
+</div>
+
+<style>
+	.cards {
+		display: flex;
+		max-width: 100%;
+	}
+
+	.card-3d {
+		z-index: 3;
+	}
+
+	.card-3d.left {
+		transform: perspective(1000px) translateZ(-150px) rotateY(-50deg);
+		z-index: 2;
+	}
+
+	.card-3d.right {
+		transform: perspective(1000px) translateZ(-150px) rotateY(50deg);
+		z-index: 2;
+	}
+
+	.card-3d {
+		position: relative;
+	}
+
+	.card-3d.transition-left,
+	.card-3d.transition-right {
+		opacity: 0;
+		z-index: 1;
+		display: none;
+	}
+
+	@media (max-width: 560px) {
+		.card-3d {
+			transform: none !important;
+		}
+
+		.cards {
+			flex-direction: column;
+			gap: 24px;
+		}
+	}
+</style>

src/components/ScrollIcon.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	export let size: number;
+	export let color: string;
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	version="1.1"
+	width={size}
+	height={size}
+	viewBox="0 0 100 125"
+	style="enable-background:new 0 0 100 100;"
+	xml:space="preserve"
+	fill={color}
+	><path
+		d="M32,41v18c0,9.9,8.1,18,18,18c9.9,0,18-8.1,18-18V41c0-9.9-8.1-18-18-18C40.1,23,32,31.1,32,41z M50,27c7.7,0,14,6.3,14,14  v18c0,7.7-6.3,14-14,14s-14-6.3-14-14V41C36,33.3,42.3,27,50,27z"
+	/><path
+		d="M50,44c1.1,0,2-0.9,2-2v-6c0-1.1-0.9-2-2-2s-2,0.9-2,2v6C48,43.1,48.9,44,50,44z"
+	/><path
+		d="M48.6,92.4C49,92.8,49.5,93,50,93s1-0.2,1.4-0.6l5-5c0.8-0.8,0.8-2,0-2.8s-2-0.8-2.8,0L50,88.2l-3.6-3.6  c-0.8-0.8-2-0.8-2.8,0c-0.8,0.8-0.8,2,0,2.8L48.6,92.4z"
+	/><path
+		d="M48.6,7.6l-5,5c-0.8,0.8-0.8,2,0,2.8C44,15.8,44.5,16,45,16s1-0.2,1.4-0.6l3.6-3.6l3.6,3.6C54,15.8,54.5,16,55,16  s1-0.2,1.4-0.6c0.8-0.8,0.8-2,0-2.8l-5-5C50.6,6.8,49.4,6.8,48.6,7.6z"
+	/></svg
+>

src/lib/css/index.css

@@ -31,6 +31,7 @@ h6 {
 body {
 	background-color: black;
 	height: fit-content;
+	overflow-x: hidden;
 }
 
 ::-webkit-scrollbar {

src/lib/data/strings.json

@@ -1,4 +1,5 @@
 {
 	"landingHeader": "suyu",
-	"landingOne": "Suyu is an open-source, Switch compatible emulator with almost full coverage of the game library."
+	"landingOne": "Suyu is an open-source, Switch compatible emulator with almost full coverage of the game library.",
+	"landingCardHeader": "We care about preservation"
 }

src/lib/util/types/index.ts

@@ -0,0 +1,6 @@
+export interface ICard {
+	title: string;
+	compatibility: "goated" | "based" | "cringe";
+	image: string;
+	releaseYear: number;
+}

src/routes/+layout.svelte

@@ -17,14 +17,15 @@
 
 <style>
 	.below {
-		margin-top: 80px;
 		z-index: 5;
 		position: relative;
 		display: flex;
 		flex-direction: column;
 	}
 	.header {
-		position: fixed;
+		position: sticky;
+		/* on overscroll, stick to the top */
+		overscroll-behavior: contain;
 		top: 0;
 		left: 0;
 		width: 100%;
@@ -47,15 +48,14 @@
 
 	.bullshit-flex-placeholder {
 		/* 100vh height */
-		flex-grow: 0;
+		height: calc(100vh - 162px);
-		flex-shrink: 0;
-		height: calc(100vh - 80px);
 		width: 100%;
 	}
 
 	.bg-below-gradient {
 		width: 100%;
 		flex-grow: 1;
+		flex-shrink: 0;
 		background-color: var(--page-bg);
 		background-size: 100% 100%;
 		z-index: -1;

src/routes/+layout.ts

@@ -0,0 +1 @@
+export const prerender = true;

src/routes/+page.svelte

@@ -1,15 +1,20 @@
-<script>
+<script lang="ts">
 	import Logo from "$components/Logo.svelte";
-	import { onMount } from "svelte";
+	import { onMount, tick } from "svelte";
 	import strings from "$lib/data/strings.json";
 	import Card from "$components/Card.svelte";
+	import odyssey from "$assets/cards/Super-Mario-Odyssey.jpg";
+	import ScrollIcon from "$components/ScrollIcon.svelte";
+	import totk from "$assets/cards/totk.webp";
+	import scarletviolet from "$assets/cards/scarlet-violet.webp";
+	import CardCarousel from "$components/CardCarousel.svelte";
 
 	let logoSizes = {
 		small: 256,
 		large: 378,
 	};
 
-	let logoSize = logoSizes.small;
+	let logoSize = logoSizes.large;
 
 	onMount(() => {
 		function onResize() {
@@ -22,7 +27,10 @@
 
 		onResize();
 		window.addEventListener("resize", onResize);
-		return () => window.removeEventListener("resize", onResize);
+
+		return () => {
+			window.removeEventListener("resize", onResize);
+		};
 	});
 </script>
 
@@ -37,11 +45,67 @@
 		</div>
 	</div>
 	<div class="below">
-		<Card />
+		<div class="absolute-center">
+			<CardCarousel
+				cards={[
+					{
+						title: "Super Mario Odyssey",
+						compatibility: "goated",
+						image: odyssey,
+						releaseYear: 2017,
+					},
+					{
+						title: "The Legend of Zelda: Tears of the Kingdom",
+						compatibility: "based",
+						image: totk,
+						releaseYear: 2023,
+					},
+					{
+						title: "Pokémon Scarlet and Pokémon Violet",
+						compatibility: "cringe",
+						image: scarletviolet,
+						releaseYear: 2022,
+					},
+				]}
+			/>
+			<div class="instructions">
+				<div class="key">Shift</div>
+				<span class="plus">+</span>
+				<ScrollIcon size={48} color="#bebbdd" />
+			</div>
+		</div>
 	</div>
 </div>
 
 <style>
+	.instructions {
+		display: flex;
+		align-items: center;
+		margin-top: 24px;
+		opacity: 0.25;
+		position: absolute;
+		top: 100%;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+
+	.plus {
+		margin-left: 15px;
+	}
+
+	.plus,
+	.key {
+		margin-top: -14px;
+	}
+
+	.key {
+		font-size: 12px;
+		background-color: rgb(59, 55, 78);
+		border-radius: 4px;
+		border: solid 1px rgb(137, 129, 176);
+		padding: 4px 12px;
+	}
+
 	.container {
 		width: calc(100vw - 17px);
 		height: calc(100vh - 160px);
@@ -73,12 +137,32 @@
 		}
 	}
 
+	@media (max-width: 560px) {
+		.absolute-center {
+			position: relative !important;
+			transform: none !important;
+			left: 0 !important;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+		}
+
+		.instructions {
+			display: none;
+		}
+	}
+
 	.below {
-		margin-top: 80px;
 		width: 100%;
-		height: 100vh;
+		min-height: 100vh;
-		display: flex;
+		height: fit-content;
-		align-items: center;
+		padding-bottom: 80px;
-		flex-direction: column;
+		position: relative;
+	}
+
+	.absolute-center {
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
 	}
 </style>

svelte.config.js

@@ -1,5 +1,5 @@
-import adapter from '@sveltejs/adapter-auto';
+import adapter from "@sveltejs/adapter-auto";
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -13,9 +13,10 @@ const config = {
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
 		adapter: adapter(),
 		alias: {
-			$components: './src/components'
+			$components: "./src/components",
-		}
+			$assets: "./src/assets",
-	}
+		},
+	},
 };
 
 export default config;

tsconfig.json

@@ -9,7 +9,8 @@
 		"skipLibCheck": true,
 		"sourceMap": true,
 		"strict": true,
-		"moduleResolution": "bundler"
+		"moduleResolution": "bundler",
+		"noImplicitAny": false
 	}
 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
 	//

vite.config.ts

@@ -1,6 +1,7 @@
-import { sveltekit } from '@sveltejs/kit/vite';
+import { sveltekit } from "@sveltejs/kit/vite";
-import { defineConfig } from 'vite';
+import { defineConfig } from "vite";
+import { ViteImageOptimizer } from "vite-plugin-image-optimizer";
 
 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [ViteImageOptimizer(), sveltekit()],
 });