frontend/src/components/home/TeamSection.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

import React from "react";
import ContentSection from "./ContentSection";

const TeamMember = ({ photoId, name, description }) => (
  <div className="col-xl-3 col-lg-3 col-md-5 col-sm-6 col-12 justify-content-center">
    <img
      src={"img/portraits/" + photoId + ".png"}
      className="col-xl-10 col-lg-10 col-md-10 col-sm-8 col-5 mb-2 mt-2"
      alt={name}
    />
    <div className="col-12">
      <h4>{name}</h4>
      <div className="team-member-description">{description}</div>
    </div>
  </div>
);

const TeamSection = () => (
  <ContentSection name="team" title="Core Team">
    <div className="row justify-content-center">
      <TeamMember
        photoId="aiosup"
        name="Prof. dr. ir. Alexandru Iosup"
        description="Project Lead"
      />
      <TeamMember
        photoId="gandreadis"
        name="Georgios Andreadis"
        description="Technology Lead and Software Engineer responsible for the frontend web application"
      />
      <TeamMember
        photoId="fmastenbroek"
        name="Fabian Mastenbroek"
        description="Software Engineer responsible for the datacenter simulator"
      />
      <TeamMember
        photoId="loverweel"
        name="Leon Overweel"
        description="Software Engineer responsible for the web server, database, and API specification"
      />
    </div>
    <div className="text-center lead mt-3">
      See{" "}
      <a
        target="_blank"
        href="http://atlarge.science/opendc#team"
        rel="noopener noreferrer"
      >
        atlarge.science/opendc
      </a>{" "}
      for the full team!
    </div>
  </ContentSection>
);

export default TeamSection;