feat: add launch speakers (#6)

🚀

cspell.json

@@ -14,6 +14,7 @@
 	"words": [
 		"astrojs",
 		"Bluesky",
+		"Devries",
 		"dimitri",
 		"Faneuil",
 		"Farrelly",
@@ -37,6 +38,7 @@
 		"tseslint",
 		"vercel",
 		"Vitullo",
+		"vohr",
 		"WASI",
 		"WCAG",
 		"wght-italic"

src/components/Bio.astro

@@ -9,12 +9,20 @@ export interface Props {
 	links: BioLinksPlatforms;
 	name: string;
 	photo: ImageMetadata;
+	size?: "medium" | "large";
 }
 
-const { class: className, links, name, photo, ...rest } = Astro.props;
+const {
+	class: className,
+	links,
+	name,
+	photo,
+	size = "medium",
+	...rest
+} = Astro.props;
 ---
 
-<li {...rest} class:list={["bio", className]}>
+<li {...rest} class:list={["bio", `bio-${size}`, className]}>
 	<Image alt="" class="bio-image" src={photo} />
 	<div class="name">{name}</div>
 	<BioLinks name={name} links={links} />
@@ -29,11 +37,19 @@ const { class: className, links, name, photo, ...rest } = Astro.props;
 		flex-direction: column;
 		flex-grow: 2;
 		min-width: 7.5rem;
+	}
+
+	.bio-medium {
 		gap: 0.25rem;
+		--imageSize: 5rem;
+	}
+
+	.bio-large {
+		--imageSize: 7.5rem;
+		gap: 0.5rem;
 	}
 
 	.bio-image {
-		--imageSize: 5rem;
 		border-radius: 100%;
 		height: var(--imageSize);
 		margin-bottom: 0.5rem;

src/components/Bios.astro

@@ -3,11 +3,14 @@ import Bio, { Props as BioProps } from "~/components/Bio.astro";
 
 interface Props {
 	bios: BioProps[];
+	size?: "medium" | "large";
 }
+
+const { bios, size = "medium" } = Astro.props;
 ---
 
-<ul class="bios">
-	{Astro.props.bios.map((bio) => <Bio {...bio} />)}
+<ul class:list={["bios", `bios-${size}`]}>
+	{bios.map((bio) => <Bio {...bio} size={size} />)}
 </ul>
 
 <style>
@@ -17,10 +20,17 @@ interface Props {
 		font-family: var(--fontFamilyHeading);
 		justify-content: center;
 		margin-top: 2rem;
+		margin: 2rem auto;
 		row-gap: 2rem;
 		text-align: center;
-		margin: 2rem auto;
-		max-width: 35rem;
 		width: 100%;
 	}
+
+	.bios-medium {
+		max-width: 35rem;
+	}
+
+	.bios-large {
+		max-width: 49rem;
+	}
 </style>

src/components/LaunchSpeakers.astro

@@ -0,0 +1,93 @@
+---
+import anthonyFu from "~/assets/avatars/anthony-fu.jpg";
+import jakeBailey from "~/assets/avatars/jake-bailey.jpg";
+import shelleyVohr from "~/assets/avatars/shelley-vohr.jpg";
+import tjDevries from "~/assets/avatars/tj-devries.jpg";
+import Bios from "~/components/Bios.astro";
+import Heading from "~/components/Heading.astro";
+import Button from "./Button.astro";
+import { links } from "~/data/links";
+import BodyText from "./BodyText.astro";
+import ContentArea from "./ContentArea.astro";
+
+const launchSpeakers = [
+	{
+		links: {
+			bluesky: "https://bsky.app/profile/antfu.me",
+			github: "https://github.com/antfu",
+			website: "https://antfu.me",
+		},
+		name: "Anthony Fu",
+		photo: anthonyFu,
+	},
+	{
+		links: {
+			bluesky: "https://bsky.app/profile/jakebailey.dev",
+			github: "https://github.com/jakebailey",
+			linkedin: "https://www.linkedin.com/in/jakebbailey",
+			mastodon: "https://fosstodon.org/@jakebailey",
+			website: "https://jakebailey.dev",
+		},
+		name: "Jake Bailey",
+		photo: jakeBailey,
+	},
+	{
+		links: {
+			github: "https://github.com/codebytere",
+			website: "https://codebyte.re",
+		},
+		name: "Shelley Vohr",
+		photo: shelleyVohr,
+	},
+	{
+		links: {
+			github: "https://github.com/tjdevries",
+			twitch: "https://www.twitch.tv/teej_dv",
+			youtube: "https://www.youtube.com/@teej_dv",
+		},
+		name: "TJ Devries",
+		photo: tjDevries,
+	},
+];
+---
+
+<ContentArea class="launch-speakers">
+	<Heading level="h2">Launch Speakers</Heading>
+
+	<BodyText class="launch-speakers-description">
+		Hear from practitioners of excellent web dev tooling: the people who bring
+		you the squigglies you know and love.
+	</BodyText>
+
+	<Bios bios={launchSpeakers} size="large" />
+
+	<Button
+		as="a"
+		href={links.cfp}
+		size="large"
+		target="_blank"
+		variant="emphasized"
+	>
+		Apply to be a speaker! CFP now open!
+	</Button>
+</ContentArea>
+
+<style>
+	.launch-speakers {
+		align-items: center;
+		display: flex;
+		flex-direction: column;
+		gap: 2rem;
+	}
+
+	.launch-speakers-description {
+		max-width: 33rem;
+	}
+
+	h2 {
+		font-family: var(--fontFamilyHeading);
+		font-size: var(--fontSizeLarger);
+		margin-top: 3.5rem;
+		text-align: center;
+	}
+</style>

src/components/explainers/ExplainersList.astro

@@ -21,10 +21,6 @@ import ExplainerArea from "./ExplainerArea.astro";
 
 const explainers = [
 	{
-		action: {
-			href: "https://cfp.squiggleconf.com",
-			text: "Apply to be a speaker! CFP now open!",
-		},
 		body: "Enjoy a dozen talks by tooling aficionados, dev experts, and new voices in the space. You’ll emerge with the best techniques to supercharge your projects.",
 		decoration: DolphinDecoration,
 		direction: "up",
@@ -91,6 +87,10 @@ const explainers = [
 		},
 	},
 	{
+		action: {
+			href: "https://cfp.squiggleconf.com",
+			text: "Apply to be a speaker! CFP now open!",
+		},
 		body: "Mingle with fellow backend, frontend, and full stack web developers at meetups and mixers before, during, and after the conference.",
 		decoration: CoralReefDecoration,
 		direction: "up",
@@ -136,7 +136,7 @@ const explainers = [
 			var(--colorBlueBright4) 100%
 		);
 		overflow: hidden;
-		padding-bottom: 1.5rem;
+		padding-bottom: 3.5rem;
 		width: 100%;
 	}
 </style>

src/components/explainers/decorations/CoralReefDecoration.astro

@@ -27,7 +27,7 @@ import DecorativeImage from "~/components/DecorativeImage.astro";
 	}
 
 	.coral-reef-large {
-		bottom: -10rem;
+		bottom: -16rem;
 		left: 60%;
 	}
 

src/pages/index.astro

@@ -5,6 +5,7 @@ import Button from "~/components/Button.astro";
 import ExplainersList from "~/components/explainers/ExplainersList.astro";
 import Hero from "~/components/hero/Hero.astro";
 import InlineBlock from "~/components/InlineBlock.astro";
+import LaunchSpeakers from "~/components/LaunchSpeakers.astro";
 import Newsletter from "~/components/Newsletter.astro";
 import Registration from "~/components/Registration.astro";
 import TextSquiggly from "~/components/TextSquiggly.astro";
@@ -42,18 +43,9 @@ import PageLayout from "~/layouts/PageLayout.astro";
 				Get extra early bird tickets now!
 				<Arrow />
 			</Button>
-			<Button
-				as="a"
-				class="hero-button"
-				href={links.shop}
-				target="_blank"
-				variant="none"
-			>
-				Get the t-shirt here
-				<Arrow />
-			</Button>
 		</div>
 	</Hero>
+	<LaunchSpeakers />
 	<ExplainersList />
 	<AboutUs />
 	<Registration />