* [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>main
Joseph Savona
2 years ago
GitHub
|
Before Width: | Height: | Size: 6.8 MiB After Width: | Height: | Size: 111 KiB |
|
Before Width: | Height: | Size: 388 KiB |
|
Before Width: | Height: | Size: 428 KiB After Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 340 KiB |
|
After Width: | Height: | Size: 232 KiB |
|
After Width: | Height: | Size: 90 KiB |
|
After Width: | Height: | Size: 121 KiB |
|
After Width: | Height: | Size: 147 KiB |
|
Before Width: | Height: | Size: 406 KiB After Width: | Height: | Size: 150 KiB |
|
After Width: | Height: | Size: 2.3 MiB |
|
Before Width: | Height: | Size: 378 KiB |
|
Before Width: | Height: | Size: 278 KiB After Width: | Height: | Size: 116 KiB |
|
Before Width: | Height: | Size: 302 KiB |
|
Before Width: | Height: | Size: 75 KiB |
|
After Width: | Height: | Size: 100 KiB |
|
After Width: | Height: | Size: 69 KiB |
|
Before Width: | Height: | Size: 226 KiB After Width: | Height: | Size: 89 KiB |
|
After Width: | Height: | Size: 160 KiB |
|
Before Width: | Height: | Size: 301 KiB After Width: | Height: | Size: 301 KiB |
|
After Width: | Height: | Size: 167 KiB |
|
Before Width: | Height: | Size: 503 KiB |
|
After Width: | Height: | Size: 51 KiB |
|
Before Width: | Height: | Size: 64 KiB |
@ -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> |
||||
|
); |
||||
|
}); |
||||
@ -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> |
||||
|
); |
||||
|
} |
||||
|
Before Width: | Height: | Size: 6.8 MiB After Width: | Height: | Size: 111 KiB |
|
Before Width: | Height: | Size: 388 KiB |
|
Before Width: | Height: | Size: 428 KiB After Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 340 KiB |
|
After Width: | Height: | Size: 232 KiB |
|
After Width: | Height: | Size: 130 KiB |
|
After Width: | Height: | Size: 185 KiB |
|
After Width: | Height: | Size: 147 KiB |
|
Before Width: | Height: | Size: 406 KiB After Width: | Height: | Size: 150 KiB |
|
After Width: | Height: | Size: 2.3 MiB |
|
Before Width: | Height: | Size: 378 KiB |
|
Before Width: | Height: | Size: 278 KiB After Width: | Height: | Size: 116 KiB |
|
Before Width: | Height: | Size: 302 KiB |
|
Before Width: | Height: | Size: 75 KiB |
|
After Width: | Height: | Size: 101 KiB |
|
After Width: | Height: | Size: 69 KiB |
|
Before Width: | Height: | Size: 226 KiB After Width: | Height: | Size: 89 KiB |
|
After Width: | Height: | Size: 160 KiB |
|
Before Width: | Height: | Size: 301 KiB After Width: | Height: | Size: 301 KiB |
|
After Width: | Height: | Size: 167 KiB |
|
Before Width: | Height: | Size: 503 KiB |
|
After Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 64 KiB |