Manually generate IDs

14 files changed, 346 insertions, 345 deletions

diff --git a/frontend/src/components/home/ContactSection.js b/frontend/src/components/home/ContactSection.js
index f6c9c5d8..1ac2202c 100644
--- a/frontend/src/components/home/ContactSection.js
+++ b/frontend/src/components/home/ContactSection.js
@@ -1,64 +1,64 @@
-import React from "react";
-import FontAwesome from "react-fontawesome";
-import "./ContactSection.css";
-import ContentSection from "./ContentSection";
+import React from 'react'
+import FontAwesome from 'react-fontawesome'
+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">
-        <a href="mailto:opendc@atlarge-research.com">
-          <FontAwesome name="envelope" size="3x" className="mb-2" />
-          <div className="w-100" />
-          opendc@atlarge-research.com
-        </a>
-      </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.txt">
-            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">
+                <a href="mailto:opendc@atlarge-research.com">
+                    <FontAwesome name="envelope" size="3x" className="mb-2"/>
+                    <div className="w-100"/>
+                    opendc@atlarge-research.com
+                </a>
+            </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;
+export default ContactSection
diff --git a/frontend/src/components/home/ContactSection.sass b/frontend/src/components/home/ContactSection.sass
index 2cde7391..997f8d98 100644
--- a/frontend/src/components/home/ContactSection.sass
+++ b/frontend/src/components/home/ContactSection.sass
@@ -1,15 +1,15 @@
 .contact-section
-  background-color: #444
-  color: #ddd
-
-  a
+    background-color: #444
     color: #ddd
 
-  a:hover
-    color: #fff
+    a
+        color: #ddd
+
+    a:hover
+        color: #fff
 
-  .tudelft-icon
-    height: 100px
+    .tudelft-icon
+        height: 100px
 
-  .disclaimer
-    color: #cccccc
+    .disclaimer
+        color: #cccccc
diff --git a/frontend/src/components/home/ContentSection.js b/frontend/src/components/home/ContentSection.js
index 2e24ee10..ba2e4ec3 100644
--- a/frontend/src/components/home/ContentSection.js
+++ b/frontend/src/components/home/ContentSection.js
@@ -1,19 +1,19 @@
-import classNames from "classnames";
-import PropTypes from "prop-types";
-import React from "react";
-import "./ContentSection.css";
+import classNames from 'classnames'
+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 id={name} className={classNames(name + '-section', 'content-section')}>
+        <div className="container">
+            <h1>{title}</h1>
+            {children}
+        </div>
     </div>
-  </div>
-);
+)
 
 ContentSection.propTypes = {
-  name: PropTypes.string.isRequired
-};
+    name: PropTypes.string.isRequired,
+}
 
-export default ContentSection;
+export default ContentSection
diff --git a/frontend/src/components/home/ContentSection.sass b/frontend/src/components/home/ContentSection.sass
index 67541179..a4c8bd66 100644
--- a/frontend/src/components/home/ContentSection.sass
+++ b/frontend/src/components/home/ContentSection.sass
@@ -1,9 +1,9 @@
 @import ../../style-globals/_variables.sass
 
 .content-section
-  padding-top: 50px
-  padding-bottom: 100px
-  text-align: center
+    padding-top: 50px
+    padding-bottom: 150px
+    text-align: center
 
-  h1
-    margin-bottom: 30px
+    h1
+        margin-bottom: 30px
diff --git a/frontend/src/components/home/IntroSection.js b/frontend/src/components/home/IntroSection.js
index 59f5face..a799272a 100644
--- a/frontend/src/components/home/IntroSection.js
+++ b/frontend/src/components/home/IntroSection.js
@@ -1,40 +1,40 @@
-import React from "react";
+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>
+    <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>
         </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>
-    </div>
-  </section>
-);
+    </section>
+)
 
-export default IntroSection;
+export default IntroSection
diff --git a/frontend/src/components/home/JumbotronHeader.js b/frontend/src/components/home/JumbotronHeader.js
index 8a5312b3..d519e840 100644
--- a/frontend/src/components/home/JumbotronHeader.js
+++ b/frontend/src/components/home/JumbotronHeader.js
@@ -1,20 +1,20 @@
-import React from "react";
-import "./JumbotronHeader.css";
+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;
+export default JumbotronHeader
diff --git a/frontend/src/components/home/JumbotronHeader.sass b/frontend/src/components/home/JumbotronHeader.sass
index b88b79f7..1b6a89fd 100644
--- a/frontend/src/components/home/JumbotronHeader.sass
+++ b/frontend/src/components/home/JumbotronHeader.sass
@@ -1,24 +1,24 @@
 .jumbotron-header
-  background: #00A6D6
+    background: #00A6D6
 
 .jumbotron
-  background-color: inherit
-  margin-bottom: 0
+    background-color: inherit
+    margin-bottom: 0
 
-  padding-top: 120px
-  padding-bottom: 120px
+    padding-top: 120px
+    padding-bottom: 120px
 
-  img
-    max-width: 110px
+    img
+        max-width: 110px
 
-  h1
-    color: #fff
-    font-size: 4.5em
+    h1
+        color: #fff
+        font-size: 4.5em
 
-    .dc
-      color: #fff
-      font-weight: bold
+        .dc
+            color: #fff
+            font-weight: bold
 
-  .lead
-    color: #fff
-    font-size: 1.4em
+    .lead
+        color: #fff
+        font-size: 1.4em
diff --git a/frontend/src/components/home/ModelingSection.js b/frontend/src/components/home/ModelingSection.js
index 17834b0b..cdbb5a44 100644
--- a/frontend/src/components/home/ModelingSection.js
+++ b/frontend/src/components/home/ModelingSection.js
@@ -1,24 +1,24 @@
-import React from "react";
-import ScreenshotSection from "./ScreenshotSection";
+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;
+export default ModelingSection
diff --git a/frontend/src/components/home/ScreenshotSection.js b/frontend/src/components/home/ScreenshotSection.js
index 42b8ac77..fdb55020 100644
--- a/frontend/src/components/home/ScreenshotSection.js
+++ b/frontend/src/components/home/ScreenshotSection.js
@@ -1,32 +1,32 @@
-import classNames from "classnames";
-import React from "react";
-import ContentSection from "./ContentSection";
-import "./ScreenshotSection.css";
+import classNames from 'classnames'
+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>
-);
+                               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;
+export default ScreenshotSection
diff --git a/frontend/src/components/home/ScreenshotSection.sass b/frontend/src/components/home/ScreenshotSection.sass
index a349ad48..2f454cb4 100644
--- a/frontend/src/components/home/ScreenshotSection.sass
+++ b/frontend/src/components/home/ScreenshotSection.sass
@@ -1,5 +1,5 @@
 .screenshot
-  outline: 2px black solid
-  padding-left: 0
-  padding-right: 0
-  margin-bottom: 5px
+    outline: 2px black solid
+    padding-left: 0
+    padding-right: 0
+    margin-bottom: 5px
diff --git a/frontend/src/components/home/SimulationSection.js b/frontend/src/components/home/SimulationSection.js
index 3961e549..0fa21c34 100644
--- a/frontend/src/components/home/SimulationSection.js
+++ b/frontend/src/components/home/SimulationSection.js
@@ -1,25 +1,25 @@
-import React from "react";
-import ScreenshotSection from "./ScreenshotSection";
+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;
+export default ModelingSection
diff --git a/frontend/src/components/home/StakeholderSection.js b/frontend/src/components/home/StakeholderSection.js
index 6d25fd86..e547ebe0 100644
--- a/frontend/src/components/home/StakeholderSection.js
+++ b/frontend/src/components/home/StakeholderSection.js
@@ -1,42 +1,42 @@
-import React from "react";
-import ContentSection from "./ContentSection";
+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 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>
-  </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;
+export default StakeholderSection
diff --git a/frontend/src/components/home/TeamSection.js b/frontend/src/components/home/TeamSection.js
index b86655b4..2b7bb69d 100644
--- a/frontend/src/components/home/TeamSection.js
+++ b/frontend/src/components/home/TeamSection.js
@@ -1,56 +1,57 @@
-import React from "react";
-import ContentSection from "./ContentSection";
+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 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>
-  </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>
-);
+    <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;
+export default TeamSection
diff --git a/frontend/src/components/home/TechnologiesSection.js b/frontend/src/components/home/TechnologiesSection.js
index fdcfc522..13d8ca02 100644
--- a/frontend/src/components/home/TechnologiesSection.js
+++ b/frontend/src/components/home/TechnologiesSection.js
@@ -1,42 +1,42 @@
-import React from "react";
-import FontAwesome from "react-fontawesome";
-import ContentSection from "./ContentSection";
+import React from 'react'
+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">
+    <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" />
+          <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 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" />
+          <FontAwesome name="television" className="mr-2"/>
           <strong>Server</strong>
         </span>
-        <span className="text-right">
+                <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">
+            </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" />
+          <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 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" />
+          <FontAwesome name="cogs" className="mr-2"/>
           <strong>Simulator</strong>
         </span>
-        <span className="text-right">Kotlin</span>
-      </li>
-    </ul>
-  </ContentSection>
-);
+                <span className="text-right">Kotlin</span>
+            </li>
+        </ul>
+    </ContentSection>
+)
 
-export default TechnologiesSection;
+export default TechnologiesSection