diff options
Diffstat (limited to 'opendc-web/opendc-web-ui/src/components/home')
18 files changed, 179 insertions, 124 deletions
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..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,23 +1,25 @@ import React from 'react' -import FontAwesome from 'react-fontawesome' +import Image from 'next/image' import { Row, Col } from 'reactstrap' import ContentSection from './ContentSection' - -import './ContactSection.sass' +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 = () => ( - <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"> - <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 tudelft-icon" 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/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..d27a0ce0 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss @@ -0,0 +1,11 @@ +@import 'src/style/_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..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,8 +1,9 @@ import React from 'react' +import Image from 'next/image' 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"> @@ -14,9 +15,12 @@ const IntroSection = () => ( </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 6a9ea00c..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,16 +1,21 @@ import React from 'react' +import Image from 'next/image' import { Container, Jumbotron, Button } from 'reactstrap' -import './JumbotronHeader.sass' +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="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" /> + <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/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..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,16 +1,24 @@ import React from 'react' +import Image from 'next/image' 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' : ''}`}> + <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/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..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,10 +1,11 @@ import React from 'react' +import Image from 'next/image' 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> @@ -18,9 +19,12 @@ const SimulationSection = () => { </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 = () => { </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/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..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,48 +1,49 @@ 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> ) -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..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 = () => ( - <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 }}> - <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> |