* [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 |