The Team Card live in components > elements > TeamCard. There are a few exports involved to create this in the About Us page!

<aside> 🤔 How do I add an additional volunteer? It’s in the team.json file! Read the immediate article below: Data from team.json

</aside>

Data from team.json

The team.json file lives in the mockdata folder.

id: identifier for objects

name: name of person

title: job title of person

imgSource: url of image used

Description: biography (currently used for Juliana and Denise)

isVolunteer: Boolean statement if they are a volunteer.

Example on How to Upload a New Member to the Team

Let’s say I want to add a new volunteer named Cool Cat, who will be a Volunteer UI Designer for Beela. They provided us their cool picture:

Too cool, Cool Cat!

I would upload their photos and place it in the public > images . For file naming conventions, I the file name is renamed as team-cool-cat.jpg.

Afterwards, we’ll start a new arrays in objects after our volunteer Hellen and edit it like so with objects of id, name, title, imgSource, and isVolunteer.

If everything goes well, you should see Cool Cat right next to Hellen!

<aside> 🤔 Wait! I’m looking at the code and why does Hellen (id: 11) doesn’t have an imgSource and yet it’s showing an image of a bee? Yes, Helen doesn’t have an imgSource and if no imgSource is called, it’ll automatically populate a bee picture as shown below. We considered that sometimes volunteer may not want to provide a photo immediately!

</aside>