diff --git a/public/3d/phone.json b/public/3d/models/phone.json similarity index 100% rename from public/3d/phone.json rename to public/3d/models/phone.json diff --git a/public/3d/pvm.json b/public/3d/models/pvm.json similarity index 100% rename from public/3d/pvm.json rename to public/3d/models/pvm.json diff --git a/public/3d/scenes/AboutScene.jsx b/public/3d/scenes/AboutScene.jsx new file mode 100644 index 0000000..6f85f48 --- /dev/null +++ b/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; diff --git a/public/components/sections/ThreeSection.jsx b/public/3d/scenes/SceneComponent.jsx similarity index 57% rename from public/components/sections/ThreeSection.jsx rename to public/3d/scenes/SceneComponent.jsx index 7cf8461..cd8d252 100644 --- a/public/components/sections/ThreeSection.jsx +++ b/public/3d/scenes/SceneComponent.jsx @@ -1,44 +1,53 @@ /* - * ThreeJS Section - * Section for Three JS. + * Scene Component + * 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.scene.add(this.ambient1); - //this.ambient2 = new THREE.AmbientLight(0xFFFFFF, 0.5); - //this.scene.add(this.ambient2); + 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.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) { - this.props.onSetup(this.scene, this.camera, this.renderer); + if(typeof this.onSetup !== typeof undefined) { + 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) { - this.props.onRender(diff); + if(typeof this.onUpdate !== typeof undefined) { + 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 ( -
-
- +
+
+ -
- ) + + ); } } -export default ThreeSection; +export default SceneComponet; diff --git a/public/components/pages/AboutPage.jsx b/public/components/pages/AboutPage.jsx index 9ce6819..d91b8b5 100644 --- a/public/components/pages/AboutPage.jsx +++ b/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 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'; +import AboutScene from './../../3d/scenes/AboutScene'; class AboutPage extends React.Component { constructor(props) { @@ -35,52 +26,16 @@ class AboutPage extends React.Component { render() { return ( - - - {/* Bio */} - } - - right={ - -
-

{ Language.get("about.descriptions.welcome") }

-
- - } - rightClass="c-page--style-about__blurb" + } /> - - {/* About Me */} - - } - > - { Language.get("about.descriptions.me") } + + Test - - {/* Programming */} - , - , - - ]}> ); } } -const mapStateToProps = function(state) { - return { - code: state.language.code - } -} - -export default connect(mapStateToProps)(AboutPage); +export default AboutPage; diff --git a/public/components/pages/ContactPage.jsx b/public/components/pages/ContactPage.jsx index 7f728a3..6ed73c3 100644 --- a/public/components/pages/ContactPage.jsx +++ b/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 ( - + -

{Language.get("contact.form.title")}

-

- {Language.get("contact.form.info")} -

-
+ +
+

+ {Language.get("contact.form.info")} +

+
diff --git a/public/components/pages/IndexPage.jsx b/public/components/pages/IndexPage.jsx index 0bb0365..7d1c714 100644 --- a/public/components/pages/IndexPage.jsx +++ b/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 ( - - - + +

Lorem

 diff --git a/public/components/pages/KitchenSinkPage.jsx b/public/components/pages/KitchenSinkPage.jsx index 4f3be5c..0e5a554 100644 --- a/public/components/pages/KitchenSinkPage.jsx +++ b/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 ( -

This is the primary heading and there should only be one of these per page

@@ -128,7 +126,7 @@ class KitchenSinkPage extends React.Component { - +

A sub heading which is not as important as the second, but should be used with consideration

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. diff --git a/public/components/pages/OldAboutPage.jsx b/public/components/pages/OldAboutPage.jsx new file mode 100644 index 0000000..fbb9123 --- /dev/null +++ b/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 ( + + + {/* Bio */} + } + + right={ + +

+

{ Language.get("about.descriptions.welcome") }

+
+ + } + rightClass="c-page--style-about__blurb" + /> + + {/* About Me */} + + } + > + { Language.get("about.descriptions.me") } + + + {/* Programming */} + , + , + + ]}> + + ); + } +} + +const mapStateToProps = function(state) { + return { + code: state.language.code + } +} + +export default connect(mapStateToProps)(AboutPage); diff --git a/public/components/pages/TestAboutPage.jsx b/public/components/pages/TestAboutPage.jsx deleted file mode 100644 index 47f9e20..0000000 --- a/public/components/pages/TestAboutPage.jsx +++ /dev/null @@ -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 ( - - About - - ) - } -} - -const mapStateToProps = function(state) { - return { - code: state.language.code - } -} - -export default connect(mapStateToProps)(TestAboutPage); diff --git a/public/components/pages/about/APIPage.jsx b/public/components/pages/about/APIPage.jsx index 4d6dc13..274421f 100644 --- a/public/components/pages/about/APIPage.jsx +++ b/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 ( - - - - - - ) - } -} - -export default CenterSection; diff --git a/public/components/sections/PhoneSection.jsx b/public/components/sections/PhoneSection.jsx deleted file mode 100644 index ce118e7..0000000 --- a/public/components/sections/PhoneSection.jsx +++ /dev/null @@ -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 ( - - ) - } -} - -export default PhoneSection; diff --git a/public/components/sections/Poly.jsx b/public/components/sections/Poly.jsx deleted file mode 100644 index 6099eeb..0000000 --- a/public/components/sections/Poly.jsx +++ /dev/null @@ -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 ( - - ) - } -} - -export default Poly; diff --git a/public/components/sections/TitleSection.jsx b/public/components/sections/TitleSection.jsx new file mode 100644 index 0000000..19ee583 --- /dev/null +++ b/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( +
+ { this.props.scene } +
+ ); + } + + return ( +
+

+ { Language.get(this.props.title) } +

+ { children } +
+ ) + } +} + + +const mapStateToProps = function(state) { + return { code: state.language.code } +} +export default connect(mapStateToProps)(TitleSection); diff --git a/public/language/Language.jsx b/public/language/Language.jsx index 369ada4..e1c29af 100644 --- a/public/language/Language.jsx +++ b/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; diff --git a/public/styles/components/_navbar.scss b/public/styles/components/_navbar.scss index e829c7a..c70c20a 100644 --- a/public/styles/components/_navbar.scss +++ b/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; - left: 2%; + top: 1em; + left: 1em; @include t-box-shadow(-10px, 10px, 0px, rgba(0, 0, 0, 0.5)); } diff --git a/public/styles/components/_page.scss b/public/styles/components/_page.scss index 9f72af0..30f4e85 100644 --- a/public/styles/components/_page.scss +++ b/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'); diff --git a/public/styles/components/_scene-component.scss b/public/styles/components/_scene-component.scss new file mode 100644 index 0000000..5efa2c4 --- /dev/null +++ b/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%; +} diff --git a/public/styles/components/_section--style-body.scss b/public/styles/components/_section--style-body.scss index be09172..4fe10c6 100644 --- a/public/styles/components/_section--style-body.scss +++ b/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)); diff --git a/public/styles/components/_section--style-poly.scss b/public/styles/components/_section--style-poly.scss deleted file mode 100644 index e19c3d5..0000000 --- a/public/styles/components/_section--style-poly.scss +++ /dev/null @@ -1,10 +0,0 @@ -/* - * Section Style Poly - * Styles for poly section elements - * - * Dependencies: - * styles/components/_section.scss - * - * Version: - * 1.0.0 - 2018/02/28 - */ diff --git a/public/styles/components/_section--style-three.scss b/public/styles/components/_section--style-three.scss deleted file mode 100644 index 81fee1f..0000000 --- a/public/styles/components/_section--style-three.scss +++ /dev/null @@ -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; -} diff --git a/public/styles/components/_section--style-title.scss b/public/styles/components/_section--style-title.scss new file mode 100644 index 0000000..c26522e --- /dev/null +++ b/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; +} diff --git a/public/styles/index.scss b/public/styles/index.scss index 08e4f2a..ea70f7c 100644 --- a/public/styles/index.scss +++ b/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';