waypoints

css/style.css

@@ -13,7 +13,11 @@
 7 - Footer
 9 - Queries
 10 - Fonts
-*/
+
+url - https://davidwindham.com
+git - https://github.com/windhamdavid/dw
+post - https://davidawindham.com/my-website
+
 
 /*########################################
 ################# BODY ###################
@@ -31,17 +35,7 @@ body {
   transition: background-color 0.4s ease;
   font-family: sans-serif;
 }
-body {
-  position: relative;
-  margin: 0;
-  padding: 0;
-  min-height: 100%;
-  -webkit-font-smoothing: antialiased;
-  font-kerning: auto;
-  background: #fff;
-  transition: background-color 0.4s ease;
-}
-/* viewports page-view used for waypoints  */
+/****** viewports - waypoints  ******/
 .viewport {
   position: fixed;
   height: 100%;
@@ -111,13 +105,6 @@ body {
   opacity: 1;
 }
 
-h1 a:hover,
-h2 a:hover,
-h3 a:hover,
-h4 a:hover,
-h5 a:hover {
-  color: #3496fe;
-}
 /*########################################
 ################# TYPE ###################
 #########################################*/
@@ -147,18 +134,11 @@ p {
 }
 a {
   color: #376399;
+  text-decoration:none !important;
 }
 .right {
   text-align:right;
 }
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
 .lead {
   font-size: 1.4rem;
 }
@@ -336,6 +316,9 @@ h5.how {
   pointer-events: auto;
   will-change: width, padding, flex;
 }
+#header .header-ui .brand--nav h1 {
+  font-size: 27px;
+}
 
 @media (min-width: 576px) {
   #header .header-ui .brand--nav {
@@ -958,24 +941,6 @@ blockquote:before {
 ################# FOOT ###################
 #########################################*/
 
-#dw-footer {
-  background-color: #b0b0b0;
-  color: #111 !important;
-}
-#dw-footer a {
-  color: #111;
-  fill: #111;
-}
-#dw-footer a:hover {
-  color: #111;
-  fill: #111;
-}
-#dw-footer a:before {
-  transition: width 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
-}
-#dw-footer .br-widget img {
-  width: 150px;
-}
 .dw-footer h1 {
   font-weight: 800;
   margin: 0;
@@ -984,6 +949,7 @@ blockquote:before {
 .dw-footer h5 {
   font-weight: 800;
   line-height: 1.2;
+  font-family: 'Playfair Display', serif;
 }
 .dw-footer .lead {
   margin-top: 0 !important;
@@ -1026,6 +992,24 @@ blockquote:before {
   -webkit-transition: width 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
   transition: width 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
 }
+#dw-footer {
+  background-color: #b0b0b0;
+  color: #111 !important;
+}
+#dw-footer a {
+  color: #111;
+  fill: #111;
+}
+#dw-footer a:hover {
+  color: #111;
+  fill: #111;
+}
+#dw-footer a:before {
+  transition: width 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
+}
+#dw-footer .br-widget img {
+  width: 150px;
+}
 #dw-footer {
   margin: 0;
   padding: 4rem 0 4rem;
@@ -1183,85 +1167,85 @@ blockquote:before {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
-  src: url("./_font/Inter/Inter-Regular.woff2") format("woff2"),
-  url("./_font/Inter/Inter-Regular.woff") format("woff");
+  src: url("./_font/Inter-Regular.woff2") format("woff2"),
+  url("./_font/Inter-Regular.woff") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style: italic;
   font-weight: 400;
-  src: url("./_font/Inter/Inter-Italic.woff2") format("woff2"),
-  url("./_font/Inter/Inter-Italic.woff") format("woff");
+  src: url("./_font/Inter-Italic.woff2") format("woff2"),
+  url("./_font/Inter-Italic.woff") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 500;
-  src: url("./_font/Inter/Inter-Medium.woff2") format("woff2"),
-  url("./_font/Inter/Inter-Medium.woff") format("woff");
+  src: url("./_font/Inter-Medium.woff2") format("woff2"),
+  url("./_font/Inter-Medium.woff") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style: italic;
   font-weight: 500;
-  src: url("./_font/Inter/Inter-MediumItalic.woff2") format("woff2"),
-  url("./_font/Inter/Inter-MediumItalic.woff") format("woff");
+  src: url("./_font/Inter-MediumItalic.woff2") format("woff2"),
+  url("./_font/Inter-MediumItalic.woff") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 600;
-  src: url("./_font/Inter/Inter-SemiBold.woff2") format("woff2"),
-  url("./_font/Inter/Inter-SemiBold.woff") format("woff");
+  src: url("./_font/Inter-SemiBold.woff2") format("woff2"),
+  url("./_font/Inter-SemiBold.woff") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style: italic;
   font-weight: 600;
-  src: url("./_font/Inter/Inter-SemiBoldItalic.woff2") format("woff2"),
-  url("./_font/Inter/Inter-SemiBoldItalic.woff") format("woff");
+  src: url("./_font/Inter-SemiBoldItalic.woff2") format("woff2"),
+  url("./_font/Inter-SemiBoldItalic.woff") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 700;
-  src: url("./_font/Inter/Inter-Bold.woff2") format("woff2"),
-  url("./_font/Inter/Inter-Bold.woff") format("woff");
+  src: url("./_font/Inter-Bold.woff2") format("woff2"),
+  url("./_font/Inter-Bold.woff") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style: italic;
   font-weight: 700;
-  src: url("./_font/Inter/Inter-BoldItalic.woff2") format("woff2"),
-  url("./_font/Inter/Inter-BoldItalic.woff") format("woff");
+  src: url("./_font/Inter-BoldItalic.woff2") format("woff2"),
+  url("./_font/Inter-BoldItalic.woff") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 800;
-  src: url("./_font/Inter/Inter-ExtraBold.woff2") format("woff2"),
-  url("./_font/Inter/Inter-ExtraBold.woff") format("woff");
+  src: url("./_font/Inter-ExtraBold.woff2") format("woff2"),
+  url("./_font/Inter-ExtraBold.woff") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style: italic;
   font-weight: 800;
-  src: url("./_font/Inter/Inter-ExtraBoldItalic.woff2") format("woff2"),
-  url("./_font/Inter/Inter-ExtraBoldItalic.woff") format("woff");
+  src: url("./_font/Inter-ExtraBoldItalic.woff2") format("woff2"),
+  url("./_font/Inter-ExtraBoldItalic.woff") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 900;
-  src: url("./_font/Inter/Inter-Black.woff2") format("woff2"),
-  url("./_font/Inter/Inter-Black.woff") format("woff");
+  src: url("./_font/Inter-Black.woff2") format("woff2"),
+  url("./_font/Inter-Black.woff") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style: italic;
   font-weight: 900;
-  src: url("./_font/Inter/Inter-BlackItalic.woff2") format("woff2"),
-  url("./_font/Inter/Inter-BlackItalic.woff") format("woff");
+  src: url("./_font/Inter-BlackItalic.woff2") format("woff2"),
+  url("./_font/Inter-BlackItalic.woff") format("woff");
 }
 
 @font-face {

index.html

@@ -49,20 +49,19 @@
 <main id="main" class="main">
  <!-- ============================= ** HELLO ** ============================= -->
   <div id="hello" class="background-color black" data-dark-bg></div>
-  <section class="page-view hero dw-header d-flex  align-items-center">
+  <section class="page-view hero d-flex align-items-center">
     <div class="container main">
       <div class="row">
         <div class="col-lg-6">
-          <h1></h1>
-          <blockquote>
-            <h1>If I can get you to laugh with me, you like me better, which makes you more open to my ideas. And if I can persuade you to laugh at the particular point I make, by laughing at it you acknowledge its truth.</h1>
-            <p class="right">~ John Cleese</p>
-          </blockquote>
-          <hr>
+          <h1>Hello!</h1>
           <p class="lead"></p>
           <h2 class="">I like to help folks make good use of the internet by crafting custom applications and websites.</h2>
         </div>
         <div class="col col-lg-6 align-self-end">
+          <blockquote>
+            <h1>If I can get you to laugh with me, you like me better, which makes you more open to my ideas. And if I can persuade you to laugh at the particular point I make, by laughing at it you acknowledge its truth.</h1>
+            <p class="right">~ John Cleese</p>
+          </blockquote>
           <!--<img width="400" src="./img/dw.svg" srcset="./img/dw.svg 2x" alt="David Windham"/>-->
         </div>
       </div>
@@ -96,14 +95,58 @@
  <!-- ============================= ** MAIN ** ============================= -->
 </main>
  <!-- ============================= ** FOOTER ** ============================= -->
-<footer>
-  <p><a href="#top">[Top]</a> <a href="https://code.davidawindham.com/david/dw">[git]</a></p>
+<footer id="dw-footer" class="dw-footer">
+  <div class="container">
+    <div class="row">
+
+      <div class="col-lg-6 col-md-4">
+        <div class="br-widget">
+          <h5>David Windham</h5>
+          <address class="mt-5">
+            <a href="https://www.google.com/maps/place/102+Glenridge+Cir,+Greenwood,+SC+29646">102 Glenridge Circle</a><br/>
+            <a href="https://www.google.com/maps/place/102+Glenridge+Cir,+Greenwood,+SC+29646">Greenwood, South Carolina USA</a>
+            <br/>
+            <a  target="_blank" href="mailto:&#100;&#097;&#118;&#105;&#100;&#064;&#100;&#097;&#118;&#105;&#100;&#119;&#105;&#110;&#100;&#104;&#097;&#109;&#046;&#099;&#111;&#109">&#100;&#097;&#118;&#105;&#100;&#064;&#100;&#097;&#118;&#105;&#100;&#119;&#105;&#110;&#100;&#104;&#097;&#109;&#046;&#099;&#111;&#109</a><br />
+            <a href="tel:8037123283">+1-803-712-3283</a>
+          </address>
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 mt-5 mt-md-0">
+        <div class="br-widget">
+          <ul class="footer-links">
+
+          </ul>
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 mt-5 mt-md-0">
+        <div class="br-widget">
+          <ul class="footer-links">
+            <li><a href="https://github.com/windhamdavid" class="github" rel="me"></span><i class="demo-icon icon-github-squared">&#xf300;</i>&nbsp; Github</a></li>
+            <li><a href="https://en.wikipedia.org/wiki/User:Windhamdavid" class="wikipedia" rel="me"><i class="demo-icon icon-wikipedia-w">&#xf266;</i>&nbsp; Wikipedia</a></li>
+            <li><a href="https://www.facebook.com/davidawindham" class="facebook"><i class="demo-icon icon-facebook-squared">&#xf308;</i>&nbsp; Facebook</a></li>
+            <li><a href="https://twitter.com/windhamdavid" class="twitter" rel="me"><i class="demo-icon icon-twitter-squared">&#xf304;</i>&nbsp; Twitter</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <div class="footer-end">
+      <div class="row">
+        <div class="col-md-6 text-center text-md-left">
+          &copy; 2020
+        </div>
+      </div>
+    </div>
+  </div>
 </footer>
 
 <!-- build:js js/dw.js -->
 <script src="./js/jquery.min.js"></script>
 <script src="./js/bootstrap.js"></script>
 <script src="./js/waypoints.js"></script>
+<script src="./js/waypoints-inview.js"></script>
 <script src="./js/_init.js"></script>
 <!-- endbuild -->
 </body>

js/_init.js

@@ -1,6 +1,9 @@
 $(function () {
   header();
   hamburger();
+  waypoint_init();
+  waypoints();
+  why();
 });
 
 function header() {
@@ -10,11 +13,11 @@ function header() {
 
   function small_header() {
     var top = $window.scrollTop();
-    if (top > 200 && !smallHeaderShowing) {
+    if (top > 80 && !smallHeaderShowing) {
       $smallHeader.addClass('showing');
       smallHeaderShowing = true;
     }
-    else if (top <= 200 && smallHeaderShowing) {
+    else if (top <= 80 && smallHeaderShowing) {
       $smallHeader.removeClass('showing');
       smallHeaderShowing = false;
     }
@@ -43,3 +46,205 @@ var isOpen = false,
     }
   });
 }
+
+function why() {
+  var index = 0,
+    $section = $('.testimonials-section'),
+    $testimonials = $('.br-testimonial'),
+    $indicators = $('.indicators'),
+    interval;
+  function next(goTo) {
+    $testimonials.removeClass('showing');
+    if (index < $testimonials.length - 1)
+      index++;
+    else index = 0;
+    $testimonials.eq(index).addClass('showing');
+    $indicators.children().eq(index).addClass('current').siblings().removeClass('current');
+  }
+  function start() {
+    interval = setInterval(function () {
+      next();
+    }, 6000);
+  }
+  function stop() {
+    clearInterval(interval);
+  }
+  function makeIndicators() {
+    for (var i = 0; i < $testimonials.length; i++) {
+      var indicator = $('<span></span>');
+      if (i === 0)
+      indicator.addClass('current');
+      $indicators.append(indicator);
+    }
+  }
+  function advanceNow() {
+    stop();
+    next();
+    start();
+  }
+  if ($testimonials.length) {
+    makeIndicators();
+    start();
+    $section.on('mouseenter', '.br-testimonial', function () { stop(); });
+    $section.on('mouseleave', '.br-testimonial', function () { start(); });
+    $indicators.on('click', 'span', function () {
+      index = $(this).index() - 1;
+      advanceNow();
+    });
+    $('.next-testimonial').on('click', function () { advanceNow(); });
+  }
+
+}
+
+function waypoints() {
+  var waypoints = [];
+  var $window = $(window),
+      $body = $('body');
+  var $headerSmall = $('.header-small');
+  var $pages = $('.page-view');
+  var $html = $('html'), isSmallWindow;
+
+  function removeClasses($element) {
+    $element.removeClass('viewport-above viewport-below viewport-inside');
+  }
+  function setClass($element, className) {
+    removeClasses($element);
+    $element.addClass(className);
+  }
+  function manageSize() {
+    isSmallWindow = $window.width() <= 620;
+  }
+
+  function manageBackground($element) {
+    var $colorSource = $element.prev('.background-color'),
+    bgClass = false, hasGradient, background, gradient;
+
+    if ($colorSource.length) {
+      bgClass = $colorSource[0].hasAttribute('data-dark-bg') ? 'dark-bg' : 'light-bg';
+      background = $colorSource.css('background-color');
+      $body.css('background', background);
+      $html.css('background', background);
+      $body.attr('bg', bgClass);
+      $headerSmall.css('color', background);
+    }
+  }
+
+  function waypoint_init() {
+    $pages.each(function () {
+    var $this = $(this);
+    var inview = new Waypoint.Inview({
+      element: $this[0],
+      enter: function (direction) {
+        manageBackground($this);
+        setClass($this, 'viewport-inside');
+      },
+      exited: function (direction) {
+        if (direction == 'down')
+          setClass($this, 'viewport-above');
+        else setClass($this, 'viewport-below');
+      },
+      offset: {
+        top: $window.height() / 2,
+        bottom: $window.height() / 2
+      }
+    });
+    waypoints.push(inview);
+    });
+  }
+
+  function clearWaypoints() {
+    for (var i = 0; i < waypoints.length; i++) {
+      waypoints[i].destroy();
+    }
+    waypoints = [];
+  }
+  function handleWaypoints() {
+    clearWaypoints();
+    waypoint_init();
+  }
+  handleWaypoints();
+  manageSize();
+
+  $(window).on('resize', function () {
+    $pages.each(function () {
+      removeClasses($(this));
+    });
+    handleWaypoints();
+    manageSize();
+  });
+
+}
+
+function waypoint_init() {
+  Waypoint.Inview.prototype.createWaypoints = function () {
+  function outerHeight(el) {
+    var height = el.offsetHeight;
+    var style = getComputedStyle(el);
+    height += parseInt(style.marginTop) + parseInt(style.marginBottom);
+    return height;
+  }
+
+  var configs = {
+    vertical: [{
+      down: 'enter', up: 'exited',
+      offset: function () {
+        var _offset = this.options.offset && this.options.offset.bottom || 0;
+        return this.options.context.innerHeight - _offset;
+      }.bind(this)
+    }, {
+      down: 'entered', up: 'exit',
+      offset: function () {
+        var _offset = this.options.offset && this.options.offset.bottom || 0;
+        return this.options.context.innerHeight - outerHeight(this.element) - _offset;
+      }.bind(this)
+    }, {
+      down: 'exit', up: 'entered',
+      offset: function () {
+        var _offset = this.options.offset && this.options.offset.top || 0;
+        return _offset;
+      }.bind(this)
+    }, {
+      down: 'exited', up: 'enter',
+      offset: function () {
+        var _offset = this.options.offset && this.options.offset.top || 0;
+        return _offset - outerHeight(this.element);
+      }.bind(this)
+    }],
+    horizontal: [{
+        right: 'enter',
+        left: 'exited',
+        offset: '100%'
+      }, {
+        right: 'entered',
+        left: 'exit',
+        offset: 'right-in-view'
+      }, {
+        right: 'exit',
+        left: 'entered',
+        offset: 0
+      }, {
+        right: 'exited',
+        left: 'enter',
+        offset: function () {
+          return -this.adapter.outerWidth()
+        }
+      }]
+    };
+
+    for (var i = 0, end = configs[this.axis].length; i < end; i++) {
+        var config = configs[this.axis][i];
+        this.createWaypoint(config)
+    }
+  };
+
+  $.fn.scrollEnd = function (callback, timeout) {
+    $(this).scroll(function () {
+      var $this = $(this);
+      if ($this.data('scrollTimeout')) {
+          clearTimeout($this.data('scrollTimeout'));
+      }
+      $this.data('scrollTimeout', setTimeout(callback, timeout));
+    });
+  };
+}
+