fun placeholder titles

src/components/SpeakerPlaceholder.astro

@@ -1,6 +1,22 @@
+---
+interface Props {
+	index: number;
+}
+
+const indexNames = new Map([
+	[0, "Static Analysis Superstar"],
+	[1, "Language Afficianado"],
+	[2, "Build Systems Champion"],
+	[3, "TypeScript Wizard"],
+	[4, "Interpersonnal Advocate"],
+]);
+
+const name = indexNames.get(Astro.props.index) ?? "To Be Announced";
+---
+
 <li class="speaker">
 	<div class="speaker-image"></div>
-	<div class="name">To Be Announced</div>
+	<div class="name">{name}</div>
 </li>
 
 <style>
@@ -9,6 +25,8 @@
 		flex-direction: column;
 		align-items: center;
 		gap: 0.75rem;
+		flex-basis: 0;
+		flex-grow: 2;
 	}
 
 	.speaker-image {

src/components/Speakers.astro

@@ -50,8 +50,8 @@ const speakers: Omit<SpeakerProps, "size">[] = [
 	</SquiggleFlanked>
 
 	<BodyText size="large" width="lean">
-		Meet the developers around the TypeScript, Rust, and Go tools that make the
-		squiggles you depend on every day.
+		Meet the developers around the Go, TypeScript, Rust, and Zig tools that make
+		the squiggles you depend on every day.
 	</BodyText>
 
 	<div class="speakers-area">
@@ -60,7 +60,11 @@ const speakers: Omit<SpeakerProps, "size">[] = [
 		</ul>
 
 		<ul class="speakers">
-			{new Array(10).fill(null).map(() => <SpeakerPlaceholder />)}
+			{
+				new Array(10)
+					.fill(null)
+					.map((_, index) => <SpeakerPlaceholder index={index} />)
+			}
 		</ul>
 	</div>