About us bios

src/components/AboutUs.astro

@@ -1,12 +1,57 @@
 ---
 import joshGoldberg from "~/assets/josh-goldberg.png";
 import dimitriMitropulous from "~/assets/dimitri-mitropoulos.jpg";
+import bostonTSClub from "~/assets/boston-ts-club.svg";
+import michiganTypeScript from "~/assets/michigan-typescript.png";
 import AnchorButton from "./AnchorButton.astro";
 import BodyText from "./BodyText.astro";
 import FullSection from "./FullSection.astro";
 import Heading from "./Heading.astro";
-import Speaker from "./Speaker.astro";
+import Bio, { Props as BioProps } from "./Bio.astro";
 import SquiggleFlanked from "./SquiggleFlanked.astro";
+
+const bios: Omit<BioProps, "size">[] = [
+	{
+		links: {
+			bluesky: "bostonts.club",
+			linkedin: "https://www.linkedin.com/groups/13008308",
+			mastodon: "https://mastodon.social/@BostonTS",
+			twitter: "BosTypeScript",
+			website: "https://bostonts.club",
+		},
+		name: "Boston TS Club",
+		photo: bostonTSClub,
+	},
+	{
+		links: {
+			github: "dimitropoulos",
+			linkedin: "https://linkedin.com/in/dimitrimitropoulos",
+		},
+		name: "Dimitri Mitropoulos",
+		photo: dimitriMitropulous,
+	},
+	{
+		links: {
+			bluesky: "joshuakgoldberg.com",
+			github: "JoshuaKGoldberg",
+			mastodon: "fosstodon.org/@JoshuaKGoldberg",
+			twitter: "JoshuaKGoldberg",
+			website: "https://joshuakgoldberg.com",
+		},
+		name: "Josh Goldberg",
+		photo: joshGoldberg,
+	},
+	{
+		links: {
+			bluesky: "michigantypescript.com",
+			mastodon: "https://fosstodon.org/@MichiganTypeScript",
+			twitter: "MiTypeScript",
+			youtube: "MichiganTypeScript",
+		},
+		name: "Michigan TypeScript",
+		photo: michiganTypeScript,
+	},
+] as const;
 ---
 
 <FullSection>
@@ -28,27 +73,7 @@ import SquiggleFlanked from "./SquiggleFlanked.astro";
 		background or resources.
 	</BodyText>
 	<div class="bios">
-		<Speaker
-			links={{
-				github: "dimitropoulos",
-				linkedin: "dimitrimitropoulos",
-			}}
-			name="Dimitri Mitropoulos"
-			photo={dimitriMitropulous}
-			size="medium"
-		/>
-		<Speaker
-			links={{
-				bluesky: "joshuakgoldberg.com",
-				github: "JoshuaKGoldberg",
-				mastodon: "fosstodon.org/@JoshuaKGoldberg",
-				twitter: "JoshuaKGoldberg",
-				website: "https://joshuakgoldberg.com",
-			}}
-			name="Josh Goldberg"
-			photo={joshGoldberg}
-			size="medium"
-		/>
+		{bios.map((bio) => <Bio class="about-us-bio" {...bio} size="medium" />)}
 	</div>
 	<AnchorButton class="action-button">Volunteer at SquiggleConf</AnchorButton>
 </FullSection>
@@ -69,9 +94,21 @@ import SquiggleFlanked from "./SquiggleFlanked.astro";
 
 	.bios {
 		display: flex;
+		flex-wrap: wrap;
 		justify-content: center;
 		gap: 3rem;
 		margin: 3rem 0 1.5rem;
 		width: 100%;
+		padding: 0 var(--widthBodyPadding);
+	}
+
+	.about-us-bio {
+		min-width: 40%;
+	}
+
+	@media (min-width: 819px) {
+		.about-us-bio {
+			min-width: unset;
+		}
 	}
 </style>

src/components/Speaker.astro → src/components/Bio.astro

@@ -5,30 +5,37 @@ import { Image } from "astro:assets";
 import BioLinks, { BioLinksPlatforms } from "./BioLinks.astro";
 
 export interface Props {
+	class?: string;
 	links: BioLinksPlatforms;
 	name: string;
 	photo: ImageMetadata;
 	position?: string;
 	size: "medium" | "large";
 }
 
-const { links, name, photo, position, size } = Astro.props;
+const {
+	class: className,
+	links,
+	name,
+	photo,
+	position,
+	size,
+	...rest
+} = Astro.props;
 ---
 
 <li
-	class:list={[
-		"speaker",
-		size === "large" ? "speaker-large" : "speaker-medium",
-	]}
+	{...rest}
+	class:list={["bio", className, size === "large" ? "bio-large" : "bio-medium"]}
 >
-	<Image alt="" class="speaker-image" src={photo} />
+	<Image alt="" class="bio-image" src={photo} />
 	<div class="name">{name}</div>
 	{position && <div class="position">{position}</div>}
 	<BioLinks name={name} links={links} />
 </li>
 
 <style>
-	.speaker {
+	.bio {
 		align-items: center;
 		display: flex;
 		flex-basis: 0;
@@ -39,17 +46,17 @@ const { links, name, photo, position, size } = Astro.props;
 		max-width: 40vw;
 	}
 
-	.speaker-medium {
+	.bio-medium {
 		--imageSize: clamp(3.5rem, 10vw, 6rem);
 		--fontSize: var(--fontSizeBodySmall);
 	}
 
-	.speaker-large {
+	.bio-large {
 		--imageSize: clamp(5rem, 20vw, 8rem);
 		--fontSize: var(--fontSizeBody);
 	}
 
-	.speaker-image {
+	.bio-image {
 		border-radius: 100%;
 		height: var(--imageSize);
 		width: var(--imageSize);

src/components/BioLinks.astro

@@ -7,6 +7,7 @@ import linkedin from "~/assets/linkedin.svg";
 import mastodon from "~/assets/mastodon.svg";
 import twitter from "~/assets/twitter.svg";
 import website from "~/assets/website.svg";
+import youtube from "~/assets/youtube.svg";
 
 interface Props {
 	links: BioLinksPlatforms;
@@ -20,6 +21,7 @@ export interface BioLinksPlatforms {
 	mastodon?: string;
 	twitter?: string;
 	website?: string;
+	youtube?: string;
 }
 
 const { links, name } = Astro.props;
@@ -50,11 +52,7 @@ const { links, name } = Astro.props;
 	}
 	{
 		links.linkedin && (
-			<a
-				href={`https://linkedin.com/in/${links.linkedin}`}
-				target="_blank"
-				rel="noreferrer"
-			>
+			<a href={links.linkedin} target="_blank" rel="noreferrer">
 				<Image alt={`${name} on LinkedIn`} class="link" src={linkedin} />
 			</a>
 		)
@@ -84,6 +82,13 @@ const { links, name } = Astro.props;
 			</a>
 		)
 	}
+	{
+		links.youtube && (
+			<a href={links.youtube} target="_blank" rel="noreferrer">
+				<Image alt={`${name} on YouTube'`} class="link" src={youtube} />
+			</a>
+		)
+	}
 </div>
 
 <style>

src/components/Speakers.astro

@@ -6,11 +6,11 @@ import danVanderkam from "~/assets/dan-vanderkam.jpg";
 import rizelScarlett from "~/assets/rizel-scarlett.png";
 import titianCernicovaDragomir from "~/assets/titian-cernicova-dragomir.jpg";
 import FullSection from "./FullSection.astro";
-import Speaker, { Props as SpeakerProps } from "./Speaker.astro";
-import SpeakerPlaceholder from "./SpeakerPlaceholder.astro";
+import Speaker, { Props as BioProps } from "./Bio.astro";
+import SpeakerPlaceholder from "./BioPlaceholder.astro";
 import BodyText from "./BodyText.astro";
 
-const speakers: Omit<SpeakerProps, "size">[] = [
+const speakers: Omit<BioProps, "size">[] = [
 	{
 		name: "Dan Vanderkam",
 		photo: danVanderkam,
@@ -27,7 +27,7 @@ const speakers: Omit<SpeakerProps, "size">[] = [
 		position: "Staff Developer Advocate, TBD",
 		links: {
 			github: "blackgirlbytes",
-			linkedin: "rizel-bobb-semple",
+			linkedin: "https://linkedin.com/in/rizel-bobb-semple",
 			twitter: "blackgirlbytes",
 		},
 	},
@@ -37,7 +37,7 @@ const speakers: Omit<SpeakerProps, "size">[] = [
 		position: "Software Engineer, Bloomberg",
 		links: {
 			github: "dragomirtitian",
-			linkedin: "titian-cernicova-dragomir-2b37457a",
+			linkedin: "https://linkedin.com/in/titian-cernicova-dragomir-2b37457a",
 			twitter: "titiancernicova",
 		},
 	},