windhamdavid 2 years ago
parent
commit
7effa31c4f
8 changed files with 224 additions and 125 deletions
  1. 0 0
      app/css/dw.css
  2. 40 9
      app/index.html
  3. 0 0
      app/js/dw.js
  4. 58 32
      css/style.css
  5. 1 1
      css/styles.css
  6. 1 1
      css/styles.scss
  7. 56 23
      index.html
  8. 68 59
      js/_init.js

File diff suppressed because it is too large
+ 0 - 0
app/css/dw.css


+ 40 - 9
app/index.html

@@ -88,30 +88,61 @@
   </div>
 </header>
 
+<div id="backgroundsvg"></div>
+<div id="backgroundsvg2"></div>
+<div id="backgroundsvg3"></div>
+
  <!-- ============================= ** MAIN ** ============================= -->
 <main id="main" class="main">
  <!-- ============================= ** HELLO ** ============================= -->
 
+ <script>
+  var backgroundsvg = document.querySelector('#backgroundsvg');
+  var backgroundsvg2 = document.querySelector('#backgroundsvg2');
+  var backgroundsvg3 = document.querySelector('#backgroundsvg3');
+  function setTranslate(xPos, yPos, el) {
+      el.style.transform = "translate3d(" + xPos + ", " + yPos + "px, 0)";
+  }
+  window.addEventListener("DOMContentLoaded", scrollLoop, false);
+  var xScrollPosition;
+  var yScrollPosition;
+  function scrollLoop() {
+      xScrollPosition = window.scrollX;
+      yScrollPosition = window.scrollY;
+      setTranslate(0, yScrollPosition * -0.2, backgroundsvg);
+      setTranslate(0, yScrollPosition * -1.5, backgroundsvg2);
+      setTranslate(0, yScrollPosition * 0.5, backgroundsvg3);
+      requestAnimationFrame(scrollLoop);
+  }
+</script>
+
+
+
   <div id="hello" class="background-color dark" data-dark-bg></div>
-  <section class="page-view hero dw-header d-flex align-items-center">
-    <div class="container main">
+  <section class="page-view hello dw-header d-flex align-items-center">
+    <div class="container">
       <div class="row">
-        <div class="col-lg-6 offset-lg-1">
+
+        <div class="col-lg-5 offset-lg-1">
           <h1 class="mb-4">David A. Windham</h1>
-          <h2>Welcome Good People of the Internet โœŒ๐Ÿผ</h2>
+          <p>( 1973 - )</p>
+          <h3>Welcome Good People of the Internet โœŒ๐Ÿผ</h3>
           <p class="lead">What is this</p>
           <h3 class="">I'm a middle aged fella... developer, designer, programmer, tinkerer, and all around good guy who makes a living trying to help folks make good use of the web by crafting custom sites and applications.</h3>
+
         </div>
-        <div class="col col-lg-5 float-end">
-          <img width="200" src="img/ddog.svg" srcset="./img/ddog.svg 2x" alt="David Windham"/>
+        <div class="col col-lg-5 ">
+          <img class="float-end" width="200" src="img/ddog.svg" srcset="./img/ddog.svg 2x" alt="David Windham"/>
         </div>
       </div>
     </div>
   </section>
 
+
+
 <!-- ============================= ** WHO ** ============================= -->
   <div id="who" class="background-color light"></div>
-  <section class="page-view hello">
+  <section class="page-view who">
     <div class="container">
       <div class="row">
         <div class="col-lg-4">
@@ -145,7 +176,7 @@
 
 <!-- ============================= ** WHAT ** ============================= -->
   <div id="what" class="background-color dark" data-dark-bg></div>
-  <section class="page-view capabilities">
+  <section class="page-view what">
     <div class="container">
       <h1 class="what">What?</h1>
       <h2 class="what">My Capabilities</h2>
@@ -204,7 +235,7 @@
             <div class="col-md-4">
               <h5>Back End</h5>
               <ul>
-                <li>Go / Gorilla / Dart / Flutter<li>
+                <li>Go / Gorilla / Dart / Flutter</li>
                 <li>Node / Express / Meteor</li>
                 <li>PHP / Laravel / WordPress</li>
                 <li>Python / Flask / Django</li>

File diff suppressed because it is too large
+ 0 - 0
app/js/dw.js


+ 58 - 32
css/style.css

@@ -34,6 +34,7 @@ body {
   background:#d3d3d3;
   transition: background-color 0.4s ease;
   font-family: sans-serif;
+  text-rendering: optimizeLegibility;
 }
      
   
@@ -331,8 +332,9 @@ h5.how {
 }
 
 #header .header-ui .brand--nav h1 {
-  font-size: 27px;
+  font-size: 21px;
   margin-left: 30px;
+  text-align: right;
 }
 
 @media (min-width: 576px) {
@@ -409,7 +411,6 @@ h5.how {
   letter-spacing: 0.01rem;
   font-weight: 900;
   font-size: 37px;
-  text-align: left;
   margin: 0;
 }
 
@@ -422,7 +423,6 @@ h5.how {
 }
 
 @media (min-width: 992px) {
-
   .dw-header h2,
   .works-header h2 {
     font-size: 2.4rem;
@@ -449,7 +449,6 @@ h5.how {
 #header .header-ui .brand--nav,
 #header .header-ui .header--complementary {
   padding: 1rem;
-  background: transparent !important;
 }
 
 #header .header-ui .button.button-to-quote,
@@ -707,27 +706,68 @@ h5.how {
 /*########################################
 ################# LAYO ###################
 #########################################*/
+
+#backgroundsvg {
+  background-image: url("/img/web.svg");
+  background-repeat: no-repeat;
+  background-position: 5% top;
+  background-size: cover;
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  height: 100vw;
+  z-index: -1;
+  opacity: .75;
+}
+#backgroundsvg2 {
+  background-image: url("/img/hello.svg");
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-size: cover;
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  height: 100vw;
+  z-index: -2;
+  opacity: .75;
+}
+#backgroundsvg3 {
+  background-image: url("/img/footer.svg");
+  background-repeat: no-repeat;
+  background-position: 5% top;
+  background-size: cover;
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  height: 100vw;
+  z-index: -3;
+  opacity: .75;
+}
+
+
+
 .hello {
-  /**
-  -webkit-mask-image: url(/img/web.svg);
-  mask-image: url(/img/web.svg);
-  **/
   background-image: url(../img/hello.svg) !important;
   background-size:cover  !important;
-  background-repeat: no-repeat  !important;
-  background-position: top right, 50%, 50%  !important;
+  background-position: 50% 50%  !important;
 }
 .who {
-  background-image: url(../img/web.svg) !important;
+  background-image: url(../img/who.svg) !important;
   background-size:cover  !important;
-  background-repeat: no-repeat  !important;
-  background-position: top left, 50%, 50%  !important;
+  background-position: 50% 50%  !important;
 }
-.what {
-  background-image: url(../img/web.svg) !important;
-  background-size:cover !important;
-  background-repeat: no-repeat  !important;
-  background-position: top left, 50%, 50%  !important;
+#dw-footer {
+  background-image: url(/img/footer.svg);
+  /**
+  -webkit-mask-image: url(/img/web.svg);
+  mask-image: url(/img/web.svg);
+  **/
+  background-size:100% 100%;
+  background-size:cover;
+
+  background-repeat: no-repeat;
+  background-position: top left, 50%, 50%;
+  z-index:11;
 }
 
 .lead {
@@ -1208,20 +1248,6 @@ blockquote {
   background-color: #484c57;
   color: #dadada;
 }
-#dw-footer {
-  background-image: url(/img/footer.svg);
-  /**
-  -webkit-mask-image: url(/img/web.svg);
-  mask-image: url(/img/web.svg);
-  **/
-  background-size:100% 100%;
-  background-size:cover;
-
-  background-repeat: no-repeat;
-  background-position: top left, 50%, 50%;
-  z-index:11;
-}
-
 
 #dw-footer a:hover {
   color: #111;

+ 1 - 1
css/styles.css

@@ -18424,5 +18424,5 @@ textarea.form-control-lg {
 @font-face {
   font-display: block;
   font-family: "bootstrap-icons";
-  src: url("/fonts/bootstrap-icons.woff2?24e3eb84d0bcaf83d77f904c78ac1f47") format("woff2"), url("./fonts/bootstrap-icons.woff?24e3eb84d0bcaf83d77f904c78ac1f47") format("woff");
+  src: url("../fonts/bootstrap-icons.woff2?24e3eb84d0bcaf83d77f904c78ac1f47") format("woff2"), url("../fonts/bootstrap-icons.woff?24e3eb84d0bcaf83d77f904c78ac1f47") format("woff");
 }

+ 1 - 1
css/styles.scss

@@ -99,5 +99,5 @@ $utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");
 @font-face {
   font-display: block;
   font-family: "bootstrap-icons";
-  src: url("/fonts/bootstrap-icons.woff2?24e3eb84d0bcaf83d77f904c78ac1f47") format("woff2"), url("./fonts/bootstrap-icons.woff?24e3eb84d0bcaf83d77f904c78ac1f47") format("woff");
+  src: url("../fonts/bootstrap-icons.woff2?24e3eb84d0bcaf83d77f904c78ac1f47") format("woff2"), url("../fonts/bootstrap-icons.woff?24e3eb84d0bcaf83d77f904c78ac1f47") format("woff");
 }

+ 56 - 23
index.html

@@ -65,30 +65,54 @@
 </head>
 <body>
 
+<div id="backgroundsvg"></div>
+<div id="backgroundsvg2"></div>
+<div id="backgroundsvg3"></div>
+<script>
+  var backgroundsvg = document.querySelector('#backgroundsvg');
+  var backgroundsvg2 = document.querySelector('#backgroundsvg2');
+  var backgroundsvg3 = document.querySelector('#backgroundsvg3');
+  function setTranslate(xPos, yPos, el) {
+      el.style.transform = "translate3d(" + xPos + ", " + yPos + "px, 0)";
+  }
+  window.addEventListener("DOMContentLoaded", scrollLoop, false);
+  var xScrollPosition;
+  var yScrollPosition;
+  function scrollLoop() {
+    xScrollPosition = window.scrollX;
+    yScrollPosition = window.scrollY;
+    setTranslate(0, yScrollPosition * -0.2, backgroundsvg);
+    setTranslate(0, yScrollPosition * -1.5, backgroundsvg2);
+    setTranslate(0, yScrollPosition * 0.5, backgroundsvg3);
+    requestAnimationFrame(scrollLoop);
+  }
+</script>
+
 <!-- ============================= ** HEADER ** ============================= -->
+
 <header id="header" class="header" role="banner">
   <div class="header-ui">
-    <div class="brand--nav text-end">
+    <div class="brand--nav">
       <h1>David Windham</h1>
     </div>
   </div>
-</header>
-<header class="header-small">
-  <a href="#header" class="brand">
-    <img class="light" src="./img/dw-sm-white.svg" srcset="./img/dw-sm-white.svg 2x" alt="David Windham logo"/>
-    <img class="dark" src="./img/dw-sm.svg" srcset="./img/dw-sm.svg 2x" alt="David Windham logo"/>
-  </a>
-  <button class="hamburger" type="button" aria-label="Open Close Menu">
-    <span class="hamburger-box">
-      <span class="hamburger-inner"></span>
-    </span>
-  </button>
-  <div class="header-small-menu">
-    <a href="#who">Who</a>
-    <a href="#what">What</a>
-    <a href="#when">When</a>
-    <a href="#why">Why</a>
-    <a href="#how">How</a>
+  <div class="header-small">
+    <a href="#header" class="brand">
+      <img class="light" src="./img/dw-sm-white.svg" srcset="./img/dw-sm-white.svg 2x" alt="David Windham logo"/>
+      <img class="dark" src="./img/dw-sm.svg" srcset="./img/dw-sm.svg 2x" alt="David Windham logo"/>
+    </a>
+    <button class="hamburger" type="button" aria-label="Open Close Menu">
+      <span class="hamburger-box">
+        <span class="hamburger-inner"></span>
+      </span>
+    </button>
+    <div class="header-small-menu">
+      <a href="#who">Who</a>
+      <a href="#what">What</a>
+      <a href="#when">When</a>
+      <a href="#why">Why</a>
+      <a href="#how">How</a>
+    </div>
   </div>
 </header>
 
@@ -96,23 +120,32 @@
 <main id="main" class="main">
  <!-- ============================= ** HELLO ** ============================= -->
 
+ 
+
+
+
   <div id="hello" class="background-color dark" data-dark-bg></div>
   <section class="page-view hello dw-header d-flex align-items-center">
     <div class="container">
       <div class="row">
-        <div class="col-lg-6 offset-lg-1">
+
+        <div class="col-lg-5 offset-lg-1">
           <h1 class="mb-4">David A. Windham</h1>
-          <h2>Welcome Good People of the Internet โœŒ๐Ÿผ</h2>
+          <p>( 1973 - )</p>
+          <h3>Welcome Good People of the Internet โœŒ๐Ÿผ</h3>
           <p class="lead">What is this</p>
           <h3 class="">I'm a middle aged fella... developer, designer, programmer, tinkerer, and all around good guy who makes a living trying to help folks make good use of the web by crafting custom sites and applications.</h3>
+
         </div>
-        <div class="col col-lg-5 float-end">
-          <img width="200" src="img/ddog.svg" srcset="./img/ddog.svg 2x" alt="David Windham"/>
+        <div class="col col-lg-5 ">
+          <img class="float-end" width="200" src="img/ddog.svg" srcset="./img/ddog.svg 2x" alt="David Windham"/>
         </div>
       </div>
     </div>
   </section>
 
+
+
 <!-- ============================= ** WHO ** ============================= -->
   <div id="who" class="background-color light"></div>
   <section class="page-view who">
@@ -208,7 +241,7 @@
             <div class="col-md-4">
               <h5>Back End</h5>
               <ul>
-                <li>Go / Gorilla / Dart / Flutter<li>
+                <li>Go / Gorilla / Dart / Flutter</li>
                 <li>Node / Express / Meteor</li>
                 <li>PHP / Laravel / WordPress</li>
                 <li>Python / Flask / Django</li>

+ 68 - 59
js/_init.js

@@ -1,10 +1,49 @@
-$(function () {
+document.addEventListener('DOMContentLoaded', function() {
+  var calendarEl = document.getElementById('calendar');
+  var calendar = new FullCalendar.Calendar(calendarEl, {
+    height: 'auto',
+    headerToolbar: { start: 'title', center: '', end: 'list,timeGridWeek,dayGridMonth,prev,next' },
+    buttonText: { list:'day' },
+    views: {
+      dayGrid: { hiddenDays: [ 0,6,7 ] },
+      timeGrid: {
+        slotMinTime: '08:00:00',
+        slotMaxTime: '17:00:00',
+        dayHeaderFormat: {
+          weekday: 'short'
+        },
+        hiddenDays: [ 0,6,7 ]
+      },
+    },
+    displayEventEnd: { month: true, basicWeek: true, "default": true },
+    stickyHeaderDates: false,
+    eventDataTransform: function(event) {
+      event.url = "";
+      return event;
+    },
+    firstDay : 1,
+    googleCalendarApiKey: 'AIzaSyAGowGJYx6dOaQvG_vSUI73uT88VWOTcNQ',
+  	events: {
+      googleCalendarId: 'davidawindham.com_bvrht1f8n2vgldgjenpgfdd4bk@group.calendar.google.com',
+      className: 'gcal-event', 
+      displayEventEnd: true,
+    },
+    eventClick: function(info) {
+      info.jsEvent.preventDefault();
+    }
+  });
+  calendar.render();
+});
+
+
+window.onload = function () {
   header();
   hamburger();
+  parallax();
   waypoint_init();
   waypoints();
   why();
-});
+};
 
 function header() {
   var $window = $(window),
@@ -21,14 +60,15 @@ function header() {
       $smallHeader.removeClass('showing');
       smallHeaderShowing = false;
     }
-  }
+  };
 
-$window.scroll(small_header);
-  small_header();
+  $window.on('scroll', function() {
+    small_header();
+  });
 }
 
 function hamburger() {
-var isOpen = false,
+  var isOpen = false,
   $hamburger = $('.hamburger'),
   $headerSmall = $('.header-small');
 
@@ -38,7 +78,7 @@ var isOpen = false,
     $headerSmall.toggleClass('menu-open');
   });
 
-  $(window).on('scroll', function(){
+  $(window).on('scroll', function() {
     if(isOpen){
       $hamburger.removeClass('is-active');
       $headerSmall.removeClass('menu-open');
@@ -47,59 +87,28 @@ var isOpen = false,
   });
 }
 
+function parallax() {
+  var backgroundsvg = document.querySelector('#backgroundsvg');
+  var backgroundsvg2 = document.querySelector('#backgroundsvg2');
+  var backgroundsvg3 = document.querySelector('#backgroundsvg3');
+  var xScrollPosition;
+  var yScrollPosition;
+  function setTranslate(xPos, yPos, el) {
+      el.style.transform = "translate3d(" + xPos + ", " + yPos + "px, 0)";
+  };
+  function scrollLoop() {
+      xScrollPosition = window.scrollX;
+      yScrollPosition = window.scrollY;
+      setTranslate(0, yScrollPosition * -0.2, backgroundsvg);
+      setTranslate(0, yScrollPosition * -1.5, backgroundsvg2);
+      setTranslate(0, yScrollPosition * 0.5, backgroundsvg3);
+      requestAnimationFrame(scrollLoop);
+  };
+  window.addEventListener("DOMContentLoaded", scrollLoop, false);
+}
+
+
 
-document.addEventListener('DOMContentLoaded', function() {
-  var calendarEl = document.getElementById('calendar');
-  var calendar = new FullCalendar.Calendar(calendarEl, {
-    //plugins: [ 'dayGrid','timeGrid', 'googleCalendar' ],
-    height: 'auto',
-    headerToolbar: {
-      start: 'title',
-      center: '',
-      end: 'list,timeGridWeek,dayGridMonth,prev,next'
-    },
-    buttonText: {
-      list:'day'
-    },
-    views: {
-      dayGrid: {
-        hiddenDays: [ 0,6,7 ]
-      },
-      timeGrid: {
-        slotMinTime: '08:00:00',
-        slotMaxTime: '17:00:00',
-        dayHeaderFormat: {
-          weekday: 'short'
-        },
-        hiddenDays: [ 0,6,7 ]
-      },
-    },
-    displayEventEnd: {
-      month: true,
-      basicWeek: true,
-      "default": true
-    },
-    stickyHeaderDates: false,
-    eventDataTransform: function(event) {
-      event.url = "";
-      return event;
-    },
-    firstDay : 1,
-    //defaultView: 'dayGridMonth',
-    googleCalendarApiKey: 'AIzaSyAGowGJYx6dOaQvG_vSUI73uT88VWOTcNQ',
-  	events: {
-      googleCalendarId: 'davidawindham.com_bvrht1f8n2vgldgjenpgfdd4bk@group.calendar.google.com',
-      className: 'gcal-event', 
-      displayEventEnd: true,
-    },
-    //eventRender: function(info) {
-    //},
-    eventClick: function(info) {
-      info.jsEvent.preventDefault();
-    }
-  });
-  calendar.render();
-});
 
 function why() {
   var index = 0,

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