diff options
Diffstat (limited to 'frontend/src/components/home')
| -rw-r--r-- | frontend/src/components/home/ContactSection.js | 122 | ||||
| -rw-r--r-- | frontend/src/components/home/ContactSection.sass | 20 | ||||
| -rw-r--r-- | frontend/src/components/home/ContentSection.js | 26 | ||||
| -rw-r--r-- | frontend/src/components/home/ContentSection.sass | 10 | ||||
| -rw-r--r-- | frontend/src/components/home/IntroSection.js | 72 | ||||
| -rw-r--r-- | frontend/src/components/home/JumbotronHeader.js | 34 | ||||
| -rw-r--r-- | frontend/src/components/home/JumbotronHeader.sass | 32 | ||||
| -rw-r--r-- | frontend/src/components/home/ModelingSection.js | 42 | ||||
| -rw-r--r-- | frontend/src/components/home/ScreenshotSection.js | 58 | ||||
| -rw-r--r-- | frontend/src/components/home/ScreenshotSection.sass | 8 | ||||
| -rw-r--r-- | frontend/src/components/home/SimulationSection.js | 44 | ||||
| -rw-r--r-- | frontend/src/components/home/StakeholderSection.js | 72 | ||||
| -rw-r--r-- | frontend/src/components/home/TeamSection.js | 101 | ||||
| -rw-r--r-- | frontend/src/components/home/TechnologiesSection.js | 50 |
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 - <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 + <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 |
