diff --git a/package.json b/package.json index ed22eab..97d5703 100644 --- a/package.json +++ b/package.json @@ -27,10 +27,12 @@ "@fortawesome/fontawesome-free-solid": "^5.0.6", "@fortawesome/react-fontawesome": "0.0.17", "express": "^4.16.2", + "file-loader": "^1.1.9", "mysql-promise": "^4.1.0", "normalize.css": "^8.0.0", "react": "^16.2.0", - "react-dom": "^16.2.0" + "react-dom": "^16.2.0", + "three": "^0.90.0" }, "devDependencies": { "babel-cli": "^6.26.0", diff --git a/public/App.jsx b/public/App.jsx index 1127107..73daa07 100644 --- a/public/App.jsx +++ b/public/App.jsx @@ -13,6 +13,8 @@ import React from 'react'; import Header from './components/Header'; +import IndexPage from './components/pages/IndexPage'; + class App extends React.Component { constructor(props) { super(props); @@ -22,7 +24,7 @@ class App extends React.Component { return (
- App +
) } diff --git a/public/components/Page.jsx b/public/components/Page.jsx new file mode 100644 index 0000000..cdb58c5 --- /dev/null +++ b/public/components/Page.jsx @@ -0,0 +1,28 @@ +/* + * Page + * Simple Page wrapper/container. + * + * Dependencies: + * styles/components/_page.scss + * + * Version: + * 1.0.0 - 2018/02/24 + */ + +import React from 'react'; + +class Page extends React.Component { + constructor(props) { + super(props); + } + + render() { + return ( +
+ {this.props.children} +
+ ) + } +} + +export default Page; diff --git a/public/components/Section.jsx b/public/components/Section.jsx new file mode 100644 index 0000000..fef6115 --- /dev/null +++ b/public/components/Section.jsx @@ -0,0 +1,32 @@ +/* + * Section + * Simple Page Section. + * + * Dependencies: + * styles/components/_section.scss + * + * Version: + * 1.0.0 - 2018/02/24 + */ + +import React from 'react'; + +class Section extends React.Component { + constructor(props) { + super(props); + } + + render() { + let style = (this.props.section ? "c-section--style-"+this.props.section : ""); + let fullWidth = this.props.full ? "c-section--full-width" : ""; + console.log(this.props); + + return ( +
+ { this.props.children } +
+ ) + } +} + +export default Section; diff --git a/public/components/navigation/Navbar.jsx b/public/components/navigation/Navbar.jsx index 86eaeb9..8c46b66 100644 --- a/public/components/navigation/Navbar.jsx +++ b/public/components/navigation/Navbar.jsx @@ -35,9 +35,9 @@ class Navbar extends React.Component { -
- This is my navbar11 -
+ + domsPlace +
Home diff --git a/public/components/pages/IndexPage.jsx b/public/components/pages/IndexPage.jsx new file mode 100644 index 0000000..f0bb1c5 --- /dev/null +++ b/public/components/pages/IndexPage.jsx @@ -0,0 +1,32 @@ +/* + * Index Page + * Homepage. + * + * Version: + * 1.0.1 - 2018/03/01 + */ + +import React from 'react'; + +import Page from './../Page'; +import Poly from './../sections/Poly'; +import BodySection from './../sections/BodySection'; + +class IndexPage extends React.Component { + constructor(props) { + super(props); + } + + render() { + return ( + + + + Lorem + + + ) + } +} + +export default IndexPage; diff --git a/public/components/sections/BodySection.jsx b/public/components/sections/BodySection.jsx new file mode 100644 index 0000000..b9ae73e --- /dev/null +++ b/public/components/sections/BodySection.jsx @@ -0,0 +1,29 @@ +/* + * Body Section + * Section for content bodies. + * + * Dependencies: + * styles/components/_section--style-body.scss + * + * Version: + * 1.0.0 - 2018/03/01 + */ + +import React from 'react'; +import Section from './../Section'; + +class BodySection extends React.Component { + constructor(props) { + super(props); + } + + render() { + return ( +
+ {this.props.children} +
+ ) + } +} + +export default BodySection; diff --git a/public/components/sections/Poly.jsx b/public/components/sections/Poly.jsx new file mode 100644 index 0000000..0839cad --- /dev/null +++ b/public/components/sections/Poly.jsx @@ -0,0 +1,170 @@ +/* + * Poly + * Poly styled section. + * + * Dependencies: + * styles/components/_section--style-poly.scss + * + * Version: + * 1.0.0 - 2018/02/24 + */ + +import React from 'react'; +import Section from './../Section'; +import * as THREE from 'three'; + +const CUBES = [ + { + size: [1, 1, 1], + pos: [-4,-0.3,1], + velocity: [0.3, 0.1, 0], + color: 0xFFFFFF + }, + { + size: [1, 1, 1], + pos: [1,-0.8,-0.3], + velocity: [-0.3, 0.05, 0.1], + color: 0xCCFFFF + }, + { + size: [1, 1, 1], + pos: [-0.8,0.4,-5], + velocity: [0, -0.1, 0.1], + color: 0xf7ffb7 + }, + { + size: [1, 1, 1], + pos: [6,1,-2], + velocity: [0.2, 0.5, 0], + color: 0xffb7ee + }, + { + size: [1, 1, 1], + pos: [-3,1,0.3], + velocity: [0.2, 0.5, 0], + color: 0xaaffb9 + }, + { + size: [0.8, 0.8, 0.8], + pos: [2.2,1,0.3], + velocity: [1, 0.1, -0.1], + color: 0xff66ab + } +]; + +class Poly 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.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]; + cube.rotation.x = Math.random()*360; + cube.rotation.y = Math.random()*360; + cube.rotation.z = Math.random()*360; + cube.velocity = c.velocity; + this.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; + this.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() { + 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]; + 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; + } + } + this.lastTime = now; + } + + render() { + return ( +
+
+ + +
+ ) + } +} + +export default Poly; diff --git a/public/images/logo.svg b/public/images/logo.svg new file mode 100644 index 0000000..cd6b21b --- /dev/null +++ b/public/images/logo.svg @@ -0,0 +1,51 @@ + + Asset 4 + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/index.html b/public/index.html index 9c0f21a..12556e4 100644 --- a/public/index.html +++ b/public/index.html @@ -3,6 +3,11 @@ domsPlace + + + + + diff --git a/public/styles/components/_header.scss b/public/styles/components/_header.scss index b8e36ed..c13489e 100644 --- a/public/styles/components/_header.scss +++ b/public/styles/components/_header.scss @@ -8,6 +8,5 @@ * 1.0.0 - 2018/02/23 */ .c-header { - border: 1px solid red; position: relative; } diff --git a/public/styles/components/_navbar.scss b/public/styles/components/_navbar.scss index fff83c6..e13418b 100644 --- a/public/styles/components/_navbar.scss +++ b/public/styles/components/_navbar.scss @@ -16,6 +16,7 @@ $c-navbar--z-index: 100; $c-navbar--link-border: $s-border--default; $c-navbar--background: white; +$c-navbar--link-offset: 5px; .c-navbar { position: fixed; @@ -35,13 +36,21 @@ $c-navbar--background: white; } //Logo +.c-navbar__logo-container { + @include t-align-self(center); + width: 12.5em; +} + .c-navbar__logo { + width: 100%; + height: 100%; } //Links .c-navbar__links { width: 100%; text-align: right; + display: none; } .c-navbar__link { @@ -51,11 +60,6 @@ $c-navbar--background: white; font-size: 1.2em; padding: 0 1.5em; display: inline-table; - background: $c-navbar--background; - transition: all 0.2s $s-animation--ease-out-curve; - - &:hover { - } } .c-navbar__link-text { @@ -74,7 +78,24 @@ $c-navbar--background: white; .c-navbar { width: 90%; top:3em; - left: 1%; + left: 2%; @include t-box-shadow(-10px, 10px, 0px, rgba(0, 0, 0, 0.5)); } + + .c-navbar__links { + displaY: block; + } + + .c-navbar__link { + + background: white; + transition: all 0.2s $s-animation--ease-out-curve; + margin-left: $c-navbar--link-offset; + @include t-translate(0em, 0em); + @include t-box-shadow(0px, 0px, 0px, rgba(0, 0, 0, 0.5)); + &:hover { + @include t-translate($c-navbar--link-offset, -$c-navbar--link-offset); + @include t-box-shadow(-$c-navbar--link-offset, $c-navbar--link-offset, 0px, rgba(0, 0, 0, 0.5)); + } + } } diff --git a/public/styles/components/_page.scss b/public/styles/components/_page.scss new file mode 100644 index 0000000..821f1f7 --- /dev/null +++ b/public/styles/components/_page.scss @@ -0,0 +1,11 @@ +/* + * Page + * Styles for page elements + * + * Dependencies: + * + * Version: + * 1.0.0 - 2018/02/24 + */ +.c-page { +} diff --git a/public/styles/components/_section--style-body.scss b/public/styles/components/_section--style-body.scss new file mode 100644 index 0000000..53242c8 --- /dev/null +++ b/public/styles/components/_section--style-body.scss @@ -0,0 +1,22 @@ +/* + * Section Body Style + * Styles for body style section + * + * Dependencies: + * styles/settings/colors.scss + * styles/settings/responsive.scss + * styles/tools/_responsive.scss + * + * Version: + * 1.0.0 - 2018/02/28 + */ +.c-section--style-body { + background: $s-color--background-default; +} + +@include t-media-query($s-small-up) { + .c-section--style-body { + margin-left: 4%; + @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 new file mode 100644 index 0000000..3f9e055 --- /dev/null +++ b/public/styles/components/_section--style-poly.scss @@ -0,0 +1,25 @@ +/* + * Section Style Poly + * Styles for poly section elements + * + * Dependencies: + * styles/components/_section.scss + * + * 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; +} diff --git a/public/styles/components/_section.scss b/public/styles/components/_section.scss new file mode 100644 index 0000000..c93d310 --- /dev/null +++ b/public/styles/components/_section.scss @@ -0,0 +1,31 @@ +/* + * Section + * Styles for section elements + * + * Dependencies: + * styles/settings/responsive.scss + * styles/tools/_responsive.scss + * + * Version: + * 1.0.0 - 2018/02/28 + */ +.c-section { + width: 100%; + display: block; + max-width: $s-layout--page-max; +} + +.c-section--full-width { + max-width: none; +} + +.c-section--style-body { + background: $s-color--background-default; +} + +@include t-media-query($s-small-up) { + .c-section--style-body { + margin-left: 4%; + @include t-box-shadow(-10px, 10px, 0px, rgba(0, 0, 0, 0.5)); + } +} diff --git a/public/styles/elements/_a.scss b/public/styles/elements/_a.scss index 0ae7048..346935c 100644 --- a/public/styles/elements/_a.scss +++ b/public/styles/elements/_a.scss @@ -3,10 +3,12 @@ * Base A/Anchor Seettings * * Dependencies: + * styles/settings/colors.scss * * Version: * 1.0.0 - 2018/02/23 */ a { text-decoration: none; + color: $s-color--links } diff --git a/public/styles/index.scss b/public/styles/index.scss index 8c064b8..939609b 100644 --- a/public/styles/index.scss +++ b/public/styles/index.scss @@ -10,6 +10,7 @@ //Settings @import './settings/animation.scss'; @import './settings/colors.scss'; +@import './settings/layout.scss'; @import './settings/responsive.scss'; @import './settings/typography.scss'; @@ -38,6 +39,9 @@ @import './components/_app.scss'; @import './components/_header.scss'; @import './components/_navbar.scss'; +@import './components/_page.scss'; +@import './components/_section.scss'; +@import './components/_section--style-poly.scss'; //Utilities diff --git a/public/styles/settings/colors.scss b/public/styles/settings/colors.scss index 2d59def..44cff02 100644 --- a/public/styles/settings/colors.scss +++ b/public/styles/settings/colors.scss @@ -8,7 +8,14 @@ * 1.1.0 - 2018/02/23 */ +//Fonts +$s-color--text: black; +$s-color--links: #FC78DE; + +//Backgrounds +$s-color--background-default: white; $s-color--background-top: #2BF; $s-color--background-bottom: #FCF; +//Borders $s-border--default: 1px solid #DDD; diff --git a/public/styles/settings/layout.scss b/public/styles/settings/layout.scss new file mode 100644 index 0000000..ce82567 --- /dev/null +++ b/public/styles/settings/layout.scss @@ -0,0 +1,10 @@ +/* + * Layout Settings + * Provides settings for layouts + * + * Dependencies: + * + * Version: + * 1.0.1 - 2018/02/24 + */ +$s-layout--page-max: 1200px;