From 873ddacf5abafe43fbc2b6c1033e473c3366dc62 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Tue, 11 May 2021 15:40:11 +0200
Subject: ui: Move component styling into CSS modules

This change updates the frontend codebase by moving the component
styling into CSS module files as opposed to the global styles which we
used before. In addition, I have changed the syntax to the newer SCSS
syntax, which is more similar to CSS.

These changes reduces the styling conflicts that can occur between
components and allows us to migrate to systems that do not support
importing global styles in components. Moreover, we can benefit from
treeshaking using CSS modules.
---
 .../src/components/home/ContactSection.js          |  6 ++---
 .../src/components/home/ContactSection.module.scss | 20 ++++++++++++++
 .../src/components/home/ContactSection.sass        | 15 -----------
 .../src/components/home/ContentSection.js          |  4 +--
 .../src/components/home/ContentSection.module.scss | 11 ++++++++
 .../src/components/home/ContentSection.sass        |  9 -------
 .../src/components/home/IntroSection.js            |  4 +--
 .../src/components/home/JumbotronHeader.js         |  8 +++---
 .../components/home/JumbotronHeader.module.scss    | 31 ++++++++++++++++++++++
 .../src/components/home/JumbotronHeader.sass       | 24 -----------------
 .../src/components/home/ModelingSection.js         |  3 ++-
 .../src/components/home/ScreenshotSection.js       |  8 +++---
 .../components/home/ScreenshotSection.module.scss  |  5 ++++
 .../src/components/home/ScreenshotSection.sass     |  4 ---
 .../src/components/home/SimulationSection.js       |  4 +--
 .../src/components/home/StakeholderSection.js      |  4 +--
 .../src/components/home/TeamSection.js             |  4 +--
 .../src/components/home/TechnologiesSection.js     |  4 +--
 18 files changed, 92 insertions(+), 76 deletions(-)
 create mode 100644 opendc-web/opendc-web-ui/src/components/home/ContactSection.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/home/ContactSection.sass
 create mode 100644 opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/home/ContentSection.sass
 create mode 100644 opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.sass
 create mode 100644 opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.sass

(limited to 'opendc-web/opendc-web-ui/src/components/home')

diff --git a/opendc-web/opendc-web-ui/src/components/home/ContactSection.js b/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
index d25a1bc4..25daaccf 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
@@ -3,10 +3,10 @@ import FontAwesome from 'react-fontawesome'
 import { Row, Col } from 'reactstrap'
 import ContentSection from './ContentSection'
 
-import './ContactSection.sass'
+import { contactSection, tudelftIcon } from './ContactSection.module.scss'
 
 const ContactSection = () => (
-    <ContentSection name="contact" title="Contact" className="contact-section">
+    <ContentSection name="contact" title="Contact" className={contactSection}>
         <Row className="justify-content-center">
             <Col md="4">
                 <a href="https://github.com/atlarge-research/opendc">
@@ -25,7 +25,7 @@ const ContactSection = () => (
         </Row>
         <Row>
             <Col className="text-center">
-                <img src="img/tudelft-icon.png" className="img-fluid tudelft-icon" height="100" alt="TU Delft" />
+                <img src="img/tudelft-icon.png" className={`img-fluid ${tudelftIcon}`} height="100" alt="TU Delft" />
             </Col>
         </Row>
         <Row>
diff --git a/opendc-web/opendc-web-ui/src/components/home/ContactSection.module.scss b/opendc-web/opendc-web-ui/src/components/home/ContactSection.module.scss
new file mode 100644
index 00000000..9ab4fcb1
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/home/ContactSection.module.scss
@@ -0,0 +1,20 @@
+.contactSection {
+    background-color: #444;
+    color: #ddd;
+
+    a {
+        color: #ddd;
+
+        &:hover {
+            color: #fff;
+        }
+    }
+
+    .tudelftIcon {
+        height: 100px;
+    }
+
+    .disclaimer {
+        color: #cccccc;
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/home/ContactSection.sass b/opendc-web/opendc-web-ui/src/components/home/ContactSection.sass
deleted file mode 100644
index 997f8d98..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/ContactSection.sass
+++ /dev/null
@@ -1,15 +0,0 @@
-.contact-section
-    background-color: #444
-    color: #ddd
-
-    a
-        color: #ddd
-
-    a:hover
-        color: #fff
-
-    .tudelft-icon
-        height: 100px
-
-    .disclaimer
-        color: #cccccc
diff --git a/opendc-web/opendc-web-ui/src/components/home/ContentSection.js b/opendc-web/opendc-web-ui/src/components/home/ContentSection.js
index 3a8960d9..3e9ad50a 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ContentSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ContentSection.js
@@ -2,10 +2,10 @@ import React from 'react'
 import classNames from 'classnames'
 import { Container } from 'reactstrap'
 import PropTypes from 'prop-types'
-import './ContentSection.sass'
+import { contentSection } from './ContentSection.module.scss'
 
 const ContentSection = ({ name, title, children, className }) => (
-    <section id={name} className={classNames(className, name + '-section', 'content-section')}>
+    <section id={name} className={classNames(className, contentSection)}>
         <Container>
             <h1>{title}</h1>
             {children}
diff --git a/opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss b/opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss
new file mode 100644
index 00000000..3d150c93
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss
@@ -0,0 +1,11 @@
+@import '../../style-globals/_variables.scss';
+
+.contentSection {
+    padding-top: 50px;
+    padding-bottom: 50px;
+    text-align: center;
+
+    h1 {
+        margin-bottom: 30px;
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/home/ContentSection.sass b/opendc-web/opendc-web-ui/src/components/home/ContentSection.sass
deleted file mode 100644
index a4c8bd66..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/ContentSection.sass
+++ /dev/null
@@ -1,9 +0,0 @@
-@import ../../style-globals/_variables.sass
-
-.content-section
-    padding-top: 50px
-    padding-bottom: 150px
-    text-align: center
-
-    h1
-        margin-bottom: 30px
diff --git a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
index bc6ee83b..7b467889 100644
--- a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Container, Row, Col } from 'reactstrap'
 
-const IntroSection = () => (
-    <section id="intro" className="intro-section">
+const IntroSection = ({ className }) => (
+    <section id="intro" className={className}>
         <Container className="pt-5 pb-3">
             <Row className="justify-content-center">
                 <Col xl="4" lg="4" md="4" sm="8">
diff --git a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js
index 6a9ea00c..0d3217f9 100644
--- a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js
+++ b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js
@@ -1,13 +1,13 @@
 import React from 'react'
 import { Container, Jumbotron, Button } from 'reactstrap'
-import './JumbotronHeader.sass'
+import { jumbotronHeader, jumbotron, dc } from './JumbotronHeader.module.scss'
 
 const JumbotronHeader = () => (
-    <section className="jumbotron-header">
+    <section className={jumbotronHeader}>
         <Container>
-            <Jumbotron className="text-center">
+            <Jumbotron className={jumbotron}>
                 <h1>
-                    Open<span className="dc">DC</span>
+                    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" />
diff --git a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.module.scss b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.module.scss
new file mode 100644
index 00000000..567b3e73
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.module.scss
@@ -0,0 +1,31 @@
+.jumbotronHeader {
+    background: #00a6d6;
+}
+
+.jumbotron {
+    background-color: inherit;
+    margin-bottom: 0;
+    text-align: center;
+
+    padding-top: 120px;
+    padding-bottom: 120px;
+
+    img {
+        max-width: 110px;
+    }
+
+    h1 {
+        color: #fff;
+        font-size: 4.5em;
+
+        .dc {
+            color: #fff;
+            font-weight: bold;
+        }
+    }
+
+    :global(.lead) {
+        color: #fff;
+        font-size: 1.4em;
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.sass b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.sass
deleted file mode 100644
index 1b6a89fd..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.sass
+++ /dev/null
@@ -1,24 +0,0 @@
-.jumbotron-header
-    background: #00A6D6
-
-.jumbotron
-    background-color: inherit
-    margin-bottom: 0
-
-    padding-top: 120px
-    padding-bottom: 120px
-
-    img
-        max-width: 110px
-
-    h1
-        color: #fff
-        font-size: 4.5em
-
-        .dc
-            color: #fff
-            font-weight: bold
-
-    .lead
-        color: #fff
-        font-size: 1.4em
diff --git a/opendc-web/opendc-web-ui/src/components/home/ModelingSection.js b/opendc-web/opendc-web-ui/src/components/home/ModelingSection.js
index 643dca65..af36aa45 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ModelingSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ModelingSection.js
@@ -1,13 +1,14 @@
 import React from 'react'
 import ScreenshotSection from './ScreenshotSection'
 
-const ModelingSection = () => (
+const ModelingSection = ({ className }) => (
     <ScreenshotSection
         name="modeling"
         title="Datacenter Modeling"
         imageUrl="/img/screenshot-construction.png"
         caption="Building a datacenter in OpenDC"
         imageIsRight={true}
+        className={className}
     >
         <h3>Collaboratively...</h3>
         <ul>
diff --git a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
index 33aab17f..4f634b28 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
@@ -1,16 +1,16 @@
 import React from 'react'
 import { Row, Col } from 'reactstrap'
 import ContentSection from './ContentSection'
-import './ScreenshotSection.sass'
+import { screenshot } from './ScreenshotSection.module.scss'
 
-const ScreenshotSection = ({ name, title, imageUrl, caption, imageIsRight, children }) => (
-    <ContentSection name={name} title={title}>
+const ScreenshotSection = ({ className, name, title, imageUrl, caption, imageIsRight, children }) => (
+    <ContentSection name={name} title={title} className={className}>
         <Row>
             <Col xl="5" lg="5" md="5" sm="12" className={`text-left ${!imageIsRight ? 'order-1' : ''}`}>
                 {children}
             </Col>
             <Col xl="7" lg="7" md="7" sm="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>
             </Col>
         </Row>
diff --git a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.module.scss b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.module.scss
new file mode 100644
index 00000000..7e22de32
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.module.scss
@@ -0,0 +1,5 @@
+.screenshot {
+    padding-left: 0;
+    padding-right: 0;
+    margin-bottom: 5px;
+}
diff --git a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.sass b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.sass
deleted file mode 100644
index 6b1a6ec4..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.sass
+++ /dev/null
@@ -1,4 +0,0 @@
-.screenshot
-    padding-left: 0
-    padding-right: 0
-    margin-bottom: 5px
diff --git a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
index 8e98717a..44ce905b 100644
--- a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
@@ -2,9 +2,9 @@ import React from 'react'
 import { Col, Row } from 'reactstrap'
 import ContentSection from './ContentSection'
 
-const SimulationSection = () => {
+const SimulationSection = ({ className }) => {
     return (
-        <ContentSection name="project" title="Datecenter Simulation">
+        <ContentSection name="project" title="Datecenter Simulation" className={className}>
             <Row>
                 <Col xl="5" lg="5" md="5" sm="2" className="text-left my-auto order-1">
                     <h3>Working with OpenDC:</h3>
diff --git a/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js b/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js
index 1624b4d2..9a4892ed 100644
--- a/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js
@@ -21,8 +21,8 @@ const Stakeholder = ({ name, title, subtitle }) => (
     </Col>
 )
 
-const StakeholderSection = () => (
-    <ContentSection name="stakeholders" title="Stakeholders">
+const StakeholderSection = ({ className }) => (
+    <ContentSection name="stakeholders" title="Stakeholders" className={className}>
         <Row className="justify-content-center">
             <Stakeholder name="Manager" title="Managers" subtitle="Seeing is deciding" />
             <Stakeholder name="Sales" title="Sales" subtitle="Demo concepts" />
diff --git a/opendc-web/opendc-web-ui/src/components/home/TeamSection.js b/opendc-web/opendc-web-ui/src/components/home/TeamSection.js
index 1ee1cbf5..4e8a3906 100644
--- a/opendc-web/opendc-web-ui/src/components/home/TeamSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/TeamSection.js
@@ -41,8 +41,8 @@ const TeamMember = ({ photoId, name }) => (
     </Col>
 )
 
-const TeamSection = () => (
-    <ContentSection name="team" title="OpenDC Team">
+const TeamSection = ({ className }) => (
+    <ContentSection name="team" title="OpenDC Team" className={className}>
         <Row className="justify-content-center">
             <TeamLead photoId="aiosup" name="Prof. dr. ir. Alexandru Iosup" description="Project Lead" />
             <TeamLead photoId="fmastenbroek" name="Fabian Mastenbroek" description="Technology Lead" />
diff --git a/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js b/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
index efd77edf..6fdf4e5c 100644
--- a/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
@@ -3,8 +3,8 @@ import FontAwesome from 'react-fontawesome'
 import { ListGroup, ListGroupItem } from 'reactstrap'
 import ContentSection from './ContentSection'
 
-const TechnologiesSection = () => (
-    <ContentSection name="technologies" title="Technologies">
+const TechnologiesSection = ({ className }) => (
+    <ContentSection name="technologies" title="Technologies" className={className}>
         <ListGroup className="list-group text-left">
             <ListGroupItem color="primary" className="d-flex justify-content-between align-items-center">
                 <span style={{ minWidth: 100 }}>
-- 
cgit v1.2.3


From d9e65dceb38cdb8dc4e464d388755f9456620566 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Sun, 16 May 2021 17:07:58 +0200
Subject: ui: Restructure OpenDC frontend

This change updates the structure of the OpenDC frontend in order to
improve the maintainability of the frontend.
---
 opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'opendc-web/opendc-web-ui/src/components/home')

diff --git a/opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss b/opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss
index 3d150c93..d27a0ce0 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss
@@ -1,4 +1,4 @@
-@import '../../style-globals/_variables.scss';
+@import 'src/style/_variables.scss';
 
 .contentSection {
     padding-top: 50px;
-- 
cgit v1.2.3


From 53623fad76274e39206b8e073e371775ea96946b Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 17 May 2021 12:16:10 +0200
Subject: ui: Migrate to FontAwesome 5 React library

This change updates the frontend to use the FontAwesome 5 React library
that renders SVG icons as opposed to CSS icon fonts. This migration
resolves a couple of issues we had with server-side rendering of the
previous FontAwesome icons.
---
 .../src/components/home/ContactSection.js          | 21 +++++---
 .../src/components/home/IntroSection.js            | 10 ++--
 .../src/components/home/JumbotronHeader.js         |  9 +++-
 .../src/components/home/ScreenshotSection.js       | 12 ++++-
 .../src/components/home/SimulationSection.js       | 17 +++++--
 .../src/components/home/TeamSection.js             | 59 +++++++++++-----------
 .../src/components/home/TechnologiesSection.js     | 11 ++--
 7 files changed, 89 insertions(+), 50 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components/home')

diff --git a/opendc-web/opendc-web-ui/src/components/home/ContactSection.js b/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
index 25daaccf..60a7e6a3 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
@@ -1,8 +1,10 @@
 import React from 'react'
-import FontAwesome from 'react-fontawesome'
+import Image from 'next/image'
 import { Row, Col } from 'reactstrap'
 import ContentSection from './ContentSection'
-
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faExclamationTriangle, faEnvelope } from '@fortawesome/free-solid-svg-icons'
+import { faGithub } from '@fortawesome/free-brands-svg-icons'
 import { contactSection, tudelftIcon } from './ContactSection.module.scss'
 
 const ContactSection = () => (
@@ -10,14 +12,14 @@ const ContactSection = () => (
         <Row className="justify-content-center">
             <Col md="4">
                 <a href="https://github.com/atlarge-research/opendc">
-                    <FontAwesome name="github" size="3x" className="mb-2" />
+                    <FontAwesomeIcon icon={faGithub} size="3x" className="mb-2" />
                     <div className="w-100" />
                     atlarge-research/opendc
                 </a>
             </Col>
             <Col md="4">
                 <a href="mailto:opendc@atlarge-research.com">
-                    <FontAwesome name="envelope" size="3x" className="mb-2" />
+                    <FontAwesomeIcon icon={faEnvelope} size="3x" className="mb-2" />
                     <div className="w-100" />
                     opendc@atlarge-research.com
                 </a>
@@ -25,7 +27,14 @@ const ContactSection = () => (
         </Row>
         <Row>
             <Col className="text-center">
-                <img src="img/tudelft-icon.png" className={`img-fluid ${tudelftIcon}`} height="100" alt="TU Delft" />
+                <Image
+                    src="/img/tudelft-icon.png"
+                    className={tudelftIcon}
+                    layout="intrinsic"
+                    width={162}
+                    height={100}
+                    alt="TU Delft"
+                />
             </Col>
         </Row>
         <Row>
@@ -39,7 +48,7 @@ const ContactSection = () => (
         </Row>
         <Row>
             <Col className="text-center disclaimer mt-5 small">
-                <FontAwesome name="exclamation-triangle" size="2x" className="mr-2" />
+                <FontAwesomeIcon icon={faExclamationTriangle} size="2x" className="mr-2" />
                 <br />
                 <strong>Disclaimer: </strong>
                 OpenDC is an experimental tool. Your data may get lost, overwritten, or otherwise become unavailable.
diff --git a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
index 7b467889..67e8cd8b 100644
--- a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import Image from 'next/image'
 import { Container, Row, Col } from 'reactstrap'
 
 const IntroSection = ({ className }) => (
@@ -14,9 +15,12 @@ const IntroSection = ({ className }) => (
                     </ul>
                 </Col>
                 <Col xl="4" lg="4" md="4" sm="8">
-                    <img
-                        src="img/datacenter-drawing.png"
-                        className="col-12 img-fluid"
+                    <Image
+                        src="/img/datacenter-drawing.png"
+                        className="col-12"
+                        layout="intrinsic"
+                        width={350}
+                        height={197}
                         alt="Schematic top-down view of a datacenter"
                     />
                     <p className="col-12 figure-caption text-center">
diff --git a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js
index 0d3217f9..98aa0af2 100644
--- a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js
+++ b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js
@@ -1,6 +1,9 @@
 import React from 'react'
+import Image from 'next/image'
 import { Container, Jumbotron, Button } from 'reactstrap'
 import { jumbotronHeader, jumbotron, dc } from './JumbotronHeader.module.scss'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'
 
 const JumbotronHeader = () => (
     <section className={jumbotronHeader}>
@@ -10,7 +13,9 @@ const JumbotronHeader = () => (
                     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 className="mt-5">
+                    <Image src="/img/logo.png" layout="intrinsic" height={110} width={110} alt="OpenDC" />
+                </div>
                 <p className="lead mt-5">
                     <Button
                         tag="a"
@@ -18,7 +23,7 @@ const JumbotronHeader = () => (
                         href="https://atlarge-research.com/pdfs/ccgrid21-opendc-paper.pdf"
                         color="warning"
                     >
-                        Read about <strong>OpenDC 2.0</strong> <i className="fa fa-external-link" />
+                        Read about <strong>OpenDC 2.0</strong> <FontAwesomeIcon icon={faExternalLinkAlt} />
                     </Button>
                 </p>
             </Jumbotron>
diff --git a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
index 4f634b28..9673b7b7 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import Image from 'next/image'
 import { Row, Col } from 'reactstrap'
 import ContentSection from './ContentSection'
 import { screenshot } from './ScreenshotSection.module.scss'
@@ -6,11 +7,18 @@ import { screenshot } from './ScreenshotSection.module.scss'
 const ScreenshotSection = ({ className, name, title, imageUrl, caption, imageIsRight, children }) => (
     <ContentSection name={name} title={title} className={className}>
         <Row>
-            <Col xl="5" lg="5" md="5" sm="12" className={`text-left ${!imageIsRight ? 'order-1' : ''}`}>
+            <Col xl="5" lg="5" md="5" sm="12" className={`text-left my-auto ${!imageIsRight ? 'order-1' : ''}`}>
                 {children}
             </Col>
             <Col xl="7" lg="7" md="7" sm="12">
-                <img src={imageUrl} className={`col-12 ${screenshot}`} alt={caption} />
+                <Image
+                    src={imageUrl}
+                    className={`col-12 ${screenshot}`}
+                    layout="intrinsic"
+                    width={635}
+                    height={419}
+                    alt={caption}
+                />
                 <div className="row text-muted justify-content-center">{caption}</div>
             </Col>
         </Row>
diff --git a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
index 44ce905b..c154cc26 100644
--- a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import Image from 'next/image'
 import { Col, Row } from 'reactstrap'
 import ContentSection from './ContentSection'
 
@@ -18,9 +19,12 @@ const SimulationSection = ({ className }) => {
                     </ul>
                 </Col>
                 <Col xl="7" lg="7" md="7" sm="12">
-                    <img
+                    <Image
                         src="/img/screenshot-simulation.png"
-                        className="col-12 screenshot"
+                        className="col-12"
+                        layout="intrinsic"
+                        width={635}
+                        height={419}
                         alt="Running an experiment in OpenDC"
                     />
                     <Row className="text-muted justify-content-center">Running an experiment in OpenDC</Row>
@@ -39,7 +43,14 @@ const SimulationSection = ({ className }) => {
                 </Col>
 
                 <Col xl="7" lg="7" md="7" sm="12">
-                    <img src="/img/opendc-architecture.png" className="col-12 screenshot" alt="OpenDC's Architecture" />
+                    <Image
+                        src="/img/opendc-architecture.png"
+                        className="col-12"
+                        layout="intrinsic"
+                        width={635}
+                        height={232}
+                        alt="OpenDC's Architecture"
+                    />
                     <Row className="text-muted justify-content-center">OpenDC's Architecture</Row>
                 </Col>
             </Row>
diff --git a/opendc-web/opendc-web-ui/src/components/home/TeamSection.js b/opendc-web/opendc-web-ui/src/components/home/TeamSection.js
index 4e8a3906..bbbe241e 100644
--- a/opendc-web/opendc-web-ui/src/components/home/TeamSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/TeamSection.js
@@ -1,43 +1,44 @@
 import React from 'react'
+import Image from 'next/image'
 import { Row, Col } from 'reactstrap'
 import ContentSection from './ContentSection'
 
 const TeamLead = ({ photoId, name, description }) => (
     <Col xl="3" lg="3" md="4" sm="6" className="justify-content-center">
-        <Col
-            tag="img"
-            src={'img/portraits/' + photoId + '.png'}
-            xl="10"
-            lg="10"
-            md="10"
-            sm="8"
-            col="5"
-            className="mb-2 mt-2"
-            alt={name}
-        />
-        <Col>
-            <h4>{name}</h4>
-            <div className="team-member-description">{description}</div>
-        </Col>
+        <Row>
+            <Col xl="10" lg="10" md="10" sm="8" col="5" className="my-2 mx-auto" alt={name}>
+                <Image
+                    src={'/img/portraits/' + photoId + '.png'}
+                    layout="intrinsic"
+                    width={182}
+                    height={182}
+                    alt={name}
+                />
+            </Col>
+            <Col>
+                <h4>{name}</h4>
+                <div className="team-member-description">{description}</div>
+            </Col>
+        </Row>
     </Col>
 )
 
 const TeamMember = ({ photoId, name }) => (
     <Col xl="2" lg="2" md="3" sm="4" className="justify-content-center">
-        <Col
-            tag="img"
-            src={'img/portraits/' + photoId + '.png'}
-            xl="10"
-            lg="10"
-            md="10"
-            sm="8"
-            col="5"
-            className="mb-2 mt-2"
-            alt={name}
-        />
-        <Col>
-            <h5>{name}</h5>
-        </Col>
+        <Row>
+            <Col xl="10" lg="10" md="10" sm="8" xs="5" className="my-2 mx-auto">
+                <Image
+                    src={'/img/portraits/' + photoId + '.png'}
+                    layout="intrinsic"
+                    width={100}
+                    height={100}
+                    alt={name}
+                />
+            </Col>
+            <Col>
+                <h5>{name}</h5>
+            </Col>
+        </Row>
     </Col>
 )
 
diff --git a/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js b/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
index 6fdf4e5c..efedebb7 100644
--- a/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
@@ -1,35 +1,36 @@
 import React from 'react'
-import FontAwesome from 'react-fontawesome'
 import { ListGroup, ListGroupItem } from 'reactstrap'
 import ContentSection from './ContentSection'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faWindowMaximize, faTv, faDatabase, faCogs } from '@fortawesome/free-solid-svg-icons'
 
 const TechnologiesSection = ({ className }) => (
     <ContentSection name="technologies" title="Technologies" className={className}>
         <ListGroup className="list-group text-left">
             <ListGroupItem color="primary" className="d-flex justify-content-between align-items-center">
                 <span style={{ minWidth: 100 }}>
-                    <FontAwesome name="window-maximize" className="mr-2" />
+                    <FontAwesomeIcon icon={faWindowMaximize} className="mr-2" />
                     <strong className="">Browser</strong>
                 </span>
                 <span className="text-right">JavaScript, React, Redux, Konva</span>
             </ListGroupItem>
             <ListGroupItem color="warning" className="d-flex justify-content-between align-items-center">
                 <span style={{ minWidth: 100 }}>
-                    <FontAwesome name="television" className="mr-2" />
+                    <FontAwesomeIcon icon={faTv} className="mr-2" />
                     <strong>Server</strong>
                 </span>
                 <span className="text-right">Python, Flask, FlaskSocketIO, OpenAPI</span>
             </ListGroupItem>
             <ListGroupItem color="success" className="d-flex justify-content-between align-items-center">
                 <span style={{ minWidth: 100 }}>
-                    <FontAwesome name="database" className="mr-2" />
+                    <FontAwesomeIcon icon={faDatabase} className="mr-2" />
                     <strong>Database</strong>
                 </span>
                 <span className="text-right">MongoDB</span>
             </ListGroupItem>
             <ListGroupItem color="danger" className="d-flex justify-content-between align-items-center">
                 <span style={{ minWidth: 100 }}>
-                    <FontAwesome name="cogs" className="mr-2" />
+                    <FontAwesomeIcon icon={faCogs} className="mr-2" />
                     <strong>Simulator</strong>
                 </span>
                 <span className="text-right">Kotlin</span>
-- 
cgit v1.2.3