Create Teams Page in About Us Section

[wwwwwlwwwww]

This issue follows on from #508 .

We are hoping to create a teams page for the website, according to the mockup presented below.

The mockup presented above was made in MS Paint and is a rough visual depiction of what we want the page to look like; to the extent that small details (e.g. the border color/size) differ from the style already prevalent on the site, we should try to stick with the style already on the site.

---

Layout of a desktop page:

In the mockup, we have this described as a team based thing. We don't yet have a field for team member or role that has that information. For now, then, we want to organize the team members by Domain (so ignore the Administartion, Operations, etc. labels - instead it should be Staff, Volunteers, etc.).

For the desktop page, it should be fine to not have dropdowns (see mobile section below for what this means).

The mockup shows cards three across; probably the number of cards per row to be displayed should depend on browser width. You can use some agency in figuring this out with what size makes most sense.

---

Layout of mobile page:

The cards will need to appear not side by side, rather they should be one at a time. In order to make the page not super long with this setup, the mockup shows dropdowns for the different domains. When you load the page in mobile, we want it to just have the names of the domains present in bars of some sort as pictured. When you tap either the triangle at the left of the bar or the whole bar, it can expand to show the relevant team cards underneath that.

---

###For each individual card:

The information to be presented is these fields:

• Name (hyperlinked with Link)
• Profile Photo
• Role Title
• Role Commitment (to appear in parentheses after role title)
• Bio

There are additional fields for team members and roles. At this stage, we won't be incorporating those into the page. We might add them at some point in the future.

---

[KeShaKreates]

Hello! I would like to take this issue.

[jtfairbank]

Sounds great @KeShaKreates! I've made a CodeSee map highlighting the most relevant portions of the codebase to help guide you.

I believe we'll want the route for this page to be /about-us/our-team. @wwwwwlwwwww does that sound right?

Key steps:

• Add your name to /CONTRIBUTORS.md
• Add the page to /src/pages. You'll want to create an about-us folder to put it in since Gatsby uses the file paths to generate the page URL by default. Take a look at the Regions page for an example (/src/pages/regions/index.tsx).
• Checkout the DATeamMember and DATeamRole data available through http://localhost:8000/___graphql once you're running the server locally. You can use that to craft your page query, and will likely want to add types for this data to /src/types which you can reuse across the page and relevant components.
• Add relevant components to /src/components. Heads up that @JasonFritsche is working on a generalized card component which should be available soon. See his PR Refactor Card Template Implementations into a DRY Component #572
• Add a simple e2e (end-to-end) test in /e2e-tests to make sure the page is accessible

[jtfairbank]

Note that #582 needs to be resolved in order to access the team field on DaTeamRole data entries for ordering team members on the page. You can use another field to create the UI sections for now, then just switch it up once team is available! Or pick up #582 as well and resolve them both at the same time.

[wwwwwlwwwww]

Taylor, you're absolutely right about /about-us/our-team being the desired route for this page for the work of @KeShaKreates.

[choco-develop]

hello...is there still a space for me in the team?
i enjoy working on layout

[jtfairbank]

Hey @choco-develop there absolutely is! We've had a hard time keeping up with all of the interest but I'm working on getting new issues ready for dev now. Would you like to take on #584? #571 would also pair well with it if you want to do some full-stack work. I'm actively moving those issues out of triage and would happy to jump on a zoom right now if you want some help getting started!

Best way to DM me for a zoom link is via Twitter (I'm @borderless_dev there). If you prefer to work solo that's fine, we can communicate through the github issues!

[HondaChan14]

Hello Would love to help if there is any space?

[jtfairbank]

Hey @HondaChan14 there absolutely is! @KeShaKreates is working on this issue, but you can look through the unassigned ones and comment on any that interests you, then I'll assign it to ya!

[wwwwwlwwwww]

@KeShaKreates Is this coming along well? I was in a team meeting in Belgrade today discussing our quarterly reporting, and people are super excited about having team members on the website!

[KeShaKreates]

@wwwwwlwwwww Yes it is! I should have it completed by this weekend. I am excited as well!

[wwwwwlwwwww]

@KeShaKreates Looks AWESOME! Thanks so much! I'm working on gathering more team content/info from people and putting it into our CMS now, so this page should be on the public site very soon. :)

[fedechaves]

@jtfairbank you should check this issue Taylor