Update, built Contact Page

package.json

@@ -33,6 +33,10 @@
     "npm": "^5.7.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
+    "react-redux": "^5.0.7",
+    "react-router": "^4.2.0",
+    "react-router-dom": "^4.2.2",
+    "redux": "^3.7.2",
     "three": "^0.90.0"
   },
   "devDependencies": {

public/App.jsx

@@ -10,11 +10,13 @@
  *    1.0.0 - 2018/02/23
  */
 import React from 'react';
+import { HashRouter, Route, Switch } from 'react-router-dom';
 
 import Header from './components/Header';
 import Footer from './components/Footer';
 
 import IndexPage from './components/pages/IndexPage';
+import ContactPage from './components/pages/ContactPage';
 
 class App extends React.Component {
   constructor(props) {
@@ -23,11 +25,18 @@ class App extends React.Component {
 
   render() {
     return (
-      <div className="c-app">
+      <HashRouter>
-        <Header />
+        <div className="c-app">
-        <IndexPage />
+            <Header />
-        <Footer />
+
-      </div>
+            <Switch>
+              <Route exact path="/" component={IndexPage} />
+              <Route path="/contact" component={ContactPage} />
+            </Switch>
+
+            <Footer />
+        </div>
+      </HashRouter>
     )
   }
 }

public/animation/Easing.js

@@ -0,0 +1,132 @@
+module.exports = {
+  // t: current time, b: begInnIng value, c: change In value, d: duration
+  def: 'easeOutQuad',
+  swing: function (t, b, c, d) {
+  	//alert(module.exports.default);
+  	return module.exports[module.exports.def](t, b, c, d);
+  },
+  easeInQuad: function (t, b, c, d) {
+  	return c*(t/=d)*t + b;
+  },
+  easeOutQuad: function (t, b, c, d) {
+  	return -c *(t/=d)*(t-2) + b;
+  },
+  easeInOutQuad: function (t, b, c, d) {
+  	if ((t/=d/2) < 1) return c/2*t*t + b;
+  	return -c/2 * ((--t)*(t-2) - 1) + b;
+  },
+  easeInCubic: function (t, b, c, d) {
+  	return c*(t/=d)*t*t + b;
+  },
+  easeOutCubic: function (t, b, c, d) {
+  	return c*((t=t/d-1)*t*t + 1) + b;
+  },
+  easeInOutCubic: function (t, b, c, d) {
+  	if ((t/=d/2) < 1) return c/2*t*t*t + b;
+  	return c/2*((t-=2)*t*t + 2) + b;
+  },
+  easeInQuart: function (t, b, c, d) {
+  	return c*(t/=d)*t*t*t + b;
+  },
+  easeOutQuart: function (t, b, c, d) {
+  	return -c * ((t=t/d-1)*t*t*t - 1) + b;
+  },
+  easeInOutQuart: function (t, b, c, d) {
+  	if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
+  	return -c/2 * ((t-=2)*t*t*t - 2) + b;
+  },
+  easeInQuint: function (t, b, c, d) {
+  	return c*(t/=d)*t*t*t*t + b;
+  },
+  easeOutQuint: function (t, b, c, d) {
+  	return c*((t=t/d-1)*t*t*t*t + 1) + b;
+  },
+  easeInOutQuint: function (t, b, c, d) {
+  	if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
+  	return c/2*((t-=2)*t*t*t*t + 2) + b;
+  },
+  easeInSine: function (t, b, c, d) {
+  	return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
+  },
+  easeOutSine: function (t, b, c, d) {
+  	return c * Math.sin(t/d * (Math.PI/2)) + b;
+  },
+  easeInOutSine: function (t, b, c, d) {
+  	return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
+  },
+  easeInExpo: function (t, b, c, d) {
+  	return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
+  },
+  easeOutExpo: function (t, b, c, d) {
+  	return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
+  },
+  easeInOutExpo: function (t, b, c, d) {
+  	if (t==0) return b;
+  	if (t==d) return b+c;
+  	if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
+  	return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
+  },
+  easeInCirc: function (t, b, c, d) {
+  	return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
+  },
+  easeOutCirc: function (t, b, c, d) {
+  	return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
+  },
+  easeInOutCirc: function (t, b, c, d) {
+  	if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
+  	return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
+  },
+  easeInElastic: function (t, b, c, d) {
+  	var s=1.70158;var p=0;var a=c;
+  	if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
+  	if (a < Math.abs(c)) { a=c; var s=p/4; }
+  	else var s = p/(2*Math.PI) * Math.asin (c/a);
+  	return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
+  },
+  easeOutElastic: function (t, b, c, d) {
+  	var s=1.70158;var p=0;var a=c;
+  	if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
+  	if (a < Math.abs(c)) { a=c; var s=p/4; }
+  	else var s = p/(2*Math.PI) * Math.asin (c/a);
+  	return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
+  },
+  easeInOutElastic: function (t, b, c, d) {
+  	var s=1.70158;var p=0;var a=c;
+  	if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
+  	if (a < Math.abs(c)) { a=c; var s=p/4; }
+  	else var s = p/(2*Math.PI) * Math.asin (c/a);
+  	if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
+  	return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
+  },
+  easeInBack: function (t, b, c, d, s) {
+  	if (s == undefined) s = 1.70158;
+  	return c*(t/=d)*t*((s+1)*t - s) + b;
+  },
+  easeOutBack: function (t, b, c, d, s) {
+  	if (s == undefined) s = 1.70158;
+  	return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
+  },
+  easeInOutBack: function (t, b, c, d, s) {
+  	if (s == undefined) s = 1.70158;
+  	if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
+  	return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
+  },
+  easeInBounce: function (t, b, c, d) {
+  	return c - module.exports.easeOutBounce (d-t, 0, c, d) + b;
+  },
+  easeOutBounce: function (t, b, c, d) {
+  	if ((t/=d) < (1/2.75)) {
+  		return c*(7.5625*t*t) + b;
+  	} else if (t < (2/2.75)) {
+  		return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
+  	} else if (t < (2.5/2.75)) {
+  		return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
+  	} else {
+  		return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
+  	}
+  },
+  easeInOutBounce: function (t, b, c, d) {
+  	if (t < d/2) return module.exports.easeInBounce (t*2, 0, c, d) * .5 + b;
+  	return module.exports.easeOutBounce (t*2-d, 0, c, d) * .5 + c*.5 + b;
+  }
+}

public/components/Footer.jsx

@@ -11,13 +11,14 @@
  */
 
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 const FooterLink = function(props) {
   return (
     <span className="c-footer__link">
-      <a href={props.to} className="c-footer__link-link">
+      <Link to={props.to} className="c-footer__link-link">
         {props.children}
-      </a>
+      </Link>
     </span>
   )
 }
@@ -30,16 +31,19 @@ class Footer extends React.Component {
   render() {
     let year = new Date().getFullYear();
     return (
-      <footer className="c-footer">
+      <div className="c-footer__container">
-        <span className="c-footer__copyright">
+        <div className="c-footer__ghost"></div>
-          2012 ~ {year} | Dominic Masters.
-        </span>
 
-        <nav className="c-footer__links">
+        <footer className="c-footer">
-          <FooterLink to="/">Privacy Policy</FooterLink>
+          <span className="c-footer__copyright">
-          <FooterLink to="/">Contact Us</FooterLink>
+            2012 ~ {year} | Dominic Masters.
-        </nav>
+          </span>
-      </footer>
+
+          <nav className="c-footer__links">
+            <FooterLink to="/">Privacy Policy</FooterLink>
+          </nav>
+        </footer>
+      </div>
     )
   }
 }

public/components/components/Button.jsx

@@ -0,0 +1,66 @@
+/*
+ *  Button
+ *    Button
+ *
+ *  Dependencies:
+ *    styles/objects/_button.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/03/07
+ */
+import React from 'react';
+
+import { Link, NavLink } from 'react-router-dom';
+
+class Button extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let element;
+    let elementType = "button";
+    let children = this.props.children;
+    let type = "button";
+    let clazz = "o-button";
+
+    let props = Object.assign({}, this.props);
+
+    //Determine Button type
+    if(props.submit) {
+      type = "submit";
+      delete props.submit;
+    }
+    if(props.reset) {
+      type = "reset";
+      delete props.reset;
+    }
+    props.type = type;//Set onto type
+
+    //Link?
+    if(typeof props.to !== typeof undefined) {
+      elementType = NavLink;
+      delete props.type;
+    }
+
+    if(typeof props.href !== typeof undefined) {
+      elementType = "a";
+      delete props.type;
+    }
+
+    //Clazzes
+    if(this.props.style) clazz += " o-button--style-" + this.props.style;
+    if(this.props.className) clazz += " " + this.props.className;
+    props.className = clazz;
+
+    //Create element
+    element = React.createElement(
+      elementType,
+      props,
+      children
+    );
+    return element;
+  }
+}
+
+export default Button;

public/components/forms/ContactForm.jsx

@@ -0,0 +1,41 @@
+/*
+ *  Contact Form
+ *    Contact form.
+ *
+ *  Version:
+ *    1.0.0 - 2018/03/06
+ */
+
+import React from 'react';
+
+import { Form, InputGroup, TextInput } from './Form';
+import Button from './../components/Button';
+
+class ContactForm extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <Form className={this.props.className}>
+        <InputGroup title="Name">
+          <TextInput placeholder="Enter your name." />
+        </InputGroup>
+
+        <InputGroup title="Email">
+          <TextInput type="email" placeholder="Enter your email address." />
+        </InputGroup>
+
+        <InputGroup title="Message">
+          <TextInput multiline placeholder="Enter your message here." />
+        </InputGroup>
+
+        <Button to="/">Home</Button>
+        <Button submit>Contact</Button>
+      </Form>
+    );
+  }
+}
+
+export default ContactForm;

public/components/forms/Form.jsx

@@ -0,0 +1,84 @@
+/*
+ *  Form
+ *    Form.
+ *
+ *  Version:
+ *    1.0.0 - 2018/03/06
+ */
+
+import React from 'react';
+
+//Form
+class Form extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let clazz = "c-form";
+    if(this.props.className) clazz += " " + this.props.className;
+    return (
+      <form className={clazz}>
+        {this.props.children}
+      </form>
+    )
+  }
+}
+
+//InputGroup
+class InputGroup extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div className="c-form__group">
+        <label className="c-form__label">{this.props.title}</label>
+        { this.props.children }
+      </div>
+    );
+  }
+}
+
+//Input
+class TextInput extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let element;
+    let elementType = "input";
+    let children;
+
+    let props = Object.assign({
+
+    }, this.props);
+
+    let clazz = "c-form-input ";;
+
+    if(this.props.multiline) {
+      elementType = "textarea";
+      children = this.props.value;
+      clazz += "c-form-input--multiline ";
+
+      delete props.type;
+      delete props.multiline;
+    } else {
+      props.value = this.props.value;
+    }
+
+    if(this.props.className) clazz += this.props.className;
+    props.className = clazz;
+
+    element = React.createElement(
+      elementType,
+      props,
+      children
+    );
+    return element;
+  }
+}
+
+export { Form, InputGroup, TextInput };

public/components/navigation/Menu.jsx

@@ -11,14 +11,76 @@
 
 import React from 'react';
 
+import FontAwesomeIcon from '@fortawesome/react-fontawesome'
+import { NavLink } from 'react-router-dom';
+import { faBars } from '@fortawesome/fontawesome-free-solid'
+
+
+const MenuGroup = function(props) {
+  return (
+    <nav className="c-menu__group">
+      <h1 className="c-menu__group-title">{props.title}</h1>
+      {props.children}
+    </nav>
+  )
+}
+
+const MenuItem = function(props) {
+  return (
+    <NavLink className="c-menu__item" to={props.to}>
+      {props.children}
+    </NavLink>
+  )
+}
+
+
 class Menu extends React.Component {
   constructor(props) {
     super(props);
+    this.state = {
+      open: false
+    }
+  }
+
+  toggleMenu() {
+    this.setState({
+      open: !this.state.open
+    });
   }
 
   render() {
+    if(this.state.open) {
+      document.body.classList.add('is-menu-open');
+    } else {
+      document.body.classList.remove('is-menu-open');
+    }
+
+
     return (
-      <nav className="c-menu">
+      <nav className="c-menu__wrapper open">
+        <div className="c-menu">
+          <div className="c-menu__fix">
+            <div className={"c-menu__container" + (this.state.open === true ? " open": "")}>
+              <div className="c-menu__body">
+                <div className="c-menu__fix c-menu__groups">
+
+                  <MenuGroup title="Get in touch">
+                    <MenuItem to="/contact">Contact Me</MenuItem>
+                  </MenuGroup>
+
+                  <MenuGroup title="Legal Stuff">
+                    <MenuItem to="/privacy-policy">Privacy Policy</MenuItem>
+                  </MenuGroup>
+
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <button type="button" className="c-menu__button" onClick={this.toggleMenu.bind(this)}>
+          <FontAwesomeIcon icon={faBars} />
+        </button>
       </nav>
     )
   }

public/components/navigation/Navbar.jsx

@@ -11,15 +11,14 @@
  */
 
 import React from 'react';
+import { Link, NavLink } from 'react-router-dom';
+import Menu from './Menu';
 
-import FontAwesomeIcon from '@fortawesome/react-fontawesome'
+const NavbarLink = function(props) {
-import { faBars } from '@fortawesome/fontawesome-free-solid'
-
-const NavLink = function(props) {
   return (
-    <a href={props.to} className="c-navbar__link">
+    <NavLink exact to={props.to} className="c-navbar__link" activeClassName="active">
       <span className="c-navbar__link-text">{props.children}</span>
-    </a>
+    </NavLink>
   )
 }
 
@@ -31,17 +30,15 @@ class Navbar extends React.Component {
   render() {
     return (
       <nav className="c-navbar">
-        <button type="button" className="c-navbar__menu-button">
+        <Menu open />
-          <FontAwesomeIcon icon={faBars} />
-        </button>
 
-        <a href="#" className="c-navbar__logo-container">
+        <Link to="/" className="c-navbar__logo-container">
           <img src={ require('./../../images/logo.svg') } className="c-navbar__logo" alt="domsPlace" />
-        </a>
+        </Link>
 
         <div className="c-navbar__links">
-          <NavLink to="/">Home</NavLink>
+          <NavbarLink exact to="/">Home</NavbarLink>
-          <NavLink to="/contact">Contact</NavLink>
+          <NavbarLink to="/contact">Contact</NavbarLink>
         </div>
       </nav>
     )

public/components/pages/ContactPage.jsx

@@ -0,0 +1,43 @@
+/*
+ *  Contact Page
+ *    Not the Homepage.
+ *
+ *  Dependencies:
+ *    styles/components/_page--style-contact.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/03/03
+ */
+
+import React from 'react';
+
+import Page from './../Page';
+import PhoneSection from './../sections/PhoneSection';
+import BodySection from './../sections/BodySection';
+
+import ContactForm from './../forms/ContactForm';
+
+class ContactPage extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <Page>
+        <PhoneSection />
+        <BodySection>
+          <h1>Contact</h1>
+          <div className="c-page--style-container__split">
+            <p className="c-page--style-container__split-part">
+              Want to get ahold of me and other lorem ipsum dolor?
+            </p>
+            <ContactForm className="c-page--style-container__split-part" />
+          </div>
+        </BodySection>
+      </Page>
+    )
+  }
+}
+
+export default ContactPage;

public/components/sections/BlankPromo.jsx

@@ -0,0 +1,28 @@
+/*
+ *  BlankPromo
+ *    Blank Promo section.
+ *
+ *  Dependencies:
+ *    styles/components/_section--style-blank-promo.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/02/24
+ */
+
+import React from 'react';
+import Section from './../Section';
+
+class BlankPromo extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <Section section="blank-promo" full>
+      </Section>
+    )
+  }
+}
+
+export default BlankPromo;

public/components/sections/PhoneSection.jsx

@@ -0,0 +1,62 @@
+/*
+ *  Poly
+ *    Poly styled section.
+ *
+ *  Dependencies:
+ *    styles/components/_section--style-phone.scss
+ *
+ *  Version:
+ *    1.1.0 - 2018/03/10
+ */
+import React from 'react';
+import ThreeSection from './ThreeSection';
+import * as THREE from 'three';
+import * as Easing from './../../animation/Easing';
+
+import PhoneModel from './../../3d/phone.json';
+
+class PhoneSection extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  onSetup(scene) {
+    this.loader = new THREE.JSONLoader();
+    this.data = this.loader.parse(PhoneModel);
+
+    this.material = new THREE.MeshLambertMaterial({
+      color: 0xff66ab
+    });
+
+    this.mesh = new THREE.Mesh(this.data.geometry, this.material);
+    this.mesh.position.z = 2;
+    scene.add(this.mesh);
+  }
+
+  getV(j) {
+    var x = new Date().getTime() % j;
+    var h = x;
+    if(x > (j/2)) h = (j/2) - (x - (j/2));
+    h *= 2;
+    return Easing.easeInOutQuart(h, 0, 1, j);
+  }
+
+  onRender(diff) {
+    this.mesh.rotation.set(
+      THREE.Math.degToRad(this.getV(25000)*5),
+      THREE.Math.degToRad(this.getV(15000)*10),
+      THREE.Math.degToRad(this.getV(40000)*20)
+    );
+  }
+
+  render() {
+    return (
+      <ThreeSection
+        onRender={this.onRender.bind(this)}
+        onSetup={this.onSetup.bind(this)}
+      />
+    )
+  }
+}
+
+export default PhoneSection;

public/components/sections/Poly.jsx

@@ -8,9 +8,8 @@
  *  Version:
  *    1.0.0 - 2018/02/24
  */
-
 import React from 'react';
-import Section from './../Section';
+import ThreeSection from './ThreeSection';
 import * as THREE from 'three';
 
 const CUBES = [
@@ -57,24 +56,17 @@ class Poly extends React.Component {
     super(props);
   }
 
-  componentDidMount() {
+  onSetup(scene) {
-    if(typeof this.scene !== typeof undefined) return;
-    this.scene = new THREE.Scene();
-    this.camera = new THREE.PerspectiveCamera(17, window.innerWidth / window.innerHeight, 0.1, 1000 );
-    this.isAlive = true;
-
-    this.render = new THREE.WebGLRenderer({canvas: this.refs.canvas, alpha: true});
-    this.render.setSize(window.innerWidth, window.innerHeight);
-
     this.cubes = [];
     this.outlines = [];
+
     for(var i = 0; i < CUBES.length; i++) {
       let c = CUBES[i];
 
       let geometry = new THREE.BoxGeometry(c.size[0],c.size[1],c.size[2]);
-
       let material = new THREE.MeshLambertMaterial( { color: c.color } );
       let cube = new THREE.Mesh(geometry, material);
+
       cube.position.x = c.pos[0];
       cube.position.y = c.pos[1];
       cube.position.z = c.pos[2];
@@ -82,7 +74,8 @@ class Poly extends React.Component {
       cube.rotation.y = Math.random()*360;
       cube.rotation.z = Math.random()*360;
       cube.velocity = c.velocity;
-      this.scene.add(cube);
+
+      scene.add(cube);
       this.cubes.push(cube);
 
       if(typeof c.outline !== typeof undefined) {
@@ -94,50 +87,13 @@ class Poly extends React.Component {
         outlineMesh.scale.multiplyScalar(1.05);
 
         this.outlines[i] = outlineMesh;
-        this.scene.add( outlineMesh );
+        scene.add( outlineMesh );
       }
     }
 
-    this.camera.position.z = 5;
-
-    this.ambient1 = new THREE.AmbientLight(0xFFCCFF, 0.2);
-    this.scene.add(this.ambient1);
-    this.ambient2 = new THREE.AmbientLight(0xFFFFFF, 0.5);
-    this.scene.add(this.ambient2);
-
-    this.light = new THREE.DirectionalLight(0x22BBFF, 0.5);
-    this.light.position.x = this.camera.position.x;
-    this.light.position.y = this.camera.position.y;
-    this.light.position.z = this.camera.position.z + 8;
-    this.scene.add(this.light);
-
-    this.onFrame();
   }
 
-  componentWillUnmount() {
+  onRender(diff) {
-    this.isAlive = false;
-  }
-
-  onFrame() {
-    if(!this.isAlive) return;
-
-    let now = new Date();
-    let width = this.refs.canvasSpace.clientWidth;
-    let height = this.refs.canvasSpace.clientHeight;
-    let diff = now.getTime() - (this.lastTime || new Date()).getTime();
-    diff = diff / 1000;
-
-    let hfov = 95;
-    let hfovRad = hfov * Math.PI / 180;
-    let vfovRad = 2*Math.atan(Math.tan(hfovRad/2)*height/width);
-
-    this.render.setSize(width, height);
-    this.camera.aspect = width / height;
-    this.camera.fov = vfovRad * 180 / Math.PI;
-    this.camera.updateProjectionMatrix();
-    requestAnimationFrame(this.onFrame.bind(this));
-    this.render.render(this.scene, this.camera);
-
     for(var i = 0; i < this.cubes.length; i++) {
       let e = this.cubes[i];
       let o = this.outlines[i];
@@ -153,16 +109,14 @@ class Poly extends React.Component {
         o.rotation.z = e.rotation.z;
       }
     }
-    this.lastTime = now;
   }
 
   render() {
     return (
-      <Section section="poly" full>
+      <ThreeSection
-        <div className="c-section--style-poly__canvas" ref="canvasSpace"></div>
+        onRender={this.onRender.bind(this)}
-        <canvas ref="canvas" className="c-section--style-poly__canvas">
+        onSetup={this.onSetup.bind(this)}
-        </canvas>
+      />
-      </Section>
     )
   }
 }

public/components/sections/ThreeSection.jsx

@@ -0,0 +1,91 @@
+/*
+ *  ThreeJS Section
+ *    Section for Three JS.
+ *
+ *  Version:
+ *    1.0.0 - 2018/03/10
+ */
+
+import React from 'react';
+import Section from './../Section';
+import * as THREE from 'three';
+
+class ThreeSection extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    if(typeof this.scene !== typeof undefined) return;
+    this.scene = new THREE.Scene();
+    this.camera = new THREE.PerspectiveCamera(17, window.innerWidth / window.innerHeight, 0.1, 1000 );
+    this.isAlive = true;
+
+    this.render = new THREE.WebGLRenderer({canvas: this.refs.canvas, alpha: true});
+    this.render.setSize(window.innerWidth, window.innerHeight);
+
+    this.camera.position.z = 5;
+
+    this.ambient1 = new THREE.AmbientLight(0xFFCCFF, 0.2);
+    this.scene.add(this.ambient1);
+    this.ambient2 = new THREE.AmbientLight(0xFFFFFF, 0.5);
+    this.scene.add(this.ambient2);
+
+    this.light = new THREE.DirectionalLight(0x22BBFF, 0.5);
+    this.light.position.x = this.camera.position.x;
+    this.light.position.y = this.camera.position.y;
+    this.light.position.z = this.camera.position.z + 8;
+    this.scene.add(this.light);
+
+    if(typeof this.props.onSetup !== typeof undefined) {
+      this.props.onSetup(this.scene, this.camera, this.renderer);
+    }
+
+    this.onFrame();
+  }
+
+  componentWillUnmount() {
+    this.isAlive = false;
+  }
+
+  onFrame() {
+    if(!this.isAlive) return;
+
+    let now = new Date();
+    let width = this.refs.canvasSpace.clientWidth;
+    let height = this.refs.canvasSpace.clientHeight;
+    let diff = now.getTime() - (this.lastTime || new Date()).getTime();
+    diff = diff / 1000;
+
+    let hfov = 95;
+    let hfovRad = hfov * Math.PI / 180;
+    let vfovRad = 2*Math.atan(Math.tan(hfovRad/2)*height/width);
+
+    this.render.setSize(width, height);
+    this.render.setPixelRatio(window.devicePixelRatio);
+
+    this.camera.aspect = width / height;
+    this.camera.fov = vfovRad * 180 / Math.PI;
+    this.camera.updateProjectionMatrix();
+    requestAnimationFrame(this.onFrame.bind(this));
+
+    if(typeof this.props.onRender !== typeof undefined) {
+      this.props.onRender(diff);
+    }
+
+    this.render.render(this.scene, this.camera);
+    this.lastTime = now;
+  }
+
+  render() {
+    return (
+      <Section section="three" full>
+        <div className="c-section--style-three__canvas" ref="canvasSpace"></div>
+        <canvas ref="canvas" className="c-section--style-three__canvas">
+        </canvas>
+      </Section>
+    )
+  }
+}
+
+export default ThreeSection;

public/index.jsx

@@ -4,10 +4,22 @@ import 'babel-polyfill';
 
 import React from 'react';
 import ReactDOM, { render } from 'react-dom';
+import { createStore, applyMiddleware } from 'redux';
+import { Provider } from 'react-redux';
 
 import App from './App.jsx';
 import Styles from './styles/index.scss';
+import rootReducer from './reducers/rootReducer';
 
+//Create our store
+const store = createStore(rootReducer);
+const unsubscribe = store.subscribe(() => {
+  console.log(store.getState());
+});
+
+//Render app and supply provider for store.
 render((
-  <App />
+  <Provider store={store}>
+    <App />
+  </Provider>
 ), document.getElementById("app"));

public/language/Language.jsx

@@ -0,0 +1,22 @@
+import enAU from './en-AU.jsx';
+
+const LANGUAGES = {
+  'en-AU': enAU
+}
+
+class Language {
+  constructor() {
+    this.setLanguage("en-AU");
+  }
+
+  setLanguage(lang) {
+    this.data = LANGUAGES[lang];
+  }
+
+  get(key) {
+
+  }
+}
+
+const lang = new Language();
+export default lang;

public/language/en-AU.jsx

@@ -0,0 +1,3 @@
+module.exports = {
+  ""
+}

public/reducers/rootReducer.js

@@ -0,0 +1,12 @@
+'use strict';
+import {combineReducers} from 'redux';
+
+//Import Reducers
+
+//Create our Reducer
+const rootReducer = combineReducers({
+
+});
+
+//Export the root reducer
+export default rootReducer;

public/styles/components/_app.scss

@@ -14,6 +14,7 @@
 .c-app {
   width: 100%;
   height: 100%;
+  min-height: 100vh;
   overflow-x: hidden;
   position: relative;
 }

public/styles/components/_footer.scss

@@ -10,15 +10,21 @@
  *  Version:
  *    1.0.0 - 2018/03/03
  */
-$c-footer--text-color: black;
+$c-footer--text-color: $s-color--text;
-$c-footer--background-color: white;
+$c-footer--background-color: $s-color--background-default;
+
+.c-footer__ghost {
+  margin-top: 5em;
+  min-height: 3em;
+}
 
 .c-footer {
-  margin-top: 5em;
   width: 100%;
   background: $c-footer--background-color;
   @extend %t-flexbox;
   @include t-flex-wrap(wrap);
+  position: absolute;
+  bottom: 0;
 }
 
 .c-footer__copyright {

public/styles/components/_form.scss

@@ -0,0 +1,35 @@
+/*
+ *  Form
+ *    Styles for form elements
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/03/07
+ */;
+ $c-form--shadow-offset: 5px;
+
+.c-form {
+}
+
+.c-form__label {
+  display: block;
+  padding-bottom: 0.25em;
+}
+
+.c-form__group {
+  margin-bottom: 1.5em;
+}
+
+//Form input
+.c-form-input {
+  width: 400px;
+  max-width: 100%;
+  border: $s-color--border--default;
+  padding: 0.5em;
+  @include t-box-shadow(-$c-form--shadow-offset, $c-form--shadow-offset, 0px, rgba(0, 0, 0, 0.5));
+}
+
+.c-form-input--multiline {
+  min-height: 10em;
+}

public/styles/components/_menu.scss

@@ -3,10 +3,113 @@
  *    Styles for the menu
  *
  *  Dependencies:
+ *    styles/settings/animation.scss
+ *    styles/settings/responsive.scss
+ *    styles/tools/_mixin.absolute-centering.scss
  *
  *  Version:
- *    1.0.0 - 2018/03/01
+ *    1.0.0 - 2018/03/04
  */
-.c-menu {
+$c-menu--z-index: 1000;
+$c-menu--button--z-index: $c-menu--z-index + 10;
+$c-menu--list--z-index: $c-menu--z-index + 20;
+
+body.is-menu-open {
+  overflow: hidden;
+}
+
+.c-menu__wrapper {
   position: relative;
 }
+
+.c-menu__button {
+  font-size: 1.5em;
+  padding: 0.5em 0.75em;
+  position: relative;
+  z-index: $c-menu--button--z-index;
+}
+
+.c-menu {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  border-left: 1px solid red;
+}
+
+.c-menu__fix {
+  position: relative;
+}
+
+.c-menu__container {
+  @extend %t-absolute-center-x-y;
+  width: 0px;
+  height: 0px;
+  border-radius: 50%;
+  z-index: $c-menu--z-index;
+  background: white;
+  overflow: hidden;
+  transition:
+    width 0.2s $s-animation--ease-out-curve,
+    height 0.2s $s-animation--ease-out-curve,
+  ;
+
+  &.open {
+    width: 250vmax;
+    height: 250vmax;
+  }
+}
+
+.c-menu__body {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: $c-menu--list--z-index;
+}
+
+.c-menu__groups {
+  @extend %t-flexbox;
+  @include t-flex-wrap(wrap);
+  /*position: absolute;
+  left: 2em;
+  top: -1.5em;*/
+  top: 0l;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  overflow-y: auto;
+}
+
+.c-menu__group {
+  padding: 1em;
+  width: 100%;
+}
+
+.c-menu__group-title {
+
+}
+
+.c-menu__item {
+  display: block;
+}
+
+@include t-media-query($s-xsmall-up) {
+  .c-menu__button {
+    padding: 0.75em 1em;
+  }
+
+  .c-menu__group {
+    width: 50%;
+  }
+}
+
+@include t-media-query($s-medium-up) {
+  .c-menu__group {
+    width: (100% / 3);
+  }
+}
+
+@include t-media-query($s-large-up) {
+  .c-menu__group {
+    width: 25%;
+  }
+}

public/styles/components/_navbar.scss

@@ -14,8 +14,7 @@
  *    1.0.0 - 2018/02/23
  */
 $c-navbar--z-index: 100;
-$c-navbar--link-border: $s-border--default;
+$c-navbar--background: $s-color--background-default;
-$c-navbar--background: white;
 $c-navbar--link-offset: 5px;
 
 .c-navbar {
@@ -29,12 +28,6 @@ $c-navbar--link-offset: 5px;
   @extend %t-flexbox;
 }
 
-//Menu Button
-.c-navbar__menu-button {
-  font-size: 1.5em;
-  padding: 0.5em 0.75em;
-}
-
 //Logo
 .c-navbar__logo-container {
   @include t-align-self(center);
@@ -51,27 +44,26 @@ $c-navbar--link-offset: 5px;
   width: 100%;
   text-align: right;
   display: none;
+  @include t-justify-content(flex-end);
 }
 
 .c-navbar__link {
   @extend %s-font--navigation;
-  height: 100%;
 
   font-size: 1.2em;
   padding: 0 1.5em;
-  display: inline-table;
+
+  @extend %t-inline-flex;
+  @include t-align-items(center);
+
+
+  &.active {
+    border-bottom: $s-thickness--border-thick solid $s-color--links;
+  }
 }
 
 .c-navbar__link-text {
-  display: table-cell;
+  //vertical-align: middle;
-  vertical-align: middle;
-}
-
-//Responsive queries
-@include t-media-query($s-xsmall-up) {
-  .c-navbar__menu-button {
-    font-size: 2em;
-  }
 }
 
 @include t-media-query($s-small-up) {
@@ -83,12 +75,11 @@ $c-navbar--link-offset: 5px;
   }
 
   .c-navbar__links {
-    displaY: block;
+    @include t-flexbox;
   }
 
   .c-navbar__link {
-
+    background: $s-color--background-default;
-    background: white;
     transition: all 0.2s $s-animation--ease-out-curve;
     margin-left: $c-navbar--link-offset;
     @include t-translate(0em, 0em);

public/styles/components/_page--style-contact.scss

@@ -0,0 +1,32 @@
+/*
+ *  Contact Page
+ *    Styles for page elements
+ *
+ *  Dependencies:
+ *    styles/settings/responsive.scss
+ *    styles/tools/_repsonsive.scss
+ *    styles/tools/_flex.scss
+ *    styles/components/_style.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/03/10
+ */
+.c-page--style-contact {
+
+}
+
+.c-page--style-container__split {
+  @extend %t-flexbox;
+  @include t-flex-wrap(wrap);
+}
+
+.c-page--style-container__split-part {
+  width: 100%;
+}
+
+
+@include t-media-query($s-small-up) {
+  .c-page--style-container__split {
+    @include t-flex-wrap(nowrap);
+  }
+}

public/styles/components/_section--style-blank-promo.scss

@@ -0,0 +1,12 @@
+/*
+ *  Blank Promo Section Style
+ *    Styles for blank promo style section
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/02/28
+ */
+.c-section--style-blank-promo {
+  height: 30vmin;
+}

public/styles/components/_section--style-body.scss

@@ -18,6 +18,7 @@
 @include t-media-query($s-small-up) {
   .c-section--style-body {
     margin-left: 4%;
+    width: 96%;
     @include t-box-shadow(-10px, 10px, 0px, rgba(0, 0, 0, 0.5));
   }
 }

public/styles/components/_section--style-poly.scss

@@ -8,18 +8,3 @@
  *  Version:
  *    1.0.0 - 2018/02/28
  */
-.c-section--style-poly {
-  height: 60vmin;
-  position: relative;
-  z-index: -1;
-  overflow-y: visible;
-}
-
-.c-section--style-poly__canvas {
-  width: 100%;
-  height: 100%;
-  height: 80vmin;
-  top: 0;
-  left: 0;
-  position: absolute;
-}

public/styles/components/_section--style-three.scss

@@ -0,0 +1,25 @@
+/*
+ *  Section Style Three
+ *    Styles for Three JS section elements
+ *
+ *  Dependencies:
+ *    styles/components/_section.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/02/28
+ */
+.c-section--style-three {
+  height: 60vmin;
+  position: relative;
+  z-index: -1;
+  overflow-y: visible;
+}
+
+.c-section--style-three__canvas {
+  width: 100%;
+  height: 100%;
+  height: 80vmin;
+  top: 0;
+  left: 0;
+  position: absolute;
+}

public/styles/index.scss

@@ -22,6 +22,8 @@
 @import './tools/_responsive.scss';
 @import './tools/_transform.scss';
 
+@import './tools/_mixin.absolute-centering.scss';
+
 //Resets
 @import './../../node_modules/normalize.css/normalize.css';
 
@@ -35,17 +37,22 @@
 @import './elements/_table.scss';
 
 //Objects
+@import './objects/_button.scss';
 
 //Components
 @import './components/_app.scss';
 @import './components/_footer.scss';
+@import './components/_form.scss';
 @import './components/_header.scss';
 @import './components/_menu.scss';
 @import './components/_navbar.scss';
 @import './components/_page.scss';
+@import './components/_page--style-contact.scss';
 @import './components/_section.scss';
+@import './components/_section--style-blank-promo.scss';
 @import './components/_section--style-body.scss';
 @import './components/_section--style-poly.scss';
+@import './components/_section--style-three.scss';
 
 //Utilities
 

public/styles/objects/_button.scss

@@ -0,0 +1,35 @@
+/*
+ *  Form
+ *    Styles for form elements
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/03/07
+ */
+$c-button--shadow-offset: 5px;
+$c-button--background: white;
+$c-button--border: $s-color--border--default;
+$c-button--text: $s-color--text;
+
+.o-button {
+  display: inline-block;
+  padding: 0.5em 1em;
+  border: $c-button--border;
+  @include t-box-shadow(-$c-button--shadow-offset, $c-button--shadow-offset, 0px, rgba(0, 0, 0, 0.5));
+  background: $c-button--background;
+  text-decoration: none;
+  color: $c-button--text;
+  transition: all 0.1s $s-animation--ease-out-curve;
+
+  &:hover {
+    text-decoration: none;
+    color: $c-button--text;
+    @include t-box-shadow(-0, 0, 0px, rgba(0, 0, 0, 0.5));
+    @include t-transform(translate(-$c-button--shadow-offset, $c-button--shadow-offset))
+  }
+
+  ~ .o-button {
+    margin-left: $c-button--shadow-offset * 2;
+  }
+}

public/styles/settings/colors.scss

@@ -11,12 +11,14 @@
 //Fonts
 $s-color--text: black;
 $s-color--links: #FC78DE;
-$s-color--links-hover: lighten($s-color--links, 20%);
+$s-color--links-hover: $s-color--links;
 
 //Backgrounds
-$s-color--background-default: white;
+$s-color--background-default: #FEFCF8;
 $s-color--background-top: #2BF;
 $s-color--background-bottom: #FCF;
 
 //Borders
-$s-border--default: 1px solid #DDD;
+$s-thickness--border-default: 1px;
+$s-thickness--border-thick: 3px;
+$s-color--border--default: $s-thickness--border-default solid #DDD;

public/styles/tools/_mixin.absolute-centering.scss

@@ -0,0 +1,40 @@
+/*
+ *  Absolute Position Centering
+ *    Provides mixins to center using absolute positioning and transforms
+ *
+ *  Dependencies:
+ *    tools/_mixin.transform.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/01/29
+ */
+@mixin t-absolute-center-x-y() {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  @include t-translate(-50%, -50%);
+}
+
+@mixin t-absolute-center-x() {
+  position: absolute;
+  left: 50%;
+  @include t-translate-x(-50%);
+}
+
+@mixin t-absolute-center-y() {
+  position: absolute;
+  top: 50%;
+  @include t-translate-y(-50%);
+}
+
+%t-absolute-center-x-y {
+  @include t-absolute-center-x-y();
+}
+
+%t-absolute-center-x {
+  @include t-absolute-center-x();
+}
+
+%t-absolute-center-y {
+  @include t-absolute-center-y();
+}