10 files changed, 280 insertions, 220 deletions
diff --git a/src/components/home/ContactSection.js b/src/components/home/ContactSection.js
index fd65b31c..d957297a 100644
--- a/src/components/home/ContactSection.js
+++ b/src/components/home/ContactSection.js
@@ -5,48 +5,61 @@ import "./ContactSection.css";
 import ContentSection from "./ContentSection";
 
 const ContactSection = () => (
-    <ContentSection name="contact" title="Contact">
-        <div className="row justify-content-center">
-            <div className="col-4">
-                <a href="https://github.com/atlarge-research/opendc">
-                    <FontAwesome name="github" size="3x" className="mb-2"/>
-                    <div className="w-100"/>
-                    atlarge-research/opendc
-                </a>
-            </div>
-            <div className="col-4">
-                <Mailto title="Contact us" email="opendc@atlarge-research.com">
-                    <FontAwesome name="envelope" size="3x" className="mb-2"/>
-                    <div className="w-100"/>
-                    opendc@atlarge-research.com
-                </Mailto>
-            </div>
-        </div>
-        <div className="row">
-            <div className="col text-center">
-                <img src="img/tudelft-icon.png" className="img-fluid tudelft-icon" alt="TU Delft"/>
-            </div>
-        </div>
-        <div className="row">
-            <div className="col text-center">
-                A project by the &nbsp;
-                <a href="http://atlarge.science" target="_blank" rel="noopener noreferrer">
-                    <strong>@Large Research Group</strong>
-                </a>.
-            </div>
-        </div>
-        <div className="row">
-            <div className="col text-center disclaimer mt-5 small">
-                <FontAwesome name="exclamation-triangle" size="2x" className="mr-2"/>
-                <br/>
-                OpenDC is an experimental tool. Your data may get lost, overwritten, or otherwise become unavailable.
-                <br/>
-                The OpenDC authors should in no way be liable in the event this happens (see our <strong><a
-                href="https://github.com/atlarge-research/opendc/blob/master/LICENSE.md">license</a></strong>). Sorry
-                for the inconvenience.
-            </div>
-        </div>
-    </ContentSection>
+  <ContentSection name="contact" title="Contact">
+    <div className="row justify-content-center">
+      <div className="col-4">
+        <a href="https://github.com/atlarge-research/opendc">
+          <FontAwesome name="github" size="3x" className="mb-2" />
+          <div className="w-100" />
+          atlarge-research/opendc
+        </a>
+      </div>
+      <div className="col-4">
+        <Mailto title="Contact us" email="opendc@atlarge-research.com">
+          <FontAwesome name="envelope" size="3x" className="mb-2" />
+          <div className="w-100" />
+          opendc@atlarge-research.com
+        </Mailto>
+      </div>
+    </div>
+    <div className="row">
+      <div className="col text-center">
+        <img
+          src="img/tudelft-icon.png"
+          className="img-fluid tudelft-icon"
+          alt="TU Delft"
+        />
+      </div>
+    </div>
+    <div className="row">
+      <div className="col text-center">
+        A project by the &nbsp;
+        <a
+          href="http://atlarge.science"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <strong>@Large Research Group</strong>
+        </a>.
+      </div>
+    </div>
+    <div className="row">
+      <div className="col text-center disclaimer mt-5 small">
+        <FontAwesome name="exclamation-triangle" size="2x" className="mr-2" />
+        <br />
+        OpenDC is an experimental tool. Your data may get lost, overwritten, or
+        otherwise become unavailable.
+        <br />
+        The OpenDC authors should in no way be liable in the event this happens
+        (see our{" "}
+        <strong>
+          <a href="https://github.com/atlarge-research/opendc/blob/master/LICENSE.md">
+            license
+          </a>
+        </strong>). Sorry for the inconvenience.
+      </div>
+    </div>
+  </ContentSection>
 );
 
 export default ContactSection;
diff --git a/src/components/home/ContentSection.js b/src/components/home/ContentSection.js
index 6b4cbca4..2e24ee10 100644
--- a/src/components/home/ContentSection.js
+++ b/src/components/home/ContentSection.js
@@ -3,17 +3,17 @@ import PropTypes from "prop-types";
 import React from "react";
 import "./ContentSection.css";
 
-const ContentSection = ({name, title, children}) => (
-    <div id={name} className={classNames(name + "-section", "content-section")}>
-        <div className="container">
-            <h1>{title}</h1>
-            {children}
-        </div>
+const ContentSection = ({ name, title, children }) => (
+  <div id={name} className={classNames(name + "-section", "content-section")}>
+    <div className="container">
+      <h1>{title}</h1>
+      {children}
     </div>
+  </div>
 );
 
 ContentSection.propTypes = {
-    name: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired
 };
 
 export default ContentSection;
diff --git a/src/components/home/IntroSection.js b/src/components/home/IntroSection.js
index 246786f2..59f5face 100644
--- a/src/components/home/IntroSection.js
+++ b/src/components/home/IntroSection.js
@@ -1,38 +1,40 @@
 import React from "react";
 
 const IntroSection = () => (
-    <section id="intro" className="intro-section">
-        <div className="container pt-5 pb-3">
-            <div className="row justify-content-center">
-                <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8">
-                    <h4>The datacenter (DC) industry...</h4>
-                    <ul>
-                        <li>Is worth over $15 bn, and growing</li>
-                        <li>Has many hard-to-grasp concepts</li>
-                        <li>Needs to become accessible to many</li>
-                    </ul>
-                </div>
-                <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8">
-                    <img src="img/datacenter-drawing.png"
-                         className="col-12 img-fluid"
-                         alt="Schematic top-down view of a datacenter"/>
-                    <p className="col-12 figure-caption text-center">
-                        <a href="http://www.dolphinhosts.co.uk/wp-content/uploads/2013/07/data-centers.gif">
-                            Image source
-                        </a>
-                    </p>
-                </div>
-                <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8">
-                    <h4>OpenDC provides...</h4>
-                    <ul>
-                        <li>Collaborative online DC modeling</li>
-                        <li>Diverse and effective DC simulation</li>
-                        <li>Exploratory DC performance feedback</li>
-                    </ul>
-                </div>
-            </div>
+  <section id="intro" className="intro-section">
+    <div className="container pt-5 pb-3">
+      <div className="row justify-content-center">
+        <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8">
+          <h4>The datacenter (DC) industry...</h4>
+          <ul>
+            <li>Is worth over $15 bn, and growing</li>
+            <li>Has many hard-to-grasp concepts</li>
+            <li>Needs to become accessible to many</li>
+          </ul>
         </div>
-    </section>
+        <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8">
+          <img
+            src="img/datacenter-drawing.png"
+            className="col-12 img-fluid"
+            alt="Schematic top-down view of a datacenter"
+          />
+          <p className="col-12 figure-caption text-center">
+            <a href="http://www.dolphinhosts.co.uk/wp-content/uploads/2013/07/data-centers.gif">
+              Image source
+            </a>
+          </p>
+        </div>
+        <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8">
+          <h4>OpenDC provides...</h4>
+          <ul>
+            <li>Collaborative online DC modeling</li>
+            <li>Diverse and effective DC simulation</li>
+            <li>Exploratory DC performance feedback</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
 );
 
 export default IntroSection;
diff --git a/src/components/home/JumbotronHeader.js b/src/components/home/JumbotronHeader.js
index ba504c18..8a5312b3 100644
--- a/src/components/home/JumbotronHeader.js
+++ b/src/components/home/JumbotronHeader.js
@@ -2,17 +2,19 @@ import React from "react";
 import "./JumbotronHeader.css";
 
 const JumbotronHeader = () => (
-    <section className="jumbotron-header">
-        <div className="container">
-            <div className="jumbotron text-center">
-                <h1>Open<span className="dc">DC</span></h1>
-                <p className="lead">
-                    Collaborative Datacenter Simulation and Exploration for Everybody
-                </p>
-                <img src="img/logo.png" className="img-responsive mt-3" alt="OpenDC"/>
-            </div>
-        </div>
-    </section>
+  <section className="jumbotron-header">
+    <div className="container">
+      <div className="jumbotron text-center">
+        <h1>
+          Open<span className="dc">DC</span>
+        </h1>
+        <p className="lead">
+          Collaborative Datacenter Simulation and Exploration for Everybody
+        </p>
+        <img src="img/logo.png" className="img-responsive mt-3" alt="OpenDC" />
+      </div>
+    </div>
+  </section>
 );
 
 export default JumbotronHeader;
diff --git a/src/components/home/ModelingSection.js b/src/components/home/ModelingSection.js
index d3252b9b..17834b0b 100644
--- a/src/components/home/ModelingSection.js
+++ b/src/components/home/ModelingSection.js
@@ -2,18 +2,23 @@ import React from "react";
 import ScreenshotSection from "./ScreenshotSection";
 
 const ModelingSection = () => (
-    <ScreenshotSection name="modeling" title="Datacenter Modeling"
-                       imageUrl="https://github.com/atlarge-research/opendc/raw/master/images/opendc-frontend-construction.PNG"
-                       caption="Building a datacenter in OpenDC"
-                       imageIsRight={true}>
-        <h3>Collaboratively...</h3>
-        <ul>
-            <li>Model DC layout, and room locations and types</li>
-            <li>Place racks in rooms and nodes in racks</li>
-            <li>Add real-world CPU, GPU, memory, storage and network units to each node</li>
-            <li>Select from diverse scheduling policies</li>
-        </ul>
-    </ScreenshotSection>
+  <ScreenshotSection
+    name="modeling"
+    title="Datacenter Modeling"
+    imageUrl="https://github.com/atlarge-research/opendc/raw/master/images/opendc-frontend-construction.PNG"
+    caption="Building a datacenter in OpenDC"
+    imageIsRight={true}
+  >
+    <h3>Collaboratively...</h3>
+    <ul>
+      <li>Model DC layout, and room locations and types</li>
+      <li>Place racks in rooms and nodes in racks</li>
+      <li>
+        Add real-world CPU, GPU, memory, storage and network units to each node
+      </li>
+      <li>Select from diverse scheduling policies</li>
+    </ul>
+  </ScreenshotSection>
 );
 
 export default ModelingSection;
diff --git a/src/components/home/ScreenshotSection.js b/src/components/home/ScreenshotSection.js
index 74394dcb..42b8ac77 100644
--- a/src/components/home/ScreenshotSection.js
+++ b/src/components/home/ScreenshotSection.js
@@ -3,21 +3,30 @@ import React from "react";
 import ContentSection from "./ContentSection";
 import "./ScreenshotSection.css";
 
-const ScreenshotSection = ({name, title, imageUrl, caption, imageIsRight, children}) => (
-    <ContentSection name={name} title={title}>
-        <div className="row">
-            <div className={classNames("col-xl-5 col-lg-5 col-md-5 col-sm-12 col-12 text-left",
-                {"order-1": !imageIsRight})}>
-                {children}
-            </div>
-            <div className="col-xl-7 col-lg-7 col-md-7 col-sm-12 col-12">
-                <img src={imageUrl} className="col-12 screenshot" alt={caption}/>
-                <div className="row text-muted justify-content-center">
-                    {caption}
-                </div>
-            </div>
-        </div>
-    </ContentSection>
+const ScreenshotSection = ({
+  name,
+  title,
+  imageUrl,
+  caption,
+  imageIsRight,
+  children
+}) => (
+  <ContentSection name={name} title={title}>
+    <div className="row">
+      <div
+        className={classNames(
+          "col-xl-5 col-lg-5 col-md-5 col-sm-12 col-12 text-left",
+          { "order-1": !imageIsRight }
+        )}
+      >
+        {children}
+      </div>
+      <div className="col-xl-7 col-lg-7 col-md-7 col-sm-12 col-12">
+        <img src={imageUrl} className="col-12 screenshot" alt={caption} />
+        <div className="row text-muted justify-content-center">{caption}</div>
+      </div>
+    </div>
+  </ContentSection>
 );
 
 export default ScreenshotSection;
diff --git a/src/components/home/SimulationSection.js b/src/components/home/SimulationSection.js
index eb1f7787..3961e549 100644
--- a/src/components/home/SimulationSection.js
+++ b/src/components/home/SimulationSection.js
@@ -2,18 +2,24 @@ import React from "react";
 import ScreenshotSection from "./ScreenshotSection";
 
 const ModelingSection = () => (
-    <ScreenshotSection name="simulation" title="Datacenter Simulation"
-                       imageUrl="https://github.com/atlarge-research/opendc/raw/master/images/opendc-frontend-simulation-zoom.PNG"
-                       caption="Running an experiment in OpenDC"
-                       imageIsRight={false}>
-        <h3>Working with OpenDC:</h3>
-        <ul>
-            <li>Seamlessly switch between construction and simulation modes</li>
-            <li>Choose one of several predefined workloads (Big Data, Bag of Tasks, Hadoop, etc.)</li>
-            <li>Play, pause, and skip around the informative simulation timeline</li>
-            <li>Visualize and demo live</li>
-        </ul>
-    </ScreenshotSection>
+  <ScreenshotSection
+    name="simulation"
+    title="Datacenter Simulation"
+    imageUrl="https://github.com/atlarge-research/opendc/raw/master/images/opendc-frontend-simulation-zoom.PNG"
+    caption="Running an experiment in OpenDC"
+    imageIsRight={false}
+  >
+    <h3>Working with OpenDC:</h3>
+    <ul>
+      <li>Seamlessly switch between construction and simulation modes</li>
+      <li>
+        Choose one of several predefined workloads (Big Data, Bag of Tasks,
+        Hadoop, etc.)
+      </li>
+      <li>Play, pause, and skip around the informative simulation timeline</li>
+      <li>Visualize and demo live</li>
+    </ul>
+  </ScreenshotSection>
 );
 
 export default ModelingSection;
diff --git a/src/components/home/StakeholderSection.js b/src/components/home/StakeholderSection.js
index ddfe4f7c..6d25fd86 100644
--- a/src/components/home/StakeholderSection.js
+++ b/src/components/home/StakeholderSection.js
@@ -1,27 +1,42 @@
 import React from "react";
 import ContentSection from "./ContentSection";
 
-const Stakeholder = ({name, title, subtitle}) => (
-    <div className="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-6">
-        <img src={"img/stakeholders/" + name + ".png"}
-             className="col-xl-3 col-lg-4 col-md-4 col-sm-4 col-4 img-fluid" alt={title}/>
-        <div className="text-center mt-2">
-            <h4>{title}</h4>
-            <p>{subtitle}</p>
-        </div>
+const Stakeholder = ({ name, title, subtitle }) => (
+  <div className="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-6">
+    <img
+      src={"img/stakeholders/" + name + ".png"}
+      className="col-xl-3 col-lg-4 col-md-4 col-sm-4 col-4 img-fluid"
+      alt={title}
+    />
+    <div className="text-center mt-2">
+      <h4>{title}</h4>
+      <p>{subtitle}</p>
     </div>
+  </div>
 );
 
 const StakeholderSection = () => (
-    <ContentSection name="stakeholders" title="Stakeholders">
-        <div className="row justify-content-center">
-            <Stakeholder name="Manager" title="Managers" subtitle="Seeing is deciding"/>
-            <Stakeholder name="Sales" title="Sales" subtitle="Demo concepts"/>
-            <Stakeholder name="Developer" title="DevOps" subtitle="Develop & tune"/>
-            <Stakeholder name="Researcher" title="Researchers" subtitle="Understand & design"/>
-            <Stakeholder name="Student" title="Students" subtitle="Grasp complex concepts"/>
-        </div>
-    </ContentSection>
+  <ContentSection name="stakeholders" title="Stakeholders">
+    <div className="row justify-content-center">
+      <Stakeholder
+        name="Manager"
+        title="Managers"
+        subtitle="Seeing is deciding"
+      />
+      <Stakeholder name="Sales" title="Sales" subtitle="Demo concepts" />
+      <Stakeholder name="Developer" title="DevOps" subtitle="Develop & tune" />
+      <Stakeholder
+        name="Researcher"
+        title="Researchers"
+        subtitle="Understand & design"
+      />
+      <Stakeholder
+        name="Student"
+        title="Students"
+        subtitle="Grasp complex concepts"
+      />
+    </div>
+  </ContentSection>
 );
 
 export default StakeholderSection;
diff --git a/src/components/home/TeamSection.js b/src/components/home/TeamSection.js
index f9ca3105..f29003f7 100644
--- a/src/components/home/TeamSection.js
+++ b/src/components/home/TeamSection.js
@@ -1,43 +1,57 @@
 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>
+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="loverweel" name="Leon Overweel"
-                        description="Product Lead and Software Engineer responsible for the web server, database, and
-                        API specification"/>
-            <TeamMember photoId="gandreadis" name="Georgios Andreadis"
-                        description="Software Engineer responsible for the frontend web application"/>
-            <TeamMember photoId="fmastenbroek" name="Fabian Mastenbroek"
-                        description="Software Engineer responsible for the datacenter simulator"/>
-        </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>
+  <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="loverweel"
+        name="Leon Overweel"
+        description="Product Lead and Software Engineer responsible for the web server, database, and
+                        API specification"
+      />
+      <TeamMember
+        photoId="gandreadis"
+        name="Georgios Andreadis"
+        description="Software Engineer responsible for the frontend web application"
+      />
+      <TeamMember
+        photoId="fmastenbroek"
+        name="Fabian Mastenbroek"
+        description="Software Engineer responsible for the datacenter simulator"
+      />
+    </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;
diff --git a/src/components/home/TechnologiesSection.js b/src/components/home/TechnologiesSection.js
index 5e2ec2fc..fdcfc522 100644
--- a/src/components/home/TechnologiesSection.js
+++ b/src/components/home/TechnologiesSection.js
@@ -3,46 +3,40 @@ import FontAwesome from "react-fontawesome";
 import ContentSection from "./ContentSection";
 
 const TechnologiesSection = () => (
-    <ContentSection name="technologies" title="Technologies">
-        <ul className="list-group text-left">
-            <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-primary">
-                <span style={{minWidth: 100}}>
-                    <FontAwesome name="window-maximize" className="mr-2"/>
-                    <strong className="">Browser</strong>
-                </span>
-                <span className="text-right">
-                    JavaScript, React, Redux, Konva
-                </span>
-            </li>
-            <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-warning">
-                <span style={{minWidth: 100}}>
-                    <FontAwesome name="television" className="mr-2"/>
-                    <strong>Server</strong>
-                </span>
-                <span className="text-right">
-                    Python, Flask, FlaskSocketIO, OpenAPI
-                </span>
-            </li>
-            <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-success">
-                <span style={{minWidth: 100}}>
-                    <FontAwesome name="database" className="mr-2"/>
-                    <strong>Database</strong>
-                </span>
-                <span className="text-right">
-                    MariaDB
-                </span>
-            </li>
-            <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-danger">
-                <span style={{minWidth: 100}}>
-                    <FontAwesome name="cogs" className="mr-2"/>
-                    <strong>Simulator</strong>
-                </span>
-                <span className="text-right">
-                    Kotlin
-                </span>
-            </li>
-        </ul>
-    </ContentSection>
+  <ContentSection name="technologies" title="Technologies">
+    <ul className="list-group text-left">
+      <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-primary">
+        <span style={{ minWidth: 100 }}>
+          <FontAwesome name="window-maximize" className="mr-2" />
+          <strong className="">Browser</strong>
+        </span>
+        <span className="text-right">JavaScript, React, Redux, Konva</span>
+      </li>
+      <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-warning">
+        <span style={{ minWidth: 100 }}>
+          <FontAwesome name="television" className="mr-2" />
+          <strong>Server</strong>
+        </span>
+        <span className="text-right">
+          Python, Flask, FlaskSocketIO, OpenAPI
+        </span>
+      </li>
+      <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-success">
+        <span style={{ minWidth: 100 }}>
+          <FontAwesome name="database" className="mr-2" />
+          <strong>Database</strong>
+        </span>
+        <span className="text-right">MariaDB</span>
+      </li>
+      <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-danger">
+        <span style={{ minWidth: 100 }}>
+          <FontAwesome name="cogs" className="mr-2" />
+          <strong>Simulator</strong>
+        </span>
+        <span className="text-right">Kotlin</span>
+      </li>
+    </ul>
+  </ContentSection>
 );
 
 export default TechnologiesSection;