initial commit

2018-11-10 22:53:54 +01:00 · 2018-11-10 22:53:54 +01:00 · e65ebec5ff
commit e65ebec5ff
50 changed files with 21235 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
--- a/README.md
+++ b/README.md
@ -0,0 +1,6 @@
+An experimental website project by Alexander Bell
+alexbell.de
+
+Feel free to fork and clone this project. You may also use this as an template for your private or comercial projects.
+
+This project is developed with ReactJS. Run `/npm install` to install all packages and `/npm run start` to start the localhost development server and `/npm run build` to build the final built of the project.
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,24 @@
+{
+  "name": "website",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
+    "react-reveal": "^1.2.2",
+    "react-router-dom": "^4.2.2",
+    "react-scripts": "1.1.4",
+    "react-syntax-highlighter": "^7.0.4",
+    "react-transition-group": "^2.3.1",
+    "router": "^1.3.2",
+    "semantic-ui-css": "^2.3.1",
+    "semantic-ui-react": "^0.80.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject",
+    "deploy": "npm run build && firebase deploy"
+  }
+}
--- a/public/404.html
+++ b/public/404.html
@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Page Not Found</title>
+
+    <style media="screen">
+      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
+      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
+      #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
+      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
+      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
+      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
+      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
+      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
+      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
+      @media (max-width: 600px) {
+        body, #message { margin-top: 0; background: white; box-shadow: none; }
+        body { border-top: 16px solid #ffa100; }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="message">
+      <h2>404</h2>
+      <h1>Page Not Found</h1>
+      <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
+      <h3>Why am I seeing this?</h3>
+      <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
+    </div>
+  </body>
+</html>
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#FFFFFF">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <title>-Your website name-</title>
+  </head>
+  <body id="body">
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+  </body>
+</html>
--- a/public/manifest.json
+++ b/public/manifest.json
@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/src/App.js
+++ b/src/App.js
@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
+
+import Presentation from './pages/Presentation.js';
+
+
+class App extends Component {
+
+  componentDidMount() {
+    //Color backgroundColor grey
+    document.getElementById('body').style.backgroundColor = 'rgb(37, 37, 37)';
+  }
+
+  render() {
+    /*
+    * Router components
+    */
+    return (
+      <Router>
+        <div>
+          <Route path="/" exact component={() => {
+              return(<Redirect to="/me"/>);
+            }} />
+          <Route path="/:id" component={({match}) => {
+              return(<Presentation id={match.params.id} />);
+            }} />
+        </div>
+      </Router>
+    );
+  }
+}
+
+export default App;
--- a/src/App.test.js
+++ b/src/App.test.js
@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
--- a/src/components/Button.js
+++ b/src/components/Button.js
@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+
+import '../styles/Button.css';
+
+
+class Button extends Component {
+  constructor(props) {
+    super(props);
+
+    /*
+    * Expected props:
+    *   - shouldRender: boolean
+    *   - toggleRenderLogin: function
+    */
+    this.test = null;
+  }
+
+
+  render() {
+    return (
+      <div className="Button">
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+export default Button;
--- a/src/components/Frame.js
+++ b/src/components/Frame.js
@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import { CSSTransition } from 'react-transition-group';
+
+import Xbutton from './Xbutton.js';
+
+
+class Frame extends Component {
+  constructor(props) {
+    super(props);
+
+    /*
+    * Expected props:
+    *   - [children]
+    *   - shouldRender:boolean
+    *   - closeable: boolean
+    *   - toggleRenderLogin: function
+    */
+    this.test = null;
+  }
+
+
+  render() {
+    var button = null;
+    if(this.props.closeable) {
+      button = <Xbutton clickAction={this.props.toggleRenderLogin} />
+    }
+
+    return (
+      <div>
+        <CSSTransition
+          in={this.props.shouldRender}
+          timeout={600}
+          classNames="fade"
+          unmountOnExit
+        >
+          <div className="Frame_background">
+          </div>
+        </CSSTransition>
+        <CSSTransition
+          in={this.props.shouldRender}
+          timeout={600}
+          classNames="fadeZoom"
+          unmountOnExit
+        >
+          <div className="Frame_box">
+            <div className="Frame">
+              {button}
+              {this.props.children}
+            </div>
+          </div>
+        </CSSTransition>
+      </div>
+    );
+  }
+}
+
+export default Frame;
--- a/src/components/Login/Login.js
+++ b/src/components/Login/Login.js
@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+
+import Frame from '../Frame';
+import Button from '../Button';
+
+
+class Login extends Component {
+  constructor(props) {
+    super(props);
+
+    /*
+    * Expected props:
+    *   - shouldRender: boolean
+    *   - toggleRenderLogin: function
+    */
+    this.test = null;
+  }
+
+
+  render() {
+    return (
+      <Frame shouldRender={this.props.shouldRender} toggleRenderLogin={this.props.toggleRenderLogin} closeable={true}>
+        <h1>
+          Login
+        </h1>
+        <form>
+          <div className="input">
+            <input id="inputEmail" type="text" name="email" placeholder="example@example.com" />
+            <label htmlFor="inputEmail">
+              <span>Email adress</span>
+            </label>
+          </div>
+          <div className="input">
+            <input id="inputPass" type="password" name="password" placeholder="*********" />
+            <label htmlFor="inputPass">
+              <span>Password</span>
+            </label>
+          </div>
+        </form>
+      </Frame>
+    );
+  }
+}
+
+export default Login;
--- a/src/components/Login/LoginButton.js
+++ b/src/components/Login/LoginButton.js
@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+
+
+class LoginButton extends Component {
+  constructor(props) {
+    super(props);
+
+    /*
+    * Expected props:
+    *   - clickAction: function
+    */
+    this.x = null;
+  }
+
+  render() {
+    return (
+      <div className="LoginButton" onClick={this.props.clickAction}>
+        Login
+      </div>
+    );
+  }
+}
+
+export default LoginButton;
--- a/src/components/PageLoading.js
+++ b/src/components/PageLoading.js
@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+
+import logo from "../images/logo.svg";
+
+
+class PageLoading extends Component {
+  constructor(props) {
+    super(props);
+
+    /*
+    * Expected props:
+    *   /
+    */
+
+    this.state = {
+      display: true
+    }
+  }
+
+  componentWillUnmount() {
+
+  }
+
+  componentDidMount() {
+    //Color background
+    this.interval1 = setInterval(function () {
+      document.getElementById("PageLoading").style.backgroundColor = "transparent";
+    },1100);
+
+    //remove Logo
+    this.interval2 = setInterval(function () {
+      document.getElementById("PageLoading_Logo").classList.add("PageLoading_Logo-fadeOut");
+    },2500);
+
+    //Unmount
+    this.interval3 = setInterval(() => {
+      clearInterval(this.interval1);
+      clearInterval(this.interval2);
+      clearInterval(this.interval3);
+      this.setState({
+        display: false
+      });
+    },5500);
+  }
+
+  render() {
+    //<div className="pageLoadingLogo"></div>
+    const url = logo + '?' + Math.random();
+
+    if(this.state.display) {
+      return(
+        <div className="PageLoading" id="PageLoading">
+          <img className="PageLoading_Logo" id="PageLoading_Logo" alt="" src={url} />
+
+          <div className="PageLoading_left PageLoading_1 PageLoading_Element"></div>
+          <div className="PageLoading_right PageLoading_1 PageLoading_Element"></div>
+
+          <div className="PageLoading_left PageLoading_2 PageLoading_Element"></div>
+          <div className="PageLoading_right PageLoading_2 PageLoading_Element"></div>
+
+          <div className="PageLoading_left PageLoading_3 PageLoading_Element"></div>
+          <div className="PageLoading_right PageLoading_3 PageLoading_Element"></div>
+
+          <div className="PageLoading_left PageLoading_4 PageLoading_Element"></div>
+          <div className="PageLoading_right PageLoading_4 PageLoading_Element"></div>
+
+          <div className="PageLoading_left PageLoading_5 PageLoading_Element"></div>
+          <div className="PageLoading_right PageLoading_5 PageLoading_Element"></div>
+        </div>
+      );
+    } else {
+      return(null);
+    }
+  }
+}
+
+export default PageLoading;
--- a/src/components/Presentation/Image.js
+++ b/src/components/Presentation/Image.js
@ -0,0 +1,151 @@
+import React, { Component } from 'react';
+
+
+class Image extends Component {
+  constructor(props) {
+    super(props);
+
+    /*
+    * Expected props:
+    *   - img: require(imgUrl)
+    *   - headlineA: String
+    *   - headlineB: String
+    */
+    this.currentImageIs_A = true;
+
+    this.state = {
+      imgUrl: null
+    }
+  }
+
+  componentDidMount() {
+    if(this.props.img !== this.state.imgUrl) {
+      this.fadeIn("a");
+
+      //Update imgUrl
+      this.setState({
+        imgUrl: this.props.img
+      });
+    }
+  }
+
+  componentDidUpdate() {
+    if(this.props.img !== this.state.imgUrl) {
+
+      //Update imgUrl
+      this.setState({
+        imgUrl: this.props.img
+      });
+
+      const fadeInLetter = this.currentImageIs_A ? "b" : "a";
+      const fadeOutLetter = this.currentImageIs_A ? "a" : "b";
+      this.fadeIn(fadeInLetter, this.state.img);
+      this.fadeOut(fadeOutLetter);
+      this.currentImageIs_A = !this.currentImageIs_A;
+    }
+  }
+
+
+  fadeIn(letter) {
+    /*
+    * Fade in
+    */
+    //Image
+    const elements = document.getElementById(letter).getElementsByClassName("Image_element");
+    for (var i = 0; i < elements.length; i++) {
+      const element = elements[i];
+      //Change picture
+      const imgUrl = this.props.img;
+      element.style.backgroundImage = "url(" + imgUrl + ")";
+      //Animation
+      this.timeout_fadeIn(element,i);
+    };
+  }
+
+  fadeOut(letter) {
+    /*
+    * Fade out
+    */
+    //Image
+    const elements = document.getElementById(letter).getElementsByClassName("Image_element");
+    for (var i = 0; i < elements.length; i++) {
+      const element = elements[i];
+      //Animation
+      this.timeout_fadeOut(element,i);
+    };
+  }
+
+  timeout_fadeIn(element,i) {
+    setTimeout(function() {
+      element.classList.remove("Image_element-fade-out");
+      element.classList.add("Image_element-fade-in");
+    }, i*100);
+  }
+
+  timeout_fadeOut(element,i) {
+    setTimeout(function() {
+      element.classList.remove("Image_element-fade-in");
+      element.classList.add("Image_element-fade-out");
+    }, i*100);
+  }
+
+
+  render() {
+    if(this.state.img !== null) {
+      //displayed
+      return (
+        <div>
+          <div className="Image" id="a">
+            <h1 className="headline headline-1 headline-black headline-bright">
+              {this.props.headlineA}
+            </h1>
+            <h2 className="headline headline-2 headline-black headline-bright">
+              {this.props.headlineB}
+            </h2>
+            <div className="Image_element-1 Image_element"></div>
+            <div className="Image_element-2 Image_element"></div>
+            <div className="Image_element-3 Image_element"></div>
+            <div className="Image_element-4 Image_element"></div>
+            <div className="Image_element-5 Image_element"></div>
+            <div className="Image_element-6 Image_element"></div>
+            <div className="Image_element-7 Image_element"></div>
+
+            <div className="Image_element-8 Image_element"></div>
+
+            <div className="Image_element-9 Image_element"></div>
+            <div className="Image_element-10 Image_element"></div>
+            <div className="Image_element-11 Image_element"></div>
+            <div className="Image_element-12 Image_element"></div>
+            <div className="Image_element-13 Image_element"></div>
+            <div className="Image_element-14 Image_element"></div>
+          </div>
+          <div className="Image" id="b">
+            <div className="Image_element-1 Image_element"></div>
+            <div className="Image_element-2 Image_element"></div>
+            <div className="Image_element-3 Image_element"></div>
+            <div className="Image_element-4 Image_element"></div>
+            <div className="Image_element-5 Image_element"></div>
+            <div className="Image_element-6 Image_element"></div>
+            <div className="Image_element-7 Image_element"></div>
+
+            <div className="Image_element-8 Image_element"></div>
+
+            <div className="Image_element-9 Image_element"></div>
+            <div className="Image_element-10 Image_element"></div>
+            <div className="Image_element-11 Image_element"></div>
+            <div className="Image_element-12 Image_element"></div>
+            <div className="Image_element-13 Image_element"></div>
+            <div className="Image_element-14 Image_element"></div>
+          </div>
+        </div>
+      );
+    } else {
+      //not displayed
+      return (
+        null
+      );
+    }
+  }
+}
+
+export default Image;
--- a/src/components/Presentation/PresentationPage.js
+++ b/src/components/Presentation/PresentationPage.js
@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+
+class PresentationPage extends Component {
+  constructor(props) {
+    super(props);
+
+    /*
+    * Expected props:
+    *   presentation: String
+    */
+    this.test = null;
+  }
+
+  render() {
+    const Presentation = require('./Presentations/' + this.props.presentation + '.js').default;
+    return (
+      <div>
+        <Presentation />
+      </div>
+    );
+  }
+}
+
+export default PresentationPage;
--- a/src/components/Presentation/PresentationPageElement.js
+++ b/src/components/Presentation/PresentationPageElement.js
@ -0,0 +1,55 @@
+import React, { Component } from 'react';
+import Fade from 'react-reveal/Fade';
+
+
+class PresentationPage extends Component {
+  constructor(props) {
+    super(props);
+
+    /*
+    * Expected props:
+    *   img: String
+    *   orientationRight: bool
+    */
+    this.test = null;
+  }
+
+  render() {
+    const style = this.props.img ? {
+      backgroundImage: "url('" + this.props.img + "')"
+    } : {
+      display: "none"
+    }
+
+    if(this.props.orientationRight) {
+      return (
+        <Fade bottom>
+          <div className="PresentationPage_box">
+            <div className="PresentationPage_content PresentationPage_contentLeft">
+              {this.props.children}
+            </div>
+            <div style={style} className="PresentationPage_imageRight PresentationPage_image" id="img">
+
+            </div>
+          </div>
+        </Fade>
+      );
+    } else {
+      return (
+        <Fade bottom>
+          <div className="PresentationPage_box">
+            <div style={style} className="PresentationPage_imageLeft PresentationPage_image" id="img">
+
+            </div>
+            <div className="PresentationPage_content PresentationPage_contentRight">
+              {this.props.children}
+            </div>
+          </div>
+        </Fade>
+      );
+    }
+
+  }
+}
+
+export default PresentationPage;
--- a/src/components/Presentation/Presentations/Page1.js
+++ b/src/components/Presentation/Presentations/Page1.js
@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+
+import PresentationPageElement from '../PresentationPageElement'
+
+
+class Presentation extends Component {
+  constructor(props) {
+    super(props);
+
+    /*
+    * Expected props:
+    *   /
+    */
+    this.test = null;
+  }
+
+  render() {
+    const img1 = require("./images/1.jpg");
+    const img2 = require("./images/2.jpg");
+    return (
+      <div>
+        <PresentationPageElement img={img1}>
+          <h1 className="headline headline-1 headline-bright">Some examples:</h1>
+          <h2 className="headline headline-4 headline-bright">Smaller headline</h2>
+          <ul className="list list-bright">
+            <li>
+              Item1
+            </li>
+            <li>
+              Item1
+            </li>
+            <li>
+              Item2
+            </li>
+          </ul>
+          <p className="text text-bright">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consequat lacus ac eros blandit, eu viverra sem gravida. Fusce sodales euismod vulputate. Vivamus aliquet ipsum eros, sit amet rutrum libero mattis et. Curabitur blandit dignissim velit, et posuere sapien viverra sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt nulla mauris, vel venenatis nibh cursus ac. Duis tincidunt justo sed tortor varius cursus.
+          </p>
+        </PresentationPageElement>
+        <PresentationPageElement img={img2} orientationRight>
+          <h1 className="headline headline-1 headline-bright">!Some Information!:</h1>
+          <p className="text text-bright text-arrow">
+            If you want a fast setup of your website project go to 'src/components/Presentation/'.<br />
+            You can find a config where you can configurate all the pages you want to have. 'Component' is the file name of the component
+            of the page. 'id' is the id that is displayed in the url routing system.<br />
+            Take a look into 'src/components/Presentation/Presentations/'. <br />
+            There you have all your pages components. In this case some examples that I have set up for you. <br /><br />
+
+            Take a deeper look into 'src/styles/'. There you have all CSS files that style the website.
+          </p>
+        </PresentationPageElement>
+      </div>
+    );
+  }
+}
+
+export default Presentation;
--- a/src/components/Presentation/Presentations/Page2.js
+++ b/src/components/Presentation/Presentations/Page2.js
@ -0,0 +1,55 @@
+import React, { Component } from 'react'
+import { Link } from "react-router-dom";
+
+import PresentationPageElement from '../PresentationPageElement'
+//Import config with presentation pages information
+import config from '../config.js';
+
+
+class Presentation extends Component {
+  constructor(props) {
+    super(props);
+
+    /*
+    * Expected props:
+    *   /
+    */
+    this.test = null;
+
+    this.config = config;
+  }
+
+  fetchElementsFromConfig() {
+    const config = this.config
+    var allElements = [];
+
+    config.forEach(function(element, index) {
+      const headline = element.headlineA;
+      const headline2 = element.headlineB;
+      const name = element.name;
+      const id = element.id;
+      allElements.push(
+        <Link key={index} to={"/" + id}>
+          <PresentationPageElement orientationRight>
+            <h1 className="headline headline-1 headline-bright">{headline}</h1>
+            <h2 className="headline headline-2 headline-bright">{headline2}</h2>
+            <p className="text text-bright">{name}</p>
+          </PresentationPageElement>
+        </Link>);
+    });
+
+    return allElements;
+  }
+
+  render() {
+    const fetch = this.fetchElementsFromConfig();
+
+    return (
+      <div>
+        {fetch}
+      </div>
+    );
+  }
+}
+
+export default Presentation;
--- a/src/components/Presentation/Presentations/Page3.js
+++ b/src/components/Presentation/Presentations/Page3.js
@ -0,0 +1,122 @@
+import React, { Component } from 'react'
+import SyntaxHighlighter from 'react-syntax-highlighter/prism';
+import { okaidia } from 'react-syntax-highlighter/styles/prism';
+
+import Menu from 'react-animated-menus'
+
+import PresentationPageElement from '../PresentationPageElement'
+
+/*
+* Code START --------------------
+*/
+const Code1 = () => {
+  const codeString = 'npm install --save react-animated-menus';
+  return <SyntaxHighlighter language='batch' style={okaidia}>{codeString}</SyntaxHighlighter>;
+}
+const Code2 = () => {
+  const codeString = "import Menu from 'react-animated-menus'";
+  return <SyntaxHighlighter language='jsx' style={okaidia}>{codeString}</SyntaxHighlighter>;
+}
+const Code3 = () => {
+  const codeString = `const food = {
+  a: {
+    value: "Button1",
+    action: () => {
+      alert("test1")
+    }
+  },
+  b: {
+    value: "Button2",
+    action: () => {
+      alert("test2")
+    }
+  },
+  c: {
+    value: "Button3",
+    action: () => {
+      alert("test3")
+    }
+  }
+}
+
+//Width/Height unit is px by default
+<Menu width={35} color="rgb(123, 192, 222)" food={food} />
+
+//Replace 'width' optionally width 'height' but don't use both at the same time.
+//To keep the ratio between height and width one
+//has to be given and the other one is calculated by the component.
+
+//One example with height:
+
+<Menu height={"50px"}" food={food} />
+
+//'color' is optional. The defaul value is 'rgb(255, 255, 255)' if it's not defined.`;
+  return <SyntaxHighlighter language='jsx' style={okaidia}>{codeString}</SyntaxHighlighter>;
+}
+/*
+* Code END ----------------------
+*/
+
+
+class Presentation extends Component {
+  constructor(props) {
+    super(props);
+
+    /*
+    * Expected props:
+    *   /
+    */
+    this.test = null;
+  }
+
+  render() {
+    const food = {
+      a: {
+        value: "Button1",
+        action: () => {
+          alert("test1")
+        }
+      },
+      b: {
+        value: "Button2",
+        action: () => {
+          alert("test2")
+        }
+      },
+      c: {
+        value: "Button3",
+        action: () => {
+          alert("test3")
+        }
+      }
+    }
+
+    return (
+      <div>
+        <PresentationPageElement orientationRight>
+          <h1 className="headline headline-1 headline-bright">Code highlighting example:</h1>
+          <p className="text text-bright text-arrow">
+            Using react-syntax-highlighter npm package right here. Feel free to remove it, if you don't need it.
+          </p>
+        </PresentationPageElement>
+        <PresentationPageElement orientationRight>
+          <h1 className="headline headline-1 headline-bright">Installation:</h1>
+          <div className="text text-bright">
+            <Code1 />
+          </div>
+        </PresentationPageElement>
+        <PresentationPageElement orientationRight>
+          <h1 className="headline headline-1 headline-bright">Usage:</h1>
+          <div className="text text-bright">
+            Add following line at the beginning of your document:<br />
+            <Code2 /><br />
+            Component usage:<br />
+            <Code3 />
+          </div>
+        </PresentationPageElement>
+      </div>
+    );
+  }
+}
+
+export default Presentation;
--- a/src/components/Presentation/Presentations/images/1.jpg
+++ b/src/components/Presentation/Presentations/images/1.jpg
--- a/src/components/Presentation/Presentations/images/2.jpg
+++ b/src/components/Presentation/Presentations/images/2.jpg
--- a/src/components/Presentation/config.js
+++ b/src/components/Presentation/config.js
@ -0,0 +1,26 @@
+//Edit this file to add new pages to the presentation
+//Also add a component to ./Presentations
+
+export default [
+  {
+    name: "Startpage",
+    headlineA: "Hello World!",
+    headlineB: 'Headline 2',
+    component: 'Page1',
+    id: 'pageone'
+  },
+  {
+    name: "Overview",
+    headlineA: "Overview",
+    headlineB: "Example",
+    component: 'Page2',
+    id: 'pagetwo'
+  },
+  {
+    name: "Page 3",
+    headlineA: "Page 3",
+    headlineB: "Code example",
+    component: 'Page3',
+    id: 'pagethree'
+  }
+]
--- a/src/components/Xbutton.js
+++ b/src/components/Xbutton.js
@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+
+
+class Xbutton extends Component {
+  render() {
+    return (
+      <div>
+          <svg className="Xbutton" viewBox="-10 -10 530 530" onClick={this.props.clickAction}>
+            <g>
+            		<path d="M437.019,74.981C388.668,26.628,324.378,0,256,0C187.62,0,123.333,26.628,74.981,74.98S0,187.62,0,256    c0,68.381,26.628,132.668,74.981,181.02C123.332,485.372,187.62,512,255.999,512s132.669-26.628,181.02-74.98    C485.371,388.667,512,324.38,512,256C512,187.619,485.371,123.332,437.019,74.981z M368.853,347.642    c5.857,5.857,5.857,15.355,0,21.213c-2.93,2.929-6.768,4.393-10.607,4.393c-3.838,0-7.678-1.465-10.605-4.393L256,277.214    l-91.641,91.641c-2.93,2.929-6.768,4.393-10.607,4.393c-3.838,0-7.678-1.465-10.605-4.393c-5.858-5.857-5.858-15.355,0-21.213    l91.64-91.641l-91.64-91.641c-5.858-5.857-5.858-15.355,0-21.213c5.857-5.857,15.354-5.857,21.213,0L256,234.788l91.64-91.641    c5.857-5.857,15.355-5.857,21.213,0c5.857,5.857,5.857,15.355,0,21.213l-91.641,91.641L368.853,347.642z" data-original="#000000"  data-old_color="#561919"/>
+            </g>
+          </svg>
+
+      </div>
+    );
+  }
+}
+
+export default Xbutton;
--- a/src/images/Presentation/1.jpg
+++ b/src/images/Presentation/1.jpg
--- a/src/images/Presentation/2.jpg
+++ b/src/images/Presentation/2.jpg
--- a/src/images/Presentation/3.jpg
+++ b/src/images/Presentation/3.jpg
--- a/src/images/Presentation/4.jpg
+++ b/src/images/Presentation/4.jpg
--- a/src/images/close.svg
+++ b/src/images/close.svg
@ -0,0 +1,6 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px" class=""><g transform="matrix(1 0 0 1 0 0)"><g>
+	<g>
+		<path id="test" d="M437.019,74.981C388.668,26.628,324.378,0,256,0C187.62,0,123.333,26.628,74.981,74.98S0,187.62,0,256    c0,68.381,26.628,132.668,74.981,181.02C123.332,485.372,187.62,512,255.999,512s132.669-26.628,181.02-74.98    C485.371,388.667,512,324.38,512,256C512,187.619,485.371,123.332,437.019,74.981z M368.853,347.642    c5.857,5.857,5.857,15.355,0,21.213c-2.93,2.929-6.768,4.393-10.607,4.393c-3.838,0-7.678-1.465-10.605-4.393L256,277.214    l-91.641,91.641c-2.93,2.929-6.768,4.393-10.607,4.393c-3.838,0-7.678-1.465-10.605-4.393c-5.858-5.857-5.858-15.355,0-21.213    l91.64-91.641l-91.64-91.641c-5.858-5.857-5.858-15.355,0-21.213c5.857-5.857,15.354-5.857,21.213,0L256,234.788l91.64-91.641    c5.857-5.857,15.355-5.857,21.213,0c5.857,5.857,5.857,15.355,0,21.213l-91.641,91.641L368.853,347.642z" data-original="#000000" class="active-path" data-old_color="#561919" fill="#E45F4D"/>
+	</g>
+</g></g> </svg>
--- a/src/images/down-arrow.svg
+++ b/src/images/down-arrow.svg
@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 32.634 32.634" style="enable-background:new 0 0 32.634 32.634;" xml:space="preserve" width="512px" height="512px">
+<g>
+	<path d="M16.317,32.634c-0.276,0-0.5-0.224-0.5-0.5V0.5c0-0.276,0.224-0.5,0.5-0.5s0.5,0.224,0.5,0.5v31.634   C16.817,32.41,16.593,32.634,16.317,32.634z" fill="#d7d7d7"/>
+	<path d="M16.315,32.634L16.315,32.634c-0.133,0-0.26-0.053-0.354-0.146L3.428,19.951c-0.195-0.195-0.195-0.512,0-0.707   s0.512-0.195,0.707,0l12.179,12.183l12.184-12.183c0.195-0.195,0.512-0.195,0.707,0s0.195,0.512,0,0.707L16.668,32.487   C16.574,32.581,16.448,32.634,16.315,32.634z" fill="#d7d7d7"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/src/images/logo-100.png
+++ b/src/images/logo-100.png
--- a/src/images/logo.svg
+++ b/src/images/logo.svg
@ -0,0 +1,85 @@
+<svg width="640" height="479.99999999999994" xmlns="http://www.w3.org/2000/svg">
+ <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
+ <defs>
+  <style type="text/css">
+    <![CDATA[
+
+    .circle {
+      fill: #DA3821;
+      stroke-width: 7;
+      stroke-dasharray: 1000;
+      stroke-dashoffset: 0;
+      animation: circleDraw 2s;
+    }
+
+    .a {
+      opacity: 1;
+      font-size: 24px;
+      animation: fontFadeA 3s;
+    }
+
+    .b {
+      opacity: 1;
+      font-size: 24px;
+      animation: fontFadeB 3s;
+    }
+
+    @keyframes fontFadeA {
+      0% {
+        font-size: 20px;
+        opacity: 0;
+      }
+      40% {
+        opacity: 0;
+        font-size: 20px;
+      }
+      100% {
+        opacity: 1;
+        font-size: 24px;
+      }
+    }
+    @keyframes fontFadeB {
+      0% {
+        opacity: 0;
+        font-size: 20px;
+      }
+      50% {
+        opacity: 0;
+        font-size: 20px;
+      }
+      100% {
+        opacity: 1;
+        font-size: 24px;
+      }
+    }
+
+    @keyframes circleDraw {
+      0% {
+        stroke-dashoffset: 1000;
+        fill: transparent;
+      }
+      30% {
+        fill: transparent;
+      }
+      100% {
+        fill: #DA3821;
+        stroke-dashoffset: 0;
+      }
+    }
+
+    ]]>
+  </style>
+
+ </defs>
+ <title>MyLogo</title>
+ <g>
+  <title>background</title>
+  <rect x="-1" y="-1" width="642" height="482" id="canvas_background" fill="none"/>
+ </g>
+ <g>
+  <title>Layer 1</title>
+  <path class="circle" id="svg_2" d="m175.64902,246.04444c0,-81.71632 66.19021,-147.90653 147.90652,-147.90653c81.71632,0 147.90653,66.19021 147.90653,147.90653c0,81.71631 -66.19021,147.90652 -147.90653,147.90652c-81.71631,0 -147.90652,-66.19021 -147.90652,-147.90652z" stroke-opacity="null" stroke-linecap="null" stroke-linejoin="null" stroke="#e45f4d" fill-opacity="null"/>
+  <text class="a" font-family="Monospace" font-weight="normal" stroke="#ffffff" transform="matrix(16.070920656049648,0,0,14.324953552691046,-1383.3705537140042,-1389.329317933106) " xml:space="preserve" text-anchor="middle" font-size="24" id="svg_4" y="117.786939" x="101.824642" stroke-linecap="null" stroke-linejoin="null" fill="#ffffff">A</text>
+  <text class="b" font-family="Monospace" id="svg_5" font-weight="normal" stroke="#ffffff" transform="rotate(-19 389.5501403808595,276.68469238281244) matrix(15.254961764346335,0,0,14.324953552691046,-1315.1918495589248,-1390.0460388359616) " xml:space="preserve" text-anchor="middle" font-size="24" y="124.386839" x="111.764076" stroke-linecap="null" stroke-linejoin="null" fill="#ffffff">B</text>
+ </g>
+</svg>
--- a/src/images/profilepicture.jpeg
+++ b/src/images/profilepicture.jpeg
--- a/src/index.js
+++ b/src/index.js
@ -0,0 +1,37 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import registerServiceWorker from './registerServiceWorker';
+
+/*
+* Import styles CSS START ----------------------------------------------
+*/
+//General, global
+import 'semantic-ui-css/semantic.min.css';
+import './styles/app.css';
+import './styles/form.css';
+import './styles/headlines.css';
+import './styles/text.css';
+
+//Frame
+import './styles/Frame/Frame.css';
+
+//LoginButton
+import './styles/LoginButton/LoginButton.css';
+
+//PageLoading
+import './styles/PageLoading/PageLoading.css';
+
+//Presentation
+import './styles/Presentation/Presentation.css';
+import './styles/Presentation/PresentationPage.css';
+import './styles/Presentation/Image.css';
+
+//Xbutton
+import './styles/Xbutton/Xbutton.css';
+/*
+* Import styles CSS END ------------------------------------------------
+*/
+
+ReactDOM.render(<App />, document.getElementById('root'));
+registerServiceWorker();
--- a/src/pages/Presentation.js
+++ b/src/pages/Presentation.js
@ -0,0 +1,151 @@
+import React, { Component } from 'react';
+import { Link } from "react-router-dom";
+import { CSSTransition } from 'react-transition-group';
+
+import Image from '../components/Presentation/Image.js';
+import PresentationPage from '../components/Presentation/PresentationPage.js';
+import Login from '../components/Login/Login.js';
+import LoginButton from '../components/Login/LoginButton.js';
+import PageLoading from '../components/PageLoading.js';
+//Import config with presentation pages information
+import config from '../components/Presentation/config.js';
+
+import arrow from "../images/down-arrow.svg";
+
+
+class Presentation extends Component {
+  constructor(props) {
+    super(props);
+
+    this.toggleRenderLogin = this.toggleRenderLogin.bind(this);
+    this.getNextPageId = this.getNextPageId.bind(this);
+    this.getPrevPageId = this.getPrevPageId.bind(this);
+
+    /*
+    * Expected props:
+    *   id: String
+    */
+    this.state = {
+      config: config,
+      loginShouldRender: false,
+      pageLoading: true
+    }
+  }
+
+
+  componentDidMount() {
+    //Color backgroundColor grey
+    document.getElementById('body').style.backgroundColor = 'rgb(37, 37, 37)';
+  }
+
+
+  togglePageLoading() {
+    this.setState({
+      pageLoading: !this.state.pageLoading
+    });
+  }
+
+
+  toggleRenderLogin() {
+    this.setState({
+      loginShouldRender: !this.state.loginShouldRender
+    });
+  }
+
+
+  getPageById(id) {
+    var pageNumber = 0;
+    config.forEach((element, index) => {
+      if(element.id === this.props.id) {
+        pageNumber = index;
+      }
+    });
+    return pageNumber;
+  }
+
+
+  getNextPageId(currentPageNumber) {
+    const nextPageNumber = currentPageNumber + 1;
+    const id = this.state.config[nextPageNumber].id;
+    return id;
+  }
+
+
+  getPrevPageId(currentPageNumber) {
+    const prevPageNumber = currentPageNumber - 1;
+    const id = this.state.config[prevPageNumber].id;
+    return id;
+  }
+
+  getProgress() {
+    const currentPageNumber =  this.getPageById(this.props.id) + 1;
+    const config = this.state.config;
+    const totalPages = config.length;
+    return( (currentPageNumber / totalPages) * 100 );
+  }
+
+
+  render() {
+    //Setup some variables
+    const currentPageNumber =  this.getPageById(this.props.id);
+    const config = this.state.config[currentPageNumber];
+    const image = require("../images/Presentation/" + (currentPageNumber + 1) + ".jpg");
+    const progressBar = String(this.getProgress()) + '%';
+
+    /*
+    * Arrow buttons
+    */
+    var arrowUp = false;
+    var arrowDown = false;
+    if(currentPageNumber > 0) {
+      var prevPageId = this.getPrevPageId(currentPageNumber);
+      arrowUp = true;
+    }
+    if(currentPageNumber < this.state.config.length - 1) {
+      var nextPageId = this.getNextPageId(currentPageNumber);
+      arrowDown = true;
+    }
+
+    return (
+      <div>
+        <PageLoading loading={this.state.pageLoading} />
+        <LoginButton clickAction={this.toggleRenderLogin} />
+        <Login shouldRender={this.state.loginShouldRender} toggleRenderLogin={this.toggleRenderLogin} />
+
+
+        <div className="Presentation_sidebar">
+          <h1>{config.name}</h1>
+            <CSSTransition
+              in={arrowUp}
+              timeout={600}
+              classNames="fadeZoom"
+              unmountOnExit
+            >
+              <div className={"Presentation_arrowUp"}><Link to={"/" + prevPageId}><img src={arrow} alt="Up" /></Link></div>
+            </CSSTransition>
+            <CSSTransition
+              in={arrowDown}
+              timeout={600}
+              classNames="fadeZoom"
+              unmountOnExit
+            >
+              <div className={"Presentation_arrowDown"}><Link to={"/" + nextPageId}><img src={arrow} alt="Down" /></Link></div>
+            </CSSTransition>
+        </div>
+        <div className="Presentation_sidebarProgressbar" style={{height: progressBar}}>
+
+        </div>
+        <div className="Presentation_rightbar">
+          <div className="Presentation_frameImage">
+            <Image img={image} headlineA={config.headlineA} headlineB={config.headlineB} />
+          </div>
+          <div className="Presentation_frameContent">
+            <PresentationPage presentation={config.component} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Presentation;
--- a/src/registerServiceWorker.js
+++ b/src/registerServiceWorker.js
@ -0,0 +1,117 @@
+// In production, we register a service worker to serve assets from local cache.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on the "N+1" visit to a page, since previously
+// cached resources are updated in the background.
+
+// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
+// This link also includes instructions on opting out of this behavior.
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.1/8 is considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+);
+
+export default function register() {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Lets check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://goo.gl/SC7cgQ'
+          );
+        });
+      } else {
+        // Is not local host. Just register service worker
+        registerValidSW(swUrl);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the old content will have been purged and
+              // the fresh content will have been added to the cache.
+              // It's the perfect time to display a "New content is
+              // available; please refresh." message in your web app.
+              console.log('New content is available; please refresh.');
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl)
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      if (
+        response.status === 404 ||
+        response.headers.get('content-type').indexOf('javascript') === -1
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl);
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      );
+    });
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then(registration => {
+      registration.unregister();
+    });
+  }
+}
--- a/src/styles/Button.css
+++ b/src/styles/Button.css
@ -0,0 +1,5 @@
+.Button {
+  width: 100%;
+  height: 50px;
+  background-color: #DA3821;
+}
--- a/src/styles/Frame/Frame.css
+++ b/src/styles/Frame/Frame.css
@ -0,0 +1,45 @@
+.Frame_background {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.7);
+
+  animation: fadeBackground 0.5s;
+  z-index: 1000;
+}
+
+.Frame_box {
+  position: fixed;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1001;
+}
+
+.Frame {
+  position: relative;
+  box-sizing: border-box;
+  top: 20vh;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 30px;
+  width: 100%;
+  background-color: white;
+  color: black;
+  border-radius: 5px;
+}
+.Frame * {
+  color: black;
+}
+
+/*
+* Responsive
+*/
+@media (min-width: 700px) {
+  .Frame {
+    width: 600px;
+  }
+}
--- a/src/styles/LoginButton/LoginButton.css
+++ b/src/styles/LoginButton/LoginButton.css
@ -0,0 +1,27 @@
+.LoginButton {
+  position: fixed;
+  right: 20px;
+  top: 20px;
+  width: 100px;
+  height: 50px;
+  border: solid rgb(200, 200, 200) 2px;
+  border-radius: 5px;
+  cursor: pointer;
+  color: rgb(200, 200, 200);
+  padding-left: 22px;
+  padding-top: 13px;
+  letter-spacing: 4px;
+  font-size: 15px;
+  font-family: sans-serif;
+  box-sizing: border-box;
+  transition: background-color 0.2s;
+  z-index: 1000;
+}
+
+.LoginButton:hover {
+  background-color: rgba(103, 103, 103, 0.55);
+}
+
+.LoginButton:active {
+  background-color: rgb(47, 47, 47);
+}
--- a/src/styles/PageLoading/PageLoading.css
+++ b/src/styles/PageLoading/PageLoading.css
@ -0,0 +1,136 @@
+.PageLoading {
+  position: fixed;
+  display: block;
+  width: 100%;
+  height: 100vh;
+  background-color: black;
+  top: 0;
+  z-index: 2000;
+}
+
+.PageLoading_Element {
+  height: 100vh;
+  top: 0;
+  position: fixed;
+  width: 50%;
+  display: block;
+  animation-delay: 1s;
+}
+
+
+/*
+* logo
+*/
+.PageLoading_Logo {
+  z-index: 1001;
+  display: block;
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  top: 40vh;
+  width: 150px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+.PageLoading_Logo-fadeOut {
+  opacity: 0;
+  transform: scale(1.5);
+  animation: pageLoadingLogo-fadeOut 2s ease-in-out;
+}
+@keyframes pageLoadingLogo-fadeOut {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(1.5);
+  }
+}
+
+.PageLoading_1 {
+  background-color: black;
+  z-index: 1000;
+  animation-duration: 1.5s;
+  -webkit-animation-duration: 1.5s;
+  -moz-animation-duration: 1.5s;
+}
+.PageLoading_2 {
+  background-color: rgb(5, 5, 5);
+  z-index: 999;
+  animation-duration: 2s;
+  -webkit-animation-duration: 2s;
+  -moz-animation-duration: 2s;
+}
+.PageLoading_3 {
+  background-color: rgb(10, 10, 10);
+  z-index: 998;
+  animation-duration: 2.5s;
+  -webkit-animation-duration: 2.5s;
+  -moz-animation-duration: 2.5s;
+}
+.PageLoading_4 {
+  background-color: rgb(15, 15, 15);
+  z-index: 997;
+  animation-duration: 3s;
+  -webkit-animation-duration: 3s;
+  -moz-animation-duration: 3s;
+}
+.PageLoading_5 {
+  background-color: rgb(20, 20, 20);
+  z-index: 996;
+  animation-duration: 3.5s;
+  -webkit-animation-duration: 3.5s;
+  -moz-animation-duration: 3.5s;
+}
+
+.PageLoading_left {
+  transform: translateX(-100%);
+  animation-name: pageLoading-left;
+  -webkit-animation-name: pageLoading-left;
+  -moz-animation-name: pageLoading-left;
+}
+.PageLoading_right {
+  left: 50%;
+  transform: translateX(100%);
+  animation-name: pageLoading-right;
+  -webkit-animation-name: pageLoading-right;
+  -moz-animation-name: pageLoading-right;
+}
+
+
+/*
+* Animations
+*/
+@keyframes pageLoading-left {
+  0% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes pageLoading-right {
+  0% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+
+/*
+* Responsive
+*/
+@media (min-width: 700px) {
+
+}
--- a/src/styles/Presentation/Image.css
+++ b/src/styles/Presentation/Image.css
@ -0,0 +1,157 @@
+.Image h1{
+  left: -8%;
+  top: 10%;
+  position: absolute;
+}
+.Image h2{
+  left: 10%;
+  top: 30%;
+  width: 70%;
+  padding-bottom: 10px;
+  letter-spacing: 2px;
+  font-size: 1.3em;
+  font-family: sans-serif;
+  padding-left: 0.3em;
+  position: absolute;
+}
+
+.Image {
+  width: 600px;
+  height: 300px;
+  background-color: transparent;
+
+  margin-left: 80px;
+  margin-top: 50px;
+
+  position: absolute;
+}
+
+.Image_element {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: top left;
+  opacity: 0;
+}
+
+.Image_element.Image_element-fade-out {
+  animation: fade-out 0.7s;
+  transform: translate(100px,100px);
+  -webkit-transform: translate(100px,100px);
+  opacity: 0 !important;
+}
+
+.Image_element.Image_element-fade-in {
+  animation: fade-in 0.7s;
+  transform: translate(0px,0px);
+  -webkit-transform: translate(0px,0px);
+  opacity: 1 !important;
+}
+
+@keyframes fade-in {
+  0% {
+    transform: translate(-150px,150px);
+    -webkit-transform: translate(-150px,150px);
+    opacity: 0;
+  },
+  80% {
+    transform: translate(0px,0px);
+    -webkit-transform: translate(0px,0px);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(0px,0px);
+    -webkit-transform: translate(0px,0px);
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  0% {
+    transform: translate(0px,0px);
+    -webkit-transform: translate(0px,0px);
+    opacity: 1;
+  },
+  80% {
+    transform: translate(100px,100px);
+    -webkit-transform: translate(100px,-100px);
+    opacity: 0;
+  }
+  100% {
+    transform: translate(100px,-100px);
+    -webkit-transform: translate(100px,-100px);
+    opacity: 0;
+  }
+}
+
+.Image_element-1 {
+  -webkit-clip-path: polygon(0% 0%, 10% 0%, 0% 10%);
+  clip-path: polygon(0% 0%, 10% 0%, 0% 10%);
+}
+
+.Image_element-2 {
+  -webkit-clip-path: polygon(0% 10%, 10% 0%, 23% 0%, 0% 23%);
+  clip-path: polygon(0% 10%, 10% 0%, 23% 0%, 0% 23%);
+}
+
+.Image_element-3 {
+  -webkit-clip-path: polygon(0% 23%, 23% 0%, 40% 0%, 0% 40%);
+  clip-path: polygon(0% 23%, 23% 0%, 40% 0%, 0% 40%);
+}
+
+.Image_element-4 {
+  -webkit-clip-path: polygon(0% 40%, 40% 0%, 50% 0%, 0% 50%);
+  clip-path: polygon(0% 40%, 40% 0%, 50% 0%, 0% 50%);
+}
+
+.Image_element-5 {
+  -webkit-clip-path: polygon(0% 50%, 50% 0%, 75% 0%, 0% 75%);
+  clip-path: polygon(0% 50%, 50% 0%, 75% 0%, 0% 75%);
+}
+
+.Image_element-6 {
+  -webkit-clip-path: polygon(0% 75%, 75% 0%, 80% 0%, 0% 80%);
+  clip-path: polygon(0% 75%, 75% 0%, 80% 0%, 0% 80%);
+}
+
+.Image_element-7 {
+  -webkit-clip-path: polygon(0% 80%, 80% 0%, 90% 0%, 0% 90%);
+  clip-path: polygon(0% 80%, 80% 0%, 90% 0%, 0% 90%);
+}
+
+.Image_element-8 {
+  -webkit-clip-path: polygon(0% 90%, 90% 0%, 100% 0%, 100% 5%, 5% 100%, 0% 100%);
+  clip-path: polygon(0% 90%, 90% 0%, 100% 0%, 100% 5%, 5% 100%, 0% 100%);
+}
+
+.Image_element-9 {
+  -webkit-clip-path: polygon(5% 100%, 100% 5%, 100% 10%, 10% 100%);
+  clip-path: polygon(5% 100%, 100% 5%, 100% 10%, 10% 100%);
+}
+
+.Image_element-10 {
+  -webkit-clip-path: polygon(10% 100%, 100% 10%, 100% 30%, 30% 100%);
+  clip-path: polygon(10% 100%, 100% 10%, 100% 30%, 30% 100%);
+}
+
+.Image_element-11 {
+  -webkit-clip-path: polygon(30% 100%, 100% 30%, 100% 50%, 50% 100%);
+  clip-path: polygon(30% 100%, 100% 30%, 100% 50%, 50% 100%);
+}
+
+.Image_element-12 {
+  -webkit-clip-path: polygon(50% 100%, 100% 50%, 100% 60%, 60% 100%);
+  clip-path: polygon(50% 100%, 100% 50%, 100% 60%, 60% 100%);
+}
+
+.Image_element-13 {
+  -webkit-clip-path: polygon(60% 100%, 100% 60%, 100% 80%, 80% 100%);
+  clip-path: polygon(60% 100%, 100% 60%, 100% 80%, 80% 100%);
+}
+
+.Image_element-14 {
+  -webkit-clip-path: polygon(80% 100%, 100% 80%, 100% 100%, 100% 100%);
+  clip-path: polygon(80% 100%, 100% 80%, 100% 100%, 100% 100%);
+}
--- a/src/styles/Presentation/Presentation.css
+++ b/src/styles/Presentation/Presentation.css
@ -0,0 +1,106 @@
+.Presentation_sidebar {
+  width: 130px;
+  height: 100vh;
+  background-color: rgb(50, 50, 50);
+  float: left;
+  position: fixed;
+  z-index: 1;
+}
+.Presentation_sidebarProgressbar {
+  content: '';
+  display: block;
+  position: fixed;
+  left: 0px;
+  top: 0;
+  width: 4px;
+  height: 0%;
+  background-color: rgb(143, 63, 51);
+  transition: height 0.6s;
+  z-index: 2;
+
+}
+.Presentation_sidebar h1 {
+  letter-spacing: 3px;
+  margin-left: 20px;
+}
+
+.Presentation_rightbar {
+  padding-left: 130px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.Presentation_rightbar .Presentation_frameImage {
+  position: relative;
+  width: 100%;
+  height: 400px;
+  box-sizing: border-box;
+}
+
+.Presentation_rightbar .Presentation_frameContent {
+  box-sizing: border-box;
+  padding: 90px;
+}
+
+.Presentation_sidebar h1 {
+  color: rgb(215, 215, 215);
+  writing-mode:vertical-lr;
+  padding-top: 6vh;
+}
+
+.Presentation_sidebar .Presentation_arrowUp,.Presentation_arrowDown {
+  width: 35px;
+  height: 35px;
+  position: absolute;
+  left: 113px;
+  display: block;
+  z-index: 100;
+}
+
+.Presentation_sidebar .Presentation_arrowUp {
+  top: 5vh;
+  transform: rotateZ(180deg);
+  -webkit-transform: rotateZ(180deg);
+}
+
+.Presentation_sidebar .Presentation_arrowDown {
+  top: 15vh;
+}
+
+.Presentation_sidebar .Presentation_arrowUp img {
+  width: 35px;
+  height: 35px;
+}
+
+.Presentation_sidebar .Presentation_arrowDown img {
+  width: 35px;
+  height: 35px;
+}
+
+.Presentation_sidebar .Presentation_arrowUp:active img {
+  margin-top: 5px;
+}
+
+.Presentation_sidebar .Presentation_arrowDown:active img {
+  margin-top: 5px;
+}
+
+.Presentation_sidebar .Presentation_arrowUp::before,.Presentation_arrowDown::before {
+  width: 20px;
+  height: 20px;
+  top: 2px;
+  left: 7px;
+  background-color: #db3821;
+  content: "";
+  position: absolute;
+  z-index: -1;
+  border-radius: 100%;
+  transform: scale(0);
+  transition: transform 0.2s;
+}
+.Presentation_sidebar .Presentation_arrowDown:hover::before {
+  transform: scale(1);
+}
+.Presentation_sidebar .Presentation_arrowUp:hover::before {
+  transform: scale(1);
+}
--- a/src/styles/Presentation/PresentationPage.css
+++ b/src/styles/Presentation/PresentationPage.css
@ -0,0 +1,58 @@
+.PresentationPage_box {
+  background-color: rgb(43, 42, 42);
+  border-radius: 5px;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  position: relative;
+  box-shadow: 0px 0px 10px rgb(30, 30, 30);
+  margin-bottom: 100px;
+}
+
+.PresentationPage_content {
+  padding: 3%;
+  padding-left: 7%;
+  padding-right: 7%;
+  width: 70%;
+  display: block;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.PresentationPage_contentLeft {
+  float: left;
+}
+
+.PresentationPage_contentRight {
+  float: right;
+}
+
+.PresentationPage_image {
+  background-color: rgb(48, 48, 48);
+  width: 30%;
+  height: 100%;
+  display: block;
+  position: absolute;
+  background-size: cover;
+  background-position: center center;
+  z-index: 2;
+  transition: width 0.5s;
+  background-repeat: no-repeat;
+}
+
+.PresentationPage_image:hover {
+  width: 100%;
+}
+
+.PresentationPage_imageRight {
+  float: right;
+  right: 0;
+  top: 0;
+}
+
+.PresentationPage_imageLeft {
+  float: left;
+  left: 0;
+  top: 0;
+}
--- a/src/styles/Xbutton/Xbutton.css
+++ b/src/styles/Xbutton/Xbutton.css
@ -0,0 +1,33 @@
+.Xbutton {
+  width: 35px;
+  height: auto;
+  fill: #E45F4D;
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  transition: fill 0.5s, stroke-dasharray 1s;
+  stroke: black;
+  stroke-width: 15;
+  stroke-dasharray: 0, 1610;
+  stroke-dashoffset: 0;
+  cursor: pointer;
+}
+
+.Xbutton:hover {
+  fill: rgba(87, 25, 25, 0.10);
+  stroke-dasharray: 1610, 0;
+  stroke-dashoffset: 0;
+}
+
+.Xbutton:active {
+  fill: #E45F4D;
+  transition: fill 0.2s;
+}
+
+
+/*
+* Responsive
+*/
+@media (min-width: 700px) {
+
+}
--- a/src/styles/app.css
+++ b/src/styles/app.css
@ -0,0 +1,88 @@
+/*
+* Fonts
+*/
+@import url('https://fonts.googleapis.com/css?family=Raleway|Roboto');
+
+body,html{
+  margin: 0;
+  padding: 0;
+}
+
+body * {
+  font-family: 'Roboto', sans-serif;
+}
+
+h1, h2, h3, h4, h5 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  color: rgb(101, 152, 205);
+  text-decoration: none;
+  transition: color 0.4s;
+}
+
+a:hover {
+  color: rgb(38, 108, 181);
+}
+
+a:focus {
+  color: rgb(21, 55, 93);
+}
+
+
+/*
+* Fade in and Route
+* START ------------------------
+*/
+.fade {
+}
+.fade-enter {
+  opacity: 0;
+}
+.fade-enter-active {
+  opacity: 1;
+  transition: opacity 0.6s;
+}
+.fade-exit {
+  opacity: 1;
+}
+.fade-exit-active {
+  opacity: 0;
+  transition: opacity 0.6s;
+}
+
+.fadeZoom {
+  transform: scale(1);
+}
+.fadeZoom-enter {
+  opacity: 0;
+  transform: scale(0.75);
+}
+.fadeZoom-enter-active {
+  opacity: 1;
+  transform: scale(1);
+  transition: transform 0.6s, opacity 0.6s;
+}
+.fadeZoom-exit {
+  opacity: 1;
+  transform: scale(1);
+}
+.fadeZoom-exit-active {
+  opacity: 0;
+  transform: scale(1.2);
+  transition: transform 0.6s, opacity 0.6s;
+}
+/*
+* Fade in and Route
+* END --------------------------
+*/
+
+
+
+/*
+* Responsive
+*/
+@media (min-width: 700px) {
+
+}
--- a/src/styles/form.css
+++ b/src/styles/form.css
@ -0,0 +1,109 @@
+/*
+* Input fields
+* START ------------------
+*/
+.input {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  position: relative;
+  margin-bottom: 2em;
+  margin-top: 3em;
+  z-index: 0;
+}
+.input input {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  height: 50px;
+  background: transparent;
+  border: none;
+  padding: none;
+  padding-left: 1em;
+  display: block;
+  outline: none;
+  color: rgb(40, 40, 40);
+  opacity: 0;
+  -webkit-transition: -webkit-opacity 0.2s;
+	transition: opacity 0.2s;
+  font-size: 0.8em;
+  letter-spacing: 1px;
+}
+.input label {
+  position: absolute;
+  left: 0;
+  top: 0;
+  box-sizing: border-box;
+  display: inline-block;
+  pointer-events: none;
+  width: 100%;
+	height: 100%;
+  padding-left: 0.7em;
+  padding-top: 1em;
+  -webkit-transition: -webkit-padding-left 0.2s;
+	transition: padding-left 0.2s;
+}
+.input label span {
+  display: inline-block;
+  -webkit-transition: -webkit-transform 0.3s;
+	transition: transform 0.3s;
+  transition-delay: 0.1s;
+  -webkit-transition-delay: 0.1s;
+  font-family: 'Raleway', Arial, sans-serif;
+  font-size: 1em;
+  letter-spacing: 1px;
+  color: rgb(40, 40, 40);
+}
+.input:hover label {
+  padding-left: 1em;
+}
+.input label::before,
+.input label::after {
+  content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	-webkit-transition: -webkit-transform 0.2s;
+	transition: transform 0.2s;
+}
+.input label::before {
+  border-top: 2px solid rgb(208, 208, 208);
+	-webkit-transform: translate3d(0, 100%, 0);
+	transform: translate3d(0, 100%, 0);
+	-webkit-transition-delay: 0.3s;
+	transition-delay: 0.3s;
+}
+.input label::after {
+  z-index: -1;
+	background: rgb(208, 208, 208);
+	-webkit-transform: scale3d(1, 0, 1);
+	transform: scale3d(1, 0, 1);
+	-webkit-transform-origin: 50% 0%;
+	transform-origin: 50% 0%;
+}
+.input input:focus, .input input:not(:placeholder-shown) {
+  opacity: 1;
+  -webkit-transition-delay: 0.5s;
+}
+.input input:focus + label::before, .input input:not(:placeholder-shown) + label::before {
+  -webkit-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
+}
+.input input:focus + label span, .input input:not(:placeholder-shown) + label span {
+  -webkit-transform: translate3d(0, -230%, 0);
+  transform: translate3d(0, -230%, 0);
+  transition-delay: 0.5s;
+  -webkit-transition-delay: 0.5s;
+}
+.input input:focus + label::after, .input input:not(:placeholder-shown) + label::after {
+  -webkit-transform: scale3d(1, 1, 1);
+	transform: scale3d(1, 1, 1);
+  -webkit-transition-delay: 0.6s;
+	transition-delay: 0.6s;
+}
+/*
+* END -------------------
+* Input fields
+*/
--- a/src/styles/headlines.css
+++ b/src/styles/headlines.css
@ -0,0 +1,47 @@
+/*
+* Headlines
+*/
+.headline {
+  text-align: left !important;
+  width: 70%;
+  padding: 10px;
+  display: block;
+  z-index: 1;
+  margin-top: 10px;
+  margin-bottom: 20px;
+  box-sizing: border-box;
+  padding-left: 20px !important;
+}
+
+.headline-1 {
+  font-size: 1.7em;
+  letter-spacing: 5px;
+}
+
+.headline-2 {
+  font-size: 1.5em;
+}
+
+.headline-3 {
+  font-size: 1.3em;
+}
+
+.headline-4 {
+  font-size: 1.1em;
+}
+
+.headline-black {
+  background-color: black;
+}
+.headline-black::first-letter {
+  color: #E45F4D;
+  font-weight: bold;
+}
+
+.headline-bright {
+  color: rgb(228, 228, 228) !important;
+}
+
+.headline-dark {
+  color: rgb(45, 45, 45) !important;
+}
--- a/src/styles/text.css
+++ b/src/styles/text.css
@ -0,0 +1,50 @@
+.text {
+  font-size: 1em;
+  letter-spacing: 0px;
+  padding-left: 40px;
+  text-align: justify;
+}
+
+.text-bright {
+  color: rgb(196, 196, 196) !important;
+}
+
+.text-dark {
+  color: rgb(45, 45, 45) !important;
+}
+
+.text-arrow::before {
+  content: ">";
+  font-size: 3em;
+  display: block;
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  left: -10px;
+  transition: transform 0.2s;
+}
+.text.text-arrow {
+  position: relative;
+}
+.text:hover.text-arrow::before {
+  transform: translateX(5px);
+}
+
+
+/*
+* Lists
+*/
+.list {
+  font-size: 1em;
+  letter-spacing: 1px;
+  padding-left: 80px;
+  text-align: justify;
+}
+
+.list-bright * {
+  color: rgb(196, 196, 196) !important;
+}
+
+.list-dark * {
+  color: rgb(45, 45, 45) !important;
+}
--- a/yarn.lock
+++ b/yarn.lock