docs(v2): add myself to /team page + add TeamProfileCard component (#3145)

* add myself to /team page + add TeamProfileCard component

* apply col classes from parent to make TeamProfileCard more reusable
This commit is contained in:
Sébastien Lorber 2020-07-28 20:18:15 +02:00 committed by GitHub
parent d28a29f2c9
commit ee2d1b42f6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 97 additions and 143 deletions

View file

@ -4,157 +4,62 @@ title: Team
slug: /team slug: /team
--- ---
import TeamProfileCard from "@site/src/components/TeamProfileCard"
export function TeamProfileCardCol(props) { return <TeamProfileCard {...props} className={'col col--6 margin-bottom--lg'}/> }
## Active Team ## Active Team
<div className="row"> <div className="row">
<div className="col col--6 margin-bottom--lg"> <TeamProfileCardCol
<div className="card card--full-height"> name="Alexey Pyltsyn"
<div className="card__header"> githubUrl="https://github.com/lex111"
<div className="avatar avatar--vertical"> >
<img
className="avatar__photo avatar__photo--xl"
src="https://github.com/lex111.png"
/>
<div className="avatar__intro">
<h3 className="avatar__name">Alexey Pyltsyn</h3>
</div>
</div>
</div>
<div className="card__body">
Obsessed open-source enthusiast 👋 Eternal amateur at everything 🤷‍♂️ Maintainer of Russian docs on PHP, React, Kubernetes and much more 🧐 Obsessed open-source enthusiast 👋 Eternal amateur at everything 🤷‍♂️ Maintainer of Russian docs on PHP, React, Kubernetes and much more 🧐
</div> </TeamProfileCardCol>
<div className="card__footer"> <TeamProfileCardCol
<div className="button-group button-group--block"> name="Fanny Vieira"
<a className="button button--secondary" href="https://github.com/lex111">GitHub</a> githubUrl="https://github.com/fanny"
</div> twitterUrl="https://twitter.com/fannyvieiira"
</div> >
</div>
</div>
<div className="col col--6 margin-bottom--lg">
<div className="card card--full-height">
<div className="card__header">
<div className="avatar avatar--vertical">
<img
className="avatar__photo avatar__photo--xl"
src="https://github.com/fanny.png"
/>
<div className="avatar__intro">
<h3 className="avatar__name">Fanny Vieira</h3>
</div>
</div>
</div>
<div className="card__body">
Fanny got started with web development in high school, building a project for the school kitchen. In her free time she loves contributing to Open Source, occasionally writing on <a href="https://dev.to/fannyvieira" target="_blank">her blog</a> about her experiences, cooking, and creating <a href="https://open.spotify.com/user/anotherfanny" target="_blank">Spotify playlists</a>. Fanny got started with web development in high school, building a project for the school kitchen. In her free time she loves contributing to Open Source, occasionally writing on <a href="https://dev.to/fannyvieira" target="_blank">her blog</a> about her experiences, cooking, and creating <a href="https://open.spotify.com/user/anotherfanny" target="_blank">Spotify playlists</a>.
</div> </TeamProfileCardCol>
<div className="card__footer"> <TeamProfileCardCol
<div className="button-group button-group--block"> name="Joel Marcey"
<a className="button button--secondary" href="https://github.com/fanny">GitHub</a> githubUrl="https://github.com/JoelMarcey"
<a className="button button--secondary" href="https://twitter.com/fannyvieiira">Twitter</a> twitterUrl="https://twitter.com/joelmarcey"
</div> >
</div>
</div>
</div>
<div className="col col--6 margin-bottom--lg">
<div className="card card--full-height">
<div className="card__header">
<div className="avatar avatar--vertical">
<img
className="avatar__photo avatar__photo--xl"
src="https://github.com/JoelMarcey.png"
/>
<div className="avatar__intro">
<h3 className="avatar__name">Joel Marcey</h3>
</div>
</div>
</div>
<div className="card__body">
Docusaurus founder and now ever grateful Docusaurus cheerleader to those who actually write code for it. Docusaurus founder and now ever grateful Docusaurus cheerleader to those who actually write code for it.
</div> </TeamProfileCardCol>
<div className="card__footer"> <TeamProfileCardCol
<div className="button-group button-group--block"> name="Sébastien Lorber"
<a className="button button--secondary" href="https://github.com/JoelMarcey">GitHub</a> githubUrl="https://github.com/slorber"
<a className="button button--secondary" href="https://twitter.com/joelmarcey">Twitter</a> twitterUrl="https://twitter.com/sebastienlorber"
</div> >
</div> React lover since 2014. Freelance, helping Facebook ship Docusaurus v2.
</div> </TeamProfileCardCol>
</div> <TeamProfileCardCol
<div className="col col--6 margin-bottom--lg"> name="Yangshun Tay"
<div className="card card--full-height"> githubUrl="https://github.com/yangshun"
<div className="card__header"> twitterUrl="https://twitter.com/yangshunz"
<div className="avatar avatar--vertical"> >
<img
className="avatar__photo avatar__photo--xl"
src="https://github.com/yangshun.png"
/>
<div className="avatar__intro">
<h3 className="avatar__name">Yangshun Tay</h3>
</div>
</div>
</div>
<div className="card__body">
Full Front End Stack developer who likes working on the Jamstack. Working on Docusaurus made him Facebook's unofficial part-time Open Source webmaster, which is an awesome role to be in. Full Front End Stack developer who likes working on the Jamstack. Working on Docusaurus made him Facebook's unofficial part-time Open Source webmaster, which is an awesome role to be in.
</div> </TeamProfileCardCol>
<div className="card__footer">
<div className="button-group button-group--block">
<a className="button button--secondary" href="https://github.com/yangshun">GitHub</a>
<a className="button button--secondary" href="https://twitter.com/yangshunz">Twitter</a>
</div>
</div>
</div>
</div>
</div> </div>
## Honorary Alumni ## Honorary Alumni
<div className="row"> <div className="row">
<div className="col col--6 margin-bottom--lg"> <TeamProfileCardCol name="Endilie Yacop Sucipto" githubUrl="https://github.com/endiliey" twitterUrl="https://twitter.com/endiliey">
<div className="card card--full-height">
<div className="card__header">
<div className="avatar avatar--vertical">
<img
className="avatar__photo avatar__photo--xl"
src="https://github.com/endiliey.png"
/>
<div className="avatar__intro">
<h3 className="avatar__name">Endilie Yacop Sucipto</h3>
</div>
</div>
</div>
<div className="card__body">
Maintainer @docusaurus · 🔥🔥🔥 Maintainer @docusaurus · 🔥🔥🔥
</div> </TeamProfileCardCol>
<div className="card__footer"> <TeamProfileCardCol
<div className="button-group button-group--block"> name="Wei Gao"
<a className="button button--secondary" href="https://github.com/endiliey">GitHub</a> githubUrl="https://github.com/wgao19"
<a className="button button--secondary" href="https://twitter.com/endiliey">Twitter</a> twitterUrl="https://twitter.com/wgao19"
</div> >
</div> 🏻‍🌾 Work in progress React developer, maintains Docusaurus, writes docs and spams this world with many websites.
</div> </TeamProfileCardCol>
</div>
<div className="col col--6 margin-bottom--lg">
<div className="card card--full-height">
<div className="card__header">
<div className="avatar avatar--vertical">
<img
className="avatar__photo avatar__photo--xl"
src="https://github.com/wgao19.png"
/>
<div className="avatar__intro">
<h3 className="avatar__name">Wei Gao</h3>
</div>
</div>
</div>
<div className="card__body">
👩🏻‍🌾 Work in progress React developer, maintains Docusaurus, writes docs and spams this world with many websites.
</div>
<div className="card__footer">
<div className="button-group button-group--block">
<a className="button button--secondary" href="https://github.com/wgao19">GitHub</a>
<a className="button button--secondary" href="https://twitter.com/wgao19">Twitter</a>
</div>
</div>
</div>
</div>
</div> </div>
## Acknowledgements ## Acknowledgements

View file

@ -0,0 +1,49 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
export default function TeamProfileCard({
className,
name,
children,
githubUrl,
twitterUrl,
}) {
return (
<div className={className}>
<div className="card card--full-height">
<div className="card__header">
<div className="avatar avatar--vertical">
<img
className="avatar__photo avatar__photo--xl"
src={githubUrl + '.png'}
/>
<div className="avatar__intro">
<h3 className="avatar__name">{name}</h3>
</div>
</div>
</div>
<div className="card__body">{children}</div>
<div className="card__footer">
<div className="button-group button-group--block">
{githubUrl && (
<a className="button button--secondary" href={githubUrl}>
GitHub
</a>
)}
{twitterUrl && (
<a className="button button--secondary" href={twitterUrl}>
Twitter
</a>
)}
</div>
</div>
</div>
</div>
);
}