Add logo and prod animations

JokerSince1989 · Feb 4, 2024 · ffcdd06 · ffcdd06
1 parent 4fa9ad7
commit ffcdd06
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 68 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,5 +33,8 @@
 		"typescript": "^5.0.0",
 		"vite": "^5.0.0"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"saos": "^1.3.1"
+	}
 }
diff --git a/src/app.html b/src/app.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html class="bg-slate-900" lang="en">
 	<head>
 		<title>Joker - too good, to be true...</title>
 		<meta charset="utf-8" />
@@ -8,7 +8,7 @@
 		%sveltekit.head%
 	</head>
 
-	<body class="bg-slate-900" data-sveltekit-preload-data="hover">
+	<body class="bg-black/70" data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
@@ -15,6 +15,9 @@
 			<a href="https://demozoo.org/groups/10844/" class="hover:text-blue-500 transition-colors"
 				>Demozoo</a
 			>
+			<a href="https://github.com/JokerSince1989" class="hover:text-blue-500 transition-colors"
+				>Github</a
+			>
 		</div>
 	</div>
 	<Typewriter mode="loop" interval={60}>
@@ -24,7 +27,7 @@
 		<span>Atari ST/E</span>
 		<span>Nintendo Game Boy</span>
 		<span>too good, to be true...</span>
-		<span>...since 1990!</span>
+		<span>...since 1989!</span>
 		<span>Our comrades:</span>
 		<span>At0m</span>
 		<span>Dalthon</span>

diff --git a/src/lib/components/Production.svelte b/src/lib/components/Production.svelte
@@ -1,63 +1,77 @@
 <script lang="ts">
 	import Typewriter from 'svelte-typewriter';
+	import Saos from 'saos';
 
 	export let prod: Prod;
 	let isHoveredOrActive = false;
 	let showEmu = false;
 </script>
 
-<div
-	class="bg-slate-800 border border-slate-800 transition transform duration-200 ease-in-out rounded-lg overflow-hidden group relative"
-	on:mouseenter={() => (isHoveredOrActive = true)}
-	on:mouseleave={() => (isHoveredOrActive = false)}
-	on:touchstart={() => (isHoveredOrActive = true)}
-	on:touchend={() => (isHoveredOrActive = false)}
-	role="article"
->
-	<div class="w-full h-48 overflow-hidden">
-		<img
-			class="object-cover w-full h-full transition-all duration-450 {isHoveredOrActive
-				? 'filter-class'
-				: ''}"
-			src={prod.screenshot}
-			alt={prod.name}
-		/>
-	</div>
+<Saos animation={'scale-in-center 0.3s'}>
+	<div
+		class="bg-slate-800 border border-slate-800 transition transform duration-200 ease-in-out rounded-lg overflow-hidden group relative"
+		on:mouseenter={() => (isHoveredOrActive = true)}
+		on:mouseleave={() => (isHoveredOrActive = false)}
+		on:touchstart={() => (isHoveredOrActive = true)}
+		on:touchend={() => (isHoveredOrActive = false)}
+		role="article"
+	>
+		<div class="w-full h-48 overflow-hidden">
+			<img
+				class="object-cover w-full h-full transition-all duration-450 {isHoveredOrActive
+					? 'filter-class'
+					: ''}"
+				src={prod.screenshot}
+				alt={prod.name}
+			/>
+		</div>
 
-	{#if isHoveredOrActive}
-		<div class="absolute bottom-0 left-0 w-full">
-			<div class="flex justify-between items-center p-3 text-slate-200">
-				<div class="flex space-x-2">
-					{#if prod.download}
-						<a
-							href={prod.download}
-							class="p-1 font-mono text-sm border border-slate-200 rounded hover:bg-slate-200 hover:text-black transition-colors"
-						>
-							Download
-						</a>
-					{/if}
+		{#if isHoveredOrActive}
+			<div class="absolute bottom-0 left-0 w-full">
+				<div class="flex justify-between items-center p-3 text-slate-200">
+					<div class="flex space-x-2">
+						{#if prod.download}
+							<a
+								href={prod.download}
+								class="p-1 font-mono text-sm border border-slate-200 rounded hover:bg-slate-200 hover:text-black transition-colors"
+							>
+								Download
+							</a>
+						{/if}
+					</div>
 				</div>
 			</div>
-		</div>
-		<div class="absolute top-0 left-0 w-full p-4">
-			<Typewriter delay={60} interval={40} keepCursorOnFinish={true}>
-				<h5 class="font-mono text-lg text-slate-200 mb-2">
-					{prod.name}
-				</h5>
-			</Typewriter>
-			<Typewriter delay={60} interval={40} keepCursorOnFinish={true}>
-				<h7 class="font-mono text-sm text-slate-400">
-					{prod.type.replace(/,/g, ', ') +
-						', ' +
-						prod.platforms[Object.keys(prod.platforms)[0]].name}
-				</h7>
-			</Typewriter>
-		</div>
-	{/if}
-</div>
+			<div class="absolute top-0 left-0 w-full p-4">
+				<Typewriter delay={60} interval={40} keepCursorOnFinish={true}>
+					<h5 class="font-mono text-lg text-slate-200 mb-2">
+						{prod.name}
+					</h5>
+				</Typewriter>
+				<Typewriter delay={60} interval={40} keepCursorOnFinish={true}>
+					<h7 class="font-mono text-sm text-slate-400">
+						{prod.type.replace(/,/g, ', ') +
+							', ' +
+							prod.platforms[Object.keys(prod.platforms)[0]].name}
+					</h7>
+				</Typewriter>
+			</div>
+		{/if}
+	</div>
+</Saos>
 
 <style>
 	.filter-class {
 		filter: brightness(30%) contrast(300%);
 	}
+
+	@keyframes -global-scale-in-center {
+		0% {
+			transform: scale(0.5);
+			opacity: 0.8;
+		}
+		100% {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
 </style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import '../app.css';
 	import Navbar from '$lib/components/Navbar.svelte';
 
-	let emu: any;
-	/*
+	/*let emu: any;
+	
 	let isModalOpen = false;
 
 	onMount(() => {
@@ -16,11 +15,11 @@
 	});*/
 </script>
 
-<svelte:head>
+<!-- <svelte:head>
 	<script src="/jsspeccy/jsspeccy.js"></script>
-</svelte:head>
+</svelte:head> -->
 
-<div class="bg-black/70">
+<div>
 	<div class="sticky top-0 p-2 z-40">
 		<Navbar />
 	</div>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -16,10 +16,13 @@
 	});
 </script>
 
-<div
-	class="container mx-auto grid gap-5 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 p-4"
->
-	{#each sorted as prod (prod.id)}
-		<Production {prod} />
-	{/each}
+<div class="flex flex-col items-center">
+	<img class="mb-3" src="logo.png" alt="Joker logo" />
+	<div
+		class="container mx-auto grid gap-5 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 p-4"
+	>
+		{#each sorted as prod (prod.id)}
+			<Production {prod} />
+		{/each}
+	</div>
 </div>
diff --git a/static/logo.png b/static/logo.png