Refactoring a lot of code

public/3d/scenes/AboutScene.jsx

@@ -0,0 +1,61 @@
+/*
+ *  About Scene.
+ *    About that one lad.
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/04/08
+ */
+import SceneComponent from './SceneComponent';
+import * as THREE from 'three';
+import PVM from './../models/pvm.json';
+import * as Easing from './../../animation/Easing.js';
+
+class AboutScene extends SceneComponent {
+  constructor(props) {
+    super(props);
+  }
+
+  onSetup(scene, camera, renderer) {
+    this.loader = this.loader || new THREE.ObjectLoader();
+
+    this.pvm = this.pvm || this.loader.parse(PVM);
+    if(typeof this.screenMaterial === typeof undefined) {
+      let child = this.pvm.children[0].children[27];//TV Screen
+      this.screenMaterial = child.material;
+    }
+    this.pvm.position.x = 0.7;
+    this.pvm.position.z = -0.7;
+    scene.add(this.pvm);
+  }
+
+  onUpdate(scene, camera, renderer) {
+    var dur = 1500;
+    let time = new Date().getTime();
+    let t = (time % dur) / dur;
+    let h = ((time+dur/4) % dur) / dur;
+
+    let d;
+    let q;
+    if(t < 0.5) {
+      d = Easing.easeInOutQuad(t, 0, 1, 0.5);
+    } else {
+      d = Easing.easeInOutQuad(t-0.5, 1, -1, 0.5);
+    }
+
+    if(h < 0.5) {
+      q = Easing.easeInOutQuad(h, 0, 1, 0.5);
+    } else {
+      q = Easing.easeInOutQuad(h-0.5, 1, -1, 0.5);
+    }
+
+    this.pvm.rotation.x = THREE.Math.degToRad((d*10) - 90);
+    this.pvm.rotation.z = THREE.Math.degToRad(134-(q*2));
+    this.pvm.position.y = (0.5 - q)/11;
+
+    this.screenMaterial.color = new THREE.Color(q/8, q/4, 0.5+q/2);
+  }
+}
+
+export default AboutScene;

public/3d/scenes/SceneComponent.jsx

@@ -1,44 +1,53 @@
 /*
- *  ThreeJS Section
+ *  Scene Component
- *    Section for Three JS.
+ *    About that one lad.
+ *
+ *  Dependencies:
+ *    styles/components/_scene-component.scss
  *
  *  Version:
- *    1.0.0 - 2018/03/10
+ *    1.0.0 - 2018/04/08
  */
 
 import React from 'react';
-import Section from './../Section';
+import { connect } from 'react-redux';
 import * as THREE from 'three';
 
-class ThreeSection extends React.Component {
+class SceneComponet 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.camera = new THREE.PerspectiveCamera(
+      17,
+      window.innerWidth / window.innerHeight,
+      0.1,
+      1000
+    );
     this.isAlive = true;
 
     this.renderer = new THREE.WebGLRenderer({canvas: this.refs.canvas, alpha: true});
     this.renderer.setSize(window.innerWidth, window.innerHeight);
 
-    this.camera.position.z = 5;
+    this.camera.position.z = 1;
 
-    //this.ambient1 = new THREE.AmbientLight(0xFFCCFF, 0.2);
+    this.ambient1 = new THREE.AmbientLight(0xFFCCFF, 0.2);
-    //this.scene.add(this.ambient1);
+    this.scene.add(this.ambient1);
-    //this.ambient2 = new THREE.AmbientLight(0xFFFFFF, 0.5);
+    this.ambient2 = new THREE.AmbientLight(0xFFFFFF, 0.5);
-    //this.scene.add(this.ambient2);
+    this.scene.add(this.ambient2);
 
     this.light = new THREE.DirectionalLight(0x22BBFF, 0.3);
     this.light.position.x = this.camera.position.x;
     this.light.position.y = this.camera.position.y;
-    this.light.position.z = this.camera.position.z + 5;
+    this.light.position.z = this.camera.position.z;
     this.scene.add(this.light);
 
-    if(typeof this.props.onSetup !== typeof undefined) {
+    if(typeof this.onSetup !== typeof undefined) {
-      this.props.onSetup(this.scene, this.camera, this.renderer);
+      this.onSetup(this.scene, this.camera, this.renderer);
     }
 
     this.onFrame();
@@ -68,25 +77,25 @@ class ThreeSection extends React.Component {
     this.camera.fov = vfovRad * 180 / Math.PI;
     this.camera.updateProjectionMatrix();
 
-    if(typeof this.props.onRender !== typeof undefined) {
+    if(typeof this.onUpdate !== typeof undefined) {
-      this.props.onRender(diff);
+      this.onUpdate(diff);
     }
 
     this.renderer.render(this.scene, this.camera);
     this.lastTime = now;
 
-    //requestAnimationFrame(this.onFrame.bind(this));
+    requestAnimationFrame(this.onFrame.bind(this));
   }
 
   render() {
     return (
-      <Section section="three" full>
+      <div className="c-scene-component">
-        <div className="c-section--style-three__canvas" ref="canvasSpace"></div>
+        <div className="c-scene-component__canvas-space" ref="canvasSpace"></div>
-        <canvas ref="canvas" className="c-section--style-three__canvas">
+        <canvas ref="canvas" className="c-scene-component__canvas">
         </canvas>
-      </Section>
+      </div>
-    )
+    );
   }
 }
 
-export default ThreeSection;
+export default SceneComponet;

public/components/pages/AboutPage.jsx

@@ -12,20 +12,11 @@
 import React from 'react';
 import { connect } from 'react-redux';
 
-import Language from './../../language/Language';
-
 import Page from './../Page';
-import Poly from './../sections/Poly';
+import TitleSection from './../sections/TitleSection';
 import BodySection from './../sections/BodySection';
-import SplitSection from './../sections/SplitSection';
-import VideoTitle from './../title/VideoTitle';
-import Window95 from './../w95/Window95';
 
-import domsHead from './../../images/profile.png';
+import AboutScene from './../../3d/scenes/AboutScene';
-import aboutMP4 from './../../videos/about/about.mp4';
-import programmingMP4 from './../../videos/about/programming.mp4';
-import apiMP4 from './../../videos/about/api.mp4';
-import otherMP4 from './../../videos/about/other.mp4';
 
 class AboutPage extends React.Component {
   constructor(props) {
@@ -35,52 +26,16 @@ class AboutPage extends React.Component {
   render() {
     return (
       <Page className="c-page--style-about">
-        <Poly />
+        <TitleSection
-
+          title="about.titles.me"
-        {/* Bio */}
+          scene={<AboutScene />}
-        <SplitSection
-          className="c-page--style-about__bio-section"
-
-          leftClass="c-page--style-about__profile-container"
-          left={ <img src={domsHead} className="c-page--style-about__profile" /> }
-
-          right={
-            <Window95 title="Bio" className="c-window--style-about">
-              <div className="c-text-field">
-                <p>{ Language.get("about.descriptions.welcome") }</p>
-              </div>
-            </Window95>
-          }
-          rightClass="c-page--style-about__blurb"
         />
-
+        <BodySection>
-        {/* About Me */}
+          Test
-        <BodySection
-          className="c-about-page__body-section"
-          title={
-            <VideoTitle
-              title="about.titles.me" mp4={aboutMP4}
-            />
-          }
-        >
-          { Language.get("about.descriptions.me") }
         </BodySection>
-
-        {/*  Programming */}
-        <BodySection className="c-about-page__body-section" title={[
-          <VideoTitle title="about.titles.programming" mp4={programmingMP4} to="/about/programming" />,
-          <VideoTitle title="about.titles.apis" mp4={apiMP4} to="/about/api" />,
-          <VideoTitle title="about.titles.other" mp4={otherMP4} to="/about/other" />
-        ]}></BodySection>
       </Page>
     );
   }
 }
 
-const mapStateToProps = function(state) {
+export default AboutPage;
-  return {
-    code: state.language.code
-  }
-}
-
-export default connect(mapStateToProps)(AboutPage);

public/components/pages/ContactPage.jsx

@@ -12,8 +12,8 @@
 import React from 'react';
 
 import Page from './../Page';
-import PhoneSection from './../sections/PhoneSection';
 import BodySection from './../sections/BodySection';
+import TitleSection from './../sections/TitleSection';
 
 import ContactForm from './../forms/ContactForm';
 
@@ -28,15 +28,16 @@ class ContactPage extends React.Component {
   render() {
     return (
       <Page>
-        <PhoneSection />
+        <TitleSection title="contact.form.title" />
         <BodySection>
-          <h1>{Language.get("contact.form.title")}</h1>
-          <p>
-            {Language.get("contact.form.info")}
-          </p>
           <div className="c-page--style-container__split">
             <ContactForm className="c-page--style-container__split-part" />
-            <div className="c-page--style-container__split-part"></div>
+            
+            <div className="c-page--style-container__split-part">
+              <p>
+                {Language.get("contact.form.info")}
+              </p>
+            </div>
           </div>
         </BodySection>
       </Page>

public/components/pages/IndexPage.jsx

@@ -12,7 +12,6 @@
 import React from 'react';
 
 import Page from './../Page';
-import Poly from './../sections/Poly';
 import BodySection from './../sections/BodySection';
 import SplitSection from './../sections/SplitSection';
 import { connect } from 'react-redux';
@@ -26,9 +25,13 @@ class IndexPage extends React.Component {
   render() {
     return (
       <Page>
-        <Poly />
+        <SplitSection left={
-
+            "test"
-        <BodySection unpadded>
+          } right={
+            "tost"
+          }
+        />
+        <BodySection>
           <h1>Lorem</h1>
         </BodySection>
       </Page>

public/components/pages/KitchenSinkPage.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import Page from './../Page';
-import Poly from './../sections/Poly';
 import BodySection from './../sections/BodySection';
 
 class KitchenSinkPage extends React.Component {
@@ -12,7 +11,6 @@ class KitchenSinkPage extends React.Component {
   render() {
     return (
       <Page>
-        <Poly />
         <BodySection>
 
           <h1>This is the primary heading and there should only be one of these per page</h1>
@@ -128,7 +126,7 @@ class KitchenSinkPage extends React.Component {
               </tr>
             </tbody>
           </table>
-          
+
           <h3>A sub heading which is not as important as the second, but should be used with consideration</h3>
           <p>
             Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

public/components/pages/OldAboutPage.jsx

@@ -0,0 +1,84 @@
+/*
+ *  About Page
+ *    About that one lad.
+ *
+ *  Dependencies:
+ *    styles/components/_page--style-about.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/03/18
+ */
+
+import React from 'react';
+import { connect } from 'react-redux';
+
+import Language from './../../language/Language';
+
+import Page from './../Page';
+import BodySection from './../sections/BodySection';
+import SplitSection from './../sections/SplitSection';
+import VideoTitle from './../title/VideoTitle';
+import Window95 from './../w95/Window95';
+
+import domsHead from './../../images/profile.png';
+import aboutMP4 from './../../videos/about/about.mp4';
+import programmingMP4 from './../../videos/about/programming.mp4';
+import apiMP4 from './../../videos/about/api.mp4';
+import otherMP4 from './../../videos/about/other.mp4';
+
+class AboutPage extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <Page className="c-page--style-about">
+
+        {/* Bio */}
+        <SplitSection
+          className="c-page--style-about__bio-section"
+
+          leftClass="c-page--style-about__profile-container"
+          left={ <img src={domsHead} className="c-page--style-about__profile" /> }
+
+          right={
+            <Window95 title="Bio" className="c-window--style-about">
+              <div className="c-text-field">
+                <p>{ Language.get("about.descriptions.welcome") }</p>
+              </div>
+            </Window95>
+          }
+          rightClass="c-page--style-about__blurb"
+        />
+
+        {/* About Me */}
+        <BodySection
+          className="c-about-page__body-section"
+          title={
+            <VideoTitle
+              title="about.titles.me" mp4={aboutMP4}
+            />
+          }
+        >
+          { Language.get("about.descriptions.me") }
+        </BodySection>
+
+        {/*  Programming */}
+        <BodySection className="c-about-page__body-section" title={[
+          <VideoTitle title="about.titles.programming" mp4={programmingMP4} to="/about/programming" />,
+          <VideoTitle title="about.titles.apis" mp4={apiMP4} to="/about/api" />,
+          <VideoTitle title="about.titles.other" mp4={otherMP4} to="/about/other" />
+        ]}></BodySection>
+      </Page>
+    );
+  }
+}
+
+const mapStateToProps = function(state) {
+  return {
+    code: state.language.code
+  }
+}
+
+export default connect(mapStateToProps)(AboutPage);

public/components/pages/TestAboutPage.jsx

@@ -1,41 +0,0 @@
-/*
- *  About Page
- *    About that one lad.
- *
- *  Dependencies:
- *    styles/components/_page--style-about.scss
- *
- *  Version:
- *    1.0.0 - 2018/03/11
- */
-
-import React from 'react';
-import { connect } from 'react-redux';
-
-import Page from './../Page';
-import Poly from './../sections/Poly';
-import BodySection from './../sections/BodySection';
-import SplitSection from './../sections/SplitSection';
-import Language from './../../language/Language';
-
-class TestAboutPage extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <Page className="c-page--style-about">
-        About
-      </Page>
-    )
-  }
-}
-
-const mapStateToProps = function(state) {
-  return {
-    code: state.language.code
-  }
-}
-
-export default connect(mapStateToProps)(TestAboutPage);

public/components/pages/about/APIPage.jsx

@@ -13,7 +13,6 @@ import { connect } from 'react-redux';
 import Language from './../../../language/Language';
 
 import Page from './../../Page';
-import Poly from './../../sections/Poly';
 import BodySection from './../../sections/BodySection';
 import VideoTitle from './../../title/VideoTitle';
 import SkillBox from './SkillBox';
@@ -28,8 +27,6 @@ class APIPage extends React.Component {
   render() {
     return (
       <Page className="c-page--style-api-skills">
-        <Poly />
-
         <BodySection
           title={
             <VideoTitle

public/components/pages/about/OtherSkillsPage.jsx

@@ -13,7 +13,6 @@ import { connect } from 'react-redux';
 import Language from './../../../language/Language';
 
 import Page from './../../Page';
-import Poly from './../../sections/Poly';
 import BodySection from './../../sections/BodySection';
 import VideoTitle from './../../title/VideoTitle';
 import SkillBox from './SkillBox';
@@ -28,7 +27,6 @@ class OtherSkillsPage extends React.Component {
   render() {
     return (
       <Page className="c-page--style-other-skills">
-        <Poly />
 
         <BodySection
           title={

public/components/pages/about/ProgrammingPage.jsx

@@ -13,7 +13,6 @@ import { connect } from 'react-redux';
 import Language from './../../../language/Language';
 
 import Page from './../../Page';
-import Poly from './../../sections/Poly';
 import BodySection from './../../sections/BodySection';
 import VideoTitle from './../../title/VideoTitle';
 import SkillBox from './SkillBox';
@@ -28,7 +27,6 @@ class ProgrammingPage extends React.Component {
   render() {
     return (
       <Page className="c-page--style-programming">
-        <Poly />
 
         <BodySection
           title={

public/components/sections/CenterSection.jsx

@@ -1,28 +0,0 @@
-/*
- *  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/PhoneSection.jsx

@@ -1,62 +0,0 @@
-/*
- *  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

@@ -1,136 +0,0 @@
-/*
- *  Poly
- *    Poly styled section.
- *
- *  Dependencies:
- *    styles/components/_section--style-poly.scss
- *
- *  Version:
- *    1.0.0 - 2018/02/24
- */
-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,-1,1],
-    velocity: [0.3, 0.1, 0],
-    color: 0xFFFFFF,
-    pvm: true
-  },
-  {
-    size: [1, 1, 1],
-    pos: [0.5,-0,-0.3],
-    velocity: [-0.3, 0.05, 0.1],
-    color: 0xCCFFFF,
-    pvm: true
-  },
-  {
-    size: [1, 1, 1],
-    pos: [-3,1,0.3],
-    velocity: [0.2, 0.5, 0],
-    color: 0xaaffb9,
-    pvm: true
-  },
-  {
-    size: [0.8, 0.8, 0.8],
-    pos: [3.4,-0.6,0.3],
-    velocity: [1, 0.1, -0.1],
-    color: 0xff66ab,
-    pvm: true
-  }
-];
-
-class Poly extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  onSetup(scene) {
-    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 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];
-      cube.position.z = c.pos[2];
-      cube.rotation.x = Math.random()*360;
-      cube.rotation.y = Math.random()*360;
-      cube.rotation.z = Math.random()*360;
-      cube.velocity = c.velocity;
-
-      scene.add(cube);
-      this.cubes.push(cube);
-
-      if(typeof c.outline !== typeof undefined) {
-        let outline = new THREE.MeshBasicMaterial( { color: c.outline, side: THREE.BackSide } );
-        let outlineMesh = new THREE.Mesh( geometry, outline );
-        outlineMesh.position.x = cube.position.x;
-        outlineMesh.position.y = cube.position.y;
-        outlineMesh.position.z = cube.position.z;
-        outlineMesh.scale.multiplyScalar(1.05);
-
-        this.outlines[i] = outlineMesh;
-        scene.add( outlineMesh );
-      }
-    }
-  }
-
-  onRender(diff) {
-    for(var i = 0; i < this.cubes.length; i++) {
-      let e = this.cubes[i];
-      let o = this.outlines[i];
-      let c = CUBES[i];
-
-      e.rotation.x += c.velocity[0] * diff;
-      e.rotation.y += c.velocity[1] * diff;
-      e.rotation.z += c.velocity[2] * diff;
-
-      if(typeof o !== typeof undefined) {
-        o.rotation.x = e.rotation.x;
-        o.rotation.y = e.rotation.y;
-        o.rotation.z = e.rotation.z;
-      }
-    }
-  }
-
-  render() {
-    return (
-      <ThreeSection
-        onRender={this.onRender.bind(this)}
-        onSetup={this.onSetup.bind(this)}
-      />
-    )
-  }
-}
-
-export default Poly;

public/components/sections/TitleSection.jsx

@@ -0,0 +1,50 @@
+/*
+ *  Title Section
+ *    Simple title section used for most pages.
+ *
+ *  Dependencies:
+ *    styles/components/_section--style-title.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/02/24
+ */
+
+import React from 'react';
+import { connect } from 'react-redux';
+
+import Language from './../../language/Language';
+import Section from './../Section';
+
+class TitleSection extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let children = [];
+
+    if(this.props.scene) {
+      //3D Model to add to the title, naisu
+      children.push(
+        <div className="c-section--style-title__model-container" key="model">
+          { this.props.scene }
+        </div>
+      );
+    }
+
+    return (
+      <Section section="title">
+        <h1 className="c-section--style-title__title">
+          { Language.get(this.props.title) }
+        </h1>
+        { children }
+      </Section>
+    )
+  }
+}
+
+
+const mapStateToProps = function(state) {
+  return { code: state.language.code }
+}
+export default connect(mapStateToProps)(TitleSection);

public/language/Language.jsx

@@ -19,6 +19,7 @@ class Language {
   }
 
   get(key) {
+    if(typeof key === typeof undefined)  return "Key \"undefined\".";
     let j = this.getRecursive(key.split("."));
     if(typeof j === typeof undefined || j == null) return "Missing \"" + key + "\"";
     return j;

public/styles/components/_navbar.scss

@@ -69,8 +69,8 @@ $c-navbar--link-offset: 5px;
 @include t-media-query($s-small-up) {
   .c-navbar {
     width: 90%;
-    top:3em;
+    top: 1em;
-    left: 2%;
+    left: 1em;
     @include t-box-shadow(-10px, 10px, 0px, rgba(0, 0, 0, 0.5));
   }
 

public/styles/components/_page.scss

@@ -12,9 +12,10 @@
 .c-page {
   min-height: 100%;
   @include t-flex-grow(1);
-  //@include t-gradient-directional($s-color--background-bottom, $s-color--background-top, 45deg);
+  @include t-gradient-directional($s-color--background-bottom, $s-color--background-top, 45deg);
   padding-bottom: 5em;
 
+
   //background-attachment: fixed;
   //background-color: #000019;
   //background-image: url('./../images/space.png');

public/styles/components/_scene-component.scss

@@ -0,0 +1,27 @@
+/*
+ *  Scene Component
+ *    Styles for THREE JS Scene elements.
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/04/08
+ */
+.c-scene-component {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.c-scene-component__canvas-space {
+  width: 100%;
+  height: 100%;
+}
+
+.c-scene-component__canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+}

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

@@ -19,9 +19,6 @@
 }
 
 @include t-media-query($s-small-up) {
-  .c-section--style-body {
-    padding-left: 4%;
-  }
 
   .c-section--style-body__inner {
     @include t-box-shadow(-10px, 10px, 0px, rgba(0, 0, 0, 0.5));

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

@@ -1,10 +0,0 @@
-/*
- *  Section Style Poly
- *    Styles for poly section elements
- *
- *  Dependencies:
- *    styles/components/_section.scss
- *
- *  Version:
- *    1.0.0 - 2018/02/28
- */

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

@@ -1,24 +0,0 @@
-/*
- *  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: 0;
-  overflow-y: visible;
-}
-
-.c-section--style-three__canvas {
-  width: 100%;
-  height: 100vh;
-  top: 0;
-  left: 0;
-  position: absolute;
-}

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

@@ -0,0 +1,29 @@
+/*
+ *  Section Title Style
+ *    Styles for title section
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/04/06
+ */
+$c-section--style-title__title-z-index: 5;
+.c-section--style-title {
+  padding-top: 30vmin;
+  padding-bottom: 20vmin;
+  padding-left: 1em;
+  position: relative;
+}
+
+.c-section--style-title__model-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.c-section--style-title__title {
+  position: relative;
+  z-index: $c-section--style-title__title-z-index;
+}

public/styles/index.scss

@@ -53,12 +53,12 @@
 @import './components/_menu.scss';
 @import './components/_navbar.scss';
 @import './components/_page.scss';
+@import './components/_scene-component.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-split.scss';
-@import './components/_section--style-three.scss';
+@import './components/_section--style-title.scss';
 @import './components/_w95.scss';
 
 @import './components/_page--style-about.scss';