About Page

Search…
About Page
The about page is wrapped in a fluid Container component, which is a full width container, spanning the entire width of the viewport.
Card Image Overlays
The <Card.ImgOverlay> component turns an image into a card background and overlay your card’s text:
1
<Card className="bg-dark text-white">
2
  <Card.Img src={require("../assets/images/aboutPage/AboutUs.jpeg")} />
3
  <Card.ImgOverlay>
4
    <Card.Title as="h1" style={{marginTop:'12rem'}}>
5
      Who We Are
6
    </Card.Title>
7
    <Card.Text as="h4" className="m-5">
8
      We do citizen science to learn how the the mind works.
9
    </Card.Text>
10
    <Card.Text as="h4">
11
      We are awesome scientists!
12
    </Card.Text>
13
  </Card.ImgOverlay>
14
</Card>
Copied!
Add a Team Member In About Page
To add a team member in the about page, open People.js located in components/TeamMember, it should be an array of objects look like this:
1
const people = [
2
  {
3
    name: 'Team Member Name',
4
    image: 'Template.png',
5
    description: 'Enter team member description here.'
6
  },
7
  {
8
    name: 'Team Member Name',
9
    image: 'Template.png',
10
    description: 'Enter team member description here.'
11
  },
12
  {
13
    name: 'Team Member Name',
14
    image: 'Template.png',
15
    description: 'Enter team member description here.'
16
  },
17
]
Copied!
Each object contains three properties: name, image and description. Edit the name and description properties in People.js.
To add a profile picture of the team member. Copy the image file into the assets/images/teamMember folder.
Then edit the image property in People.js, making sure the name of the image file and the image property here match, including the extension name, like: bob.jpg.
Findings Page
Feedback Page
Last modified 1yr ago
Copy link
Contents
Card Image Overlays
Add a Team Member In About Page