Add first plotting attempts for portfolios

8 files changed, 49 insertions, 96 deletions

diff --git a/frontend/src/components/home/ContactSection.js b/frontend/src/components/home/ContactSection.js
index 1ac2202c..095fb939 100644
--- a/frontend/src/components/home/ContactSection.js
+++ b/frontend/src/components/home/ContactSection.js
@@ -8,54 +8,44 @@ const ContactSection = () => (
         <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"/>
+                    <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"/>
+                    <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"
-                />
+                <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"
-                >
+                <a href="http://atlarge.science" target="_blank" rel="noopener noreferrer">
                     <strong>@Large Research Group</strong>
-                </a>.
+                </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{' '}
+                <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.
+                    <a href="https://github.com/atlarge-research/opendc/blob/master/LICENSE.md">license</a>
+                </strong>
+                ). Sorry for the inconvenience.
             </div>
         </div>
     </ContentSection>
diff --git a/frontend/src/components/home/JumbotronHeader.js b/frontend/src/components/home/JumbotronHeader.js
index d519e840..f7af4cd9 100644
--- a/frontend/src/components/home/JumbotronHeader.js
+++ b/frontend/src/components/home/JumbotronHeader.js
@@ -8,10 +8,8 @@ const JumbotronHeader = () => (
                 <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"/>
+                <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>
diff --git a/frontend/src/components/home/ModelingSection.js b/frontend/src/components/home/ModelingSection.js
index cdbb5a44..60d372f2 100644
--- a/frontend/src/components/home/ModelingSection.js
+++ b/frontend/src/components/home/ModelingSection.js
@@ -13,9 +13,7 @@ const ModelingSection = () => (
         <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>Add real-world CPU, GPU, memory, storage and network units to each node</li>
             <li>Select from diverse scheduling policies</li>
         </ul>
     </ScreenshotSection>
diff --git a/frontend/src/components/home/ScreenshotSection.js b/frontend/src/components/home/ScreenshotSection.js
index fdb55020..d0ff54bd 100644
--- a/frontend/src/components/home/ScreenshotSection.js
+++ b/frontend/src/components/home/ScreenshotSection.js
@@ -3,26 +3,18 @@ import React from 'react'
 import ContentSection from './ContentSection'
 import './ScreenshotSection.css'
 
-const ScreenshotSection = ({
-                               name,
-                               title,
-                               imageUrl,
-                               caption,
-                               imageIsRight,
-                               children,
-                           }) => (
+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 },
-                )}
+                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}/>
+                <img src={imageUrl} className="col-12 screenshot" alt={caption} />
                 <div className="row text-muted justify-content-center">{caption}</div>
             </div>
         </div>
diff --git a/frontend/src/components/home/SimulationSection.js b/frontend/src/components/home/SimulationSection.js
index 0fa21c34..9852cbb8 100644
--- a/frontend/src/components/home/SimulationSection.js
+++ b/frontend/src/components/home/SimulationSection.js
@@ -12,10 +12,7 @@ const ModelingSection = () => (
         <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>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>
diff --git a/frontend/src/components/home/StakeholderSection.js b/frontend/src/components/home/StakeholderSection.js
index e547ebe0..e5ed9683 100644
--- a/frontend/src/components/home/StakeholderSection.js
+++ b/frontend/src/components/home/StakeholderSection.js
@@ -18,23 +18,11 @@ const Stakeholder = ({ name, title, subtitle }) => (
 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"
-            />
+            <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>
 )
diff --git a/frontend/src/components/home/TeamSection.js b/frontend/src/components/home/TeamSection.js
index 6823797f..4b6f1e25 100644
--- a/frontend/src/components/home/TeamSection.js
+++ b/frontend/src/components/home/TeamSection.js
@@ -18,11 +18,7 @@ const TeamMember = ({ photoId, name, description }) => (
 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="aiosup" name="Prof. dr. ir. Alexandru Iosup" description="Project Lead" />
             <TeamMember
                 photoId="gandreadis"
                 name="Georgios Andreadis"
@@ -46,11 +42,7 @@ const TeamSection = () => (
         </div>
         <div className="text-center lead mt-3">
             See{' '}
-            <a
-                target="_blank"
-                href="http://atlarge.science/opendc#team"
-                rel="noopener noreferrer"
-            >
+            <a target="_blank" href="http://atlarge.science/opendc#team" rel="noopener noreferrer">
                 atlarge.science/opendc
             </a>{' '}
             for the full team!
diff --git a/frontend/src/components/home/TechnologiesSection.js b/frontend/src/components/home/TechnologiesSection.js
index 01d55937..c6013c71 100644
--- a/frontend/src/components/home/TechnologiesSection.js
+++ b/frontend/src/components/home/TechnologiesSection.js
@@ -6,33 +6,31 @@ 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 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>
+                <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 style={{ minWidth: 100 }}>
+                    <FontAwesome name="database" className="mr-2" />
+                    <strong>Database</strong>
+                </span>
                 <span className="text-right">MongoDB</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 style={{ minWidth: 100 }}>
+                    <FontAwesome name="cogs" className="mr-2" />
+                    <strong>Simulator</strong>
+                </span>
                 <span className="text-right">Kotlin</span>
             </li>
         </ul>