Update team pages (#5329)

* [wip] update team page * Update old site and alumni * Add more team members * Update old page too * Shrink images * Add remaining people on updated team pages (#5327) * updates * remove active members from acknowledgements * mobile styles for social/links * update jason image * clarify Jasons role * image alt text * Move all content into <TeamMember> incl headers * icon for personal site links * update TOC to extract beyond top-level elements * cleanup * github link should...point to github. oops * this can no longer be described as a small team * Update beta/src/content/learn/meet-the-team.md * Update content/community/team.md Co-authored-by: Sathya Gunasekaran <gsathya.ceg@gmail.com> Co-authored-by: Rick Hanlon <rickhanlonii@fb.com> Co-authored-by: lauren <poteto@users.noreply.github.com> Co-authored-by: Sathya Gunasekaran <gsathya.ceg@gmail.com>
reactjs · Dec 8, 2022 · e544ae4 · e544ae4
1 parent a234788
commit e544ae4
Show file tree

Hide file tree

Showing 53 changed files with 311 additions and 119 deletions.
diff --git a/beta/public/images/team/acdlite.jpg b/beta/public/images/team/acdlite.jpg
diff --git a/beta/public/images/team/bvaughn.jpg b/beta/public/images/team/bvaughn.jpg
diff --git a/beta/public/images/team/gaearon.jpg b/beta/public/images/team/gaearon.jpg
diff --git a/beta/public/images/team/huxpro.jpg b/beta/public/images/team/huxpro.jpg
diff --git a/beta/public/images/team/jasonbonta.jpg b/beta/public/images/team/jasonbonta.jpg
diff --git a/beta/public/images/team/joe.jpg b/beta/public/images/team/joe.jpg
diff --git a/beta/public/images/team/josh.jpg b/beta/public/images/team/josh.jpg
diff --git a/beta/public/images/team/lauren.jpg b/beta/public/images/team/lauren.jpg
diff --git a/beta/public/images/team/lunaruan.jpg b/beta/public/images/team/lunaruan.jpg
diff --git a/beta/public/images/team/mofei-zhang.png b/beta/public/images/team/mofei-zhang.png
diff --git a/beta/public/images/team/necolas.jpg b/beta/public/images/team/necolas.jpg
diff --git a/beta/public/images/team/rickhanlonii.jpg b/beta/public/images/team/rickhanlonii.jpg
diff --git a/beta/public/images/team/rnabors.jpg b/beta/public/images/team/rnabors.jpg
diff --git a/beta/public/images/team/salazarm.jpeg b/beta/public/images/team/salazarm.jpeg
diff --git a/beta/public/images/team/sam.jpg b/beta/public/images/team/sam.jpg
diff --git a/beta/public/images/team/sathya.jpg b/beta/public/images/team/sathya.jpg
diff --git a/beta/public/images/team/sebmarkbage.jpg b/beta/public/images/team/sebmarkbage.jpg
diff --git a/beta/public/images/team/sebsilbermann.jpg b/beta/public/images/team/sebsilbermann.jpg
diff --git a/beta/public/images/team/sethwebster.jpg → beta/public/images/team/seth.jpg b/beta/public/images/team/sethwebster.jpg → beta/public/images/team/seth.jpg
diff --git a/beta/public/images/team/sophiebits.jpg b/beta/public/images/team/sophiebits.jpg
diff --git a/beta/public/images/team/threepointone.jpg b/beta/public/images/team/threepointone.jpg
diff --git a/beta/public/images/team/tianyu.jpg b/beta/public/images/team/tianyu.jpg
diff --git a/beta/public/images/team/trueadm.jpg b/beta/public/images/team/trueadm.jpg
diff --git a/beta/src/components/Icon/IconLink.tsx b/beta/src/components/Icon/IconLink.tsx
@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconLink = memo<JSX.IntrinsicElements['svg']>(function IconLink(
+  props
+) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.33em"
+      height="1.33em"
+      viewBox="0 -2 24 24"
+      fill="currentColor"
+      {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"
+      />
+    </svg>
+  );
+});
diff --git a/beta/src/components/MDX/MDXComponents.tsx b/beta/src/components/MDX/MDXComponents.tsx
@@ -29,6 +29,7 @@ import {IconNavArrow} from '../Icon/IconNavArrow';
 import ButtonLink from 'components/ButtonLink';
 import {TocContext} from './TocContext';
 import type {Toc, TocItem} from './TocContext';
+import {TeamMember} from './TeamMember';
 
 function CodeStep({children, step}: {children: any; step: number}) {
   return (
@@ -398,6 +399,7 @@ export const MDXComponents = {
   Recap,
   Recipes,
   Sandpack,
+  TeamMember,
   TerminalBlock,
   YouWillLearn,
   YouWillLearnCard,

diff --git a/beta/src/components/MDX/TeamMember.tsx b/beta/src/components/MDX/TeamMember.tsx
@@ -0,0 +1,98 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+import Image from 'next/image';
+import {IconTwitter} from '../Icon/IconTwitter';
+import {IconGitHub} from '../Icon/IconGitHub';
+import {ExternalLink} from '../ExternalLink';
+import {IconNewPage} from 'components/Icon/IconNewPage';
+import {H3} from './Heading';
+import {IconLink} from 'components/Icon/IconLink';
+
+interface TeamMemberProps {
+  name: string;
+  title: string;
+  permalink: string;
+  children: React.ReactNode;
+  photo: string;
+  twitter?: string;
+  github?: string;
+  personal?: string;
+}
+
+// TODO: good alt text for images/links
+export function TeamMember({
+  name,
+  title,
+  permalink,
+  children,
+  photo,
+  github,
+  twitter,
+  personal,
+}: TeamMemberProps) {
+  if (name == null || title == null || permalink == null || children == null) {
+    throw new Error(
+      'Expected name, title, permalink, and children for ' + name ??
+        title ??
+        permalink ??
+        'unknown'
+    );
+  }
+  return (
+    <div className="pb-6 sm:pb-10">
+      <div className="flex flex-col sm:flex-row height-auto">
+        <div
+          className="hidden sm:block basis-2/5 rounded overflow-hidden relative"
+          style={{width: 300, height: 250}}>
+          <Image src={photo} layout="fill" objectFit="cover" alt={name} />
+        </div>
+        <div
+          style={{minHeight: 300}}
+          className="block w-full sm:hidden flex-grow basis-2/5 rounded overflow-hidden relative">
+          <Image src={photo} layout="fill" objectFit="cover" alt={name} />
+        </div>
+        <div className="pl-0 sm:pl-6 basis-3/5 items-start">
+          <H3 className="mb-1 sm:my-0" id={permalink}>
+            {name}
+          </H3>
+          {title && <div>{title}</div>}
+          {children}
+          <div className="sm:flex sm:flex-row">
+            {twitter && (
+              <div className="mr-4">
+                <ExternalLink
+                  aria-label="React on Twitter"
+                  href={`https://twitter.com/${twitter}`}
+                  className="hover:text-primary dark:text-primary-dark flex flex-row items-center">
+                  <IconTwitter className="pr-2" />
+                  {twitter}
+                </ExternalLink>
+              </div>
+            )}
+            {github && (
+              <div className="mr-4">
+                <ExternalLink
+                  aria-label="GitHub Profile"
+                  href={`https://github.com/${github}`}
+                  className="hover:text-primary dark:text-primary-dark flex flex-row items-center">
+                  <IconGitHub className="pr-2" /> {github}
+                </ExternalLink>
+              </div>
+            )}
+            {personal && (
+              <ExternalLink
+                aria-label="Personal Site"
+                href={`https://${personal}`}
+                className="hover:text-primary dark:text-primary-dark flex flex-row items-center">
+                <IconLink className="pr-2" /> {personal}
+              </ExternalLink>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/beta/src/content/learn/acknowledgements.md b/beta/src/content/learn/acknowledgements.md
@@ -17,6 +17,7 @@ We'd like to recognize a few people who have made significant contributions to R
 * [Alex Krolick](https://github.com/alexkrolick)
 * [Alexey Pyltsyn](https://github.com/lex111)
 * [Brandon Dail](https://github.com/aweary)
+* [Brian Vaughn](https://github.com/bvaughn)
 * [Caleb Meredith](https://github.com/calebmer)
 * [Chang Yan](https://github.com/cyan33)
 * [Cheng Lou](https://github.com/chenglou)
@@ -33,19 +34,23 @@ We'd like to recognize a few people who have made significant contributions to R
 * [Joe Critchley](https://github.com/joecritch)
 * [Jeff Morrison](https://github.com/jeffmo)
 * [Keyan Zhang](https://github.com/keyz)
+* [Marco Salazar](https://github.com/salazarm)
 * [Nat Alison](https://github.com/tesseralis)
 * [Nathan Hunzaker](https://github.com/nhunzaker)
 * [Nicolas Gallagher](https://github.com/necolas)
 * [Paul O'Shannessy](https://github.com/zpao)
 * [Pete Hunt](https://github.com/petehunt)
 * [Philipp Spiess](https://github.com/philipp-spiess)
+* [Rachel Nabors](https://github.com/rachelnabors)
 * [Robert Zhang](https://github.com/robertzhidealx)
 * [Sander Spies](https://github.com/sanderspies)
 * [Sasha Aickin](https://github.com/aickin)
+* [Seth Webster](https://github.com/sethwebster)
 * [Sophia Shoemaker](https://github.com/mrscobbler)
 * [Sophie Alpert](https://github.com/sophiebits)
 * [Sunil Pai](https://github.com/threepointone)
 * [Tim Yung](https://github.com/yungsters)
+* [Xuan Huang](https://github.com/huxpro)
 * [Yuzhi Zheng](https://github.com/yuzhi)
 
 This list is not exhaustive.

diff --git a/beta/src/content/learn/meet-the-team.md b/beta/src/content/learn/meet-the-team.md
@@ -3,7 +3,7 @@
 
 <Intro>
 
-React development is led by a small dedicated team working full time at Facebook. It also receives contributions from people all over the world.
+React development is led by a dedicated team working full time at Meta. It also receives contributions from people all over the world.
 
 </Intro>
 
@@ -13,85 +13,73 @@ The React Core team members work full time on the core component APIs, the engin
 
 Current members of the React team are listed in alphabetical order below.
 
-### Andrew Clark {/*andrew-clark*/}
+<TeamMember name="Andrew Clark" permalink="andrew-clark" photo="/images/team/acdlite.jpg" github="acdlite" twitter="acdlite" title="Engineer at Meta">
+    Andrew got started with web development by making sites with WordPress, and eventually tricked himself into doing JavaScript. His favorite pastime is karaoke. Andrew is either a Disney villain or a Disney princess, depending on the day.
+</TeamMember>
 
-![Andrew Clark](../images/team/acdlite.jpg)
+<TeamMember name="Dan Abramov" permalink="dan-abramov" photo="/images/team/gaearon.jpg" github="gaearon" twitter="dan_abramov" title="Engineer at Meta">
+    Dan got into programming after he accidentally discovered Visual Basic inside Microsoft PowerPoint. He has found his true calling in turning [Sebastian](#sebastian-markbåge)'s tweets into long-form blog posts. Dan occasionally wins at Fortnite by hiding in a bush until the game ends.
+</TeamMember>
 
-[@acdlite on GitHub](https://github.com/acdlite) &middot; [@acdlite on Twitter](https://twitter.com/acdlite)
+<TeamMember name="Jason Bonta" permalink="jason-bonta" photo="/images/team/jasonbonta.jpg" title="Engineering Manager at Meta">
+    Jason likes having large volumes of Amazon packages delivered to the office so that he can build forts. Despite literally walling himself off from his team at times and not understanding how for-of loops work, we appreciate him for the unique qualities he brings to his work. 
+</TeamMember>
 
-Andrew got started with web development by making sites with WordPress, and eventually tricked himself into doing JavaScript. His favorite pastime is karaoke. Andrew is either a Disney villain or a Disney princess, depending on the day.
+<TeamMember name="Joe Savona" permalink="joe-savona" photo="/images/team/joe.jpg" github="josephsavona" twitter="en_JS" title="Engineer at Meta">
+    Joe was planning to major in math and philosophy but got into computer science after writing physics simulations in Matlab. Prior to React, he worked on Relay, RSocket.js, and the Skip programming language. While he’s not building some sort of reactive system he enjoys running, studying Japanese, and spending time with his family.
+</TeamMember>
 
-### Brian Vaughn {/*brian-vaughn*/}
+<TeamMember name="Josh Story" permalink="josh-story" photo="/images/team/josh.jpg" github="gnoff" twitter="joshcstory" title="Engineer at Vercel">
+    Josh majored in Mathematics and discovered programming while in college. His first professional developer job was to program insurance rate calculations in Microsoft Excel, the paragon of Reactive Programming which must be why he now works on React. In between that time Josh has been an IC, Manager, and Executive at a few startups. outside of work he likes to push his limits with cooking.
+</TeamMember>
 
-![Brian Vaughn](../images/team/bvaughn.jpg)
+<TeamMember name="Lauren Tan" permalink="lauren-tan" photo="/images/team/lauren.jpg" github="poteto" twitter="potetotes" personal="no.lol" title="Engineer at Meta">
+    Lauren’s programming career peaked when she first discovered the `<marquee>` tag. She’s been chasing that high ever since. When she’s not adding bugs into React, she enjoys dropping cheeky memes in chat, and playing all too many video games with her partner and dog Zelda.
+</TeamMember>
 
-[@bvaughn on GitHub](https://github.com/bvaughn) &middot; [@brian\_d\_vaughn on Twitter](https://twitter.com/brian_d_vaughn)
+<TeamMember name="Luna Ruan" permalink="luna-ruan" photo="/images/team/lunaruan.jpg" github="lunaruan" twitter="lunaruan" title="Engineer at Meta">
+    Luna learned programming because she thought it meant creating video games. Instead, she ended up working on the Pinterest web app, and now on React itself. Luna doesn't want to make video games anymore, but she plans to do creative writing if she ever gets bored.
+</TeamMember>
 
-Brian studied art in college and did programming on the side to pay for his education. Eventually, he realized that he enjoys working on open source. Brian has one [one-person band](https://soundcloud.com/brianvaughn/) and two [two-person](https://soundcloud.com/pilotlessdrone) [bands.](https://soundcloud.com/pinwurm) He also takes care of the cutest cat in the world.
+<TeamMember name="Mofei Zhang" permalink="mofei-zhang" photo="/images/team/mofei-zhang.png" github="mofeiZ" title="Engineer at Meta">
+    Mofei started programming when she realized it can help her cheat in video games. She focused on operating systems in undergrad / grad school, but now finds herself happily tinkering on React. Outside of work, she enjoys debugging bouldering problems and planning her next backpacking trip(s).
+</TeamMember>
 
-### Dan Abramov {/*dan-abramov*/}
+<TeamMember name="Rick Hanlon" permalink="rick-hanlon" photo="/images/team/rickhanlonii.jpg" github="rickhanlonii" twitter="rickhanlonii" personal="rickhanlon.codes" title="Engineer at Meta">
+    Ricky majored in theoretical math and somehow found himself on the React Native team for a couple years before joining the React team. When he's not programming you can find him snowboarding, biking, climbing, golfing, or closing GitHub issues that do not match the issue template.
+</TeamMember>
 
-![Dan Abramov](../images/team/gaearon.jpg)
+<TeamMember name="Samuel Susla" permalink="samuel-susla" photo="/images/team/sam.jpg" github="sammy-SC" twitter="SamuelSusla" title="Engineer at Meta">
+    Samuel’s interest in programming started with the movie Matrix. He still has Matrix screen saver. Before working on React, he was focused on writing iOS apps. Outside of work, Samuel enjoys playing beach volleyball, squash, badminton and spending time with his family.
+</TeamMember>
 
-[@gaearon on GitHub](https://github.com/gaearon) &middot; [@dan_abramov on Twitter](https://twitter.com/dan_abramov)
+<TeamMember name="Sathya Gunasekaran " permalink="sathya-gunasekaran" photo="/images/team/sathya.jpg" github="gsathya" twitter="_gsathya" title="Engineer at Meta">
+    Sathya hated the Dragon Book in school but somehow ended up working on compilers all his career. When he's not compiling React components, he's either drinking coffee or eating yet another Dosa.
+</TeamMember>
 
-Dan got into programming after he accidentally discovered Visual Basic inside Microsoft PowerPoint. He has found his true calling in turning [Sebastian](#sebastian-markbåge)'s tweets into long-form blog posts. Dan occasionally wins at Fortnite by hiding in a bush until the game ends.
+<TeamMember name="Sebastian Markbåge" permalink="sebastian-markbåge" photo="/images/team/sebmarkbage.jpg" github="sebmarkbage" twitter="sebmarkbage" title="Engineer at Vercel">
+    Sebastian majored in psychology. He's usually quiet. Even when he says something, it often doesn't make sense to the rest of us until a few months later. The correct way to pronounce his surname is "mark-boa-geh" but he settled for "mark-beige" out of pragmatism -- and that's how he approaches React.
+</TeamMember>
 
-### Luna Ruan {/*luna-ruan*/}
+<TeamMember name="Sebastian Silbermann" permalink="sebastian-silbermann" photo="/images/team/sebsilbermann.jpg" github="eps1lon" twitter="sebsilbermann" title="Independent Engineer">
+    Sebastian learned programming to make the browser games he played during class more enjoyable. Eventually this lead to contributing to as much open source code as possible. Outside of coding he's busy making sure people don't confuse him with the other Sebastians and Zilberman of the React community.
+</TeamMember>
 
-![Luna](../images/team/lunaruan.jpg)
+<TeamMember name="Seth Webster" permalink="seth-webster" photo="/images/team/seth.jpg" github="sethwebster" twitter="sethwebster" personal="sethwebster.com" title="Engineering Manager at Meta">
+    Seth started programming as a kid growing up in Tucson, AZ. After school, he was bitten by the music bug and was a touring musician for about 10 years before returning to *work*, starting with Intuit. In his spare time, he loves [taking pictures](https://www.sethwebster.com) and flying for animal rescues in the northeastern United States.
+</TeamMember>
 
-[@lunaruan on GitHub](https://github.com/lunaruan) &middot; [@lunaruan on Twitter](https://twitter.com/lunaruan)
+<TeamMember name="Sophie Alpert" permalink="sophie-alpert" photo="/images/team/sophiebits.jpg" github="sophiebits" twitter="sophiebits" personal="sophiebits.com" title="Independent Engineer">
+    Four days after React was released, Sophie rewrote the entirety of her then-current project to use it, which she now realizes was perhaps a bit reckless. After she became the project's #1 committer, she wondered why she wasn't getting paid by Facebook like everyone else was and joined the team officially to lead React through its adolescent years. Though she quit that job years ago, somehow she's still in the team's group chats and “providing value”.
+</TeamMember>
 
-Luna learned programming because she thought it meant creating video games. Instead, she ended up working on the Pinterest web app, and now on React itself. Luna doesn't want to make video games anymore, but she plans to do creative writing if she ever gets bored.
+<TeamMember name="Tianyu Yao" permalink="tianyu-yao" photo="/images/team/tianyu.jpg" github="tyao1" twitter="tianyu0" title="Engineer at Meta">
+    Tianyu’s interest in computers started as a kid because he loves video games. So he majored in computer science and still plays childish games like League of Legends. When he is not in front of a computer, he enjoys playing with his two kittens, hiking and kayaking.
+</TeamMember>
 
-### Marco Salazar {/*marco-salazar*/}
-
-![Marco](../images/team/salazarm.jpeg)
-
-[@salazarm on GitHub](https://github.com/salazarm) &middot; [@BkOptimism on Twitter](https://twitter.com/BkOptimism)
-
-Marco's first programming language was Assembly because he could use it to hack video games. Now online games are much more secure so he settles for playing fairly (mostly). In his spare time he plays games on his treadmill desk and makes art that he never finishes. Hopefully his PRs don't have the same fate.
-
-### Rachel Nabors {/*rachel-nabors*/}
-
-![Rachel](../images/team/rnabors.jpg)
-
-[@rachelnabors on GitHub](https://github.com/rachelnabors) &middot; [@rachelnabors on Twitter](https://twitter.com/rachelnabors)
-
-Rachel wrote a [book about UI animation](https://abookapart.com/products/animation-at-work) once and worked with MDN and the W3C on the web animations API. Now she is busy with education materials and community engineering on the React team. Secretly, she is an award-winning cartoonist for teenage girls. Catch her making fancy tea with lukewarm water in the microkitchen.
-
-### Rick Hanlon {/*rick-hanlon*/}
-
-![Ricky](../images/team/rickhanlonii.jpg)
-
-[@rickhanlonii on GitHub](https://github.com/rickhanlonii) &middot; [@rickhanlonii on Twitter](https://twitter.com/rickhanlonii)
-
-Ricky majored in theoretical math and somehow found himself on the React Native team for a couple years before joining the React team. When he's not programming you can find him snowboarding, biking, climbing, golfing, or closing GitHub issues that do not match the issue template.
-
-### Sebastian Markbåge {/*sebastian-markbåge*/}
-
-![Sebastian](../images/team/sebmarkbage.jpg)
-
-[@sebmarkbage on GitHub](https://github.com/sebmarkbage) &middot; [@sebmarkbage on Twitter](https://twitter.com/sebmarkbage)
-
-Sebastian majored in psychology. He's usually quiet. Even when he says something, it often doesn't make sense to the rest of us until a few months later. The correct way to pronounce his surname is "mark-boa-geh" but he settled for "mark-beige" out of pragmatism -- and that's how he approaches React.
-
-### Seth Webster {/*seth-webster*/}
-
-![Seth](../images/team/sethwebster.jpg)
-
-[@sethwebster on GitHub](https://github.com/sethwebster) &middot; [@sethwebster on Twitter](https://twitter.com/sethwebster)
-
-Seth started programming as a kid growing up in Tucson, AZ. After school, he was bitten by the music bug and was a touring musician for about 10 years before returning to *work*, starting with Intuit. In his spare time, he loves [taking pictures](https://www.sethwebster.com) and flying for animal rescues in the northeastern United States.
-
-### Xuan Huang {/*xuan-huang*/}
-
-![Xuan](../images/team/huxpro.jpg)
-
-[@huxpro on GitHub](https://github.com/huxpro) &middot; [@huxpro on Twitter](https://twitter.com/huxpro)
-
-Xuan met with programming in childhood to make games in Flash. He did digital media arts in college but eventually got tricked into making compilers, and somehow React needs one. Out of work, he pours terrible latte arts and plays tennis either on or off a table.
+<TeamMember name="Yuzhi Zheng" permalink="yuzhi-zheng" photo="/images/team/yuzhi.jpg" github="yuzhi" twitter="yuzhiz" title="Engineering Manager at Meta">
+    Yuzhi studied Computer Science in school. She liked the instant gratification of seeing code come to life without having to physically be in a laboratory. Now she’s a manager in the React org. Before management, she used to work on the Relay data fetching framework. In her spare time, Yuzhi enjoys optimizing her life via gardening and home improvement projects.
+</TeamMember>
 
 ## Past contributors {/*past-contributors*/}