- new design

- with normalize.css and skeleton.css

resources/assets/js/jquery-global.js

@@ -0,0 +1,6 @@
+//https://stackoverflow.com/questions/35358625/jquery-is-not-defined-when-use-es6-import
+
+// jquery-global.js
+import jquery from 'jquery';
+window.jQuery = jquery;
+window.$ = jquery;

resources/assets/js/scripts.js

@@ -0,0 +1,88 @@
+import './jquery-global.js';
+import 'single-page-nav/jquery.singlePageNav.js';
+//bind plugin definition to jQuery
+
+$(document).ready(function(){
+
+    // =Hero
+    // Alway make hero-container height equal to window height
+  
+    var $heroContainer = $('.hero');
+  
+    $heroContainer.height(window.innerHeight);
+  
+    // When user resize browser window, hero container needs to have the same
+    // height as browser window height.  
+    $(window).resize(function() {
+      $heroContainer.height(window.innerHeight);
+    });
+  
+    // =Work
+    // Isotope filters  
+    // var $workFilterLinks = $('.work-filters li');
+    // var $container = $('.work-items');
+  
+    // $workFilterLinks.find('a').click(function(){  
+    //   $workFilterLinks.removeClass('active');  
+    //   $container.isotope({
+    //     // options
+    //     filter: $(this).attr('data-filter'),
+    //     itemSelector: '.isotope-item',
+    //     animationEngine : "best-available",
+    //     masonry: {
+    //       columnWidth: '.isotope-item'
+    //     }
+    //   });  
+    //   $(this).parent().addClass('active');  
+    //   return false;
+    // });
+  
+    // Menu initialization
+  
+    var $menuIcon = $('.menu-icon'),
+        $navigation = $('.navigation'),
+        $menu = $('.menu'),
+        $navigationLink = $('.menu a');
+  
+    $(window).scroll(function() {
+      if(window.scrollY > window.outerHeight) {
+        $menuIcon.addClass('active');
+      } else {
+        $menuIcon.removeClass('active');
+      }
+    });
+  
+    $menuIcon.click(function(e) {
+      e.preventDefault();
+  
+      $navigation.toggleClass('active');
+    });
+  
+    $menu.singlePageNav({
+        filter: ':not(.external)',
+        speed: 1000,
+        currentClass: 'current',
+        easing: 'swing',
+        updateHash: false,
+        beforeStart: function() {
+        },
+        onComplete: function() {
+          $navigation.removeClass('active');
+        }
+    });
+  
+    // Scrollreveal initialize
+  
+    // var config = {  
+    //   easing: 'hustle',
+    //   reset:  false,
+    //   delay:  'onload',
+    //   opacity: .2,
+    //   vFactor: 0.2,
+    //   mobile: false
+    // }
+  
+    // window.sr = new scrollReveal( config );
+  
+  });
+  

resources/assets/sass/font-awesome.scss

@@ -0,0 +1,4 @@
+@import '~@fortawesome/fontawesome-free/scss/brands';
+@import '~@fortawesome/fontawesome-free/scss/regular';
+@import '~@fortawesome/fontawesome-free/scss/solid';
+@import '~@fortawesome/fontawesome-free/scss/fontawesome';

resources/views/frontend/home/index.blade.php

@@ -1,6 +1,6 @@
 @extends('layouts.app')
 
-@section('slider')
+@section('hero')
 <div class="pure-g slider">
     <div class="container">
         <div class="pure-g">

resources/views/layouts/app.blade.php

@@ -39,7 +39,7 @@
     <div id="mobile-menu" class="pure-hidden-phone pure-hidden-tablet pure-hidden-desktop">
         <ul></ul>
     </div>
-    @yield('slider')
+    @yield('hero')
 
     <div class="content-container">
         <div class="container">