Initial commit

erremauro · Jan 1, 2018 · 8ad90fa · 8ad90fa
commit 8ad90fa
Show file tree

Hide file tree

Showing 16 changed files with 7,103 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,10 @@
+root = true
+
+[*]
+charset = utf-8
+
+[*.js]
+indent_size = 2
+indent_style = space
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Roberto Mauro
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,21 @@
+# errews-homepage
+
+https://www.erre.ws/ landing page project.
+
+## Install
+
+Clone the project into an existing folder:
+
+    git clone https://github.com/erremauro/errews-homepage.git . && yarn install
+
+## Start
+
+To start the project in development mode type:
+
+    yarn start
+
+## Build
+
+To build the project, type:
+
+    yarn build
diff --git a/package.json b/package.json
@@ -0,0 +1,22 @@
+{
+  "private": true,
+  "name": "errews-homepage",
+  "version": "1.0.0",
+  "description": "https://www.erre.ws/ landing page",
+  "repository": "https://github.com/erremauro/errews-homepage.git",
+  "author": "Roberto Mauro <[email protected]>",
+  "homepage": "https://www.erre.ws",
+  "license": "MIT",
+  "dependencies": {
+    "react-scripts": "1.0.17"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/static/css/master.css">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+    -->
+    <title>erre.ws</title>
+  </head>
+  <body>
+    <div id="root">
+      <div id="face" class="face full"></div>
+    </div>
+    <nav id="nav-links" class="nav-links">
+      <ul>
+        <li><a href="%PUBLIC_URL%/wiki">wiki</a></li>
+        <li><a href="https://github.com/erremauro">github</a></li>
+        <li><a href="https://twitter.com/erremauro">twitter</a></li>
+      </ul>
+    </nav>
+  </body>
+</html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/public/static/css/master.css b/public/static/css/master.css
diff --git a/src/animation-polyfill.js b/src/animation-polyfill.js
@@ -0,0 +1,25 @@
+let lastTime = 0;
+const vendors = ["ms", "moz", "webkit", "o"];
+
+for (let x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+  window.requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"];
+  window.cancelAnimationFrame =
+    window[vendors[x] + "CancelAnimationFrame"] ||
+    window[vendors[x] + "CancelRequestAnimationFrame"];
+}
+
+if (!window.requestAnimationFrame) {
+  window.requestAnimationFrame = (callback, element) => {
+    const currTime = new Date().getTime();
+    const timeToCall = Math.max(0, 16 - (currTime - lastTime));
+    var id = window.setTimeout(() => {
+      callback(currTime + timeToCall);
+    }, timeToCall);
+    lastTime = currTime + timeToCall;
+    return id;
+  };
+}
+
+if (!window.cancelAnimationFrame) {
+  window.cancelAnimationFrame = id => clearTimeout(id);
+}
diff --git a/src/create-app.js b/src/create-app.js
@@ -0,0 +1,83 @@
+import createEyeView from "./eye-view";
+import createEngine from "./engine";
+
+// define area of interaction
+const MIN_Y = 20;
+const MAX_Y = 500;
+const MIN_X = 200;
+const MAX_X = 1050;
+
+const EyeProps = {
+  target: "face",
+  size: 96,
+  top: 114,
+  eyeColor: "#e6e7e7",
+  irisColor: "#a6a8ab",
+  position: "absolute",
+  leftEyeName: "left-eye",
+  leftEyeMargin: 62,
+  rightEyeName: "right-eye",
+  rightEyeMargin: 251,
+  zIndex: -1
+};
+
+function initializeView(root) {
+  const faceDiv = document.createElement("div");
+  const rootDiv = document.getElementById(root);
+  faceDiv.id = "face";
+  faceDiv.className = "face";
+  rootDiv.innerHTML = "";
+  rootDiv.appendChild(faceDiv);
+}
+
+function shouldLook(mouseX, mouseY) {
+  return (
+    mouseY >= MIN_Y && mouseY <= MAX_Y && mouseX >= MIN_X && mouseX <= MAX_X
+  );
+}
+
+function createEyes(props) {
+  return [
+    createEyeView({
+      target: props.target,
+      name: props.leftEyeName,
+      size: props.size,
+      irisColor: props.irisColor,
+      eyeColor: props.eyeColor,
+      style: {
+        position: props.position,
+        top: props.top,
+        marginLeft: props.leftEyeMargin,
+        zIndex: props.zIndex
+      }
+    }),
+    createEyeView({
+      target: props.target,
+      name: props.rightEyeName,
+      size: props.size,
+      irisColor: props.irisColor,
+      eyeColor: props.eyeColor,
+      style: {
+        position: props.position,
+        top: props.top,
+        marginLeft: props.rightEyeMargin,
+        zIndex: props.zIndex
+      }
+    })
+  ];
+}
+
+function createApp(root) {
+  initializeView(root);
+  const eyes = createEyes(EyeProps);
+  eyes.forEach(eye => eye.display());
+  createEngine({
+    onMouseChange: ({ mouseX, mouseY }) =>
+      shouldLook(mouseX, mouseY)
+        ? eyes.forEach(eye => eye.update(mouseX, mouseY))
+        : eyes.forEach(eye => eye.resetPosition()),
+    onMouseStop: () => eyes.forEach(eye => eye.resetPosition())
+  }).start();
+}
+
+export default createApp;
diff --git a/src/engine.js b/src/engine.js
@@ -0,0 +1,47 @@
+import noop from "./noop";
+
+class Engine {
+  static defaultProps = {
+    onMouseStopTimeout: 2000,
+    onMouseChange: noop,
+    onMouseStop: noop
+  };
+
+  state = {
+    isMoving: false,
+    started: false
+  };
+
+  onMouseStopTimeoutId = null;
+
+  constructor(props) {
+    this.props = Object.assign({}, Engine.defaultProps, props);
+    this.tickId = null;
+  }
+
+  start() {
+    window.onmousemove = event => this._handleMouseMove(event);
+    this.state.started = true;
+  }
+
+  stop() {
+    this.state.started = false;
+    this.state.isMoving = false;
+    window.onmousemove = noop;
+  }
+
+  _handleMouseMove(event) {
+    this.state.isMoving = true;
+    this.state.mouseX = event.x;
+    this.state.mouseY = event.y;
+    this.props.onMouseChange(this.state);
+
+    this.state.isMoving = false;
+    if (this.onMouseStopTimeoutId) clearTimeout(this.onMouseStopTimeoutId);
+    this.onMouseStopTimeoutId = setTimeout(() => {
+      if (!this.state.isMoving) this.props.onMouseStop();
+    }, this.props.onMouseStopTimeout);
+  }
+}
+
+export default props => new Engine(props);