From 7aea29d0b22f7e5932c9b147611fe02373bb9645 Mon Sep 17 00:00:00 2001 From: Georgios Andreadis Date: Sun, 27 Aug 2017 22:33:41 +0200 Subject: Add content sections to homepage --- public/img/portraits/aiosup.png | Bin 0 -> 111629 bytes public/img/portraits/gandreadis.png | Bin 0 -> 118477 bytes public/img/portraits/loverweel.png | Bin 0 -> 107768 bytes public/img/portraits/mbijman.png | Bin 0 -> 111670 bytes public/img/stakeholders/Developer.png | Bin 0 -> 11411 bytes public/img/stakeholders/Manager.png | Bin 0 -> 9946 bytes public/img/stakeholders/Researcher.png | Bin 0 -> 10984 bytes public/img/stakeholders/Sales.png | Bin 0 -> 10074 bytes public/img/stakeholders/Student.png | Bin 0 -> 12960 bytes public/img/tudelft-icon.png | Bin 0 -> 4387 bytes public/index.html | 16 ++++----- src/components/home/ContactSection.js | 50 +++++++++++++++++------------ src/components/home/ContactSection.sass | 15 +++++++++ src/components/home/ContentSection.js | 7 ++-- src/components/home/ContentSection.sass | 22 ++----------- src/components/home/JumbotronHeader.js | 17 ++++++++++ src/components/home/JumbotronHeader.sass | 16 +++++++++ src/components/home/ModelingSection.js | 19 +++++++++++ src/components/home/ScreenshotSection.js | 23 +++++++++++++ src/components/home/ScreenshotSection.sass | 5 +++ src/components/home/SimulationSection.js | 19 +++++++++++ src/components/home/StakeholderSection.js | 26 +++++++++++++++ src/components/home/TeamSection.js | 34 ++++++++++++++++++++ src/components/home/TechnologiesSection.js | 32 ++++++++++++++++++ src/components/navigation/AppNavbar.js | 22 +++++++++++++ src/components/navigation/HomeNavbar.js | 22 +++++++++++++ src/components/navigation/Navbar.js | 18 +++-------- src/components/navigation/Navbar.sass | 50 +++++------------------------ src/containers/auth/Login.js | 3 +- src/index.sass | 1 - src/pages/App.js | 4 +-- src/pages/Home.js | 37 +++++++++++++++++---- src/pages/Home.sass | 9 ++++-- src/pages/Profile.js | 4 +-- src/pages/Simulations.js | 4 +-- 35 files changed, 349 insertions(+), 126 deletions(-) create mode 100644 public/img/portraits/aiosup.png create mode 100644 public/img/portraits/gandreadis.png create mode 100644 public/img/portraits/loverweel.png create mode 100644 public/img/portraits/mbijman.png create mode 100644 public/img/stakeholders/Developer.png create mode 100644 public/img/stakeholders/Manager.png create mode 100644 public/img/stakeholders/Researcher.png create mode 100644 public/img/stakeholders/Sales.png create mode 100644 public/img/stakeholders/Student.png create mode 100644 public/img/tudelft-icon.png create mode 100644 src/components/home/ContactSection.sass create mode 100644 src/components/home/JumbotronHeader.js create mode 100644 src/components/home/JumbotronHeader.sass create mode 100644 src/components/home/ModelingSection.js create mode 100644 src/components/home/ScreenshotSection.js create mode 100644 src/components/home/ScreenshotSection.sass create mode 100644 src/components/home/SimulationSection.js create mode 100644 src/components/home/StakeholderSection.js create mode 100644 src/components/home/TeamSection.js create mode 100644 src/components/home/TechnologiesSection.js create mode 100644 src/components/navigation/AppNavbar.js create mode 100644 src/components/navigation/HomeNavbar.js diff --git a/public/img/portraits/aiosup.png b/public/img/portraits/aiosup.png new file mode 100644 index 00000000..30de349c Binary files /dev/null and b/public/img/portraits/aiosup.png differ diff --git a/public/img/portraits/gandreadis.png b/public/img/portraits/gandreadis.png new file mode 100644 index 00000000..403870fa Binary files /dev/null and b/public/img/portraits/gandreadis.png differ diff --git a/public/img/portraits/loverweel.png b/public/img/portraits/loverweel.png new file mode 100644 index 00000000..d12a9e86 Binary files /dev/null and b/public/img/portraits/loverweel.png differ diff --git a/public/img/portraits/mbijman.png b/public/img/portraits/mbijman.png new file mode 100644 index 00000000..decf9fdd Binary files /dev/null and b/public/img/portraits/mbijman.png differ diff --git a/public/img/stakeholders/Developer.png b/public/img/stakeholders/Developer.png new file mode 100644 index 00000000..d2638e6c Binary files /dev/null and b/public/img/stakeholders/Developer.png differ diff --git a/public/img/stakeholders/Manager.png b/public/img/stakeholders/Manager.png new file mode 100644 index 00000000..92db7459 Binary files /dev/null and b/public/img/stakeholders/Manager.png differ diff --git a/public/img/stakeholders/Researcher.png b/public/img/stakeholders/Researcher.png new file mode 100644 index 00000000..d87edd39 Binary files /dev/null and b/public/img/stakeholders/Researcher.png differ diff --git a/public/img/stakeholders/Sales.png b/public/img/stakeholders/Sales.png new file mode 100644 index 00000000..5b7c3a72 Binary files /dev/null and b/public/img/stakeholders/Sales.png differ diff --git a/public/img/stakeholders/Student.png b/public/img/stakeholders/Student.png new file mode 100644 index 00000000..a4900303 Binary files /dev/null and b/public/img/stakeholders/Student.png differ diff --git a/public/img/tudelft-icon.png b/public/img/tudelft-icon.png new file mode 100644 index 00000000..a7a2d56a Binary files /dev/null and b/public/img/tudelft-icon.png differ diff --git a/public/index.html b/public/index.html index 065185d3..b5d509cb 100644 --- a/public/index.html +++ b/public/index.html @@ -28,8 +28,8 @@ - + @@ -38,14 +38,14 @@ You need to enable JavaScript to run this app.
- - - diff --git a/src/components/home/ContactSection.js b/src/components/home/ContactSection.js index 8e6aed1a..c8494c4d 100644 --- a/src/components/home/ContactSection.js +++ b/src/components/home/ContactSection.js @@ -1,31 +1,39 @@ import React from "react"; +import FontAwesome from "react-fontawesome"; +import Mailto from "react-mailto"; +import "./ContactSection.css"; import ContentSection from "./ContentSection"; -import "./ContentSection.css"; const ContactSection = () => ( - -

Contact

+ +
+
+ + + +
+ + +
+ opendc@atlarge-research.com + +
+
- TU Delft Logo - -
- A project by the @Large Research Group. +
+
+ A project by the   + + @Large Research Group + . +
); diff --git a/src/components/home/ContactSection.sass b/src/components/home/ContactSection.sass new file mode 100644 index 00000000..c292526c --- /dev/null +++ b/src/components/home/ContactSection.sass @@ -0,0 +1,15 @@ +.contact-section + background-color: #444 + color: #ddd + + a + color: #ddd + + a:hover + color: #fff + + .tudelft-icon + height: 100px + + .fa + margin-right: 10px diff --git a/src/components/home/ContentSection.js b/src/components/home/ContentSection.js index 126c5e4b..6b4cbca4 100644 --- a/src/components/home/ContentSection.js +++ b/src/components/home/ContentSection.js @@ -3,12 +3,11 @@ import PropTypes from "prop-types"; import React from "react"; import "./ContentSection.css"; -const ContentSection = ({name, children}) => ( +const ContentSection = ({name, title, children}) => (
-
- {children} -
+

{title}

+ {children}
); diff --git a/src/components/home/ContentSection.sass b/src/components/home/ContentSection.sass index c84f26db..31062aa7 100644 --- a/src/components/home/ContentSection.sass +++ b/src/components/home/ContentSection.sass @@ -5,23 +5,5 @@ padding-bottom: 150px text-align: center -@media screen and (min-width: $screen-sm) and (max-width: $screen-md) - .content-section h1 - font-size: 2em - margin-bottom: 40px - - .content-section h3 - font-size: 1.5em - -@media screen and (min-width: $screen-md) and (max-width: $screen-lg) - .content-section h1 - font-size: 3em - margin-bottom: 40px - - .content-section h3 - font-size: 1.8em - -@media screen and (min-width: $screen-lg) - .content-section h1 - font-size: 3em - margin-bottom: 40px + h1 + margin-bottom: 30px diff --git a/src/components/home/JumbotronHeader.js b/src/components/home/JumbotronHeader.js new file mode 100644 index 00000000..b7af420e --- /dev/null +++ b/src/components/home/JumbotronHeader.js @@ -0,0 +1,17 @@ +import React from "react"; +import "./JumbotronHeader.css"; + +const JumbotronHeader = () => ( +
+
+
+

OpenDC

+

+ Collaborative Datacenter Simulation and Exploration for Everybody +

+
+
+
+); + +export default JumbotronHeader; diff --git a/src/components/home/JumbotronHeader.sass b/src/components/home/JumbotronHeader.sass new file mode 100644 index 00000000..51eb0578 --- /dev/null +++ b/src/components/home/JumbotronHeader.sass @@ -0,0 +1,16 @@ +.jumbotron-header + background: #00A6D6 + +.jumbotron + background-color: inherit + margin-bottom: 0 + +.jumbotron h1 + color: #eee + +.jumbotron h1 .dc + color: #eee + font-weight: bold + +.jumbotron .lead + color: #eee diff --git a/src/components/home/ModelingSection.js b/src/components/home/ModelingSection.js new file mode 100644 index 00000000..2a984935 --- /dev/null +++ b/src/components/home/ModelingSection.js @@ -0,0 +1,19 @@ +import React from "react"; +import ScreenshotSection from "./ScreenshotSection"; + +const ModelingSection = () => ( + +

Collaboratively...

+
    +
  • Model DC layout, and room locations and types
    • +
  • Place racks in rooms and nodes in racks
    • +
  • Add real-world CPU, GPU, memory, storage and network units to each node
    • +
  • Select from diverse scheduling policies
    • +
+ +); + +export default ModelingSection; diff --git a/src/components/home/ScreenshotSection.js b/src/components/home/ScreenshotSection.js new file mode 100644 index 00000000..74394dcb --- /dev/null +++ b/src/components/home/ScreenshotSection.js @@ -0,0 +1,23 @@ +import classNames from "classnames"; +import React from "react"; +import ContentSection from "./ContentSection"; +import "./ScreenshotSection.css"; + +const ScreenshotSection = ({name, title, imageUrl, caption, imageIsRight, children}) => ( + +
+
+ {children} +
+
+ {caption}/ +
+ {caption} +
+
+
+ +); + +export default ScreenshotSection; diff --git a/src/components/home/ScreenshotSection.sass b/src/components/home/ScreenshotSection.sass new file mode 100644 index 00000000..a349ad48 --- /dev/null +++ b/src/components/home/ScreenshotSection.sass @@ -0,0 +1,5 @@ +.screenshot + outline: 2px black solid + padding-left: 0 + padding-right: 0 + margin-bottom: 5px diff --git a/src/components/home/SimulationSection.js b/src/components/home/SimulationSection.js new file mode 100644 index 00000000..d9212c95 --- /dev/null +++ b/src/components/home/SimulationSection.js @@ -0,0 +1,19 @@ +import React from "react"; +import ScreenshotSection from "./ScreenshotSection"; + +const ModelingSection = () => ( + +

Working with OpenDC:

+
    +
  • Seamlessly switch between construction and simulation modes
    • +
  • Choose one of several predefined workloads (Big Data, Bag of Tasks, Hadoop, etc.)
    • +
  • Play, pause, and skip around the informative simulation timeline
    • +
  • Visualize and demo live
    • +
+ +); + +export default ModelingSection; diff --git a/src/components/home/StakeholderSection.js b/src/components/home/StakeholderSection.js new file mode 100644 index 00000000..47f0d9bb --- /dev/null +++ b/src/components/home/StakeholderSection.js @@ -0,0 +1,26 @@ +import React from "react"; +import ContentSection from "./ContentSection"; + +const Stakeholder = ({name, title, subtitle}) => ( +
+ {title}/ +
+

{title}

+

{subtitle}

+
+
+); + +const StakeholderSection = () => ( + +
+ + + + + +
+ +); + +export default StakeholderSection; diff --git a/src/components/home/TeamSection.js b/src/components/home/TeamSection.js new file mode 100644 index 00000000..efa76b29 --- /dev/null +++ b/src/components/home/TeamSection.js @@ -0,0 +1,34 @@ +import React from "react"; +import ContentSection from "./ContentSection"; + +const TeamMember = ({photoId, name, description}) => ( +
+ {name}/ +
+

{name}

+
+ {description} +
+
+
+); + +const TeamSection = () => ( + +
+ + + + +
+ +); + +export default TeamSection; diff --git a/src/components/home/TechnologiesSection.js b/src/components/home/TechnologiesSection.js new file mode 100644 index 00000000..79c1eaee --- /dev/null +++ b/src/components/home/TechnologiesSection.js @@ -0,0 +1,32 @@ +import React from "react"; +import FontAwesome from "react-fontawesome"; +import ContentSection from "./ContentSection"; + +const TechnologiesSection = () => ( + +
    +
  • +   + Browser   + JavaScript, React, Redux, HTML5 Canvas +
    • +
  • +   + Server   + Python, Flask, FlaskSocketIO, OpenAPI +
    • +
  • +   + Database   + MariaDB +
    • +
  • +   + Simulator   + Kotlin +
    • +
+ +); + +export default TechnologiesSection; diff --git a/src/components/navigation/AppNavbar.js b/src/components/navigation/AppNavbar.js new file mode 100644 index 00000000..83959f08 --- /dev/null +++ b/src/components/navigation/AppNavbar.js @@ -0,0 +1,22 @@ +import React from 'react'; +import Mailto from "react-mailto"; +import {Link} from "react-router-dom"; +import Navbar, {NavItem} from "./Navbar"; +import "./Navbar.css"; + +const AppNavbar = () => ( + + + Simulations + + + + Support + + + + +); + +export default AppNavbar; diff --git a/src/components/navigation/HomeNavbar.js b/src/components/navigation/HomeNavbar.js new file mode 100644 index 00000000..9c393da4 --- /dev/null +++ b/src/components/navigation/HomeNavbar.js @@ -0,0 +1,22 @@ +import React from 'react'; +import Navbar from "./Navbar"; +import "./Navbar.css"; + +const ScrollNavItem = ({id, name}) => ( +
  • + {name} +
    • +); + +const HomeNavbar = () => ( + + + + + + + + +); + +export default HomeNavbar; diff --git a/src/components/navigation/Navbar.js b/src/components/navigation/Navbar.js index 5a4cd29e..c0c8c006 100644 --- a/src/components/navigation/Navbar.js +++ b/src/components/navigation/Navbar.js @@ -1,6 +1,5 @@ import classNames from "classnames"; import React from 'react'; -import Mailto from "react-mailto"; import {Link, withRouter} from "react-router-dom"; import {userIsLoggedIn} from "../../auth/index"; import Login from "../../containers/auth/Login"; @@ -8,7 +7,7 @@ import Logout from "../../containers/auth/Logout"; import ProfileName from "../../containers/auth/ProfileName"; import "./Navbar.css"; -const NavItem = withRouter(props => ); +export const NavItem = withRouter(props => ); const NavItemWithoutRoute = ({route, location, children}) => (
  • @@ -16,8 +15,8 @@ const NavItemWithoutRoute = ({route, location, children}) => (
    • ); -const Navbar = () => ( -