only roll title once

Author: zaibon

src/routes/+page.svelte

@@ -29,10 +29,17 @@
 	let index = 0;
 	let rol: NodeJS.Timeout;
 
+	let titleClass = 'italic';
 	onMount(() => {
 		rol = setInterval(() => {
-			if (index === greetings.length - 1) index = 0;
-			else index++;
+			if (index === greetings.length - 1) {
+				index = 0;
+				// only show all the options onces, then stop sliding
+				clearInterval(rol);
+				titleClass = '';
+			} else {
+				index++;
+			}
 		}, 1250);
 	});
 
@@ -167,8 +174,8 @@
 
 <div class="container h-full mx-auto flex justify-center items-center">
 	<div class="space-y-10 text-center flex flex-col items-center">
-		<h2 style="display: inline">
-			<bold transition:slide>{greetings[index]}</bold> your top contributors
+		<h2 class="h2">
+			<span class={titleClass} transition:slide>{greetings[index]}</span> your top contributors
 		</h2>
 		<form class="w-full">
 			<div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">