David A. Windham
david
/
dw
1
0
Fork 0
Files
Browse Source

stopping point 🚦

windhamdavid 2 years ago
parent
7effa31c4f
commit
0dd9af2e0d
12 changed files with 221 additions and 229 deletions
Unified View Show Diff Stats
  1. 4 0
      README.md
  2. 0 0
      app/css/dw.css
  3. 43 62
      app/index.html
  4. 44 0
      app/index.min.html/index.html
  5. 0 1
      app/js/dw.js
  6. 25 25
      css/style.css
  7. 1 7
      css/styles.css
  8. 2 7
      css/styles.scss
  9. 26 10
      gulpfile.js
  10. 63 84
      index.html
  11. 12 33
      js/_init.js
  12. 1 0
      package.json

+ 4 - 0
README.md
View File 

@@ -7,7 +7,11 @@ what to do with the new [domain](https://davidwindham.com) ... I'd like a cleane
 
 
 
 22/11/23: 
 22/11/23: 
 - Edited Design and [colors](#design)
 
 - Edited Design and [colors](#design)
 
+- reworked preproccesors
 
+  - added purgecss
 
 - Removed @fullcalendar/plugins in favor of bundle see [#4566](https://github.com/fullcalendar/fullcalendar/issues/4566)
 
 - Removed @fullcalendar/plugins in favor of bundle see [#4566](https://github.com/fullcalendar/fullcalendar/issues/4566)
 
+- upgraded all packages
 
+
 
 
 
 ```s
 
 ```s
 
 david@ovid🏛 :~/sites/dw(master⚡) » npm list  
 david@ovid🏛 :~/sites/dw(master⚡) » npm list

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


+ 43 - 62
app/index.html
View File 

@@ -57,22 +57,26 @@
 
       "https://www.reddit.com/user/windhamdavid"
 
       "https://www.reddit.com/user/windhamdavid"
 
     ] 
     ] 
   }
 
   }
 
-  </script>
 
+</script>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
 
 
+<div id="backgroundsvg"></div>
 
+<div id="backgroundsvg2"></div>
 
+<div id="backgroundsvg3"></div>
 
+
 
 <!-- ============================= ** HEADER ** ============================= -->
 
 <!-- ============================= ** HEADER ** ============================= -->
 
 <header id="header" class="header" role="banner">
 
 <header id="header" class="header" role="banner">
 
   <div class="header-ui">
 
   <div class="header-ui">
 
     <div class="brand--nav text-end">
 
     <div class="brand--nav text-end">
 
-      <h1>David Windham</h1>
 
+      <h1 class="d-none ">David Windham</h1>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </header>
 
 </header>
 
 <header class="header-small">
 
 <header class="header-small">
 
   <a href="#header" class="brand">
 
   <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"/>
 
+    <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>
 
   </a>
 
   <button class="hamburger" type="button" aria-label="Open Close Menu">
 
   <button class="hamburger" type="button" aria-label="Open Close Menu">
 
     <span class="hamburger-box">
 
     <span class="hamburger-box">
 
@@ -88,36 +92,11 @@
 
   </div>
 
   </div>
 
 </header>
 
 </header>
 
 
 
-<div id="backgroundsvg"></div>
 
-<div id="backgroundsvg2"></div>
 
-<div id="backgroundsvg3"></div>
 
+
 
 
 
  <!-- ============================= ** MAIN ** ============================= -->
 
  <!-- ============================= ** MAIN ** ============================= -->
 
 <main id="main" class="main">
 
 <main id="main" class="main">
 
  <!-- ============================= ** HELLO ** ============================= -->
 
  <!-- ============================= ** 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>
 
   <div id="hello" class="background-color dark" data-dark-bg></div>
 
   <section class="page-view hello dw-header d-flex align-items-center">
 
   <section class="page-view hello dw-header d-flex align-items-center">
 
     <div class="container">
 
     <div class="container">
 
@@ -126,36 +105,35 @@
 
         <div class="col-lg-5 offset-lg-1">
 
         <div class="col-lg-5 offset-lg-1">
 
           <h1 class="mb-4">David A. Windham</h1>
 
           <h1 class="mb-4">David A. Windham</h1>
 
           <p>( 1973 - )</p>
 
           <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>
 
+          <h3><i>Welcome Good People of the Internet</i> ✌🏼,</h3>
 
+          <p class="lead">I'm glad you dropped in. I like to create things.
 
+            It'll all started with...
 
+          </p>
 
 
 
         </div>
 
         </div>
 
         <div class="col col-lg-5 ">
 
         <div class="col col-lg-5 ">
 
-          <img class="float-end" width="200" src="img/ddog.svg" srcset="./img/ddog.svg 2x" alt="David Windham"/>
 
+          <img class="float-start" width="100" src="img/ddog.svg" srcset="./img/ddog.svg 2x" alt="David Windham"/>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
   </section>
 
   </section>
 
 
 
-
 
-
 
 <!-- ============================= ** WHO ** ============================= -->
 
 <!-- ============================= ** WHO ** ============================= -->
 
   <div id="who" class="background-color light"></div>
 
   <div id="who" class="background-color light"></div>
 
   <section class="page-view who">
 
   <section class="page-view who">
 
     <div class="container">
 
     <div class="container">
 
       <div class="row">
 
       <div class="row">
 
         <div class="col-lg-4">
 
         <div class="col-lg-4">
 
-          <img width="400" src="img/dw.svg" srcset="./img/dw.svg 2x" alt="David Windham"/>
 
+          <img width="400" src="img/dw.svg" srcset="img/dw.svg 2x" alt="David Windham"/>
 
         </div>
 
         </div>
 
-        <div class="col-lg-8 ps-5 pt-5 mt-5">
 
+        <div class="col-lg-7 ps-5 pt-5 mt-5">
 
           <h1>Who?</h1>
 
           <h1>Who?</h1>
 
           <p class="lead">
 
           <p class="lead">
 
             I've been a web developer for almost 20 years.
 
             I've been a web developer for almost 20 years.
 
             I have a BA in Studio Art and a minor in Art History from The College of Charleston.
 
             I have a BA in Studio Art and a minor in Art History from The College of Charleston.
 
             I've worked in advertising, publishing, education, and an assortment of businesses for clients.
 
             I've worked in advertising, publishing, education, and an assortment of businesses for clients.
 
-            I focus on building custom web applications and
 
-            I treat my development like mechanical works of art.
 
+            I focus on building custom web applications and I treat my development like mechanical works of art.
 
+            I try to help folks make good use of the web by crafting custom sites and applications.
 
           </p>
 
           </p>
 
           <svg id="signature" x="0px" y="0px" viewBox="0 0 1000 300" width="300">
 
           <svg id="signature" x="0px" y="0px" viewBox="0 0 1000 300" width="300">
 
             <style type="text/css"> .st0{fill:none;stroke:#535763;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} </style>
 
             <style type="text/css"> .st0{fill:none;stroke:#535763;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} </style>
 
@@ -178,10 +156,11 @@
 
   <div id="what" class="background-color dark" data-dark-bg></div>
 
   <div id="what" class="background-color dark" data-dark-bg></div>
 
   <section class="page-view what">
 
   <section class="page-view what">
 
     <div class="container">
 
     <div class="container">
 
-      <h1 class="what">What?</h1>
 
-      <h2 class="what">My Capabilities</h2>
 
-      <div class="col-lg-9">
 
+
 
+      <div class="col-lg-10 offset-lg-1">
 
         <div class="row">
 
         <div class="row">
 
+          <h1 class="what">What?</h1>
 
+          <h2 class="what">My Capabilities</h2>
 
           <p class="mt-3">
 
           <p class="mt-3">
 
             I like to tell everyone that the only real skill I have is searching for answers on the internet and reading the instructions.
 
             I like to tell everyone that the only real skill I have is searching for answers on the internet and reading the instructions.
 
             Although there's certainly a bit of truth in that, I'd say that my two real superpowers are creative thinking and solving challenging technical puzzles.
 
             Although there's certainly a bit of truth in that, I'd say that my two real superpowers are creative thinking and solving challenging technical puzzles.
 
@@ -191,10 +170,10 @@
 
       </div>
 
       </div>
 
 
 
       <div class="row capabilities-types">
 
       <div class="row capabilities-types">
 
-        <div class="col-lg-12">
 
+        <div class="col-lg-10 offset-lg-1">
 
           <div class="row">
 
           <div class="row">
 
             <div class="col-md-4">
 
             <div class="col-md-4">
 
-              <h5>Strategy</h5>
 
+              <h5 class="text-decoration-underline">Strategy</h5>
 
               <ul>
 
               <ul>
 
                 <li>Advertising</li>
 
                 <li>Advertising</li>
 
                 <li>Communication</li>
 
                 <li>Communication</li>
 
@@ -203,7 +182,7 @@
 
               </ul>
 
               </ul>
 
             </div>
 
             </div>
 
             <div class="col-md-4">
 
             <div class="col-md-4">
 
-              <h5>Front End</h5>
 
+              <h5 class="text-decoration-underline">Front End</h5>
 
               <ul>
 
               <ul>
 
                 <li>HTML / CSS</li>
 
                 <li>HTML / CSS</li>
 
                 <li>Javascript ES6 / ES5</li>
 
                 <li>Javascript ES6 / ES5</li>
 
@@ -212,7 +191,7 @@
 
               </ul>
 
               </ul>
 
             </div>
 
             </div>
 
             <div class="col-md-4">
 
             <div class="col-md-4">
 
-              <h5>Dev-Ops</h5>
 
+              <h5 class="text-decoration-underline">Dev-Ops</h5>
 
               <ul>
 
               <ul>
 
                 <li>Build Automation</li>
 
                 <li>Build Automation</li>
 
                 <li>Continuous Integration</li>
 
                 <li>Continuous Integration</li>
 
@@ -223,7 +202,7 @@
 
           </div>
 
           </div>
 
           <div class="row">
 
           <div class="row">
 
             <div class="col-md-4">
 
             <div class="col-md-4">
 
-              <h5>Design</h5>
 
+              <h5 class="text-decoration-underline">Design</h5>
 
               <ul>
 
               <ul>
 
                 <li>Graphic</li>
 
                 <li>Graphic</li>
 
                 <li>Illustration</li>
 
                 <li>Illustration</li>
 
@@ -233,7 +212,7 @@
 
               </ul>
 
               </ul>
 
             </div>
 
             </div>
 
             <div class="col-md-4">
 
             <div class="col-md-4">
 
-              <h5>Back End</h5>
 
+              <h5 class="text-decoration-underline">Back End</h5>
 
               <ul>
 
               <ul>
 
                 <li>Go / Gorilla / Dart / Flutter</li>
 
                 <li>Go / Gorilla / Dart / Flutter</li>
 
                 <li>Node / Express / Meteor</li>
 
                 <li>Node / Express / Meteor</li>
 
@@ -243,7 +222,7 @@
 
               </ul>
 
               </ul>
 
             </div>
 
             </div>
 
             <div class="col-md-4">
 
             <div class="col-md-4">
 
-              <h5>Sys-Admin</h5>
 
+              <h5 class="text-decoration-underline">Sys-Admin</h5>
 
               <ul>
 
               <ul>
 
                 <li>Amazon / Google Services</li>
 
                 <li>Amazon / Google Services</li>
 
                 <li>Ansible / Docker / Kubernetes</li>
 
                 <li>Ansible / Docker / Kubernetes</li>
 
@@ -264,7 +243,7 @@
 
       <section class="page-view when">
 
       <section class="page-view when">
 
         <div class="container">
 
         <div class="container">
 
           <div class="row">
 
           <div class="row">
 
-            <div class="col-lg-10">
 
+            <div class="col-lg-10 offset-lg-1">
 
               <h1 class="when">When &amp; Where?</h1>
 
               <h1 class="when">When &amp; Where?</h1>
 
             </div>
 
             </div>
 
           </div>
 
           </div>
 
@@ -288,17 +267,20 @@
 
       </div>
 
       </div>
 
     </section>
 
     </section>
 
 
 
-
 
 <!-- ============================= ** WHY ** ============================= -->
 
 <!-- ============================= ** WHY ** ============================= -->
 
   <div id="why" class="background-color dark" data-dark-bg></div>
 
   <div id="why" class="background-color dark" data-dark-bg></div>
 
     <div class="page-view why testimonials-section">
 
     <div class="page-view why testimonials-section">
 
       <div class="container">
 
       <div class="container">
 
-        <h1 class="why">Why?</h1>
 
         <div class="row">
 
         <div class="row">
 
-          <div class="col-lg-1">
 
+          <div class="col-lg-1 offset-md-1">
 
+            <h1 class="why">Why?</h1>
 
+          </div>
 
+        </div>
 
+        <div class="row">
 
+          <div class="col-lg-1 offset-md-1">
 
             <div class="indicators"></div>
 
             <div class="indicators"></div>
 
           </div>
 
           </div>
 
-          <div class="col-lg-10">
 
+          <div class="col-lg-9">
 
             <figure class="br-testimonial showing">
 
             <figure class="br-testimonial showing">
 
                 <h5>Selected Clients:</h5>
 
                 <h5>Selected Clients:</h5>
 
                 <div class="row">
 
                 <div class="row">
 
@@ -402,22 +384,21 @@
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 
 
-
 
 <!-- ============================= ** HOW ** ============================= -->
 
 <!-- ============================= ** HOW ** ============================= -->
 
   <div id="how" class="background-color light"></div>
 
   <div id="how" class="background-color light"></div>
 
     <section class="page-view services">
 
     <section class="page-view services">
 
       <div class="container">
 
       <div class="container">
 
 
 
         <div class="row services-title">
 
         <div class="row services-title">
 
-          <div class="col-lg-6">
 
+          <div class="col-lg-5 offset-md-1">
 
             <h1 class="how">&amp; How</h1>
 
             <h1 class="how">&amp; How</h1>
 
-            <h2 class="how">Can I Help?</h2>
 
+            <h2 class="how mb-5">Can I Help?</h2>
 
             <p class="lead"></p>
 
             <p class="lead"></p>
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
 
 
         <div class="row">
 
         <div class="row">
 
-          <div class="col-lg-6">
 
+          <div class="col-lg-5 offset-md-1">
 
             <div class="service">
 
             <div class="service">
 
               <i class="pulse"><span></span></i>
 
               <i class="pulse"><span></span></i>
 
               <div class="numbering">01</div>
 
               <div class="numbering">01</div>
 
@@ -460,13 +441,13 @@
 
                     I can help you succeed online because of my experience, enthusiasm, and commitment to personal service.
 
                     I can help you succeed online because of my experience, enthusiasm, and commitment to personal service.
 
                     I tailor my approach to the unique requirements of each project
 
                     I tailor my approach to the unique requirements of each project
 
                     in an effort create sustainable and practical applications that work for you.
 
                     in an effort create sustainable and practical applications that work for you.
 
+                    Have a project in mind?
 
                   </p>
 
                   </p>
 
                   <button type="button" class="btn btn-dark mt-1" data-bs-toggle="modal" data-bs-target="#pricing-modal">
 
                   <button type="button" class="btn btn-dark mt-1" data-bs-toggle="modal" data-bs-target="#pricing-modal">
 
                     Pricing &amp; Cost
 
                     Pricing &amp; Cost
 
                   </button>
 
                   </button>
 
-                  <p class="lead mt-4">Have a project in mind?</p>
 
                   <button type="button" class="btn btn-dark mt-1">
 
                   <button type="button" class="btn btn-dark mt-1">
 
-                    <a class="text-light" href="mailto:&#100;&#097;&#118;&#105;&#100;&#064;&#100;&#097;&#118;&#105;&#100;&#119;&#105;&#110;&#100;&#104;&#097;&#109;&#046;&#099;&#111;&#109;">Email Me</a>
 
+                    <a class="text-light" href="mailto:&#100;&#097;&#118;&#105;&#100;&#064;&#100;&#097;&#118;&#105;&#100;&#119;&#105;&#110;&#100;&#104;&#097;&#109;&#046;&#099;&#111;&#109;">Email</a>
 
                   </button>
 
                   </button>
 
                 </div>
 
                 </div>
 
               </div>
 
               </div>
 
@@ -660,4 +641,4 @@
 
 <noscript><p><img src="https://davidawindham.com/wik/matomo.php?idsite=5&amp;rec=1" style="border:0;" alt="" /></p></noscript>
 
 <noscript><p><img src="https://davidawindham.com/wik/matomo.php?idsite=5&amp;rec=1" style="border:0;" alt="" /></p></noscript>
 
 --> 
 --> 
 </body>
 
 </body>
 
-</html>
 
+</html>

File diff suppressed because it is too large
+ 44 - 0
app/index.min.html/index.html


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


+ 25 - 25
css/style.css
View File 

@@ -19,6 +19,7 @@ git - https://github.com/windhamdavid/dw
 
 post - https://davidawindham.com/my-website
 
 post - https://davidawindham.com/my-website
 
 
 
 
 
+
 
 /*########################################
 
 /*########################################
 
 ################# BODY ###################
 
 ################# BODY ###################
 
 #########################################*/
 
 #########################################*/
 
@@ -127,6 +128,24 @@ body {
 
 /*########################################
 
 /*########################################
 
 ################# TYPE ###################
 
 ################# TYPE ###################
 
 #########################################*/
 
 #########################################*/
 
+
 
+/* purgecss start ignore */
 
+[bg=dark-bg] {
 
+  color: #9c9ea5;
 
+}
 
+[bg=dark-bg] h1,
 
+[bg=dark-bg] h2,
 
+[bg=dark-bg] h4,
 
+[bg=dark-bg] h5,
 
+[bg=dark-bg] h6,
 
+[bg=dark-bg] a {
 
+  color: #e3e3e3 !important;
 
+}
 
+[bg=dark-bg] blockquote {
 
+  color: #e3e3e3;
 
+}
 
+/* purgecss end ignore */
 
+
 
 h1 {
 
 h1 {
 
   font-family: 'Playfair Display', serif;
 
   font-family: 'Playfair Display', serif;
 
   font-weight: 900;
 
   font-weight: 900;
 
@@ -176,23 +195,6 @@ a {
 
   vertical-align: super;
 
   vertical-align: super;
 
 }
 
 }
 
 
 
-[bg=dark-bg] {
 
-  color: #9c9ea5;
 
-}
 
-
 
-[bg=dark-bg] h1,
 
-[bg=dark-bg] h2,
 
-[bg=dark-bg] h4,
 
-[bg=dark-bg] h5,
 
-[bg=dark-bg] h6,
 
-[bg=dark-bg] a {
 
-  color: #e3e3e3 !important;
 
-}
 
-
 
-[bg=dark-bg] blockquote {
 
-  color: #e3e3e3;
 
-}
 
-
 
 h5.modal-title {
 
 h5.modal-title {
 
   color: #535763 !important;
 
   color: #535763 !important;
 
 }
 
 }
 
@@ -208,7 +210,6 @@ h1.who {
 
 
 
 h2.who {
 
 h2.who {
 
   margin: 0;
 
   margin: 0;
 
-  color: #999 !important;
 
   font-size: 20px;
 
   font-size: 20px;
 
 }
 
 }
 
 
 
@@ -219,7 +220,6 @@ h1.what {
 
 
 
 h2.what {
 
 h2.what {
 
   margin: 0;
 
   margin: 0;
 
-  color: #e3e3e3 !important;
 
   font-size: 32px;
 
   font-size: 32px;
 
 }
 
 }
 
 
 
@@ -708,7 +708,7 @@ h5.how {
 
 #########################################*/
 
 #########################################*/
 
 
 
 #backgroundsvg {
 
 #backgroundsvg {
 
-  background-image: url("/img/web.svg");
 
+  background-image: url('/img/web.svg');
 
   background-repeat: no-repeat;
 
   background-repeat: no-repeat;
 
   background-position: 5% top;
 
   background-position: 5% top;
 
   background-size: cover;
 
   background-size: cover;
 
@@ -720,7 +720,7 @@ h5.how {
 
   opacity: .75;
 
   opacity: .75;
 
 }
 
 }
 
 #backgroundsvg2 {
 
 #backgroundsvg2 {
 
-  background-image: url("/img/hello.svg");
 
+  background-image: url('/img/hello.svg');
 
   background-repeat: no-repeat;
 
   background-repeat: no-repeat;
 
   background-position: 50% 50%;
 
   background-position: 50% 50%;
 
   background-size: cover;
 
   background-size: cover;
 
@@ -732,7 +732,7 @@ h5.how {
 
   opacity: .75;
 
   opacity: .75;
 
 }
 
 }
 
 #backgroundsvg3 {
 
 #backgroundsvg3 {
 
-  background-image: url("/img/footer.svg");
 
+  background-image: url('/img/footer.svg');
 
   background-repeat: no-repeat;
 
   background-repeat: no-repeat;
 
   background-position: 5% top;
 
   background-position: 5% top;
 
   background-size: cover;
 
   background-size: cover;
 
@@ -747,17 +747,17 @@ h5.how {
 
 
 
 
 
 .hello {
 
 .hello {
 
-  background-image: url(../img/hello.svg) !important;
 
+  background-image: url('/img/hello.svg') !important;
 
   background-size:cover  !important;
 
   background-size:cover  !important;
 
   background-position: 50% 50%  !important;
 
   background-position: 50% 50%  !important;
 
 }
 
 }
 
 .who {
 
 .who {
 
-  background-image: url(../img/who.svg) !important;
 
+  background-image: url('/img/who.svg') !important;
 
   background-size:cover  !important;
 
   background-size:cover  !important;
 
   background-position: 50% 50%  !important;
 
   background-position: 50% 50%  !important;
 
 }
 
 }
 
 #dw-footer {
 
 #dw-footer {
 
-  background-image: url(/img/footer.svg);
 
+  background-image: url('/img/footer.svg');
 
   /**
 
   /**
 
   -webkit-mask-image: url(/img/web.svg);
 
   -webkit-mask-image: url(/img/web.svg);
 
   mask-image: url(/img/web.svg);
 
   mask-image: url(/img/web.svg);

+ 1 - 7
css/styles.css
View File 

@@ -10420,7 +10420,7 @@ textarea.form-control-lg {
 
 @font-face {
 
 @font-face {
 
   font-display: block;
 
   font-display: block;
 
   font-family: "bootstrap-icons";
 
   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");
 
 }
 
 }
 
 .bi::before,
 
 .bi::before,
 
 [class^=bi-]::before,
 
 [class^=bi-]::before,
 
@@ -18419,10 +18419,4 @@ textarea.form-control-lg {
 
 
 
 .bi-wikipedia::before {
 
 .bi-wikipedia::before {
 
   content: "\f8cc";
 
   content: "\f8cc";
 
-}
 
-
 
-@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");
 
 }
 
 }

+ 2 - 7
css/styles.scss
View File 

@@ -94,10 +94,5 @@ $utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");
 
 ################### Bootstrap Icons ########################
 
 ################### Bootstrap Icons ########################
 
 ************************************************************/
 
 ************************************************************/
 
 
 
-@import '../node_modules/bootstrap-icons/font/bootstrap-icons';
 
-
 
-@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");
 
-}
 
+$bootstrap-icons-font-dir: "/fonts";
 
+@import '../node_modules/bootstrap-icons/font/bootstrap-icons.scss';

+ 26 - 10
gulpfile.js
View File 

@@ -3,6 +3,7 @@ const gulp = require('gulp'),
 
       gulpif = require('gulp-if'),
 
       gulpif = require('gulp-if'),
 
       terser = require('gulp-terser'),
 
       terser = require('gulp-terser'),
 
       sass = require('gulp-sass')(require('sass')),
 
       sass = require('gulp-sass')(require('sass')),
 
+      purgecss = require('gulp-purgecss'),
 
       cleanCSS = require('gulp-clean-css'),
 
       cleanCSS = require('gulp-clean-css'),
 
       htmlmin = require('gulp-htmlmin'),
 
       htmlmin = require('gulp-htmlmin'),
 
       rename = require("gulp-rename"),
 
       rename = require("gulp-rename"),
 
@@ -34,13 +35,12 @@ function copy(cb) {
 
   cb();
 
   cb();
 
 }
 
 }
 
 
 
-function build(cb) {
 
-  gulp.src('index.html')
 
-    .pipe(useref())
 
-    .pipe(gulpif('*.js', terser()))
 
-    .pipe(gulpif('*.css', cleanCSS({level: {1: {specialComments: 0}}})))
 
-    .pipe(gulp.dest('./app/'));
 
-  console.log("Assets built 🔧 for app/ ");
 
+function assets(cb) {
 
+  gulp.src('./img/**/*.*')
 
+    .pipe(gulp.dest('./app/img/'));
 
+  gulp.src('./fonts/**/*.*')
 
+    .pipe(gulp.dest('./app/fonts/'));
 
+  console.log("moved assets 🖼️ to app/ ");
 
   cb();
 
   cb();
 
 }
 
 }
 
 
 
@@ -51,6 +51,19 @@ function html(cb) {
 
       removeComments:true
 
       removeComments:true
 
     }))
 
     }))
 
     .pipe(gulp.dest('./app/index.min.html'));
 
     .pipe(gulp.dest('./app/index.min.html'));
 
+  console.log("HTMLmin 🗜️for app/ ");
 
+  cb();
 
+}
 
+
 
+function build(cb) {
 
+  gulp.src('index.html')
 
+    .pipe(useref())
 
+    .pipe(gulpif('*.js', terser({ output: {comments: false} })))
 
+    .pipe(gulpif('*.css', purgecss({content:['./app/index.html'],safelist:{deep:[/^fc/]}})))
 
+    /* Used Regex here to identify the js elements from the calendar and waypoints */
 
+    .pipe(gulpif('*.css', cleanCSS({level: {1: {specialComments: 0}}})))
 
+    .pipe(gulp.dest('./app/'));
 
+  console.log("Code built 🔧 for app/ ");
 
   cb();
 
   cb();
 
 }
 
 }
 
 
 
@@ -59,6 +72,7 @@ function mixin(cb) {
 
     .pipe(sass().on('error',sass.logError))
 
     .pipe(sass().on('error',sass.logError))
 
     .pipe(gulp.dest('./css/'))
 
     .pipe(gulp.dest('./css/'))
 
     .pipe(browserSync.stream());
 
     .pipe(browserSync.stream());
 
+  console.log("Mixin 🎨");
 
   cb();
 
   cb();
 
 }
 
 }
 
 
 
@@ -75,12 +89,14 @@ function run() {
 
     }
 
     }
 
   });
 
   });
 
   gulp.watch('./css/*.scss', mixin);
 
   gulp.watch('./css/*.scss', mixin);
 
-  gulp.watch('./css/**/*.css').on('change', browserSync.reload);
 
-  gulp.watch('./*.html').on('change',browserSync.reload);
 
-  gulp.watch('./js/**/*.js').on('change', gulp.series(build, reload));
 
+  gulp.watch('./css/**/*.css').on('change', gulp.series(build,reload));
 
+  gulp.watch('./*.html').on('change', gulp.series(html,build,reload));
 
+  gulp.watch('./js/**/*.js').on('change', gulp.series(build,reload));
 
 }
 
 }
 
 
 
 exports.copy = copy;
 
 exports.copy = copy;
 
+exports.assets = assets;
 
+exports.html = html;
 
 exports.build = build;
 
 exports.build = build;
 
 exports.mixin = mixin;
 
 exports.mixin = mixin;
 
 exports.run = run;
 
 exports.run = run;

+ 63 - 84
index.html
View File 

@@ -11,7 +11,7 @@
 
 <meta property="og:description" content="Something Else"/>
 
 <meta property="og:description" content="Something Else"/>
 
 <meta property="og:type" content="website"/><meta property="og:url" content="https://davidwindham.com"/><meta property="og:site_name" content="David Windham"/><meta property="og:image" content="img/og_image.jpg"/><meta property="fb:app_id" content="203136806559589" /><meta name="twitter:site" content="@windhamdavid"><meta name="twitter:creator" content="@windhamdavid"><meta name="twitter:title" content="David Windham"><meta name="twitter:description" content="Something Else"><meta name="twitter:image" content="img/ogt_image.jpg"><meta name="twitter:card" content="summary_large_image"><link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png"><link rel="manifest" href="img/site.webmanifest"><!--<link rel="mask-icon" href="img/safari-pinned-tab.svg" color="#3f3f3f">--><meta name="msapplication-TileColor" content="#000000"><meta name="theme-color" content="#ffffff">
 
 <meta property="og:type" content="website"/><meta property="og:url" content="https://davidwindham.com"/><meta property="og:site_name" content="David Windham"/><meta property="og:image" content="img/og_image.jpg"/><meta property="fb:app_id" content="203136806559589" /><meta name="twitter:site" content="@windhamdavid"><meta name="twitter:creator" content="@windhamdavid"><meta name="twitter:title" content="David Windham"><meta name="twitter:description" content="Something Else"><meta name="twitter:image" content="img/ogt_image.jpg"><meta name="twitter:card" content="summary_large_image"><link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png"><link rel="manifest" href="img/site.webmanifest"><!--<link rel="mask-icon" href="img/safari-pinned-tab.svg" color="#3f3f3f">--><meta name="msapplication-TileColor" content="#000000"><meta name="theme-color" content="#ffffff">
 
 <!-- build:css css/dw.css -->
 
 <!-- build:css css/dw.css -->
 
-<link rel="stylesheet" href="./css/fullcalendar.css">
 
+<link rel="stylesheet" href="css/fullcalendar.css">
 
 <link rel="stylesheet" href="css/styles.css">
 
 <link rel="stylesheet" href="css/styles.css">
 
 <link rel="stylesheet" href="css/style.css">
 
 <link rel="stylesheet" href="css/style.css">
 
 <!-- endbuild -->
 
 <!-- endbuild -->
 
@@ -61,69 +61,46 @@
 
       "https://www.reddit.com/user/windhamdavid"
 
       "https://www.reddit.com/user/windhamdavid"
 
     ] 
     ] 
   }
 
   }
 
-  </script>
 
+</script>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
 
 
 <div id="backgroundsvg"></div>
 
 <div id="backgroundsvg"></div>
 
 <div id="backgroundsvg2"></div>
 
 <div id="backgroundsvg2"></div>
 
 <div id="backgroundsvg3"></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 ** ============================= -->
 
-
 
 <header id="header" class="header" role="banner">
 
 <header id="header" class="header" role="banner">
 
   <div class="header-ui">
 
   <div class="header-ui">
 
-    <div class="brand--nav">
 
-      <h1>David Windham</h1>
 
+    <div class="brand--nav text-end">
 
+      <h1 class="d-none ">David Windham</h1>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
-  <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>
 
+</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>
 
   </div>
 
 </header>
 
 </header>
 
 
 
+
 
+
 
  <!-- ============================= ** MAIN ** ============================= -->
 
  <!-- ============================= ** MAIN ** ============================= -->
 
 <main id="main" class="main">
 
 <main id="main" class="main">
 
  <!-- ============================= ** HELLO ** ============================= -->
 
  <!-- ============================= ** HELLO ** ============================= -->
 
-
 
- 
-
 
-
 
-
 
   <div id="hello" class="background-color dark" data-dark-bg></div>
 
   <div id="hello" class="background-color dark" data-dark-bg></div>
 
   <section class="page-view hello dw-header d-flex align-items-center">
 
   <section class="page-view hello dw-header d-flex align-items-center">
 
     <div class="container">
 
     <div class="container">
 
@@ -132,36 +109,35 @@
 
         <div class="col-lg-5 offset-lg-1">
 
         <div class="col-lg-5 offset-lg-1">
 
           <h1 class="mb-4">David A. Windham</h1>
 
           <h1 class="mb-4">David A. Windham</h1>
 
           <p>( 1973 - )</p>
 
           <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>
 
+          <h3><i>Welcome Good People of the Internet</i> ✌🏼,</h3>
 
+          <p class="lead">I'm glad you dropped in. I like to create things.
 
+            It'll all started with...
 
+          </p>
 
 
 
         </div>
 
         </div>
 
         <div class="col col-lg-5 ">
 
         <div class="col col-lg-5 ">
 
-          <img class="float-end" width="200" src="img/ddog.svg" srcset="./img/ddog.svg 2x" alt="David Windham"/>
 
+          <img class="float-start" width="100" src="img/ddog.svg" srcset="./img/ddog.svg 2x" alt="David Windham"/>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
   </section>
 
   </section>
 
 
 
-
 
-
 
 <!-- ============================= ** WHO ** ============================= -->
 
 <!-- ============================= ** WHO ** ============================= -->
 
   <div id="who" class="background-color light"></div>
 
   <div id="who" class="background-color light"></div>
 
   <section class="page-view who">
 
   <section class="page-view who">
 
     <div class="container">
 
     <div class="container">
 
       <div class="row">
 
       <div class="row">
 
         <div class="col-lg-4">
 
         <div class="col-lg-4">
 
-          <img width="400" src="img/dw.svg" srcset="./img/dw.svg 2x" alt="David Windham"/>
 
+          <img width="400" src="img/dw.svg" srcset="img/dw.svg 2x" alt="David Windham"/>
 
         </div>
 
         </div>
 
-        <div class="col-lg-8 ps-5 pt-5 mt-5">
 
+        <div class="col-lg-7 ps-5 pt-5 mt-5">
 
           <h1>Who?</h1>
 
           <h1>Who?</h1>
 
           <p class="lead">
 
           <p class="lead">
 
             I've been a web developer for almost 20 years.
 
             I've been a web developer for almost 20 years.
 
             I have a BA in Studio Art and a minor in Art History from The College of Charleston.
 
             I have a BA in Studio Art and a minor in Art History from The College of Charleston.
 
             I've worked in advertising, publishing, education, and an assortment of businesses for clients.
 
             I've worked in advertising, publishing, education, and an assortment of businesses for clients.
 
-            I focus on building custom web applications and
 
-            I treat my development like mechanical works of art.
 
+            I focus on building custom web applications and I treat my development like mechanical works of art.
 
+            I try to help folks make good use of the web by crafting custom sites and applications.
 
           </p>
 
           </p>
 
           <svg id="signature" x="0px" y="0px" viewBox="0 0 1000 300" width="300">
 
           <svg id="signature" x="0px" y="0px" viewBox="0 0 1000 300" width="300">
 
             <style type="text/css"> .st0{fill:none;stroke:#535763;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} </style>
 
             <style type="text/css"> .st0{fill:none;stroke:#535763;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} </style>
 
@@ -184,10 +160,11 @@
 
   <div id="what" class="background-color dark" data-dark-bg></div>
 
   <div id="what" class="background-color dark" data-dark-bg></div>
 
   <section class="page-view what">
 
   <section class="page-view what">
 
     <div class="container">
 
     <div class="container">
 
-      <h1 class="what">What?</h1>
 
-      <h2 class="what">My Capabilities</h2>
 
-      <div class="col-lg-9">
 
+
 
+      <div class="col-lg-10 offset-lg-1">
 
         <div class="row">
 
         <div class="row">
 
+          <h1 class="what">What?</h1>
 
+          <h2 class="what">My Capabilities</h2>
 
           <p class="mt-3">
 
           <p class="mt-3">
 
             I like to tell everyone that the only real skill I have is searching for answers on the internet and reading the instructions.
 
             I like to tell everyone that the only real skill I have is searching for answers on the internet and reading the instructions.
 
             Although there's certainly a bit of truth in that, I'd say that my two real superpowers are creative thinking and solving challenging technical puzzles.
 
             Although there's certainly a bit of truth in that, I'd say that my two real superpowers are creative thinking and solving challenging technical puzzles.
 
@@ -197,10 +174,10 @@
 
       </div>
 
       </div>
 
 
 
       <div class="row capabilities-types">
 
       <div class="row capabilities-types">
 
-        <div class="col-lg-12">
 
+        <div class="col-lg-10 offset-lg-1">
 
           <div class="row">
 
           <div class="row">
 
             <div class="col-md-4">
 
             <div class="col-md-4">
 
-              <h5>Strategy</h5>
 
+              <h5 class="text-decoration-underline">Strategy</h5>
 
               <ul>
 
               <ul>
 
                 <li>Advertising</li>
 
                 <li>Advertising</li>
 
                 <li>Communication</li>
 
                 <li>Communication</li>
 
@@ -209,7 +186,7 @@
 
               </ul>
 
               </ul>
 
             </div>
 
             </div>
 
             <div class="col-md-4">
 
             <div class="col-md-4">
 
-              <h5>Front End</h5>
 
+              <h5 class="text-decoration-underline">Front End</h5>
 
               <ul>
 
               <ul>
 
                 <li>HTML / CSS</li>
 
                 <li>HTML / CSS</li>
 
                 <li>Javascript ES6 / ES5</li>
 
                 <li>Javascript ES6 / ES5</li>
 
@@ -218,7 +195,7 @@
 
               </ul>
 
               </ul>
 
             </div>
 
             </div>
 
             <div class="col-md-4">
 
             <div class="col-md-4">
 
-              <h5>Dev-Ops</h5>
 
+              <h5 class="text-decoration-underline">Dev-Ops</h5>
 
               <ul>
 
               <ul>
 
                 <li>Build Automation</li>
 
                 <li>Build Automation</li>
 
                 <li>Continuous Integration</li>
 
                 <li>Continuous Integration</li>
 
@@ -229,7 +206,7 @@
 
           </div>
 
           </div>
 
           <div class="row">
 
           <div class="row">
 
             <div class="col-md-4">
 
             <div class="col-md-4">
 
-              <h5>Design</h5>
 
+              <h5 class="text-decoration-underline">Design</h5>
 
               <ul>
 
               <ul>
 
                 <li>Graphic</li>
 
                 <li>Graphic</li>
 
                 <li>Illustration</li>
 
                 <li>Illustration</li>
 
@@ -239,7 +216,7 @@
 
               </ul>
 
               </ul>
 
             </div>
 
             </div>
 
             <div class="col-md-4">
 
             <div class="col-md-4">
 
-              <h5>Back End</h5>
 
+              <h5 class="text-decoration-underline">Back End</h5>
 
               <ul>
 
               <ul>
 
                 <li>Go / Gorilla / Dart / Flutter</li>
 
                 <li>Go / Gorilla / Dart / Flutter</li>
 
                 <li>Node / Express / Meteor</li>
 
                 <li>Node / Express / Meteor</li>
 
@@ -249,7 +226,7 @@
 
               </ul>
 
               </ul>
 
             </div>
 
             </div>
 
             <div class="col-md-4">
 
             <div class="col-md-4">
 
-              <h5>Sys-Admin</h5>
 
+              <h5 class="text-decoration-underline">Sys-Admin</h5>
 
               <ul>
 
               <ul>
 
                 <li>Amazon / Google Services</li>
 
                 <li>Amazon / Google Services</li>
 
                 <li>Ansible / Docker / Kubernetes</li>
 
                 <li>Ansible / Docker / Kubernetes</li>
 
@@ -270,7 +247,7 @@
 
       <section class="page-view when">
 
       <section class="page-view when">
 
         <div class="container">
 
         <div class="container">
 
           <div class="row">
 
           <div class="row">
 
-            <div class="col-lg-10">
 
+            <div class="col-lg-10 offset-lg-1">
 
               <h1 class="when">When &amp; Where?</h1>
 
               <h1 class="when">When &amp; Where?</h1>
 
             </div>
 
             </div>
 
           </div>
 
           </div>
 
@@ -294,17 +271,20 @@
 
       </div>
 
       </div>
 
     </section>
 
     </section>
 
 
 
-
 
 <!-- ============================= ** WHY ** ============================= -->
 
 <!-- ============================= ** WHY ** ============================= -->
 
   <div id="why" class="background-color dark" data-dark-bg></div>
 
   <div id="why" class="background-color dark" data-dark-bg></div>
 
     <div class="page-view why testimonials-section">
 
     <div class="page-view why testimonials-section">
 
       <div class="container">
 
       <div class="container">
 
-        <h1 class="why">Why?</h1>
 
         <div class="row">
 
         <div class="row">
 
-          <div class="col-lg-1">
 
+          <div class="col-lg-1 offset-md-1">
 
+            <h1 class="why">Why?</h1>
 
+          </div>
 
+        </div>
 
+        <div class="row">
 
+          <div class="col-lg-1 offset-md-1">
 
             <div class="indicators"></div>
 
             <div class="indicators"></div>
 
           </div>
 
           </div>
 
-          <div class="col-lg-10">
 
+          <div class="col-lg-9">
 
             <figure class="br-testimonial showing">
 
             <figure class="br-testimonial showing">
 
                 <h5>Selected Clients:</h5>
 
                 <h5>Selected Clients:</h5>
 
                 <div class="row">
 
                 <div class="row">
 
@@ -408,22 +388,21 @@
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 
 
-
 
 <!-- ============================= ** HOW ** ============================= -->
 
 <!-- ============================= ** HOW ** ============================= -->
 
   <div id="how" class="background-color light"></div>
 
   <div id="how" class="background-color light"></div>
 
     <section class="page-view services">
 
     <section class="page-view services">
 
       <div class="container">
 
       <div class="container">
 
 
 
         <div class="row services-title">
 
         <div class="row services-title">
 
-          <div class="col-lg-6">
 
+          <div class="col-lg-5 offset-md-1">
 
             <h1 class="how">&amp; How</h1>
 
             <h1 class="how">&amp; How</h1>
 
-            <h2 class="how">Can I Help?</h2>
 
+            <h2 class="how mb-5">Can I Help?</h2>
 
             <p class="lead"></p>
 
             <p class="lead"></p>
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
 
 
         <div class="row">
 
         <div class="row">
 
-          <div class="col-lg-6">
 
+          <div class="col-lg-5 offset-md-1">
 
             <div class="service">
 
             <div class="service">
 
               <i class="pulse"><span></span></i>
 
               <i class="pulse"><span></span></i>
 
               <div class="numbering">01</div>
 
               <div class="numbering">01</div>
 
@@ -466,13 +445,13 @@
 
                     I can help you succeed online because of my experience, enthusiasm, and commitment to personal service.
 
                     I can help you succeed online because of my experience, enthusiasm, and commitment to personal service.
 
                     I tailor my approach to the unique requirements of each project
 
                     I tailor my approach to the unique requirements of each project
 
                     in an effort create sustainable and practical applications that work for you.
 
                     in an effort create sustainable and practical applications that work for you.
 
+                    Have a project in mind?
 
                   </p>
 
                   </p>
 
                   <button type="button" class="btn btn-dark mt-1" data-bs-toggle="modal" data-bs-target="#pricing-modal">
 
                   <button type="button" class="btn btn-dark mt-1" data-bs-toggle="modal" data-bs-target="#pricing-modal">
 
                     Pricing &amp; Cost
 
                     Pricing &amp; Cost
 
                   </button>
 
                   </button>
 
-                  <p class="lead mt-4">Have a project in mind?</p>
 
                   <button type="button" class="btn btn-dark mt-1">
 
                   <button type="button" class="btn btn-dark mt-1">
 
-                    <a class="text-light" href="mailto:&#100;&#097;&#118;&#105;&#100;&#064;&#100;&#097;&#118;&#105;&#100;&#119;&#105;&#110;&#100;&#104;&#097;&#109;&#046;&#099;&#111;&#109;">Email Me</a>
 
+                    <a class="text-light" href="mailto:&#100;&#097;&#118;&#105;&#100;&#064;&#100;&#097;&#118;&#105;&#100;&#119;&#105;&#110;&#100;&#104;&#097;&#109;&#046;&#099;&#111;&#109;">Email</a>
 
                   </button>
 
                   </button>
 
                 </div>
 
                 </div>
 
               </div>
 
               </div>
 
@@ -648,12 +627,12 @@
 
 </footer>
 
 </footer>
 
 
 
 <!-- build:js js/dw.js -->
 
 <!-- build:js js/dw.js -->
 
-<script src="./js/jquery.min.js"></script>
 
-<script src="./js/bootstrap.bundle.js"></script>
 
-<script src="./js/fullcalendar.js"></script>
 
-<script src="./js/waypoints.js"></script>
 
-<script src="./js/waypoints-inview.js"></script>
 
-<script src="./js/_init.js"></script>
 
+<script src="js/jquery.min.js"></script>
 
+<script src="js/bootstrap.bundle.js"></script>
 
+<script src="js/fullcalendar.js"></script>
 
+<script src="js/waypoints.js"></script>
 
+<script src="js/waypoints-inview.js"></script>
 
+<script src="js/_init.js"></script>
 
 <!-- endbuild -->
 
 <!-- endbuild -->
 
 <!--
 
 <!--
 
 <script>
 
 <script>
 
@@ -673,4 +652,4 @@
 
 <noscript><p><img src="https://davidawindham.com/wik/matomo.php?idsite=5&amp;rec=1" style="border:0;" alt="" /></p></noscript>
 
 <noscript><p><img src="https://davidawindham.com/wik/matomo.php?idsite=5&amp;rec=1" style="border:0;" alt="" /></p></noscript>
 
 --> 
 --> 
 </body>
 
 </body>
 
-</html>
 
+</html>

+ 12 - 33
js/_init.js
View File 

@@ -9,33 +9,21 @@ document.addEventListener('DOMContentLoaded', function() {
 
       timeGrid: {
 
       timeGrid: {
 
         slotMinTime: '08:00:00',
 
         slotMinTime: '08:00:00',
 
         slotMaxTime: '17:00:00',
 
         slotMaxTime: '17:00:00',
 
-        dayHeaderFormat: {
 
-          weekday: 'short'
 
-        },
 
+        dayHeaderFormat: { weekday: 'short' },
 
         hiddenDays: [ 0,6,7 ]
 
         hiddenDays: [ 0,6,7 ]
 
       },
 
       },
 
     },
 
     },
 
     displayEventEnd: { month: true, basicWeek: true, "default": true },
 
     displayEventEnd: { month: true, basicWeek: true, "default": true },
 
     stickyHeaderDates: false,
 
     stickyHeaderDates: false,
 
-    eventDataTransform: function(event) {
 
-      event.url = "";
 
-      return event;
 
-    },
 
     firstDay : 1,
 
     firstDay : 1,
 
     googleCalendarApiKey: 'AIzaSyAGowGJYx6dOaQvG_vSUI73uT88VWOTcNQ',
 
     googleCalendarApiKey: 'AIzaSyAGowGJYx6dOaQvG_vSUI73uT88VWOTcNQ',
 
-  	events: {
 
-      googleCalendarId: 'davidawindham.com_bvrht1f8n2vgldgjenpgfdd4bk@group.calendar.google.com',
 
-      className: 'gcal-event', 
-      displayEventEnd: true,
 
-    },
 
-    eventClick: function(info) {
 
-      info.jsEvent.preventDefault();
 
-    }
 
+  	events: { googleCalendarId: 'davidawindham.com_bvrht1f8n2vgldgjenpgfdd4bk@group.calendar.google.com', className: 'gcal-event', displayEventEnd: true, },
 
+    eventDataTransform: function(event) { event.url = ""; return event; },
 
+    eventClick: function(info) { info.jsEvent.preventDefault(); }
 
   });
 
   });
 
   calendar.render();
 
   calendar.render();
 
 });
 
 });
 
 
 
-
 
 window.onload = function () {
 
 window.onload = function () {
 
   header();
 
   header();
 
   hamburger();
 
   hamburger();
 
@@ -49,7 +37,6 @@ function header() {
 
   var $window = $(window),
 
   var $window = $(window),
 
   $smallHeader = $('.header-small'),
 
   $smallHeader = $('.header-small'),
 
   smallHeaderShowing = false;
 
   smallHeaderShowing = false;
 
-
 
   function small_header() {
 
   function small_header() {
 
     var top = $window.scrollTop();
 
     var top = $window.scrollTop();
 
     if (top > 200 && !smallHeaderShowing) {
 
     if (top > 200 && !smallHeaderShowing) {
 
@@ -61,7 +48,6 @@ function header() {
 
       smallHeaderShowing = false;
 
       smallHeaderShowing = false;
 
     }
 
     }
 
   };
 
   };
 
-
 
   $window.on('scroll', function() {
 
   $window.on('scroll', function() {
 
     small_header();
 
     small_header();
 
   });
 
   });
 
@@ -71,13 +57,11 @@ function hamburger() {
 
   var isOpen = false,
 
   var isOpen = false,
 
   $hamburger = $('.hamburger'),
 
   $hamburger = $('.hamburger'),
 
   $headerSmall = $('.header-small');
 
   $headerSmall = $('.header-small');
 
-
 
   $hamburger.on('click', function () {
 
   $hamburger.on('click', function () {
 
     isOpen = !isOpen;
 
     isOpen = !isOpen;
 
     $hamburger.toggleClass('is-active');
 
     $hamburger.toggleClass('is-active');
 
     $headerSmall.toggleClass('menu-open');
 
     $headerSmall.toggleClass('menu-open');
 
   });
 
   });
 
-
 
   $(window).on('scroll', function() {
 
   $(window).on('scroll', function() {
 
     if(isOpen){
 
     if(isOpen){
 
       $hamburger.removeClass('is-active');
 
       $hamburger.removeClass('is-active');
 
@@ -97,19 +81,17 @@ function parallax() {
 
       el.style.transform = "translate3d(" + xPos + ", " + yPos + "px, 0)";
 
       el.style.transform = "translate3d(" + xPos + ", " + yPos + "px, 0)";
 
   };
 
   };
 
   function scrollLoop() {
 
   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);
 
+    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);
 
+  scrollLoop();
 
+  //window.addEventListener("DOMContentLoaded", scrollLoop, false);
 
 }
 
 }
 
 
 
-
 
-
 
-
 
 function why() {
 
 function why() {
 
   var index = 0,
 
   var index = 0,
 
     $section = $('.testimonials-section'),
 
     $section = $('.testimonials-section'),
 
@@ -156,7 +138,6 @@ function why() {
 
     });
 
     });
 
     $('.next-testimonial').on('click', function () { advanceNow(); });
 
     $('.next-testimonial').on('click', function () { advanceNow(); });
 
   }
 
   }
 
-
 
 }
 
 }
 
 
 
 function waypoints() {
 
 function waypoints() {
 
@@ -190,7 +171,6 @@ function waypoints() {
 
       $headerSmall.css('color', background);
 
       $headerSmall.css('color', background);
 
     }
 
     }
 
   }
 
   }
 
-
 
   function waypoint_init() {
 
   function waypoint_init() {
 
     $pages.each(function () {
 
     $pages.each(function () {
 
     var $this = $(this);
 
     var $this = $(this);
 
@@ -213,7 +193,6 @@ function waypoints() {
 
     waypoints.push(inview);
 
     waypoints.push(inview);
 
     });
 
     });
 
   }
 
   }
 
-
 
   function clearWaypoints() {
 
   function clearWaypoints() {
 
     for (var i = 0; i < waypoints.length; i++) {
 
     for (var i = 0; i < waypoints.length; i++) {
 
       waypoints[i].destroy();
 
       waypoints[i].destroy();

+ 1 - 0
package.json
View File 

@@ -18,6 +18,7 @@
 
     "gulp-clean-css": "^4.3.0",
 
     "gulp-clean-css": "^4.3.0",
 
     "gulp-concat": "^2.6.1",
 
     "gulp-concat": "^2.6.1",
 
     "gulp-htmlmin": "^5.0.1",
 
     "gulp-htmlmin": "^5.0.1",
 
+    "gulp-purgecss": "^5.0.0",
 
     "gulp-rename": "^2.0.0",
 
     "gulp-rename": "^2.0.0",
 
     "gulp-sass": "^5.1.0",
 
     "gulp-sass": "^5.1.0",
 
     "gulp-terser": "^2.1.0",
 
     "gulp-terser": "^2.1.0",

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