View ATC members

The overall code can be accessed at /ui/src/routes/about_us.tsx.

Card components have been used for displaying the ATC members.

const members = getMembers();
...
{
  members.slice(0, 1).map((member: any) => {
    return (
      <Space>
        <Col key={member.key} span={8}>
          <Card hoverable className="member-card">
            <Card.Grid className="grid-style">
              <div className="member-content">
                <Title level={3}>{member.department}</Title>
                <Avatar
                  size={120}
                  src={
                    require("../photos/members/profiles/Urs_Wiedemann.jpg")
                      .default
                  }
                />
                <Title level={2}>{member.name}</Title>
                <p>{member.position}</p>
              </div>
            </Card.Grid>
          </Card>
        </Col>
      </Space>
    );
  });
}
...

If you would like to change or add a new member, go to /ui/src/photos/members/members.ts, and update the file, for example:

...
{
    key: 15,
    name: "Frank TECKER",
    profile: baseUrl + "Frank_Tecker.jpg",
    position: "",
    department: "BE",
}
...

Make sure that the members are exported, so it can be accessed from other files:

export function getMembers() {
  return members;
}