YourWishes/domsPlace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Reset, reset

Browse Source
This commit is contained in:
Dominic Masters
2018-04-28 17:13:56 +10:00
parent 63d1e21b9a
commit 5eb4d7ee4f
124 changed files with 0 additions and 5899 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
common/HTMLElement.js
View File

@ -1,32 +0,0 @@
HTMLElement.prototype.removeClass || (HTMLElement.prototype.removeClass = function(remove) {
var newClassName = "";
var i;
var classes = this.className.split(" ");
for(i = 0; i < classes.length; i++) {
if(classes[i] !== remove) {
newClassName += classes[i] + " ";
}
}
this.className = newClassName;
});
HTMLElement.prototype.hasClass || (HTMLElement.prototype.hasClass = function(cls) {
return (' ' + this.className + ' ').indexOf(' ' + cls + ' ') > -1;
});
HTMLElement.prototype.addClass || (HTMLElement.prototype.addClass = function(add) {
if(this.hasClass(add)) return;
this.className += ' ' + add;
});
HTMLElement.prototype.toggleClass || (HTMLElement.prototype.toggleClass = function(clazz) {
if(this.hasClass(clazz)) {
this.removeClass(clazz);
} else {
this.addClass(clazz);
}
});
HTMLElement.prototype.remove || (HTMLElement.prototype.remove = function() {
this.parentElement.removeChild(this);
});

37
common/Object.js
View File

@ -1,37 +0,0 @@
'use strict';
Object.isUndefined = Object.isUndefined || function(v) {
return typeof v === typeof undefined;
}
Object.isDefined = Object.isDefined || function(v) {
return !Object.isUndefined(v);
}
Object.isBoolean = Object.isBoolean || function(v) {
return Object.isDefined(v) && typeof v === 'boolean';
}
Object.merge = Object.merge || function(left_most, right_most) {
let d = {};
var left_keys = Object.keys(left_most);
for(var i = 0 ; i < left_keys.length; i++) {
var k = left_keys[i];
if(typeof right_most[k] !== typeof undefined) continue;
d[k] = left_most[k];
}
var right_keys = Object.keys(right_most);
for(var i = 0; i < right_keys.length; i++) {
var k = right_keys[i];
d[k] = right_most[k];
}
return d;
}
Object.extendClass = Object.extendClass || function(super_class,new_methods) {
return Object.assign(Object.assign({}, super_class), new_methods);
}
module.exports = Object;

27
package.json
View File

@ -23,34 +23,7 @@
}, },
"homepage": "https://github.com/YourWishes/domsPlaceNew#readme", "homepage": "https://github.com/YourWishes/domsPlaceNew#readme",
"dependencies": { "dependencies": {
"@fortawesome/fontawesome": "^1.1.3",
"@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",
"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"
}, },
"devDependencies": { "devDependencies": {
"babel-cli": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.10",
"html-webpack-plugin": "^2.30.1",
"jest": "^22.4.0",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"style-loader": "^0.20.2",
"webpack": "^3.11.0",
"webpack-dev-server": "^2.11.1"
} }
} }

6
public/3d/models/phone.json
View File

File diff suppressed because one or more lines are too long

1307
public/3d/models/pvm.json
View File

File diff suppressed because one or more lines are too long

61
public/3d/scenes/AboutScene.jsx
View File

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

101
public/3d/scenes/SceneComponent.jsx
View File

@ -1,101 +0,0 @@
/*
* Scene Component
* About that one lad.
*
* Dependencies:
* styles/components/_scene-component.scss
*
* Version:
* 1.0.0 - 2018/04/08
*/
import React from 'react';
import { connect } from 'react-redux';
import * as THREE from 'three';
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.isAlive = true;
this.renderer = new THREE.WebGLRenderer({canvas: this.refs.canvas, alpha: true});
this.renderer.setSize(window.innerWidth, window.innerHeight);
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.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;
this.scene.add(this.light);
if(typeof this.onSetup !== typeof undefined) {
this.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.renderer.setSize(width, height);
this.renderer.setPixelRatio(window.devicePixelRatio);
this.camera.aspect = width / height;
this.camera.fov = vfovRad * 180 / Math.PI;
this.camera.updateProjectionMatrix();
if(typeof this.onUpdate !== typeof undefined) {
this.onUpdate(diff);
}
this.renderer.render(this.scene, this.camera);
this.lastTime = now;
requestAnimationFrame(this.onFrame.bind(this));
}
render() {
return (
<div className="c-scene-component">
<div className="c-scene-component__canvas-space" ref="canvasSpace"></div>
<canvas ref="canvas" className="c-scene-component__canvas">
</canvas>
</div>
);
}
}
export default SceneComponet;

76
public/App.jsx
View File

@ -1,76 +0,0 @@
/*
* App
* Overall App wrapper, contains a lot of the logic and handling of how the
* site will function and display.
*
* Dependencies:
* styles/components/_app.scss
*
* Version:
* 1.0.0 - 2018/02/23
*/
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';
//Pages
import IndexPage from './components/pages/IndexPage';
import AboutPage from './components/pages/AboutPage';
import ProgrammingPage from './components/pages/about/ProgrammingPage';
import APIPage from './components/pages/about/APIPage';
import OtherSkillsPage from './components/pages/about/OtherSkillsPage';
import PrivacyPolicyPage from './components/pages/PrivacyPolicyPage';
import ContactPage from './components/pages/ContactPage';
//App
class App extends React.Component {
constructor(props) {
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 (
<div className="c-app">
<Header />
<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="/privacy-policy" component={PrivacyPolicyPage} />
<Route exact path="/privacy" component={PrivacyPolicyPage} />
<Route exact path="/policy" component={PrivacyPolicyPage} />
<Route exact path="/contact" component={ContactPage} />
</Switch>
<Footer />
</div>
)
}
}
export default withRouter(App);

11
public/actions/language.js
View File

@ -1,11 +0,0 @@
import Language from './../language/Language';
export const SET_LANGUAGE = "SET_LANGUAGE";
export const LANGUAGES = Language.getLanguages();
export function setLanguage(language) {
return {
type: SET_LANGUAGE,
code: language
}
};

132
public/animation/Easing.js
View File

@ -1,132 +0,0 @@
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;
}
}

47
public/components/Footer.jsx
View File

@ -1,47 +0,0 @@
/*
* Header
* Header for page, contains navbar as well as other consistant top of page
* elements.
*
* Dependencies:
* styles/components/_header.scss
*
* Version:
* 1.0.0 - 2018/02/23
*/
import React from 'react';
import { Link } from 'react-router-dom';
const FooterLink = function(props) {
return (
<span className="c-footer__link">
<Link to={props.to} className="c-footer__link-link">
{props.children}
</Link>
</span>
)
}
class Footer extends React.Component {
constructor(props) {
super(props);
}
render() {
let year = new Date().getFullYear();
return (
<footer className="c-footer">
<span className="c-footer__copyright">
2012 ~ {year} | Dominic Masters.
</span>
<nav className="c-footer__links">
<FooterLink to="/privacy-policy">Privacy Policy</FooterLink>
</nav>
</footer>
)
}
}
export default Footer;

31
public/components/Header.jsx
View File

@ -1,31 +0,0 @@
/*
* Header
* Header for page, contains navbar as well as other consistant top of page
* elements.
*
* Dependencies:
* styles/components/_header.scss
*
* Version:
* 1.0.0 - 2018/02/23
*/
import React from 'react';
import Navbar from './navigation/Navbar';
class Header extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<header className="c-header">
<Navbar />
</header>
)
}
}
export default Header;

31
public/components/Page.jsx
View File

@ -1,31 +0,0 @@
/*
* 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() {
let clazz = "c-page";
if(this.props.className) clazz += " " + this.props.className;
return (
<main className={clazz}>
{this.props.children}
</main>
)
}
}
export default Page;

34
public/components/Section.jsx
View File

@ -1,34 +0,0 @@
/*
* 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 clazz = "c-section";
if(this.props.section) clazz += " c-section--style-"+this.props.section;
if(this.props.full) clazz += " c-section--full-width";
if(this.props.className) clazz += " " + this.props.className;
return (
<section className={ clazz }>
{ this.props.children }
</section>
)
}
}
export default Section;

26
public/components/background/BackgroundLayer.jsx
View File

@ -1,26 +0,0 @@
/*
* Background Layer
* Simple Background Layer.
*
* Dependencies:
* styles/components/_background-layer.scss
*
* Version:
* 1.0.0 - 2018/02/24
*/
import React from 'react';
class BackgroundLayer extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div class={"c-background-layer c-background-layer--" + this.props.layer} ref="layer">
</div>
);
}
}
export default BackgroundLayer;

64
public/components/background/BackgroundLayers.jsx
View File

@ -1,64 +0,0 @@
/*
* Background Layers
* Wrapper for the background layer's, provides logic in a cost efficient manner.
*
* Dependencies:
* ./BackgrundLayer.jsx
*
* Version:
* 1.0.0 - 2018/02/24
*/
import React from 'react';
import BackgroundLayer from './BackgroundLayer';
class BackgroundLayers extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
this.layerMounted = true;
this.onFrame();
}
componentWillUnmount() {
this.layerMounted = false;
}
onFrame() {
if(this.layerMounted) {
requestAnimationFrame(this.onFrame.bind(this));
}
//https://stackoverflow.com/questions/2387136/cross-browser-method-to-determine-vertical-scroll-percentage-in-javascript
let h = document.documentElement,
b = document.body,
st = 'scrollTop',
sh = 'scrollHeight';
let percent = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
for(var i = 0; i < this.props.layers.length; i++) {
let layerContainer = this.refs["layer-"+i];
let layer = layerContainer.refs.layer;
layer.style["transform"] = "translateY(-"+(percent/4)+"%) translateZ(0)";
}
}
render() {
let layers = [];
for(var i = 0; i < this.props.layers.length; i++) {
let l = this.props.layers[i];
let e = <BackgroundLayer layer={l.layer} key={"layer-"+i} ref={"layer-"+i} />
layers.push(e);
}
return (
<div class="c-background-layers" ref="">
{layers}
</div>
);
}
}
export default BackgroundLayers;

66
public/components/components/Button.jsx
View File

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

48
public/components/forms/ContactForm.jsx
View File

@ -1,48 +0,0 @@
/*
* 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';
import { connect } from 'react-redux';
import Language from './../../language/Language';
class ContactForm extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Form className={this.props.className}>
<InputGroup title={Language.get("contact.form.name.label")} >
<TextInput placeholder={Language.get("contact.form.name.placeholder")} />
</InputGroup>
<InputGroup title={Language.get("contact.form.email.label")}>
<TextInput type="email" placeholder={Language.get("contact.form.email.placeholder")} />
</InputGroup>
<InputGroup title={Language.get("contact.form.message.label")}>
<TextInput multiline placeholder={Language.get("contact.form.message.placeholder")} />
</InputGroup>
<Button submit>{Language.get("contact.form.submit")}</Button>
</Form>
);
}
}
const mapStateToProps = function(state) {
return {
code: state.language.code
}
}
export default connect(mapStateToProps)(ContactForm);

84
public/components/forms/Form.jsx
View File

@ -1,84 +0,0 @@
/*
* 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 };

130
public/components/navigation/Menu.jsx
View File

@ -1,130 +0,0 @@
/*
* Menu
* Simple expandable menu.
*
* Dependencies:
* styles/components/_menu.scss
*
* Version:
* 1.0.0 - 2018/03/01
*/
import React from 'react';
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { NavLink } from 'react-router-dom';
import { faBars } from '@fortawesome/fontawesome-free-solid'
import { connect } from 'react-redux';
import Language from './../../language/Language';
const MenuItems = {
"navbar.contact.title": {
"navbar.contact.about": "/about",
"navbar.contact.programming": "/about/programming",
"navbar.contact.api": "/about/api",
"navbar.contact.other": "/about/other",
"navbar.contact.contact": "/contact"
},
"navbar.legal.title": {
"navbar.legal.privacy": "/privacy-policy"
}
}
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} onClick={props.onClick}>
{props.children}
</NavLink>
)
}
class Menu extends React.Component {
constructor(props) {
super(props);
this.state = {
open: false
}
}
toggleMenu() {
this.setState({
open: !this.state.open
});
}
openMenu() {
this.setState({
open: true
});
}
closeMenu() {
this.setState({
open: false
})
}
render() {
if(this.state.open) {
document.body.classList.add('is-menu-open');
} else {
document.body.classList.remove('is-menu-open');
}
let menu = [];
let keys = Object.keys(MenuItems);
for(var i = 0; i < keys.length; i++) {
let k = keys[i];
let sKeys = Object.keys(MenuItems[k]);
let menuItems = [];
for(var x = 0; x < sKeys.length; x++) {
let sKey = sKeys[x];
console.log(sKey);
menuItems.push(<MenuItem to={MenuItems[k][sKey]} onClick={this.closeMenu.bind(this)} key={x+"-"+i}>{Language.get(sKey)}</MenuItem>)
}
menu.push(
<MenuGroup title={Language.get(k)} key={i}>
{menuItems}
</MenuGroup>
);
}
return (
<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">
{menu}
</div>
</div>
</div>
</div>
</div>
<button type="button" className="c-menu__button" onClick={this.toggleMenu.bind(this)}>
<FontAwesomeIcon icon={faBars} />
</button>
</nav>
)
}
}
const mapStateToProps = function(state) {
return {
code: state.language.code
}
}
export default connect(mapStateToProps)(Menu);

49
public/components/navigation/Navbar.jsx
View File

@ -1,49 +0,0 @@
/*
* Header
* Header for page, contains navbar as well as other consistant top of page
* elements.
*
* Dependencies:
* styles/components/_navbar.scss
*
* Version:
* 1.0.0 - 2018/02/23
*/
import React from 'react';
import { Link, NavLink } from 'react-router-dom';
import Menu from './Menu';
const NavbarLink = function(props) {
return (
<NavLink exact to={props.to} className="c-navbar__link" activeClassName="active">
<span className="c-navbar__link-text">{props.children}</span>
</NavLink>
)
}
class Navbar extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<nav className="c-navbar">
<Menu open />
<Link to="/" className="c-navbar__logo-container">
<img src={ require('./../../images/logo.svg') } className="c-navbar__logo" alt="domsPlace" />
</Link>
<div className="c-navbar__links">
<NavbarLink exact to="/">Home</NavbarLink>
<NavbarLink to="/about">About</NavbarLink>
<NavbarLink to="/contact">Contact</NavbarLink>
</div>
</nav>
)
}
}
export default Navbar;

41
public/components/pages/AboutPage.jsx
View File

@ -1,41 +0,0 @@
/*
* 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 Page from './../Page';
import TitleSection from './../sections/TitleSection';
import BodySection from './../sections/BodySection';
import AboutScene from './../../3d/scenes/AboutScene';
class AboutPage extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Page className="c-page--style-about">
<TitleSection
title="about.titles.me"
scene={<AboutScene />}
/>
<BodySection>
Test
</BodySection>
</Page>
);
}
}
export default AboutPage;

54
public/components/pages/ContactPage.jsx
View File

@ -1,54 +0,0 @@
/*
* 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 BodySection from './../sections/BodySection';
import TitleSection from './../sections/TitleSection';
import ContactForm from './../forms/ContactForm';
import { connect } from 'react-redux';
import Language from './../../language/Language';
class ContactPage extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Page>
<TitleSection title="contact.form.title" />
<BodySection>
<div className="c-page--style-container__split">
<ContactForm className="c-page--style-container__split-part" />
<div className="c-page--style-container__split-part">
<p>
{Language.get("contact.form.info")}
</p>
</div>
</div>
</BodySection>
</Page>
)
}
}
const mapStateToProps = function(state) {
return {
code: state.language.code
}
}
export default connect(mapStateToProps)(ContactPage);

48
public/components/pages/IndexPage.jsx
View File

@ -1,48 +0,0 @@
/*
* Index Page
* Homepage.
*
* Dependencies:
* styles/components/_page--style-index.scss
*
* Version:
* 1.0.1 - 2018/03/01
*/
import React from 'react';
import Page from './../Page';
import BodySection from './../sections/BodySection';
import SplitSection from './../sections/SplitSection';
import { connect } from 'react-redux';
import Language from './../../language/Language';
class IndexPage extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Page>
<SplitSection left={
"test"
} right={
"tost"
}
/>
<BodySection>
<h1>Lorem</h1>
</BodySection>
</Page>
)
}
}
const mapStateToProps = function(state) {
return {
code: state.language.code
}
}
export default connect(mapStateToProps)(IndexPage);

158
public/components/pages/KitchenSinkPage.jsx
View File

@ -1,158 +0,0 @@
import React from 'react';
import Page from './../Page';
import BodySection from './../sections/BodySection';
class KitchenSinkPage extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Page>
<BodySection>
<h1>This is the primary heading and there should only be one of these per page</h1>
<p>A small paragraph to <em>emphasis</em> and show <strong>important</strong> bits.</p>
<ul>
<li>This is a list item</li>
<li>So is this - there could be more</li>
<li>Make sure to style list items to:
<ul>
<li>Not forgetting child list items</li>
<li>Not forgetting child list items</li>
<li>Not forgetting child list items</li>
<li>Not forgetting child list items</li>
</ul></li>
<li>A couple more</li>
<li>top level list items</li>
</ul>
<p>Don't forget <strong>Ordered lists</strong>:</p>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<h2>A sub heading which is not as important as the first, but is quite imporant overall</h2>
<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.
</p>
<table class="t1" summary="Top 10 downloaded movies in 2011 using BitTorrent, in descending order, listing number of downloads and worldwide cinema grosses">
<caption>
Most Downloaded Movies on BitTorrent, 2011
</caption>
<thead>
<tr>
<th>Rank</th>
<th>Movie</th>
<th>Downloads</th>
<th>Grosses</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="4">torrentfreak.com</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>1</th>
<td>Fast Five</td>
<td>9,260,000</td>
<td>$626,137,675</td>
</tr>
<tr>
<th>2</th>
<td>The Hangover II</td>
<td>8,840,000</td>
<td>$581,464,305</td>
</tr>
<tr>
<th>3</th>
<td>Thor</td>
<td>8,330,000</td>
<td>$449,326,618</td>
</tr>
<tr>
<th>4</th>
<td>Source Code</td>
<td>7,910,000</td>
<td>$123,278,618</td>
</tr>
<tr>
<th>5</th>
<td>I Am Number Four</td>
<td>7,670,000</td>
<td>$144,500,437</td>
</tr>
<tr>
<th>6</th>
<td>Sucker Punch</td>
<td>7,200,000</td>
<td>$89,792,502</td>
</tr>
<tr>
<th>7</th>
<td>127 Hours</td>
<td>6,910,000</td>
<td>$60,738,797</td>
</tr>
<tr>
<th>8</th>
<td>Rango</td>
<td>6,480,000</td>
<td>$245,155,348</td>
</tr>
<tr>
<th>9</th>
<td>The King’s Speech</td>
<td>6,250,000</td>
<td>$414,211,549</td>
</tr>
<tr>
<th>10</th>
<td>Harry Potter and the Deathly Hallows Part 2</td>
<td>6,030,000</td>
<td>$1,328,111,219</td>
</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.
</p>
<blockquote>
<p><em>This is a properly formatted blockquote, btw.</em> Measuring programming progress by lines of code is like measuring aircraft building progress by weight.</p>
<footer>
— <cite><a href="http://www.thegatesnotes.com">Bill Gates</a></cite>
</footer>
</blockquote>
<h4>A sub heading which is not as important as the second, but should be used with consideration</h4>
<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.
</p>
<blockquote>
<p>
“Ooh - a blockquote! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.”
</p>
</blockquote>
</BodySection>
</Page>
)
}
}
export default KitchenSinkPage;

84
public/components/pages/OldAboutPage.jsx
View File

@ -1,84 +0,0 @@
/*
* 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);

33
public/components/pages/PrivacyPolicyPage.jsx
View File

@ -1,33 +0,0 @@
import React from 'react';
import Page from './../Page';
import BlankPromo from './../sections/BlankPromo';
import BodySection from './../sections/BodySection';
import { connect } from 'react-redux';
import Language from './../../language/Language';
class PrivacyPolicyPage extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Page>
<BlankPromo />
<BodySection>
<h1>{Language.get("privacy.title")}</h1>
{Language.get("privacy.policy")}
</BodySection>
</Page>
)
}
}
const mapStateToProps = function(state) {
return {
code: state.language.code
}
}
export default connect(mapStateToProps)(PrivacyPolicyPage);

61
public/components/pages/about/APIPage.jsx
View File

@ -1,61 +0,0 @@
/*
* API Page
* About that one lad.
*
* Dependencies:
*
* 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 VideoTitle from './../../title/VideoTitle';
import SkillBox from './SkillBox';
import apiMP4 from './../../../videos/about/api.mp4';
class APIPage extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Page className="c-page--style-api-skills">
<BodySection
title={
<VideoTitle
title="about.titles.apis" mp4={apiMP4}
/>
}
>
<p>{ Language.get("about.descriptions.apis") }</p>
<div className="o-skill-box__container">
<SkillBox language="gl" />
<SkillBox language="node" />
<SkillBox language="react" />
<SkillBox language="shopify" />
<SkillBox language="neto" />
<SkillBox language="jquery" />
<SkillBox language="nodecg" />
<SkillBox language="phonegap" />
<SkillBox language="other" />
</div>
</BodySection>
</Page>
);
}
}
const mapStateToProps = function(state) {
return {
code: state.language.code
}
}
export default connect(mapStateToProps)(APIPage);

58
public/components/pages/about/OtherSkillsPage.jsx
View File

@ -1,58 +0,0 @@
/*
* Other Skills Page
* About that one lad.
*
* Dependencies:
*
* 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 VideoTitle from './../../title/VideoTitle';
import SkillBox from './SkillBox';
import otherMP4 from './../../../videos/about/other.mp4';
class OtherSkillsPage extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Page className="c-page--style-other-skills">
<BodySection
title={
<VideoTitle
title="about.titles.other" mp4={otherMP4}
/>
}
>
<p>{ Language.get("about.descriptions.other") }</p>
<div className="o-skill-box__container">
<SkillBox language="video" />
<SkillBox language="animation" />
<SkillBox language="graphics" />
<SkillBox language="networking" />
<SkillBox language="software" />
</div>
</BodySection>
</Page>
);
}
}
const mapStateToProps = function(state) {
return {
code: state.language.code
}
}
export default connect(mapStateToProps)(OtherSkillsPage);

64
public/components/pages/about/ProgrammingPage.jsx
View File

@ -1,64 +0,0 @@
/*
* Programming Page
* About that one lad.
*
* Dependencies:
*
* 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 VideoTitle from './../../title/VideoTitle';
import SkillBox from './SkillBox';
import programmingMP4 from './../../../videos/about/programming.mp4';
class ProgrammingPage extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Page className="c-page--style-programming">
<BodySection
title={
<VideoTitle
title="about.titles.programming" mp4={programmingMP4}
/>
}
>
<p>{ Language.get("about.descriptions.programming") }</p>
<div className="o-skill-box__container">
<SkillBox language="csharp" />
<SkillBox language="java" />
<SkillBox language="javascript" />
<SkillBox language="html" />
<SkillBox language="php" />
<SkillBox language="vb" />
<SkillBox language="sql" />
<SkillBox language="lua" />
<SkillBox language="actionscript" />
<SkillBox language="ruby" />
<SkillBox language="python" />
</div>
</BodySection>
</Page>
);
}
}
const mapStateToProps = function(state) {
return {
code: state.language.code
}
}
export default connect(mapStateToProps)(ProgrammingPage);

18
public/components/pages/about/SkillBox.jsx
View File

@ -1,18 +0,0 @@
import React from 'react';
import Language from './../../../language/Language';
const SkillBox = function(props) {
return (
<div className={"o-skill-box o-skill-box--" + props.language}>
<h2 className="o-skill-box__heading">
{Language.get("about."+props.language+".name")}
</h2>
<p className="o-skill-box__description">
{Language.get("about."+props.language+".description")}
</p>
</div>
)
}
module.exports = SkillBox;

28
public/components/sections/BlankPromo.jsx
View File

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

46
public/components/sections/BodySection.jsx
View File

@ -1,46 +0,0 @@
/*
* 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() {
let children;
if(this.props.children) {
if(this.props.unpadded) {
children = this.props.children;
} else {
children = (
<div className="c-body-section__wrapper">
{this.props.children}
</div>
);
}
}
return (
<Section section="body" className={this.props.className}>
<div className="c-section--style-body__inner">
{ this.props.title }
{ children }
</div>
</Section>
)
}
}
export default BodySection;

47
public/components/sections/SplitSection.jsx
View File

@ -1,47 +0,0 @@
/*
* Poly
* Poly styled section.
*
* Dependencies:
* styles/components/_section--style-split.scss
*
* Version:
* 1.0.0 - 2018/03/11
*/
import React from 'react';
import Section from './../Section';
const SplitSectionSection = function(props) {
let clazz = "c-section--style-split__split-part";
if(typeof props.className !== typeof undefined) clazz += " " + props.className;
return (
<div className={clazz}>
{props.children}
</div>
);
}
class SplitSection extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Section section="split" full={this.props.full ? true : false} className={this.props.className}>
<SplitSectionSection className={this.props.leftClass}>
{this.props.left}
</SplitSectionSection>
<SplitSectionSection className={this.props.rightClass}>
{this.props.right}
</SplitSectionSection>
</Section>
);
}
}
export default SplitSection;

50
public/components/sections/TitleSection.jsx
View File

@ -1,50 +0,0 @@
/*
* 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);

49
public/components/title/VideoTitle.jsx
View File

@ -1,49 +0,0 @@
/*
* Video Title
* Video title.
*
* Dependencies:
* styles/components/_video-title.scss
*
* Version:
* 1.0.0 - 2018/03/18
*/
import React from 'react';
import { connect } from 'react-redux';
import { Link, NavLink } from 'react-router-dom';
import Language from './../../language/Language';
const VideoTitle = function(props) {
let children = ([
<video autoPlay className="o-video-title__video" loop key="video">
<source src={ props.mp4 } type="video/mp4" />
</video>,
<h2 className="o-video-title__heading" key="title">
{ Language.get(props.title) }
</h2>
]);
let clazz = "o-video-title";
if(props.to) {
return (
<NavLink to={props.to} exact activeClassName="active" className={clazz}>
{children}
</NavLink>
);
}
return (
<div className={clazz}>
{children}
</div>
);
}
const mapStateToProps = function(state) {
return {
code: state.language.code
}
}
export default connect(mapStateToProps)(VideoTitle);

88
public/components/w95/ContextButton.jsx
View File

@ -1,88 +0,0 @@
import React, { Component } from 'react';
import { render } from 'react-dom';
import ContextMenuButton from './ContextMenuButton';
class ContextButton extends Component {
constructor(props) {
super(props);
this.handleClick = function(e) {
if(this.isOpen()) {
//Already active, close menu.
this.props.menu.closeMenu();
} else {
this.props.menu.openMenu(this.props.selfRef, this);
}
e.stopPropagation();
}.bind(this);
this.handleHover = function() {
this.props.menu.hoverMenu(this.props.selfRef, this);
}.bind(this);
}
componentDidMount() {
let e = this.refs[this.props.selfRef];
e.addEventListener('click', this.handleClick);
e.addEventListener('mouseover', this.handleHover);
}
componentWillUmount() {
let e = this.refs[this.props.selfRef];
e.removeEventListener('click', this.handleClick);
e.removeEventListener('mouseover', this.handleHover);
}
open() {
if(this.isDisabled()) return this.hide();
this.refs[this.props.selfRef].addClass("active");
}
isDisabled() {return this.refs[this.props.selfRef].hasClass("disabled");}
hide() {
this.refs[this.props.selfRef].removeClass("active");
}
isOpen() {
return this.refs[this.props.selfRef].hasClass("active");
}
render() {
let cls = "c-context-menu__btn";
let options = [];
if(this.props.data === "disabled") {
cls += " disabled";
} else {
let opts = Object.keys(this.props.data);
for(let i = 0; i < opts.length; i++) {
let k = opts[i];
let o = this.props.data[k];
//options.push(<div className="menu-option">{k}</div>);
options.push(<ContextMenuButton ref={k} key={k} selfRef={k} data={o} button={this} title={k} />);
}
}
let menu = <div></div>;
if(options.length > 0) {
menu = (
<div className="c-context-menu__menu">
{options}
</div>
);
}
return (
<div className={cls} ref={this.props.selfRef}>
{this.props.title}
{menu}
</div>
)
}
}
export default ContextButton;

69
public/components/w95/ContextMenu.jsx
View File

@ -1,69 +0,0 @@
import React, { Component } from 'react';
import { render } from 'react-dom';
import ContextButton from './ContextButton';
import ContextMenuButton from './ContextMenuButton';
class ContextMenu extends Component {
constructor(props) {
super(props);
this.handleClickOutside = function(e) {
this.closeMenu();
e.stopPropagation();
}.bind(this);
}
isOpen() {
return this.open;
}
openMenu(ref, el) {
let keys = Object.keys(this.refs);
for(let i = 0; i < keys.length; i++) {
this.refs[keys[i]].hide(ref, el);
}
el.open();
this.open = true;
}
closeMenu() {
let keys = Object.keys(this.refs);
for(let i = 0; i < keys.length; i++) {
this.refs[keys[i]].hide();
}
this.open = false;
}
hoverMenu(ref, el) {
if(!this.isOpen()) return;
this.openMenu(ref, el);
}
componentDidMount() {
document.addEventListener('click', this.handleClickOutside);
}
componentWillUmount() {
document.removeEventListener('click', this.handleClickOutside);
}
render() {
let contextButtons = [];
let btnKeys = Object.keys(this.props.menu);
for(let i = 0; i < btnKeys.length; i++) {
let key = btnKeys[i];
var b = this.props.menu[key];
if(b === false) continue;
contextButtons.push(<ContextButton data={b} title={key} menu={this} ref={key} key={key} selfRef={key} />);
}
return (
<div className="c-context-menu">
{contextButtons}
</div>
);
}
}
export default ContextMenu;

45
public/components/w95/ContextMenuButton.jsx
View File

@ -1,45 +0,0 @@
import React, { Component } from 'react';
import { render } from 'react-dom';
class ContextMenuButton extends Component {
constructor(props) {
super(props);
this.handleClick = function(e) {
e.stopPropagation();
if(this.isDisabled()) return;
this.props.button.props.menu.closeMenu();
this.clicked();
}.bind(this);
}
clicked() {
if(typeof this.props.data === 'function') {
this.props.data();
}
}
componentDidMount() {
this.refs.option.addEventListener('click', this.handleClick);
}
componentWillUmount() {
this.refs.option.removeEventListener('click', this.handleClick);
}
isDisabled() {return this.props.data === "disabled";}
render() {
let cls = "c-context-menu__menu-option";
if(this.isDisabled()) cls += " disabled";
return (
<div className={cls} ref="option">
{this.props.title}
</div>
);
}
}
export default ContextMenuButton;

75
public/components/w95/Window95.jsx
View File

@ -1,75 +0,0 @@
import React, { Component } from 'react';
import ContextMenuButton from './ContextMenuButton';
import ContextButton from './ContextButton';
import ContextMenu from './ContextMenu';
const defaultButtons = {
maximize: false,
minimize: "disabled",
close: true
};
const defaultMenus = {
"File": {
"New...": true,
"Open...": "disabled",
"Exit": true,
},
"Edit": "disabled",
"Help": {
"View Help...": true,
"About domsPlace();": true
}
};
class Window95 extends Component {
constructor(props) {
super(props);
this.state = {
title: this.props.title ? this.props.title : "Untitled",
buttons: this.props.buttons ? this.props.buttons : defaultButtons,
menu: this.props.menu ? this.props.menu : defaultMenus
};
}
render() {
let btns = [];
let btnKeys = Object.keys(this.state.buttons);
for(let i = 0; i < btnKeys.length; i++) {
let key = btnKeys[i];
var b = this.state.buttons[key];
if(b === false) continue;
let cls = "c-window-btn " + btnKeys[i];
if(b !== true && b !== false) cls += " " + b;
btns.push(<div className={cls} key={i}></div>);
}
let menu = <div></div>
if(this.state.menu !== "false") {
menu = <ContextMenu menu={this.state.menu} />;
}
let clss = "c-window";
if(this.props.className) clss += " " + this.props.className;
return (
<div className={clss}>
<div className="load_me_stuff"></div>
<div className="c-title-bar">
{this.state.title}
<div className="c-window-buttons">
{btns}
</div>
</div>
{menu}
{this.props.children}
</div>
);
}
}
export default Window95;

BIN
public/images/95/1x/95button.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 189 B

BIN
public/images/95/1x/95button_icons.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 436 B

BIN
public/images/95/1x/95button_inverted.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 187 B

BIN
public/images/95/1x/95frame.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 188 B

BIN
public/images/95/1x/95window.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 187 B

BIN
public/images/95/2x/95button.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 187 B

BIN
public/images/95/2x/95button_icons.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 719 B

BIN
public/images/95/2x/95button_inverted.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 188 B

BIN
public/images/95/2x/95frame.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 196 B

BIN
public/images/95/2x/95window.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 203 B

BIN
public/images/dotted_bg_yellow.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 209 B

BIN
public/images/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 55 KiB

51
public/images/logo.svg
View File

@ -1,51 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 782.07 202.31">
<title>Asset 4</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<path
d="
M74.64,120.85c-1.17,2-2.49,4.38-4,7.13s-3,5.6-4.44,8.56-2.88,5.86-4.2,8.71-2.46,5.28-3.41,7.29a17.55,17.55,0,0,0-1.74,4.83c-.11,1,.08,1.59.55,1.75a2.84,2.84,0,0,0,2-.4A16.35,16.35,0,0,0,62.12,157q3.33-2.53,7.68-6.42t8.64-8.08q4.28-4.2,8.08-8.32a77.57,77.57,0,0,0,6.18-7.45c1.06-1.48,2.11-2.27,3.17-2.37a2.72,2.72,0,0,1,2.61,1.26,7.16,7.16,0,0,1,1.11,4,14.13,14.13,0,0,1-1.34,6q-.48.94-2.78,4.35t-5.94,7.85q-3.65,4.44-8.32,9.19a76.76,76.76,0,0,1-9.82,8.47A44.74,44.74,0,0,1,61,171.16a17.34,17.34,0,0,1-10.14.87q-5.07-1.11-6.66-5.23a19.71,19.71,0,0,1-.79-9.82c-2.22,2-4.49,3.91-6.81,5.7a67.85,67.85,0,0,1-7,4.75,42.56,42.56,0,0,1-6.9,3.33A18.69,18.69,0,0,1,16.17,172q-7.61,0-12-5A16.74,16.74,0,0,1,0,155.23a60.76,60.76,0,0,1,3.48-19.64,79.76,79.76,0,0,1,8.56-17.28,84,84,0,0,1,11.8-14.26A98.86,98.86,0,0,1,37,93.28a66.19,66.19,0,0,1,12.6-6.81,25.74,25.74,0,0,1,10.14-2.22q5.23.31,8,2.61a10.26,10.26,0,0,1,3.57,5.63q4.27-9.19,7.53-17.43t5.62-16.48q2.39-8.23,4.12-16.64t3-17.91q.48-3.8,2.62-3.8a7.4,7.4,0,0,1,4.51,1.9,22.21,22.21,0,0,1,4.28,4.6q1.91,2.7,1.9,4.12-.48,18.06-8.24,41A307.76,307.76,0,0,1,74.64,120.85ZM15.85,148c-.32,3.69,0,6.23,1,7.6s2.4,1.82,4.36,1.35a20.67,20.67,0,0,0,7-3.73,78.85,78.85,0,0,0,8.56-7.52q4.52-4.52,9.27-10t9.19-11c.52-1.05,1-2,1.5-2.93s.93-1.77,1.35-2.61c.74-1.38,1.45-2.72,2.14-4s1.35-2.67,2-4a22.31,22.31,0,0,1,.71-3.65,18.44,18.44,0,0,0,.64-3.88,5.31,5.31,0,0,0-.8-3.17c-.58-.9-1.77-1.4-3.56-1.51A19.5,19.5,0,0,0,49.84,101a48.66,48.66,0,0,0-9.51,6.26,65.5,65.5,0,0,0-8.87,9A91.57,91.57,0,0,0,23.93,127,74.72,74.72,0,0,0,18.47,138,37.91,37.91,0,0,0,15.85,148Z
"/>
<path
d="
M147.21,107.54a9.77,9.77,0,0,1,6-1.35,17.31,17.31,0,0,1,6.42,1.67,10.47,10.47,0,0,1,4.43,3.8,4.47,4.47,0,0,1,.08,4.91c-.53.74-1.61,2.41-3.25,5s-3.3,5.31-5,8.16a83.33,83.33,0,0,0-4.12,7.77c-1.05,2.32-1.16,3.59-.31,3.8a10.14,10.14,0,0,0,6.18-.4,30.65,30.65,0,0,0,7.36-3.64,49.48,49.48,0,0,0,7.29-5.94,53.45,53.45,0,0,0,6.26-7.29,2.68,2.68,0,0,1,2.69-1.35,4.07,4.07,0,0,1,2.7,1.74,8.78,8.78,0,0,1,1.5,3.73,6.91,6.91,0,0,1-.87,4.59,39.31,39.31,0,0,1-6.1,7.61,48.94,48.94,0,0,1-9.74,7.61,43.83,43.83,0,0,1-11.89,4.91,22.92,22.92,0,0,1-12.51-.32,15.23,15.23,0,0,1-4.92-2.69q-3.65,4.11-7.6,7.92a74.93,74.93,0,0,1-8.16,6.81,49.09,49.09,0,0,1-8.64,5,29.27,29.27,0,0,1-8.87,2.46,34,34,0,0,1-6.34.08,18.05,18.05,0,0,1-7.92-2.38,15.74,15.74,0,0,1-6.26-7.13q-2.46-5-1.67-14.5a45.83,45.83,0,0,1,3-11.88,85.41,85.41,0,0,1,6.65-13.55A112.69,112.69,0,0,1,103.32,109a90.76,90.76,0,0,1,12-12.12A65.55,65.55,0,0,1,129,88.13a37.18,37.18,0,0,1,14.57-3.72,35,35,0,0,1,9,.71,19.76,19.76,0,0,1,6.1,2.38A10.7,10.7,0,0,1,162.18,91a9.27,9.27,0,0,1,1.35,4,9.88,9.88,0,0,1-.64,4.28,11.39,11.39,0,0,1-2.06,3.49,5.7,5.7,0,0,1-2.61,1.82,1.78,1.78,0,0,1-2.14-.72,11.43,11.43,0,0,0-6.42-4.51,16.39,16.39,0,0,0-8-.08,46.65,46.65,0,0,0-12.91,5.7,57.74,57.74,0,0,0-10.7,8.8,77.31,77.31,0,0,0-8.4,10.46,93.62,93.62,0,0,0-6.1,10.45,70.55,70.55,0,0,0-3.8,9.12,28.76,28.76,0,0,0-1.5,6.17,10.43,10.43,0,0,0,.47,5,6.92,6.92,0,0,0,2.14,3,8.11,8.11,0,0,0,2.85,1.42,10.7,10.7,0,0,0,2.77.4,14.33,14.33,0,0,0,6.42-2.14,46.73,46.73,0,0,0,7-5.15,85,85,0,0,0,7.29-7.21q3.64-4,7-8.16a32.12,32.12,0,0,1,.48-8.32,37.28,37.28,0,0,1,2.53-8.32,38.52,38.52,0,0,1,4.28-7.37A24.89,24.89,0,0,1,147.21,107.54Z
"/>
<path
d="
M295.68,96.61q-7.6,13.47-14,27.33l-13.23,28.6a17.55,17.55,0,0,0-1.74,4.83c-.11,1,.08,1.59.56,1.75a2.82,2.82,0,0,0,2-.4,16.35,16.35,0,0,0,2.69-1.74q3.33-2.53,7.68-6.42t8.64-8.08q4.27-4.2,8.08-8.32a77.57,77.57,0,0,0,6.18-7.45c1.06-1.48,2.11-2.27,3.17-2.37a2.71,2.71,0,0,1,2.61,1.26,7.16,7.16,0,0,1,1.11,4,14.13,14.13,0,0,1-1.34,6q-.48.94-2.78,4.35t-5.94,7.85q-3.65,4.44-8.32,9.19a76.76,76.76,0,0,1-9.82,8.47,44.54,44.54,0,0,1-10.38,5.71,17.34,17.34,0,0,1-10.14.87q-6.81-1.58-8.32-7.45t.87-14.26a136.37,136.37,0,0,1,6.5-17q3.65-7.84,7-13.95t5.86-10.14q2.54-4,3.33-5.62c.42-1,.48-1.45.16-1.51a2.33,2.33,0,0,0-1.35.4,21.64,21.64,0,0,0-1.9,1.19,10.08,10.08,0,0,0-1.5,1.19q-3.18,2.22-7.85,6.18t-9.82,9q-5.16,5.07-10.38,10.93t-9.59,11.81a88.37,88.37,0,0,0-7.29,11.64,32.73,32.73,0,0,0-3.56,10.46v-.79a9.49,9.49,0,0,1,.16-1.9,21.54,21.54,0,0,0-.79,6,4.49,4.49,0,0,1-1.51,2.85c-1,1.06-2.77,1.37-5.31.95a5.66,5.66,0,0,1-3.56-1.82,10.26,10.26,0,0,1-2.06-3.57,13.08,13.08,0,0,1-.72-4.36,17.1,17.1,0,0,1,.48-4.19,143.73,143.73,0,0,1,6.42-20.29q3.72-9.18,7.29-16.24T229.6,110a67,67,0,0,0,3.65-6.26c.42-.95.47-1.45.16-1.51a2.33,2.33,0,0,0-1.35.4,18.37,18.37,0,0,0-1.9,1.19,11.77,11.77,0,0,0-1.51,1.18,107.58,107.58,0,0,0-11.09,9q-6.81,6.09-13.71,13.54a189,189,0,0,0-13,15.69,70.3,70.3,0,0,0-9,15.37c-.11.85-.21,1.61-.32,2.3a11.61,11.61,0,0,0-.16,1.82q-.63,6-3.17,8.16t-5.54-.24a12.54,12.54,0,0,1-3.65-5.07q-1.42-3.33-1.26-9.82a41.3,41.3,0,0,1,1.82-9.67,118.51,118.51,0,0,1,4.28-12q2.61-6.33,5.86-13t6.42-12.44q3.17-5.79,5.94-10.46a66.22,66.22,0,0,1,4.67-7,16,16,0,0,1,7.13-5.47,19,19,0,0,1,7.69-1.5,6.8,6.8,0,0,1,5.07,2.06c1.11,1.27.92,2.9-.56,4.91q-4.59,6.34-8.16,11.88t-6.73,10.62q4.75-5.7,10.22-11.17a94.11,94.11,0,0,1,11.25-9.67,50.83,50.83,0,0,1,11.88-6.49,28.3,28.3,0,0,1,12.28-1.82,10.28,10.28,0,0,1,5.39,1.66,5.88,5.88,0,0,1,2.22,3.17,8,8,0,0,1,0,3.88,12.35,12.35,0,0,1-1.43,3.64c-.53.85-1.5,2.65-2.93,5.39l-5.15,10q4.75-5.53,10.06-10.77A86.69,86.69,0,0,1,266,92.17,51.24,51.24,0,0,1,277.53,86a27.13,27.13,0,0,1,11.81-1.74,10.6,10.6,0,0,1,5.55,1.66,5.84,5.84,0,0,1,2.21,3.17,8,8,0,0,1,0,3.88A12.41,12.41,0,0,1,295.68,96.61Z
"/>
<path
d="
M355.1,64.28a8.86,8.86,0,0,1,6.41,1,12.27,12.27,0,0,1,4,4,9.65,9.65,0,0,1,1.51,4.52c.05,1.42-.35,2.3-1.19,2.61s-2.38,1-4.59,2.06a41,41,0,0,0-6.9,4.28,39.66,39.66,0,0,0-6.73,6.58,19.49,19.49,0,0,0-4.12,8.79,49.31,49.31,0,0,0-.64,9.27q0,6.26.4,13.07t.79,12.92c.27,4.06.4,7.05.4,9q.15,10.31-4,17.11a31.84,31.84,0,0,1-23.06,15.37,24.67,24.67,0,0,1-11.72-.79,22.56,22.56,0,0,1-12.2-9,20.76,20.76,0,0,1-3.81-12.6,40.61,40.61,0,0,1,1.91-9.82,44.08,44.08,0,0,1,4.19-9.27,40.67,40.67,0,0,1,6.11-7.85,30.25,30.25,0,0,1,7.44-5.54,6.52,6.52,0,0,1,5.63-.32,16,16,0,0,1,5.31,3.09,12.73,12.73,0,0,1,3.16,4c.64,1.37.37,2.27-.79,2.69a24.28,24.28,0,0,0-11.25,7.61,28.38,28.38,0,0,0-5.7,10.62,14.36,14.36,0,0,0,.39,9.58q1.83,4.2,7.21,4.52a12.59,12.59,0,0,0,9.67-3.72A19,19,0,0,0,328.48,148a53.2,53.2,0,0,0,.87-12.21q-.24-6.65-1-13.31t-1.35-12.75a60.34,60.34,0,0,1-.32-10.38,32.15,32.15,0,0,1,4.36-14,54.73,54.73,0,0,1,8.32-10.86,46.32,46.32,0,0,1,9-7.21Q352.88,64.6,355.1,64.28Z
"/>
<path
d="
M479.16,25.78a15.09,15.09,0,0,1,7.21-.87,25.23,25.23,0,0,1,7.13,1.66,9.05,9.05,0,0,1,4.28,3.09c.79,1.21.34,2.3-1.34,3.25q-1.59.95-5.39,5.78t-9.19,12.44q-5.39,7.6-12.05,17.59T456,89.87q-7.12,11.17-14.5,23.06t-14.34,23.45a107.46,107.46,0,0,0,28.36-9.19,158.61,158.61,0,0,0,26-15.77,165.57,165.57,0,0,0,22.18-19.81,163.27,163.27,0,0,0,17-21.23,91.51,91.51,0,0,0,10.3-20q3.33-9.51,2.22-16.32a17.44,17.44,0,0,0-4.52-9.83,21.52,21.52,0,0,0-9-5.38A45,45,0,0,0,507,16.9a136.16,136.16,0,0,0-15.61.64,160.58,160.58,0,0,0-23.92,4.35,216.74,216.74,0,0,0-25.35,8.24,232.3,232.3,0,0,0-24.64,11.41,165.83,165.83,0,0,0-21.71,13.79A104.68,104.68,0,0,0,379.1,70.78a46.59,46.59,0,0,0-9.43,16.32,9.45,9.45,0,0,0-.55,4.2c.16,1.21.32,2.27.47,3.17a12.68,12.68,0,0,1,.24,2q0,.63-1.11.63a27.3,27.3,0,0,1-3.64-.39A15.25,15.25,0,0,1,360,94.86a13.06,13.06,0,0,1-4.36-4,10.7,10.7,0,0,1-1.51-7q1.11-11.4,9.83-22.5a109.2,109.2,0,0,1,22.42-20.92,196.29,196.29,0,0,1,30.9-17.9A263.05,263.05,0,0,1,452.39,8.9a214.32,214.32,0,0,1,35.09-7.68,119.79,119.79,0,0,1,30.9-.4q13.71,1.83,22.42,8.24t9.83,18.3a67.13,67.13,0,0,1-4,28.68A120.25,120.25,0,0,1,531.61,84.8a165.26,165.26,0,0,1-23.37,26.54,190.79,190.79,0,0,1-29,22.11,175,175,0,0,1-31.77,15.6,111.59,111.59,0,0,1-31.85,7q-8.24,14.25-14,25.51a140.85,140.85,0,0,0-7.84,17.27q-1.11,3.33-3.81,3.48a8.73,8.73,0,0,1-5.3-1.5,15.46,15.46,0,0,1-4.44-4.28,5.44,5.44,0,0,1-1-5,110,110,0,0,1,6.26-15.29q4.51-9.43,11-21.31a59.48,59.48,0,0,1-8.64-2.22,44.1,44.1,0,0,1-8-3.65,9.89,9.89,0,0,1-3.25-3.09,26.66,26.66,0,0,1-2.61-4.67,20.28,20.28,0,0,1-1.5-5.15,11.2,11.2,0,0,1,.07-4.44,3.21,3.21,0,0,1,1.91-2.37q1.43-.56,4.27.71a66.93,66.93,0,0,0,13.55,5.07,78.7,78.7,0,0,0,13.87,2.22q7-12.2,14.73-25t15.37-25Q443.83,75.05,451,64.12t12.91-19.25q5.79-8.31,9.83-13.39T479.16,25.78Z
"/>
<path
d="
M609.57,29A299.66,299.66,0,0,0,586.2,51.29Q575,63.17,565.2,75.37T547.3,99.3q-8.09,11.73-14,22t-9.58,18.39a56.2,56.2,0,0,0-4.44,12.83,35.27,35.27,0,0,0-.63,5.15c0,1,.16,1.58.47,1.74s.8,0,1.43-.55,1.43-1.16,2.38-1.9q3.32-2.53,7.68-6.42t8.64-8.08q4.28-4.2,8.08-8.32a62.88,62.88,0,0,0,6-7.45c1-1.48,2.14-2.27,3.25-2.37a2.8,2.8,0,0,1,2.69,1.26,7.16,7.16,0,0,1,1.11,4,14.31,14.31,0,0,1-1.35,6,47.79,47.79,0,0,1-2.85,4.35q-2.37,3.42-6,7.85T541.91,157a72.88,72.88,0,0,1-9.74,8.47,44.2,44.2,0,0,1-10.46,5.71,17.64,17.64,0,0,1-10.22.87,6.64,6.64,0,0,1-5-3.8,22,22,0,0,1-1.67-7.29A48.2,48.2,0,0,1,507.29,143a129,129,0,0,1,8.79-21,255.11,255.11,0,0,1,13.31-22.58Q537,87.9,545.32,77T562,56.2q8.4-9.83,15.69-17.43t12.84-12.44q5.54-4.83,8.24-5.78a16.93,16.93,0,0,1,7.28-1.35,8.17,8.17,0,0,1,4.84,1.67,4,4,0,0,1,1.42,3.64A7.14,7.14,0,0,1,609.57,29Z
"/>
<path
d="
M607.82,117.2a18.3,18.3,0,0,1,7-4,15,15,0,0,1,6.1-.55,8,8,0,0,1,3.88,1.43c.84.68,1,1.34.32,2a25.43,25.43,0,0,0-4,5.62q-2.55,4.36-5.31,9.82t-5.55,11.26q-2.78,5.77-4.67,9.74a17.67,17.67,0,0,0-1.75,4.83c-.1,1,.08,1.59.56,1.75a2.82,2.82,0,0,0,2-.4,16.35,16.35,0,0,0,2.69-1.74q3.33-2.53,7.69-6.42t8.63-8.08q4.29-4.2,8.08-8.32a77.57,77.57,0,0,0,6.18-7.45c1.06-1.48,2.12-2.27,3.17-2.37a2.73,2.73,0,0,1,2.62,1.26,7.32,7.32,0,0,1,1.11,4,14.31,14.31,0,0,1-1.35,6q-.48.94-2.77,4.35t-5.94,7.85q-3.66,4.44-8.32,9.19a77.53,77.53,0,0,1-9.83,8.47A44.54,44.54,0,0,1,608,171.16a17.33,17.33,0,0,1-10.14.87q-5.07-1.11-6.65-5.15a21.08,21.08,0,0,1-1.11-9.59,112.41,112.41,0,0,1-13.63,10.62q-7,4.6-13.31,4.6a15.72,15.72,0,0,1-6.81-1.43,16.09,16.09,0,0,1-5.15-3.8,15.07,15.07,0,0,1-3.17-5.55,20.79,20.79,0,0,1-1-6.5,60.76,60.76,0,0,1,3.49-19.64A79.73,79.73,0,0,1,559,118.31a84.1,84.1,0,0,1,11.81-14.26A98.22,98.22,0,0,1,584,93.28a65.83,65.83,0,0,1,12.59-6.81,25.82,25.82,0,0,1,10.15-2.22q7.44.31,11.72,3.72a19.24,19.24,0,0,1,6,7.61,15.22,15.22,0,0,1,1.27,7.84q-.48,3.64-2.38,4.28c-2.11.74-3.7.71-4.75-.08a16.7,16.7,0,0,1-3.09-3.09,31.63,31.63,0,0,0-3.49-3.72q-2-1.83-5.94-2a19.5,19.5,0,0,0-9.27,2.22,48.3,48.3,0,0,0-9.5,6.26,65.55,65.55,0,0,0-8.88,9,90.29,90.29,0,0,0-7.52,10.7A74.81,74.81,0,0,0,565.44,138a37.91,37.91,0,0,0-2.62,10q-.47,5.85,1.11,7.76t4.68,1a22.63,22.63,0,0,0,7.37-4.28,108.74,108.74,0,0,0,9-8.16q4.75-4.76,9.58-10.54t9.27-11.48l.16-.16A34.3,34.3,0,0,1,607.82,117.2Z
"/>
<path
d="
M697.83,82.66a10.86,10.86,0,0,1,5.94,1.82,11.3,11.3,0,0,1,3.48,4,16,16,0,0,1,1.59,4.43,19.79,19.79,0,0,1,.39,3.25,16.53,16.53,0,0,1-1.26,5.15,44.36,44.36,0,0,1-3.49,7.13,37,37,0,0,1-5.39,7,19,19,0,0,1-7,4.68q-3.79,1.43-5.94.87a4.6,4.6,0,0,1-3-2.06,4.87,4.87,0,0,1-.64-3.17,3.47,3.47,0,0,1,1.35-2.46,28.88,28.88,0,0,0,2.22-2,37.7,37.7,0,0,0,3.25-3.56q1.67-2.06,3.25-4.28a17.3,17.3,0,0,0,2.21-4,2.94,2.94,0,0,0-.07-2.77c-.48-.69-1.56-.88-3.25-.56q-5.07.8-11.41,5.86a91.9,91.9,0,0,0-12.36,12.13,118.21,118.21,0,0,0-10.93,15,70.79,70.79,0,0,0-7.13,14.73c-1.48,4.5-1.75,8.19-.8,11.1s3.59,4.25,7.93,4a31.67,31.67,0,0,0,11.4-3,73,73,0,0,0,11.49-6.66,105.42,105.42,0,0,0,10.7-8.63q5.07-4.68,9.19-8.8t7-7.13a36.54,36.54,0,0,1,4-3.8,3.38,3.38,0,0,1,2.93-.48,3.61,3.61,0,0,1,2.06,1.9,8.87,8.87,0,0,1,.87,3.33,9.37,9.37,0,0,1-.47,3.8,21.43,21.43,0,0,1-2.69,3.89q-2.55,3.24-6.82,7.76T696.32,151a110.81,110.81,0,0,1-12.52,9.74,96.22,96.22,0,0,1-14.1,7.84,45.46,45.46,0,0,1-15,4q-7.14.63-11.73-1.27a17.65,17.65,0,0,1-10.93-12.68,29.65,29.65,0,0,1-.8-7.92,43.49,43.49,0,0,1,3-12.2,93.07,93.07,0,0,1,7.28-14.82,117,117,0,0,1,10.86-15.13A97.78,97.78,0,0,1,666,95.18a66.46,66.46,0,0,1,15.37-9.35A37.63,37.63,0,0,1,697.83,82.66Z
"/>
<path
d="
M763.9,82.66a11,11,0,0,1,6.65,1.75A10.7,10.7,0,0,1,774,88.52a12.44,12.44,0,0,1,1.19,4.84,11.46,11.46,0,0,1-.4,3.88,59.54,59.54,0,0,1-3.4,8.4,42.8,42.8,0,0,1-7.69,10.93q-2.85,3-6.89,6.81t-8.64,7.53a79,79,0,0,1-9.58,6.66,40.7,40.7,0,0,1-9.59,4.2c-2.54.74-4.54.84-6,.31a5.64,5.64,0,0,1-3.09-2.22,4.26,4.26,0,0,1-.64-2.93,2,2,0,0,1,1.51-1.82,38.83,38.83,0,0,0,11.57-5.62,132.62,132.62,0,0,0,10.77-8.24q4.9-4.2,8.32-7.69c2.27-2.32,3.57-3.7,3.88-4.12a56.22,56.22,0,0,0,3.73-5.15,20.28,20.28,0,0,0,2.29-4.59,3.24,3.24,0,0,0-.15-3c-.53-.69-1.75-.88-3.65-.56a22.54,22.54,0,0,0-8.4,3.65,61.3,61.3,0,0,0-9.27,7.6,113.32,113.32,0,0,0-9.19,10.3,130.48,130.48,0,0,0-8.16,11.49,77.34,77.34,0,0,0-5.94,11.25,33.61,33.61,0,0,0-2.69,9.66,8.89,8.89,0,0,0,1.58,6.66c1.32,1.64,3.62,2.4,6.89,2.3a32.37,32.37,0,0,0,11.49-3,70.42,70.42,0,0,0,11.65-6.74,114.23,114.23,0,0,0,10.93-8.79q5.24-4.75,9.51-8.88t7.21-7.21a24.13,24.13,0,0,1,4-3.72c1-.74,1.93-.87,2.61-.4a4.52,4.52,0,0,1,1.59,2.3,11.56,11.56,0,0,1,.63,3.33,15.62,15.62,0,0,1-.08,2.85c-.1.53-1,1.88-2.61,4s-3.88,4.81-6.74,7.93-6.2,6.41-10.06,9.9a124.81,124.81,0,0,1-12.52,9.9,86.11,86.11,0,0,1-14.18,8,46.23,46.23,0,0,1-15.05,4q-7.12.63-11.73-1.27a17.71,17.71,0,0,1-10.93-12.68,29.63,29.63,0,0,1-.79-7.92,44.32,44.32,0,0,1,2.85-12.2,90.26,90.26,0,0,1,7-14.58,115.87,115.87,0,0,1,10.46-15,89,89,0,0,1,13.31-13.23,66.5,66.5,0,0,1,15.61-9.43A43.53,43.53,0,0,1,763.9,82.66Z
"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
public/images/profile.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 38 KiB

BIN
public/images/space.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 474 B

BIN
public/images/stars0.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
public/images/stars1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.8 KiB

BIN
public/images/stars2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.6 KiB

BIN
public/images/stars3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB

BIN
public/images/static.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 21 KiB

17
public/index.html
View File

@ -1,17 +0,0 @@
<!DOCTYPE HTML>
<html lang="en-AU" class="no-js">
<head>
<meta charset="utf-8" />
<title>domsPlace</title>
<meta name="keywords" content="domsplace, programming, gaming, anime, livestreaming, dominic, masters, dom" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="description" content="domsPlace, Personal Website of Dominic Masters as well as video games, anime, programming and more." />
<meta name="apple-mobile-web-app-capable" content="yes" />
</head>
<body>
<div id="app" class="c-app__wrapper">
</div>
</body>
</html>

31
public/index.jsx
View File

@ -1,31 +0,0 @@
'use strict';
import 'babel-polyfill';
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';
import rootReducer from './reducers/rootReducer';
require('./../common/Object');
require('./../common/HTMLElement');
//Create our store
const store = createStore(rootReducer);
const unsubscribe = store.subscribe(() => {
console.log(store.getState());
});
//Render app and supply provider for store.
render((
<Provider store={store}>
<HashRouter>
<App />
</HashRouter>
</Provider>
), document.getElementById("app"));

52
public/language/Language.jsx
View File

@ -1,52 +0,0 @@
import enAU from './en-AU.jsx';
const LANGUAGES = {
'en-AU': enAU
}
class Language {
constructor() {
this.setLanguage("en-AU");
}
setLanguage(lang) {
this.langName = lang;
this.data = LANGUAGES[lang];
}
getLanguage() {
return this.langName;
}
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;
}
getRecursive(key_array, data_obj) {
if(typeof data_obj === typeof undefined) data_obj = this.data;
if(typeof data_obj === typeof undefined) return null;
let k = key_array[0];
let o = data_obj[k];
if(typeof o === typeof undefined) return null;
if(typeof o === 'function') o = o();
//Awesome
if(key_array.length > 1) {
if(typeof o !== typeof {}) return null;
key_array.shift();
return this.getRecursive(key_array, o);
}
return o;
}
getLanguages() {
return Object.keys(LANGUAGES);
}
}
const lang = new Language();
export default lang;

335
public/language/en-AU.jsx
View File

@ -1,335 +0,0 @@
import React from 'react';
module.exports = {
"navbar": {
"contact": {
"title": "Get in Touch",
"about": "About Me",
"programming": "Programming Skills",
"api": "APIs & Tools Skills",
"other": "Other Skills",
"contact": "Contact Me"
},
"legal": {
"title": "Legal Stuff",
"privacy": "Privacy Policy"
}
},
"about": {
"titles": {
"me": "About Me",
"programming": "Programming",
"apis": "APIs, Libraries, Tools and Platforms",
"other": "Other Skills"
},
"descriptions": {
"welcome": "Hello! My name is Dominic \"YourWishes\" Masters, and welcome " +
"to my little place on the web!",
"me": function() {
return (
<div>
<p>
I am a 23 year old programmer from Sydney, Australia. I have
been programming, and generally working with computers and other
technology for as long as I can remember.
</p>
<p>
Some of my interests include; Programming, System Administration,
Hardware Repair, Disco Music, Video Games, Livestreaming, Video
Creation and editing, Voice Acting, Anime, Manga, Learning
Japanese and more!
</p>
<p>
Click one of the below headings to find out more about my
skillsets.
</p>
</div>
);
},
"programming": "Programming is my passion, and I continue to develop my " +
"skillset every day. I am fluent in many computing technologies and "+
"languages. Below are just some of the languages I'm fluent in.",
"apis": " ",
"other": "Beyond programming I have other skills in Computing Systems and " +
"media. Most of these skills are just hobbies but I have used them from " +
"time to time in my daily work. The skills can also often transfer to " +
"programming."
},
"csharp": {
"name": "C#",
"description": "I have been working with C# since late 2012, starting " +
"with libraries like XNA and .NET."
},
"java": {
"name": "Java",
"description": "I have been using Java since late 2011 as an introduction " +
"into OOP and Desktop Software writing."
},
"javascript": {
"name": "Javascript",
"description": "I have been using Javascript for various projects since " +
"around 2009."
},
"html": {
"name": "HTML/CSS",
"description": "I have been using and playing with HTML for websites since " +
"around 2006 as one of my first steps into programming."
},
"php": {
"name": "PHP",
"description": "I have been using PHP as a server language since 2011, " +
"although lately I tend to favour libraries such as node for this."
},
"vb": {
"name": "VB",
"description": "While an underappreciated language I have used VB for " +
"university projects and system scripting since 2010."
},
"sql": {
"name": "SQL",
"description": "I have used SQL Servers for various projects since 2011 " +
"mostly with MySQL or PGSQL."
},
"lua": {
"name": "Lua",
"description": "While rarely used anymore I have used Lua for scripting " +
"and game development since late 2009."
},
"actionscript": {
"name": "ActionScript",
"description": "My first taste of programming, I have been using ActionScript " +
"in all it's flavours since early 2005, starting with some Flash Animations and " +
"developing into game programming."
},
"ruby": {
"name": "Ruby",
"description": "Not one of my strongest languages, I have used Ruby for "+
"Shopify, an eCommerce platform since 2017."
},
"python": {
"name": "Python",
"description": "Another language I'm not super fluent in, however I have "+
"used it for scripts and for personal projects since 2015."
},
"gl": {
"name": "GL",
"description": "I have been working with various Graphics Libaries, incuding "+
"OpenGL, LWJGL, JOGL, XNA, MonoGame, Unity C#, WebGL and Playstation " +
"Mobile SDK in various forms since early 2009."
},
"node": {
"name": "Node",
"description": "I write software, servers and scripts in Node, it is " +
"becoming my most used platform to develop for. I have been using Node " +
" since early 2014."
},
"react": {
"name": "React & Redux",
"description": "Since 2015 I have been writing apps using the React, " +
"Redux and JSX frameworks."
},
"shopify": {
"name": "Shopify",
"description": "I have been working with Shopify as part of my daily job " +
"since October of 2017. Utilizing Shopify's Liquid Markup, as well as " +
"the Shopify API's for app development."
},
"neto": {
"name": "neto",
"description": "I have worked with the neto eCommerce platform since mid "+
"2015, as well as their b@se templating language."
},
"jquery": {
"name": "jQuery",
"description": "Many websites I have developed have utilized the jQuery " +
"library, since late 2009. Despite is fading popularity I still use it " +
"from time to time, however tend to drop it in favour of native JS."
},
"nodecg": {
"name": "NodeCG",
"description": "Being an avid content creator for livestreams and videos, " +
"I have extensive experince with the NodeCG Stream Graphics Library."
},
"phonegap": {
"name": "PhoneGap/Cordova",
"description": "I have written ReactJS apps for mobile devices using Adobe's " +
"PhoneGap tools built ontop of Apache's Cordova software."
},
"other": {
"name": "Other Tools",
"description": "SCSS, LESS, JOGL, Webpack, Express, Babel, Grunt, JSON, " +
"XML, YML, Typescript, ECMAScript, FFMPEG, Google API, Heroku, YouTube, " +
"Twitch.TV, OAUTH2, VirtueMart, Joomla, WordPress, Craft CMS, opus, " +
"SourceMod, Twitter Bootstrap, Bukkit, BTC Markets, ITCSS, BEM, " +
"ionic, PHPBB, Xenforo, WebSockets, Twitter, Facebook, Instagram, " +
"eBay, PayPal & more."
},
"video": {
"name": "Video Creation",
"description": "I have basic video editing and creation skills using software " +
"such as Adobe Premiere, Sony Vegas and Adobe After Effects. For Audio " +
"editing and creating I use software such as Adobe Audition and Audacity. " +
"I have been working on videos professionally and as a hobby since 2006."
},
"animation": {
"name": "Animation",
"description": "I have done some animation since the early 2000's, and " +
"was my passion before programming. I have been working with various " +
"animation tools and software such as Macromedia/Adobe Flash, Cinema4D, " +
"3DS MAX 9 and Source FilmMaker."
},
"graphics": {
"name": "Graphics",
"description": "I have used various tools for Graphics design and editing " +
"for many years, too many to name, my most commonly used tools are " +
"Photoshop, Illustrator, Paint.NET."
},
"networking": {
"name": "Networking",
"description": "I have skills in networking and subnetting using the IPv4 " +
"protocol. I also have extensive experience in setting up and managing " +
"servers and domain registrations. Other networking tools I'm familiar with " +
"include Active Directory, Windows Deployment Services, VNC and TeamViewer."
},
"software": {
"name": "Software Support",
"description": "I have experience in software support and general IT support " +
"both professionally and as a hobby. Everything from fixing emails, printers, " +
"software installation, diagnosis and more. I have worked with all major Operating Systems."
},
},
"privacy": {
"title": "Privacy Policy",
"policy": function() {
return (
<div>
<p>This Privacy Policy governs the manner in which domsPlace collects, uses, maintains and discloses information collected from users (each, a "User") of the http://domsplace.com website ("Site").</p>
<h3>Personal identification information</h3>
<p>We may collect personal identification information from Users in a variety of ways, including, but not limited to, when Users visit our site, register on the site, fill out a form, respond to a survey, and in connection with other activities, services, features or resources we make available on our Site. Users may be asked for, as appropriate, name, email address. Users may, however, visit our Site anonymously. We will collect personal identification information from Users only if they voluntarily submit such information to us. Users can always refuse to supply personally identification information, except that it may prevent them from engaging in certain Site related activities.</p>
<h3>Non-personal identification information</h3>
<p>We may collect non-personal identification information about Users whenever they interact with our Site. Non-personal identification information may include the browser name, the type of computer and technical information about Users means of connection to our Site, such as the operating system and the Internet service providers utilized and other similar information.</p>
<h3>Web browser cookies</h3>
<p>Our Site may use "cookies" to enhance User experience. User's web browser places cookies on their hard drive for record-keeping purposes and sometimes to track information about them. User may choose to set their web browser to refuse cookies, or to alert you when cookies are being sent. If they do so, note that some parts of the Site may not function properly.</p>
<h3>How we use collected information</h3>
<p>domsPlace may collect and use Users personal information for the following purposes:</p>
<ul>
<li>
<i>To run and operate our Site</i><br/>
We may need your information display content on the Site correctly.
</li>
<li>
<i>To improve customer service</i><br/>
Information you provide helps us respond to your customer service requests and support needs more efficiently.
</li>
<li>
<i>To personalize user experience</i><br/>
We may use information in the aggregate to understand how our Users as a group use the services and resources provided on our Site.
</li>
<li>
<i>To improve our Site</i><br/>
We may use feedback you provide to improve our products and services.
</li>
<li>
<i>To run a promotion, contest, survey or other Site feature</i><br/>
To send Users information they agreed to receive about topics we think will be of interest to them.
</li>
<li>
<i>To send periodic emails</i><br/>
We may use the email address to send User information and updates pertaining to their order. It may also be used to respond to their inquiries, questions, and/or other requests.
</li>
</ul>
<h3>How we protect your information</h3>
<p>We adopt appropriate data collection, storage and processing practices and security measures to protect against unauthorized access, alteration, disclosure or destruction of your personal information, username, password, transaction information and data stored on our Site.</p>
<h3>Sharing your personal information</h3>
<p>We do not sell, trade, or rent Users personal identification information to others. We may share generic aggregated demographic information not linked to any personal identification information regarding visitors and users with our business partners, trusted affiliates and advertisers for the purposes outlined above. </p>
<h3>Electronic newsletters</h3>
<p>If User decides to opt-in to our mailing list, they will receive emails that may include company news, updates, related product or service information, etc. If at any time the User would like to unsubscribe from receiving future emails, we include detailed unsubscribe instructions at the bottom of each email or User may contact us via our Site.</p>
<h3>Third party websites</h3>
<p>Users may find advertising or other content on our Site that link to the sites and services of our partners, suppliers, advertisers, sponsors, licensors and other third parties. We do not control the content or links that appear on these sites and are not responsible for the practices employed by websites linked to or from our Site. In addition, these sites or services, including their content and links, may be constantly changing. These sites and services may have their own privacy policies and customer service policies. Browsing and interaction on any other website, including websites which have a link to our Site, is subject to that website's own terms and policies.</p>
<h3>Compliance with children's online privacy protection act</h3>
<p>Protecting the privacy of the very young is especially important. For that reason, we never collect or maintain information at our Site from those we actually know are under 13, and no part of our website is structured to attract anyone under 13.</p>
<h3>Changes to this privacy policy</h3>
<p>domsPlace has the discretion to update this privacy policy at any time. When we do, we will post a notification on the main page of our Site and send you an email. We encourage Users to frequently check this page for any changes to stay informed about how we are helping to protect the personal information we collect. You acknowledge and agree that it is your responsibility to review this privacy policy periodically and become aware of modifications.</p>
<h3>Your acceptance of these terms</h3>
<p>By using this Site, you signify your acceptance of this policy. If you do not agree to this policy, please do not use our Site. Your continued use of the Site following the posting of changes to this policy will be deemed your acceptance of those changes. This privacy policy was built <a href="https://privacypolicies.com/" target="_blank">using the https://PrivacyPolicies.com generator</a>.</p>
<h3>Contacting us</h3>
<p>If you have any questions about this Privacy Policy, the practices of this site, or your dealings with this site, please contact us.</p>
<p>This document was last updated on February 27, 2016</p>
</div>
);
}
},
"contact": {
"form": {
"title": "Contact",
"info": "Want to get in touch? Fill out this form and I should respond within a few days at most.",
"name": {
"label": "Name",
"placeholder": "Enter your name."
},
"email": {
"label": "Email",
"placeholder": "Enter your email address.",
},
"message": {
"label": "Message",
"placeholder": "Enter your message here."
},
"submit": "Send"
}
},
}

26
public/reducers/language.js
View File

@ -1,26 +0,0 @@
'use strict';
import Language from './../language/Language';
import { SET_LANGUAGE, LANGUAGES } from './../actions/language';
const initialState = {
code: Language.getLanguage()
};
function language(state, action) {
if(typeof state === typeof undefined) {
state = initialState;
}
switch(action.type) {
case SET_LANGUAGE:
if(!(action.theme)) return state;
return {
code: action.code
};
default:
return state;
}
}
export default language;

13
public/reducers/rootReducer.js
View File

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

24
public/styles/components/_app.scss
View File

@ -1,24 +0,0 @@
/*
* App
* Styles for the App itself
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/02/23
*/
.c-app__wrapper {
min-height: 100vh;
width: 100%;
}
.c-app {
width: 100%;
height: 100%;
min-height: 100vh;
overflow-x: hidden;
position: relative;
@extend %t-flexbox;
@include t-flex-wrap(wrap);
@include t-flex-flow(column);
}

44
public/styles/components/_background-layer.scss
View File

@ -1,44 +0,0 @@
/*
* Background Layer
* Styles for the background layer component.
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/03/21
*/
$starSize: 1024px;
$starTime: 4s;
$starSizeMobile: 0.5;
$starTimeMobile: $starTime / $starSizeMobile;
.c-background-layers {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
&__wrapper {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
perspective: 0px;
}
.c-background-layer {
width: 100%;
background-repeat: repeat;
position: fixed;
top: 0;
left: 0;
@for $i from 0 through 3 {
&--stars-#{$i} {
height: 200% + (50% * $i);
background-image: url('./../images/stars#{$i}.png');
}
}
}

59
public/styles/components/_footer.scss
View File

@ -1,59 +0,0 @@
/*
* Footer
* Styles for footer element
*
* Dependencies:
* styles/settings/responsive.scss
* styles/tools/_flex.scss
* styles/tools/_responsive.scss
*
* Version:
* 1.0.0 - 2018/03/03
*/
$c-footer--text-color: $s-color--text;
$c-footer--background-color: $s-color--background-default;
$c-footer--z-index: 10;//Should render over most if not all body elements
.c-footer {
width: 100%;
background: $c-footer--background-color;
@extend %t-flexbox;
@include t-flex-wrap(wrap);
z-index: $c-footer--z-index;
}
.c-footer__copyright {
color: $c-footer--text-color;
}
.c-footer__copyright,
.c-footer__links {
width: 100%;
text-align: center;
padding: 1em;
}
.c-footer__link {
display: block;
}
@include t-media-query($s-small-up) {
.c-footer {
@include t-flex-wrap(nowrap);
}
.c-footer__copyright {
text-align: left;
}
.c-footer__links {
text-align: right;
}
.c-footer__link {
display: inline;
+ #{&}:before {
content: " | ";
}
}
}

36
public/styles/components/_form.scss
View File

@ -1,36 +0,0 @@
/*
* 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;
max-width: 100%;
}

12
public/styles/components/_header.scss
View File

@ -1,12 +0,0 @@
/*
* Header
* Styles for header element
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/02/23
*/
.c-header {
position: relative;
}

116
public/styles/components/_menu.scss
View File

@ -1,116 +0,0 @@
/*
* Menu
* 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/04
*/
$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;
padding: 0.25em 0;
}
@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%;
}
}

92
public/styles/components/_navbar.scss
View File

@ -1,92 +0,0 @@
/*
* Navbar
* Styles for Navbar
*
* Dependencies:
* styles/settings/colors.scss
* styles/settings/responsive.scss
* styles/tools/_box-shadow.scss
* styles/tools/_flex.scss
* styles/tools/_responsive.scss
* styles/tools/_transform.scss
*
* Version:
* 1.0.0 - 2018/02/23
*/
$c-navbar--z-index: 100;
$c-navbar--background: $s-color--background-default;
$c-navbar--link-offset: 5px;
.c-navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: $c-navbar--background;
z-index: $c-navbar--z-index;
@extend %t-flexbox;
}
//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;
@include t-justify-content(flex-end);
}
.c-navbar__link {
@extend %s-font--navigation;
font-size: 1.2em;
padding: 0 1.5em;
@extend %t-inline-flex;
@include t-align-items(center);
&.active {
border-bottom: $s-thickness--border-thick solid $s-color--links;
}
}
.c-navbar__link-text {
//vertical-align: middle;
}
@include t-media-query($s-small-up) {
.c-navbar {
width: 90%;
top: 1em;
left: 1em;
@include t-box-shadow(-10px, 10px, 0px, rgba(0, 0, 0, 0.5));
}
.c-navbar__links {
@include t-flexbox;
}
.c-navbar__link {
background: $s-color--background-default;
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));
}
}
}

73
public/styles/components/_page--style-about.scss
View File

@ -1,73 +0,0 @@
/*
* About Page
* Styles for index page elements
*
* Dependencies:
* styles/settings/responsive.scss
* styles/tools/_flex.scss
* styles/tools/_responsive.scss
*
* Version:
* 1.0.0 - 2018/03/11
*/
//Body Section Margin
.c-about-page__body-section {
margin-bottom: 3em;
}
//About Section
.c-page--style-about__bio-section {
margin-bottom: 5em;
}
.c-page--style-about {
}
.c-page--style-about__profile-container {
}
.c-window--style-about {
max-width: 25em;
margin: 0 auto;
display: block;
width: 90%;
}
.c-page--style-about__profile {
width: 100%;
max-width: 256px;
margin: 0 auto;
}
.c-page--style-about__blurb {
font-size: 1.25em;
}
.c-page--style-about__profile-container {
text-align: center;
}
//Window adjustments for about section
.c-page--style-about__window {
display: block;
width: 90%;
margin: 0 auto;
}
.c-page--style-about__window-text {
width: 100%;
resize: none;
}
//Media queries
@include t-media-query($s-small-up) {
.c-page--style-about__blurb {
}
.c-page--style-about__window-container {
width: 50%;
}
.c-page--style-about__window {
width: 50%;
}
}

35
public/styles/components/_page--style-contact.scss
View File

@ -1,35 +0,0 @@
/*
* Contact Page
* Styles for page elements
*
* Dependencies:
* styles/settings/responsive.scss
* styles/tools/_repsonsive.scss
* styles/tools/_flex.scss
* styles/components/_page.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);
}
.c-page--style-container__split-part {
width: 50%;
}
}

12
public/styles/components/_page--style-index.scss
View File

@ -1,12 +0,0 @@
/*
* Index Page
* Styles for index page elements
*
* Dependencies:
* styles/settings/responsive.scss
* styles/tools/_repsonsive.scss
* styles/tools/_flex.scss
*
* Version:
* 1.0.0 - 2018/03/11
*/

25
public/styles/components/_page.scss
View File

@ -1,25 +0,0 @@
/*
* Page
* Styles for page elements
*
* Dependencies:
* styles/settings/colors.scss - Used for colors
* styles/tools/_gradients.scss - Used for background gradients.
*
* Version:
* 1.0.0 - 2018/02/24
*/
.c-page {
min-height: 100%;
@include t-flex-grow(1);
@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');
//background-repeat: repeat-x;
//background-position: center bottom;
//background-size: (16px / 1) (384px / 1);
}

27
public/styles/components/_scene-component.scss
View File

@ -1,27 +0,0 @@
/*
* 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%;
}

12
public/styles/components/_section--style-blank-promo.scss
View File

@ -1,12 +0,0 @@
/*
* 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;
}

26
public/styles/components/_section--style-body.scss
View File

@ -1,26 +0,0 @@
/*
* 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__inner {
background: $s-color--background-default;
}
.c-body-section__wrapper {
padding: 1em;
}
@include t-media-query($s-small-up) {
.c-section--style-body__inner {
@include t-box-shadow(-10px, 10px, 0px, rgba(0, 0, 0, 0.5));
}
}

34
public/styles/components/_section--style-split.scss
View File

@ -1,34 +0,0 @@
/*
* Section Style Split
* Styles for split style section
*
* Dependencies:
* styles/settings/responsive.scss
* styles/tools/_repsonsive.scss
* styles/tools/_flex.scss
* styles/components/_section.scss
*
* Version:
* 1.0.0 - 2018/03/11
*/
.c-section--style-split {
@include t-flexbox();//Because we're winning a fight
@include t-flex-wrap(wrap);
}
.c-section--style-split__split-part {
width: 100%;
}
@include t-media-query($s-small-up) {
.c-section--style-split {
@include t-flex-wrap(nowrap);
@include t-justify-content(space-around);
@include t-align-items(center);
}
.c-section--style-split__split-part {
width: auto;
}
}

29
public/styles/components/_section--style-title.scss
View File

@ -1,29 +0,0 @@
/*
* 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;
}

23
public/styles/components/_section.scss
View File

@ -1,23 +0,0 @@
/*
* 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;
z-index: 1;
position:relative;
margin: 0 auto;
}
.c-section--full-width {
max-width: none;
}

206
public/styles/components/_w95.scss
View File

@ -1,206 +0,0 @@
@import './w95/settings.scss';
@import './w95/_mixins.scss';
@import './w95/_window.scss';
@import './w95/_title-bar.scss';
@import './w95/_window-button.scss';
@import './w95/_text-field.scss';
@import './w95/_window-menu.scss';
/*$windowBG: #C0C0C0;
$highlight: #0000BF;
$disabled: #808080;
$w95Font: 'MS PGothic', Verdana, Arial, Helvetica, sans-serif;
$imageScale: 1;
@mixin border95($thickness) {
border: (3px * $thickness) solid black;
border-image-source: url('./../images/95/'+($thickness * $imageScale)+'x/95window.png');
border-image-slice: 3 * $thickness;
}
@mixin button95($thickness) {
border: (2px * $thickness) solid black;
border-image-source: url('./../images/95/'+($thickness * $imageScale)+'x/95button.png');
border-image-slice: 2 * $thickness;
display: inline-block;
color: black;
background-image: url('./../images/95/'+($thickness * $imageScale)+'x/95button_icons.png');
background-color: $windowBG;
background-position: 0px 0px;
background-size: 48px*$thickness 20px*$thickness;
&:active {
border-image-source: url('./../images/95/'+($thickness * $imageScale)+'x/95button_inverted.png');
}
&.disabled {
background-position-y: 10px*$thickness;
&:active {
border-image-source: url('./../images/95/'+($thickness * $imageScale)+'x/95button.png');
}
}
}
@mixin frame95($thickness) {
border: (2px * $thickness) solid black;
border-image-source: url('./../images/95/'+($thickness * $imageScale)+'x/95frame.png');
border-image-slice: 2 * $thickness;
}
@mixin window95($scale) {
@extend %no-select;
@include border95($scale);
background: $windowBG;
font-family: $w95Font;
font-size: 12px*$scale;
display: inline-block;
> .load_me_stuff {
position: fixed;
left: -1000vmax;
top: -1000vmax;
border-image-source: url('./../images/95/'+($scale * $imageScale)+'x/95button_inverted.png');
}
> .title {
width: 100%;
color: white;
background: #000080;
padding: 2px * $scale;
font-weight: bold;
margin-bottom: 1px * $scale;
> .icon {
}
> .buttons {
height: 100%;
float: right;
font-size: 0;
> .btn {
@include button95($scale);
width: 16px*$scale;
height: 14px*$scale;
font-size: 12px*$scale;
&.close {
margin-left: 2px*$scale;
background-position-x: 0px*$scale;
}
&.help {
background-position-x: 36px*$scale;
}
&.minimize {
background-position-x: 24px*$scale;
}
&.maximize {
background-position-x: 12px*$scale;
}
}
}
}
> .context-menu {
width: 100%;
overflow: visible;
> .btn {
padding: (1px*$scale) (5px*$scale);
border: 1px*$scale solid transparent;
display: inline-block;
position: relative;
&::first-letter {
text-decoration: underline;
}
&:hover {
border-bottom-color: #868686;
border-right-color: #868686;
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
}
&.active {
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-top-color: #868686;
border-left-color: #868686;
> .menu {
display: block;
}
}
&.disabled {
color: $disabled;
&:hover,.active {
border-right-color: transparent;
border-bottom-color: transparent;
border-top-color: transparent;
border-left-color: transparent;
}
}
> .menu {
@include border95($scale);
border-top-width: 2px*$scale;
position: absolute;
display: none;
background: $windowBG;
left: -1px*$scale;
margin-top: 2px*$scale;
width: auto;
> .menu-option {
padding-left: 22px*$scale;
padding-right: 22px*$scale;
padding-bottom: 3px*$scale;
padding-top: 1px*$scale;
white-space: nowrap;
&:hover {
background: $highlight;
color: white;
}
&:first-child {font-weight: bold;}
&::first-letter {
text-decoration: underline;
}
&.disabled {
color: $disabled;
&:hover {background: inherit;color: $disabled;}
}
}
}
}
}
&.inactive {
> .title {
background-color: $disabled;
}
}
> .textarea {
@include frame95($scale);
background: white;
color: black;
cursor: text;
}
}
.window {
@include window95(2);
}
*/

52
public/styles/components/w95/_mixins.scss
View File

@ -1,52 +0,0 @@
@mixin border95($thickness) {
border: (3px * $thickness) solid black;
border-image-source: url('./../images/95/'+($thickness * $w95ImageScale)+'x/95window.png');
border-image-slice: 3 * $thickness;
}
@mixin button95($thickness) {
border: (2px * $thickness) solid black;
border-image-source: url('./../images/95/'+($thickness * $w95ImageScale)+'x/95button.png');
border-image-slice: 2 * $thickness;
display: inline-block;
color: black;
background-image: url('./../images/95/'+($thickness * $w95ImageScale)+'x/95button_icons.png');
background-color: $w95WindowBG;
background-position: 0px 0px;
background-size: 48px*$thickness 20px*$thickness;
&:active {
border-image-source: url('./../images/95/'+($thickness * $w95ImageScale)+'x/95button_inverted.png');
}
&.disabled {
background-position-y: 10px*$thickness;
&:active {
border-image-source: url('./../images/95/'+($thickness * $w95ImageScale)+'x/95button.png');
}
}
}
@mixin frame95($thickness) {
border: (2px * $thickness) solid black;
border-image-source: url('./../images/95/'+($thickness * $w95ImageScale)+'x/95frame.png');
border-image-slice: 2 * $thickness;
}
@mixin window95($scale) {
@extend %no-select;
@include border95($scale);
background: $w95WindowBG;
font-family: $w95Font;
font-size: 12px*$scale;
display: inline-block;
&.inactive {
> .title {
background-color: $w95Disabled;
}
}
}

6
public/styles/components/w95/_text-field.scss
View File

@ -1,6 +0,0 @@
.c-text-field {
@include frame95($w95Scale);
background: white;
color: black;
cursor: text;
}

8
public/styles/components/w95/_title-bar.scss
View File

@ -1,8 +0,0 @@
.c-title-bar {
width: 100%;
color: white;
background: #000080;
padding: 2px * $w95Scale;
font-weight: bold;
margin-bottom: 1px * $w95Scale;
}

29
public/styles/components/w95/_window-button.scss
View File

@ -1,29 +0,0 @@
.c-window-buttons {
height: 100%;
float: right;
font-size: 0;
}
.c-window-btn {
@include button95($w95Scale);
width: 16px*$w95Scale;
height: 14px*$w95Scale;
font-size: 12px*$w95Scale;
&.close {
margin-left: 2px*$w95Scale;
background-position-x: 0px*$w95Scale;
}
&.help {
background-position-x: 36px*$w95Scale;
}
&.minimize {
background-position-x: 24px*$w95Scale;
}
&.maximize {
background-position-x: 12px*$w95Scale;
}
}

78
public/styles/components/w95/_window-menu.scss
View File

@ -1,78 +0,0 @@
.c-context-menu {
width: 100%;
overflow: visible;
}
.c-context-menu__btn {
padding: (1px*$w95Scale) (5px*$w95Scale);
border: 1px*$w95Scale solid transparent;
display: inline-block;
position: relative;
&::first-letter {
text-decoration: underline;
}
&:hover {
border-bottom-color: #868686;
border-right-color: #868686;
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
}
&.active {
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-top-color: #868686;
border-left-color: #868686;
> .c-context-menu__menu {
display: block;
}
}
&.disabled {
color: $w95Disabled;
&:hover,.active {
border-right-color: transparent;
border-bottom-color: transparent;
border-top-color: transparent;
border-left-color: transparent;
}
}
}
.c-context-menu__menu {
@include border95($w95Scale);
border-top-width: 2px*$w95Scale;
position: absolute;
display: none;
background: $w95WindowBG;
left: -1px*$w95Scale;
margin-top: 2px*$w95Scale;
width: auto;
}
.c-context-menu__menu-option {
padding-left: 22px*$w95Scale;
padding-right: 22px*$w95Scale;
padding-bottom: 3px*$w95Scale;
padding-top: 1px*$w95Scale;
white-space: nowrap;
&:hover {
background: $w95Highlight;
color: white;
}
&:first-child {font-weight: bold;}
&::first-letter {
text-decoration: underline;
}
&.disabled {
color: $w95Disabled;
&:hover {background: inherit;color: $w95Disabled;}
}
}

3
public/styles/components/w95/_window.scss
View File

@ -1,3 +0,0 @@
.c-window {
@include window95($w95Scale);
}

7
public/styles/components/w95/settings.scss
View File

@ -1,7 +0,0 @@
$w95WindowBG: #C0C0C0;
$w95Highlight: #0000BF;
$w95Disabled: #808080;
$w95Font: 'MS PGothic', Verdana, Arial, Helvetica, sans-serif;
$w95ImageScale: 1;
$w95Scale: 2;

19
public/styles/elements/_a.scss
View File

@ -1,19 +0,0 @@
/*
* A
* Base A/Anchor Seettings
*
* Dependencies:
* styles/settings/colors.scss
*
* Version:
* 1.0.0 - 2018/02/23
*/
a {
text-decoration: none;
color: $s-color--links
}
a:hover {
text-decoration: underline;
color: $s-color--links-hover;
}

12
public/styles/elements/_all.scss
View File

@ -1,12 +0,0 @@
/*
* All
* Base * Seettings
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/02/23
*/
* {
box-sizing: border-box;
}

15
public/styles/elements/_body.scss
View File

@ -1,15 +0,0 @@
/*
* Body
* Base Body Seettings
*
* Dependencies:
* styles/settings/typography.scss - Used for fonts
*
* Version:
* 1.0.0 - 2018/02/23
*/
body {
font-family: $s-font--stack-default;
font-size: $s-font--size--base;
min-height: 100%;
}

16
public/styles/elements/_button.scss
View File

@ -1,16 +0,0 @@
/*
* Button
* Styles for Buttons
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/02/23
*/
button {
background: transparent;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
}

25
public/styles/elements/_dt.scss
View File

@ -1,25 +0,0 @@
/*
* DT, DL, DD
* Base Definition List Settings
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/03/11
*/
dt {
font-weight: bold;
}
dl {
}
dd {
margin-left: 2em;
}
dt ~ dt,
dl ~ dt {
margin-top: 1em;
}

13
public/styles/elements/_headings.scss
View File

@ -1,13 +0,0 @@
/*
* Headings
* Styles for headings 1 through 6
*
* Dependencies:
* styles/settings/typography`.scss
*
* Version:
* 1.0.0 - 2018/02/23
*/
h1,h2,h3,h4,h5,h6 {
font-family: $s-font--stack-headings;
}

13
public/styles/elements/_html.scss
View File

@ -1,13 +0,0 @@
/*
* HTML
* Base HTML Settings
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/02/23
*/
html {
width: 100%;
min-height: 100%;
}

11
public/styles/elements/_p.scss
View File

@ -1,11 +0,0 @@
/*
* P
* Base P/Paragraph Seettings
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/03/11
*/
p {
}

10
public/styles/elements/_table.scss
View File

@ -1,10 +0,0 @@
/*
* Table Element Styles
* Styles for body style section
*
* Version:
* 1.0.0 - 2018/03/02
*/
table {
width: 100%;
}

Some files were not shown because too many files have changed in this diff Show More