Last commit before background change

public/App.jsx

@@ -11,6 +11,7 @@
  */
 import React from 'react';
 import { HashRouter, Route, Switch } from 'react-router-dom';
+import { withRouter } from 'react-router-dom';
 
 import Header from './components/Header';
 import Footer from './components/Footer';
@@ -33,32 +34,43 @@ class App extends React.Component {
     super(props);
   }
 
+  componentDidMount() {
+    this.historyListener = this.props.history.listen(this.onChange.bind(this));
+  }
+
+  onChange(location, action) {
+    console.log("on change");
+    window.scrollTo(0, 0)
+  }
+
+  componentWillUnmount() {
+
+  }
+
   render() {
     return (
-      <HashRouter>
-        <div className="c-app">
-            <Header />
+      <div className="c-app">
+        <Header />
 
-            <Switch>
-              <Route exact path="/" component={IndexPage} />
+        <Switch>
+          <Route exact path="/" component={IndexPage} />
 
-              <Route exact path="/about" component={AboutPage} />
-              <Route exact path="/about/programming" component={ProgrammingPage} />
-              <Route exact path="/about/api" component={APIPage} />
-              <Route exact path="/about/other" component={OtherSkillsPage} />
+          <Route exact path="/about" component={AboutPage} />
+          <Route exact path="/about/programming" component={ProgrammingPage} />
+          <Route exact path="/about/api" component={APIPage} />
+          <Route exact path="/about/other" component={OtherSkillsPage} />
 
-              <Route exact path="/privacy-policy" component={PrivacyPolicyPage} />
-              <Route exact path="/privacy" component={PrivacyPolicyPage} />
-              <Route exact path="/policy" component={PrivacyPolicyPage} />
+          <Route exact path="/privacy-policy" component={PrivacyPolicyPage} />
+          <Route exact path="/privacy" component={PrivacyPolicyPage} />
+          <Route exact path="/policy" component={PrivacyPolicyPage} />
 
-              <Route exact path="/contact" component={ContactPage} />
-            </Switch>
+          <Route exact path="/contact" component={ContactPage} />
+        </Switch>
 
-            <Footer />
-        </div>
-      </HashRouter>
+        <Footer />
+      </div>
     )
   }
 }
 
-export default App;
+export default withRouter(App);

public/components/pages/IndexPage.jsx

@@ -28,7 +28,8 @@ class IndexPage extends React.Component {
       <Page>
         <Poly />
 
-        <BodySection>
+        <BodySection unpadded>
+          <h1>Lorem</h1>
         </BodySection>
       </Page>
     )

public/components/sections/BodySection.jsx

@@ -21,11 +21,15 @@ class BodySection extends React.Component {
     let children;
 
     if(this.props.children) {
-      children = (
-        <div className="c-body-section__wrapper">
-          {this.props.children}
-        </div>
-      );
+      if(this.props.unpadded) {
+        children = this.props.children;  
+      } else {
+        children = (
+          <div className="c-body-section__wrapper">
+            {this.props.children}
+          </div>
+        );
+      }
     }
 
     return (

public/components/sections/CenterSection.jsx

@@ -0,0 +1,28 @@
+/*
+ *  Center Section
+ *    Section for centered items.
+ *
+ *  Dependencies:
+ *    styles/components/_section--style-center.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/03/21
+ */
+
+import React from 'react';
+import Section from './../Section';
+
+class CenterSection extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <Section section="center" className={this.props.className}>
+      </Section>
+    )
+  }
+}
+
+export default CenterSection;

public/components/sections/Poly.jsx

@@ -11,43 +11,51 @@
 import React from 'react';
 import ThreeSection from './ThreeSection';
 import * as THREE from 'three';
+import pvm from './../../3d/pvm.json';
+import staticGIF from './../../images/static.gif';
 
 const CUBES = [
   {
     size: [1, 1, 1],
     pos: [-4,-0.3,1],
     velocity: [0.3, 0.1, 0],
-    color: 0xFFFFFF
+    color: 0xFFFFFF,
+    pvm: true
   },
   {
     size: [1, 1, 1],
     pos: [1,-0.8,-0.3],
     velocity: [-0.3, 0.05, 0.1],
-    color: 0xCCFFFF
+    color: 0xCCFFFF,
+    pvm: true
   },
   {
     size: [1, 1, 1],
     pos: [-0.8,0.4,-5],
     velocity: [0, -0.1, 0.1],
-    color: 0xf7ffb7
+    color: 0xf7ffb7,
+    pvm: true
   },
   {
     size: [1, 1, 1],
     pos: [6,1,-2],
     velocity: [0.2, 0.5, 0],
-    color: 0xffb7ee
+    color: 0xffb7ee,
+    pvm: true
   },
   {
     size: [1, 1, 1],
     pos: [-3,1,0.3],
     velocity: [0.2, 0.5, 0],
-    color: 0xaaffb9
+    color: 0xaaffb9,
+    pvm: true
   },
   {
     size: [0.8, 0.8, 0.8],
     pos: [2.2,1,0.3],
     velocity: [1, 0.1, -0.1],
-    color: 0xff66ab
+    color: 0xff66ab,
+    pvm: true
   }
 ];
 
@@ -60,12 +68,31 @@ class Poly extends React.Component {
     this.cubes = [];
     this.outlines = [];
 
+    this.loader = this.loader || new THREE.ObjectLoader();
+    this.textureLoader = new THREE.TextureLoader();
+
+    this.pvmData = this.pvmData || this.loader.parse(pvm);
+    this.pvmData.scale.multiplyScalar(1.5);
+
+    console.log(staticGIF);
+
     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);
+      let cube;
+      if(c.pvm) {
+        cube = this.pvmData.clone();
+        let children = cube.children[0].children;
+
+        if(typeof this.screenMaterial === typeof undefined) {
+          let child = children[27];//TV Screen
+          this.screenMaterial = child.material;
+        }
+      } else {
+        let geometry = new THREE.BoxGeometry(c.size[0],c.size[1],c.size[2]);
+        let material = new THREE.MeshLambertMaterial( { color: c.color } );
+        cube = new THREE.Mesh(geometry, material);
+      }
 
       cube.position.x = c.pos[0];
       cube.position.y = c.pos[1];
@@ -90,7 +117,6 @@ class Poly extends React.Component {
         scene.add( outlineMesh );
       }
     }
-
   }
 
   onRender(diff) {

public/index.jsx

@@ -6,6 +6,7 @@ import React from 'react';
 import ReactDOM, { render } from 'react-dom';
 import { createStore, applyMiddleware } from 'redux';
 import { Provider } from 'react-redux';
+import { HashRouter, Route, Switch } from 'react-router-dom';
 
 import App from './App.jsx';
 import Styles from './styles/index.scss';
@@ -23,6 +24,8 @@ const unsubscribe = store.subscribe(() => {
 //Render app and supply provider for store.
 render((
   <Provider store={store}>
-    <App />
+    <HashRouter>
+      <App />
+    </HashRouter>
   </Provider>
 ), document.getElementById("app"));

public/styles/components/_menu.scss

@@ -90,6 +90,7 @@ body.is-menu-open {
 
 .c-menu__item {
   display: block;
+  padding: 0.25em 0;
 }
 
 @include t-media-query($s-xsmall-up) {