Update Koneko integration

resources/public/vendor/hover3d/LICENCE

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Rian Ariona
+
+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.

resources/public/vendor/hover3d/bower.json

@@ -0,0 +1,28 @@
+{
+  "name": "hover3d",
+  "version": "1.1.0",
+  "homepage": "https://github.com/ariona/hover3d",
+  "authors": [
+    "\"Ariona",
+    "Rian <rian@ariona.net> (http://ariona.net)\""
+  ],
+  "description": "Simple jQuery Plugin for Creating 3d Tilt effect",
+  "main": "\"dist/js/jquery.hover3d.min.js\"",
+  "keywords": [
+    "jquery",
+    "hover",
+    "hover",
+    "effect",
+    "3d",
+    "hover",
+    "tilt"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}

resources/public/vendor/hover3d/dist/js/jquery.hover3d.js

@@ -0,0 +1,137 @@
+/*
+jQuery Hover3d
+=================================================
+Version: 1.1.0
+Author: Rian Ariona
+Website: http://ariona.net
+Docs: http://ariona.github.io/hover3d
+Repo: http://github.com/ariona/hover3d
+Issues: http://github.com/ariona/hover3d/issues
+*/
+
+(function($){
+	
+	$.fn.hover3d = function(options){
+		
+		var settings = $.extend({
+			selector      : null,
+			perspective   : 1000,
+			sensitivity   : 20,
+			invert        : false,
+			shine         : false,
+			hoverInClass  : "hover-in",
+			hoverOutClass : "hover-out",
+			hoverClass    : "hover-3d"
+		}, options);
+		
+		return this.each(function(){
+			
+			var $this = $(this),
+				$card = $this.find(settings.selector);
+				currentX = 0;
+				currentY = 0;
+
+
+			if( settings.shine ){
+				$card.append('<div class="shine"></div>');
+			}
+			var $shine = $(this).find(".shine");
+
+			// Set perspective and transformStyle value
+			// for element and 3d object
+			$this.css({
+				perspective: settings.perspective+"px",
+				transformStyle: "preserve-3d"
+			});
+			
+			$card.css({
+				perspective: settings.perspective+"px",
+				transformStyle: "preserve-3d",
+			});
+
+			$shine.css({
+				position  : "absolute",
+				top       : 0,
+				left      : 0,
+				bottom    : 0,
+				right     : 0,
+				transform : 'translateZ(1px)',
+				"z-index" : 9
+			});
+			
+			// Mouse Enter function, this will add hover-in
+			// Class so when mouse over it will add transition
+			// based on hover-in class
+			function enter(event){
+				$card.addClass(settings.hoverInClass+" "+settings.hoverClass);
+				currentX = currentY = 0;
+				setTimeout(function(){
+					$card.removeClass(settings.hoverInClass);
+				}, 1000);
+			}
+			
+			// Mouse movement Parallax effect
+			function move(event){
+				
+				var w      = $card.innerWidth(),
+					h      = $card.innerHeight(),
+					currentX = Math.round(event.pageX - $card.offset().left),
+					currentY = Math.round(event.pageY - $card.offset().top),
+					ax 	   = settings.invert ?  ( w / 2 - currentX)/settings.sensitivity : -( w / 2 - currentX)/settings.sensitivity,
+					ay     = settings.invert ? -( h / 2 - currentY)/settings.sensitivity :  ( h / 2 - currentY)/settings.sensitivity,
+					dx     = currentX - w / 2,
+					dy     = currentY - h / 2,
+					theta  = Math.atan2(dy, dx),
+					angle  = theta * 180 / Math.PI - 90;
+
+					
+				if (angle < 0) {
+					angle  = angle + 360;
+				}
+				
+
+				$card.css({
+					perspective    : settings.perspective+"px",
+					transformStyle : "preserve-3d",
+					transform      : "rotateY("+ax+"deg) rotateX("+ay+"deg)"
+				});
+
+				$shine.css('background', 'linear-gradient(' + angle + 'deg, rgba(255,255,255,' + event.offsetY / h * .5 + ') 0%,var(--light-rgba-0) 80%)');
+			}
+			
+			// Mouse leave function, will set the transform
+			// property to 0, and add transition class
+			// for exit animation
+			function leave(){
+				$card.addClass(settings.hoverOutClass+" "+settings.hoverClass);
+				$card.css({
+					perspective    : settings.perspective+"px",
+					transformStyle : "preserve-3d",
+					transform      : "rotateX(0) rotateY(0)"
+				});
+				setTimeout( function(){
+					$card.removeClass(settings.hoverOutClass+" "+settings.hoverClass);
+					currentX = currentY = 0;
+				}, 1000 );
+			}
+			
+			// Mouseenter event binding
+			$this.on( "mouseenter", function(){
+				return enter();
+			});
+			
+			// Mousemove event binding
+			$this.on( "mousemove", function(event){
+				return move(event);
+			});
+			
+			// Mouseleave event binding
+			$this.on( "mouseleave", function(){
+				return leave();
+			});
+			
+		});
+		
+	};
+	
+}(jQuery));

resources/public/vendor/hover3d/dist/js/jquery.hover3d.min.js

@@ -0,0 +1 @@
+!function(e){e.fn.hover3d=function(t){var r=e.extend({selector:null,perspective:1e3,sensitivity:20,invert:!1,shine:!1,hoverInClass:"hover-in",hoverOutClass:"hover-out",hoverClass:"hover-3d"},t);return this.each(function(){function t(e){i.addClass(r.hoverInClass+" "+r.hoverClass),currentX=currentY=0,setTimeout(function(){i.removeClass(r.hoverInClass)},1e3)}function s(e){var t=i.innerWidth(),s=i.innerHeight(),n=Math.round(e.pageX-i.offset().left),o=Math.round(e.pageY-i.offset().top),v=r.invert?(t/2-n)/r.sensitivity:-(t/2-n)/r.sensitivity,c=r.invert?-(s/2-o)/r.sensitivity:(s/2-o)/r.sensitivity,u=n-t/2,p=o-s/2,f=Math.atan2(p,u),h=180*f/Math.PI-90;0>h&&(h+=360),i.css({perspective:r.perspective+"px",transformStyle:"preserve-3d",transform:"rotateY("+v+"deg) rotateX("+c+"deg)"}),a.css("background","linear-gradient("+h+"deg, rgba(255,255,255,"+e.offsetY/s*.5+") 0%,var(--light-rgba-0) 80%)")}function n(){i.addClass(r.hoverOutClass+" "+r.hoverClass),i.css({perspective:r.perspective+"px",transformStyle:"preserve-3d",transform:"rotateX(0) rotateY(0)"}),setTimeout(function(){i.removeClass(r.hoverOutClass+" "+r.hoverClass),currentX=currentY=0},1e3)}var o=e(this),i=o.find(r.selector);currentX=0,currentY=0,r.shine&&i.append('<div class="shine"></div>');var a=e(this).find(".shine");o.css({perspective:r.perspective+"px",transformStyle:"preserve-3d"}),i.css({perspective:r.perspective+"px",transformStyle:"preserve-3d"}),a.css({position:"absolute",top:0,left:0,bottom:0,right:0,transform:"translateZ(1px)","z-index":9}),o.on("mouseenter",function(){return t()}),o.on("mousemove",function(e){return s(e)}),o.on("mouseleave",function(){return n()})})}}(jQuery);

resources/public/vendor/hover3d/gulpfile.js

@@ -0,0 +1,117 @@
+/**
+ *
+ * jQuery hover3d
+ *
+ * @since 1.0.0
+ * @authors @ariona_rian
+ * @url http://ariona.github.io/hover3d
+ *
+ */
+
+// Project initialization
+var project  	 = "hover3d",
+	build        = "./dist/",
+	buildInclude = [
+		// Common file types
+		'**/*.html',
+		'**/*.css',
+		'**/*.js',
+		'**/*.svg',
+		'**/*.ttf',
+		'**/*.otf',
+		'**/*.eot',
+		'**/*.woff',
+		'**/*.woff2',
+		'**/*.jpg',
+		'**/*.png',
+		'**/*.po',
+		'**/*.mo',
+
+		// Exluded files and folders
+		'!**/*.gitignore',
+		'!.editorconfig',
+		'!.csscomb.json',
+		'!.README.md',
+		'!node_modules/**/*',
+		'!source/**/*',
+		'!source/sass/.sass-cache/**/*',
+		'!gulpfile.js',
+		'!package.json',
+		'!dist/**/*'
+	]
+
+// Init all Plugins
+var gulp     	 = require( "gulp" ),
+	
+	// CSS Related Plugins
+	sass         = require( "gulp-sass" ),
+	autoprefixer = require( "gulp-autoprefixer" ),
+
+	// Javascript Related Plugins
+	jshint       = require( "gulp-jshint" ),
+	uglifyjs     = require( "gulp-uglify" ),
+	
+	// Tools & Helpers
+	browserSync  = require( "browser-sync" ).create(),
+	rename       = require( "gulp-rename" );
+
+
+/**
+ * CSS
+ * ===============================
+ * Compiling Sass files, autoprefix it, prettify with CSSComb
+ * and create minified file
+ **/
+gulp.task( 'css', function(){
+
+	return gulp.src( 'source/sass/*.scss' )
+			   .pipe( sass().on('error',sass.logError))
+			   .on('error', function(){ this.emit( 'end' ) })
+			   .pipe( autoprefixer({browsers: "last 4 version"}) )
+			   .pipe( gulp.dest(".") )
+			   .pipe( browserSync.stream() );
+
+});
+
+/**
+ * JS Custom
+ * =====================================
+ * Running JSHint for all custom script
+ * Create minified version of script
+ **/
+
+gulp.task( 'js', function(){
+
+	return gulp.src( "source/js/*.js" )
+			   .pipe( jshint({
+			   		'undef': true,
+			   		'unused': true,
+			   		'browser': true,
+			   		'devel': true,
+			   		'predef': ["jQuery", "$"]
+			   }))
+			   .pipe( gulp.dest( 'dist/js/' ) )
+			   .pipe( rename({ suffix: '.min' }) )
+			   .pipe( uglifyjs() )
+			   .pipe( gulp.dest("dist/js/") )
+
+});
+
+/**
+ * Watch
+ * ===============================
+ * Default task for watching and start developing
+ * This will work for wordpress theme development
+ * with support of browsersync
+ **/
+gulp.task( 'default', function(){
+	files = ["./**/*.html","./**/*.js"];
+	browserSync.init(files,{
+		server:{
+			baseDir: ".",
+		}
+	});
+	gulp.watch( "./source/sass/**/*.scss", ["css"] );
+	gulp.watch( "./source/js/**/*.js", ["js"], browserSync.reload )
+
+});

resources/public/vendor/hover3d/hover3d.jquery.json

@@ -0,0 +1,34 @@
+{
+    "name": "hover3d",
+    "title": "jQuery Hover3d",
+    "description": "Simple jQuery plugin for creating 3d hover effect using CSS3 3d transform",
+    "keywords": [
+        "hover",
+        "effect",
+        "ui",
+        "image",
+        "animation"
+    ],
+    "version": "1.1.0",
+    "author": {
+        "name": "Rian Ariona",
+        "url": "http://ariona.net"
+    },
+    "maintainers": [{
+        "name": "Rian Ariona",
+        "email": "rian@ariona.net",
+        "url": "http://ariona.net"
+    }],
+    "licenses": [{
+        "type": "MIT",
+        "url": "https://github.com/ariona/hover3d/blob/master/LICENSE"
+    }],
+    "demo": "http://ariona.github.io/hover3d/",
+    "bugs": "https://github.com/ariona/hover3d/issues",
+    "homepage": "https://github.com/ariona/hover3d/",
+    "docs": "https://github.com/ariona/hover3d/",
+    "download": "https://github.com/ariona/hover3d/archive/master.zip",
+    "dependencies": {
+        "jquery": ">=1.7"
+    }
+}

resources/public/vendor/hover3d/index.html

@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>jQuery Hover3d</title>
+	<link rel="stylesheet" href="style.css">
+</head>
+<body>
+	<a href="https://github.com/ariona/hover3d"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
+
+	<div class="site-content">
+		<div class="align-center">
+			<img src="dist/images/hover3d.png" width=150 height=121 alt="">
+			<h1>jQuery Hover3d</h1>
+			<div class="share">
+				<!-- Place this tag where you want the button to render. -->
+				<a class="github-button" href="https://github.com/ariona/hover3d" data-icon="octicon-star" data-count-href="/ariona/hover3d/stargazers" data-count-api="/repos/ariona/hover3d#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star ariona/hover3d on GitHub">Star</a>
+				<!-- Place this tag where you want the button to render. -->
+				<a class="github-button" href="https://github.com/ariona/hover3d/fork" data-icon="octicon-repo-forked" data-count-href="/ariona/hover3d/network" data-count-api="/repos/ariona/hover3d#forks_count" data-count-aria-label="# forks on GitHub" aria-label="Fork ariona/hover3d on GitHub">Fork</a>
+				<a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=jQuery Hover3d for creating 3d Hover effect">Tweet</a>
+			</div>
+		</div>
+
+		<p>jQuery Hover3d is a simple hover script for creating 3d hover effect. It was my experiment on exploring CSS3 3d transform back in 2015 on <a href="http://codepen.io/ariona/pen/JopOOr">Codepen 3D hover plane effect.</a></p>
+
+		<p>The idea is transforming the element into 3d space using CSS3 transform, playing with translateZ for spacing the elements, and detecting mouse movement to change the transform value</p>
+
+
+		<div class="demo demo-1">
+			<h2 class="section-title">Demo #1 Awesome tilt effect</h2>
+
+			<p>Simple hover effect for your project</p>
+			<div class="project-list">
+				<div class="project">
+					<div class="project__card">
+						<a href="" class="project__image"><img src="http://unsplash.it/600/400?image=189" width=600 height=400 alt=""></a>
+						<div class="project__detail">
+							<h2 class="project__title"><a href="#">Project Name</a></h2>
+							<small class="project__category"><a href="#">Photography</a></small>
+						</div>
+					</div>
+				</div>
+
+				<div class="project">
+					<div class="project__card">
+						<a href="" class="project__image"><img src="http://unsplash.it/600/400?image=129" width=600 height=400 alt=""></a>
+						<div class="project__detail">
+							<h2 class="project__title"><a href="#">Project Name</a></h2>
+							<small class="project__category"><a href="#">Photography</a></small>
+						</div>
+					</div>
+				</div>
+
+				<div class="project">
+					<div class="project__card">
+						<a href="" class="project__image"><img src="http://unsplash.it/600/400?image=119" width=600 height=400 alt=""></a>
+						<div class="project__detail">
+							<h2 class="project__title"><a href="#">Project Name</a></h2>
+							<small class="project__category"><a href="#">Photography</a></small>
+						</div>
+					</div>
+				</div>
+
+				<div class="project">
+					<div class="project__card">
+						<a href="" class="project__image"><img src="http://unsplash.it/600/400?image=89" width=600 height=400 alt=""></a>
+						<div class="project__detail">
+							<h2 class="project__title"><a href="#">Project Name</a></h2>
+							<small class="project__category"><a href="#">Photography</a></small>
+						</div>
+					</div>
+				</div>
+			</div>
+
+		</div>
+		<div class="demo demo-2">
+			<div class="columns">
+				<div class="column">
+					<h2 class="section-title">Demo #2: AppleTv Icon</h2>
+					<p>By enabling shine option, you can create appleTV icon like effect. Be creating multiple layer for creating depth effect</p>
+
+					<pre>
+$(".movie").hover3d({
+	selector: ".movie__card",
+	shine: true,
+	sensitivity: 20,
+});</pre>
+				</div>
+				<div class="column">
+					<div class="movie">
+						<div class="movie__card">
+							<div class="layer-1"></div>
+							<div class="layer-2"></div>
+							<div class="layer-3"></div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+		</div>
+	</div>
+
+	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
+	<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.1.min.js"><\\/script>')</script>
+	<!-- Place this tag right after the last button or just before your close body tag. -->
+	<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
+	<script>window.twttr = (function(d, s, id) {
+	  var js, fjs = d.getElementsByTagName(s)[0],
+	    t = window.twttr || {};
+	  if (d.getElementById(id)) return t;
+	  js = d.createElement(s);
+	  js.id = id;
+	  js.src = "https://platform.twitter.com/widgets.js";
+	  fjs.parentNode.insertBefore(js, fjs);
+	 
+	  t._e = [];
+	  t.ready = function(f) {
+	    t._e.push(f);
+	  };
+	 
+	  return t;
+	}(document, "script", "twitter-wjs"));</script>
+	<script src="dist/js/jquery.hover3d.js" ></script>
+
+	<script>
+		$(document).ready(function(){
+			$(".project").hover3d({
+				selector: ".project__card"
+			});
+
+			$(".movie").hover3d({
+				selector: ".movie__card",
+				shine: true,
+				sensitivity: 20,
+			});
+		});
+
+	</script>
+</body>
+</html>

resources/public/vendor/hover3d/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "hover3d",
+  "version": "1.0.0",
+  "description": "jQuery Plugin for create 3d Hover Effect by utilizing CSS3 transform property",
+  "main": "gulpfile.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/ariona/hover3d.git"
+  },
+  "keywords": [
+    "jQuery",
+    "3d",
+    "Hover",
+    "Effect"
+  ],
+  "author": "Rian Ariona",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/ariona/hover3d/issues"
+  },
+  "homepage": "https://github.com/ariona/hover3d#readme",
+  "dependencies": {
+    "browser-sync": "^2.11.1",
+    "gulp": "^3.9.1",
+    "gulp-autoprefixer": "^3.1.0",
+    "gulp-jshint": "^2.0.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-sass": "^2.2.0",
+    "gulp-uglify": "^1.5.3",
+    "jshint": "^2.9.1"
+  }
+}

resources/public/vendor/hover3d/readme.md

@@ -0,0 +1,75 @@
+<img src="https://raw.githubusercontent.com/ariona/hover3d/master/hover3d.png" width=150 height=121 align="right" alt="">
+
+# jQuery Hover3d
+
+[![Bower version](https://badge.fury.io/bo/hover3d.svg)](https://badge.fury.io/bo/hover3d)
+
+jQuery Hover3d is a simple hover script for creating 3d hover effect. It was my experiment on exploring CSS3 3d transform back in 2015 on Codepen [3D hover plane effect](http://codepen.io/ariona/pen/JopOOr).
+
+The idea is transforming the element into 3d space using CSS3 transform, playing with translateZ for spacing the elements, and detecting mouse movement to change the transform value
+
+## Demo
+
+Check out [the demo](http://ariona.github.io/hover3d/index.html)
+
+## Usage
+
+Include jQuery, and jquery.hover3d.min.js within your HTML
+
+### HTML
+
+```html
+<script src="jquery.min.js"></script>
+<script src="jquery.hover3d.min.js"></script>
+```
+
+There is a minimal markup required, the element container and element that will be transformed into 3d card
+
+```html
+<div class="project">
+	<div class="project__card">
+		<!-- Content element goes here -->
+	</div>
+</div>
+```
+
+### CSS
+
+There is no special CSS file to be included, you can write your own CSS and playing with transform on child elements. However there is helper class that will be added when hovering in and out.
+
+```css
+/* This class can be replaced using options */
+.hover-in{
+	transition: .3s ease-out;
+}
+.hover-out{
+	transition: .3s ease-in;
+}
+```
+
+### JS
+
+Next step is init the plugin on `.project` and give the selector element that will be transformed, in this case it's `project__card`.
+
+```js
+$(".project").hover3d({
+	selector: ".project__card"
+});
+```
+
+## Options
+
+Option | Type | Default | Description
+------ | ---- | ------- | -----------
+selector | string | null | Selector for element that will be the 3d card
+perspective | integer | 1000 | Perspective value for 3d space
+sensitivity | integer | 20 | Mouse movement sensitivity, larger number is less sensitive
+invert | boolean | false | Default behavior is the element will follow the mouse, look like it facing the mouse
+shine | boolean | false | Add shining layer
+hoverInClass | string | hover-in | Helper class when mouse hover in the element, will be removed after 300ms
+hoverOutClass | string | hover-out | Helper class when mouse hover Out the element, will be removed after 300ms
+hoverClass | string | hover-3d | Helper class when the mouse is hovering the element
+
+### Compatibility
+
+All browser that support 3d transform and perspective. You can check it on [caniuse.com](http://caniuse.com)

resources/public/vendor/hover3d/source/js/jquery.hover3d.js

@@ -0,0 +1,137 @@
+/*
+jQuery Hover3d
+=================================================
+Version: 1.1.0
+Author: Rian Ariona
+Website: http://ariona.net
+Docs: http://ariona.github.io/hover3d
+Repo: http://github.com/ariona/hover3d
+Issues: http://github.com/ariona/hover3d/issues
+*/
+
+(function($){
+	
+	$.fn.hover3d = function(options){
+		
+		var settings = $.extend({
+			selector      : null,
+			perspective   : 1000,
+			sensitivity   : 20,
+			invert        : false,
+			shine         : false,
+			hoverInClass  : "hover-in",
+			hoverOutClass : "hover-out",
+			hoverClass    : "hover-3d"
+		}, options);
+		
+		return this.each(function(){
+			
+			var $this = $(this),
+				$card = $this.find(settings.selector);
+				currentX = 0;
+				currentY = 0;
+
+
+			if( settings.shine ){
+				$card.append('<div class="shine"></div>');
+			}
+			var $shine = $(this).find(".shine");
+
+			// Set perspective and transformStyle value
+			// for element and 3d object
+			$this.css({
+				perspective: settings.perspective+"px",
+				transformStyle: "preserve-3d"
+			});
+			
+			$card.css({
+				perspective: settings.perspective+"px",
+				transformStyle: "preserve-3d",
+			});
+
+			$shine.css({
+				position  : "absolute",
+				top       : 0,
+				left      : 0,
+				bottom    : 0,
+				right     : 0,
+				transform : 'translateZ(1px)',
+				"z-index" : 9
+			});
+			
+			// Mouse Enter function, this will add hover-in
+			// Class so when mouse over it will add transition
+			// based on hover-in class
+			function enter(event){
+				$card.addClass(settings.hoverInClass+" "+settings.hoverClass);
+				currentX = currentY = 0;
+				setTimeout(function(){
+					$card.removeClass(settings.hoverInClass);
+				}, 1000);
+			}
+			
+			// Mouse movement Parallax effect
+			function move(event){
+				
+				var w      = $card.innerWidth(),
+					h      = $card.innerHeight(),
+					currentX = Math.round(event.pageX - $card.offset().left),
+					currentY = Math.round(event.pageY - $card.offset().top),
+					ax 	   = settings.invert ?  ( w / 2 - currentX)/settings.sensitivity : -( w / 2 - currentX)/settings.sensitivity,
+					ay     = settings.invert ? -( h / 2 - currentY)/settings.sensitivity :  ( h / 2 - currentY)/settings.sensitivity,
+					dx     = currentX - w / 2,
+					dy     = currentY - h / 2,
+					theta  = Math.atan2(dy, dx),
+					angle  = theta * 180 / Math.PI - 90;
+
+					
+				if (angle < 0) {
+					angle  = angle + 360;
+				}
+				
+
+				$card.css({
+					perspective    : settings.perspective+"px",
+					transformStyle : "preserve-3d",
+					transform      : "rotateY("+ax+"deg) rotateX("+ay+"deg)"
+				});
+
+				$shine.css('background', 'linear-gradient(' + angle + 'deg, rgba(255,255,255,' + event.offsetY / h * .5 + ') 0%,var(--light-rgba-0) 80%)');
+			}
+			
+			// Mouse leave function, will set the transform
+			// property to 0, and add transition class
+			// for exit animation
+			function leave(){
+				$card.addClass(settings.hoverOutClass+" "+settings.hoverClass);
+				$card.css({
+					perspective    : settings.perspective+"px",
+					transformStyle : "preserve-3d",
+					transform      : "rotateX(0) rotateY(0)"
+				});
+				setTimeout( function(){
+					$card.removeClass(settings.hoverOutClass+" "+settings.hoverClass);
+					currentX = currentY = 0;
+				}, 1000 );
+			}
+			
+			// Mouseenter event binding
+			$this.on( "mouseenter", function(){
+				return enter();
+			});
+			
+			// Mousemove event binding
+			$this.on( "mousemove", function(event){
+				return move(event);
+			});
+			
+			// Mouseleave event binding
+			$this.on( "mouseleave", function(){
+				return leave();
+			});
+			
+		});
+		
+	};
+	
+}(jQuery));

resources/public/vendor/hover3d/source/sass/style.scss

@@ -0,0 +1,270 @@
+*{
+	box-sizing: border-box;
+
+	&:before, &:after{
+		box-sizing: border-box;
+	}
+}
+
+body{
+	font-family: karla, sans-serif;
+	line-height: 1.8;
+	color: #666;
+}
+
+h1,h2,h3,h4,h5,h6{
+	font-family: Hind, sans-serif;
+	color: var(--dark--200);
+	margin: 2em 0 1em;
+}
+
+a{
+	text-decoration: none;
+	color: lighten(blue,30%);
+}
+
+.site-content{
+	width: 990px;
+	max-width: 100%;
+	margin: 0 auto;
+	padding: 100px 0;
+
+	&:after{
+		content :" ";
+		display : block;
+		clear   : both;
+	}
+}
+
+.section-title{
+	text-align: center;
+	text-transform: uppercase;
+}
+
+.align-center{
+	text-align: center;
+	h1{
+		margin-top: 0;
+	}
+}
+
+.share{
+	margin-bottom: 50px;
+	span, a, iframe{
+		vertical-align: middle;
+
+		span{
+			vertical-align: middle!important;
+			width: 130px!important;
+		}
+	}
+}
+.demo{
+	margin: 100px 0;
+
+	h2{
+		margin-bottom: 10px;
+		line-height: 1;
+	}
+
+}
+.demo-1{
+	text-align: center;
+}
+.demo-2{
+	text-align: left;
+
+	.section-title{
+		text-align: left;
+	}
+}
+.columns{
+	&:after{
+		content :" ";
+		display : block;
+		clear   : both;
+	}
+
+	.column{
+		width: 50%;
+		float: left;
+		min-height: 1px;
+	}
+	h2{
+		margin-bottom: 20px;
+		line-height: 1;
+	}
+}
+
+pre{
+	background-color: #fbfbfb;
+	padding: 10px;
+}
+
+// Demo 1 : Project Hover Effect
+.project{
+	width: 50%;
+	float: left;
+	padding: 15px;
+	
+	&-list{
+		&:after{
+			content :" ";
+			display : block;
+			clear   : both;
+		}
+	}
+
+	&__image{
+		display  : block;
+		position : relative;
+
+		img{
+			width: 100%;
+			max-width: 100%;
+			height: auto;
+			display: block;
+		}
+
+		&:after{
+			content    : " ";
+			width      : 100%;
+			height     : 100%;
+			position   : absolute;
+			left       : 0;
+			top        : 0;
+			background : linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.4));
+			transition : opacity .3s ease;
+			opacity    : 0;
+		}
+	}
+
+	&__card{
+		position    : relative;
+		transition  : box-shadow .3s ease;
+		box-shadow: 0 10px 30px rgba(0,0,0,0);
+
+		&.hover-in{
+			transition: transform .2s ease-out;
+		}
+
+		&.hover-out{
+			transition : transform .2s ease-in;
+		}
+
+	}
+
+	&:hover{
+
+		.project{
+
+			&__card{box-shadow: 0 10px 30px rgba(0,0,0,.4);}
+			&__image:after{ opacity: 1; }
+			&__detail{ 
+				border-width : 10px;
+				box-shadow   : 0 10px 30px rgba(0,0,0,.4);
+			}
+
+			&__title, &__category{
+				transform: translateY(0) scale(1);
+				opacity: 1;
+			}
+
+			&__title{
+				font-weight: 600;
+				margin-bottom: 0;
+				line-height: 1
+			}
+
+		}
+	}
+
+	&__detail{
+		position        : absolute;
+		left            : 30px;
+		right           : 30px;
+		top             : 30px;
+		bottom          : 30px;
+		display         : flex;
+		flex-direction  : column;
+		justify-content : center;
+		text-align      : center;
+		transform       : translateZ(30px);
+		border          : 0 solid #00BCD4;
+		transition      : border .4s ease;
+	}
+
+	&__title{
+		margin      : 0 0 10px;
+		font-size   : 36px;
+		font-weight : 700;
+		transition  : .4s ease;
+		opacity     : 0;
+		transform   : translateY(40px) scale(0);
+		will-change : transform;
+
+		a{
+			color: white;
+		}
+	}
+
+	&__category{
+		opacity          : 0;
+		transition       : .4s ease;
+		transition-delay : .1s;
+		transform        : translateY(40px) scale(0);
+		will-change      : transform;
+		a{
+			color     : rgba(white,.8);
+			font-size : 1.3em;
+		}
+	}
+
+}
+
+// Demo 2 : AppleTV Icon Effect
+.movie{
+	margin: 0 auto;
+	width: 250px;
+
+	&-list{
+		&:after{
+			content :" ";
+			display : block;
+			clear   : both;
+		}
+	}
+
+	&__card{
+		position: relative;
+		width: 250px;
+		height: 370px;
+		transition: .2s ease-out;
+	}
+
+	[class*="layer"]{
+		position: absolute;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		border-radius: 10px;
+	}
+	.layer-1{
+		background-image: url(dist/images/deadpool-bg.png);
+		background-size: cover;
+	}
+	.layer-2{
+		background-image: url(dist/images/deadpool.png);
+		background-size: cover;
+		transform: translateZ(30px);
+	}
+	.layer-3{
+		background-image: url(dist/images/deadpool-title.png);
+		background-size: cover;
+		transform: translateZ(50px);
+	}
+	.shine{
+		border-radius: 10px
+	}
+}

resources/public/vendor/hover3d/style.css

@@ -0,0 +1,210 @@
+* {
+	box-sizing: border-box; }
+	*:before, *:after {
+		box-sizing: border-box; }
+
+body {
+	font-family: karla, sans-serif;
+	line-height: 1.8;
+	color: #666; }
+
+h1, h2, h3, h4, h5, h6 {
+	font-family: Hind, sans-serif;
+	color: #333;
+	margin: 2em 0 1em; }
+
+a {
+	text-decoration: none;
+	color: #9999ff; }
+
+.site-content {
+	width: 990px;
+	max-width: 100%;
+	margin: 0 auto;
+	padding: 100px 0; }
+	.site-content:after {
+		content: " ";
+		display: block;
+		clear: both; }
+
+.section-title {
+	text-align: center;
+	text-transform: uppercase; }
+
+.align-center {
+	text-align: center; }
+	.align-center h1 {
+		margin-top: 0; }
+
+.share {
+	margin-bottom: 50px; }
+	.share span, .share a, .share iframe {
+		vertical-align: middle; }
+		.share span span, .share a span, .share iframe span {
+			vertical-align: middle !important;
+			width: 130px !important; }
+
+.demo {
+	margin: 100px 0; }
+	.demo h2 {
+		margin-bottom: 10px;
+		line-height: 1; }
+
+.demo-1 {
+	text-align: center; }
+
+.demo-2 {
+	text-align: left; }
+	.demo-2 .section-title {
+		text-align: left; }
+
+.columns:after {
+	content: " ";
+	display: block;
+	clear: both; }
+
+.columns .column {
+	width: 50%;
+	float: left;
+	min-height: 1px; }
+
+.columns h2 {
+	margin-bottom: 20px;
+	line-height: 1; }
+
+pre {
+	background-color: #fbfbfb;
+	padding: 10px; }
+
+.project {
+	width: 50%;
+	float: left;
+	padding: 15px; }
+	.project-list:after {
+		content: " ";
+		display: block;
+		clear: both; }
+	.project__image {
+		display: block;
+		position: relative; }
+		.project__image img {
+			width: 100%;
+			max-width: 100%;
+			height: auto;
+			display: block; }
+		.project__image:after {
+			content: " ";
+			width: 100%;
+			height: 100%;
+			position: absolute;
+			left: 0;
+			top: 0;
+			background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
+			transition: opacity .3s ease;
+			opacity: 0; }
+	.project__card {
+		position: relative;
+		transition: box-shadow .3s ease;
+		box-shadow: 0 10px 30px transparent; }
+		.project__card.hover-in {
+			transition: -webkit-transform .2s ease-out;
+			transition: transform .2s ease-out;
+			transition: transform .2s ease-out, -webkit-transform .2s ease-out; }
+		.project__card.hover-out {
+			transition: -webkit-transform .2s ease-in;
+			transition: transform .2s ease-in;
+			transition: transform .2s ease-in, -webkit-transform .2s ease-in; }
+	.project:hover .project__card {
+		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
+	.project:hover .project__image:after {
+		opacity: 1; }
+	.project:hover .project__detail {
+		border-width: 10px;
+		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
+	.project:hover .project__title, .project:hover .project__category {
+		-webkit-transform: translateY(0) scale(1);
+				-ms-transform: translateY(0) scale(1);
+						transform: translateY(0) scale(1);
+		opacity: 1; }
+	.project:hover .project__title {
+		font-weight: 600;
+		margin-bottom: 0;
+		line-height: 1; }
+	.project__detail {
+		position: absolute;
+		left: 30px;
+		right: 30px;
+		top: 30px;
+		bottom: 30px;
+		display: -webkit-flex;
+		display: -ms-flexbox;
+		display: flex;
+		-webkit-flex-direction: column;
+				-ms-flex-direction: column;
+						flex-direction: column;
+		-webkit-justify-content: center;
+				-ms-flex-pack: center;
+						justify-content: center;
+		text-align: center;
+		-webkit-transform: translateZ(30px);
+						transform: translateZ(30px);
+		border: 0 solid #00BCD4;
+		transition: border .4s ease; }
+	.project__title {
+		margin: 0 0 10px;
+		font-size: 36px;
+		font-weight: 700;
+		transition: .4s ease;
+		opacity: 0;
+		-webkit-transform: translateY(40px) scale(0);
+				-ms-transform: translateY(40px) scale(0);
+						transform: translateY(40px) scale(0);
+		will-change: transform; }
+		.project__title a {
+			color: white; }
+	.project__category {
+		opacity: 0;
+		transition: .4s ease;
+		transition-delay: .1s;
+		-webkit-transform: translateY(40px) scale(0);
+				-ms-transform: translateY(40px) scale(0);
+						transform: translateY(40px) scale(0);
+		will-change: transform; }
+		.project__category a {
+			color: rgba(255, 255, 255, 0.8);
+			font-size: 1.3em; }
+
+.movie {
+	margin: 0 auto;
+	width: 250px; }
+	.movie-list:after {
+		content: " ";
+		display: block;
+		clear: both; }
+	.movie__card {
+		position: relative;
+		width: 250px;
+		height: 370px;
+		transition: .2s ease-out; }
+	.movie [class*="layer"] {
+		position: absolute;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		border-radius: 10px; }
+	.movie .layer-1 {
+		background-image: url(dist/images/deadpool-bg.png);
+		background-size: cover; }
+	.movie .layer-2 {
+		background-image: url(dist/images/deadpool.png);
+		background-size: cover;
+		-webkit-transform: translateZ(30px);
+						transform: translateZ(30px); }
+	.movie .layer-3 {
+		background-image: url(dist/images/deadpool-title.png);
+		background-size: cover;
+		-webkit-transform: translateZ(50px);
+						transform: translateZ(50px); }
+	.movie .shine {
+		border-radius: 10px; }