:dog:

app/index.html

@@ -22,7 +22,7 @@
     </div>
   </div>
 </header>
-<header class="header-small showing">
+<header class="header-small">
   <a href="./index.php" 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"/>
@@ -51,9 +51,9 @@
     <div class="container main">
       <div class="row">
         <div class="col-lg-6">
-          <h1>Hello!</h1>
+          <h1>Hello Internet Visitor</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>
+          <h2 class="">I help folks make good use of the web by crafting custom applications and sites.</h2>
         </div>
         <div class="col col-lg-6 align-self-end">
           <img width="200" src="./img/ddog.png" srcset="./img/ddog.png 2x" alt="David Windham"/>
@@ -75,10 +75,10 @@
             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 focus on building custom web applications and
-            I treat my development work like mechanical art.
+            I treat my development like mechanical works of art.
           </p>
           <img width="300" src="./img/dw-sig.png" alt="David Windham signature">
-          <p class="lead">Have a project in mind?</p>
+          <p class="lead mt-5">Have a project in mind?</p>
           <button type="button" class="btn btn-outline-dark">
             <a 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>
           </button>
@@ -93,9 +93,15 @@
     <div class="container">
       <h1 class="what">What?</h1>
       <h2 class="what">My Capabilities</h2>
-      <p>I'm essentially a guided service provider. I'll hold your hand through the whole process and I'll mainting, improve, and host your web sites and applications for thier life online. I offer three basic subscriptions to cloud hosting alongside of my hourly development.</p>
-
-
+      <div class="col-lg-9">
+        <div class="row">
+          <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.
+            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.
+            Aside from the list below, I'm also open to booking my time for any sort of research, brain storming, or any other endevours.
+          </p>
+        </div>
+      </div>
 
       <div class="row capabilities-types">
         <div class="col-lg-12">
@@ -160,68 +166,6 @@
               </ul>
             </div>
           </div>
-
-          <div class="row">
-            <div class="col-lg-12">
-              <div class="row">
-                <div class="col-md-4">
-                  <h5>Cloud ☁️ Hosting</h5>
-                </div>
-              </div>
-              <div class="row">
-                <div class="col-md-4">
-                  <ul>
-                    <button type="button" class="btn btn-dark" data-toggle="modal" data-target="#exampleModalCenter">
-                      White Glove
-                    </button>
-                  </ul>
-                </div>
-                <div class="col-md-4">
-                  <ul>
-                    <button type="button" class="btn btn-dark" data-toggle="modal" data-target="#exampleModalCenter">
-                      Custom Catered
-                    </button>
-                  </ul>
-                </div>
-                <div class="col-md-4">
-                  <ul>
-                    <button type="button" class="btn btn-dark" data-toggle="modal" data-target="#exampleModalCenter">
-                      Brown Bag
-                    </button>
-                  <ul>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Modal -->
-          <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
-            <div class="modal-dialog modal-dialog-centered" role="document">
-              <div class="modal-content">
-                <div class="modal-header">
-                  <h5 class="modal-title" id="whiteglove">White Glove</h5>
-                    <h6 class="modal">$75 per month</h6>
-                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                  </button>
-                </div>
-                <div class="modal-body">
-                  This service includes:
-                  <ol>
-                    <li>A managed Cloud Host from Amazon, Google, or Linode</li>
-                    <li>Regular maintence upgrades</li>
-                    <li>On Call support</li>
-                    <li>Software Maintenence</li>
-                  </ol>
-                </div>
-                <div class="modal-footer">
-                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <!-- END:Modal -->
-
         </div>
       </div>
     </div>
@@ -241,11 +185,11 @@
             <div class="col-lg-3 offset-md-1">
               <div class="row mt-5">
                 <h4 class="when">Request My Time</h4>
-                <p>I work 6 hours a day and I charge $50 per hour. I book hourly sessions regularly and I overlap projects in an effort to keep my schedule full and avoid contract work.</p>
+                <p>I book hourly sessions regularly and I overlap projects in an effort to keep my schedule full.</p>
                 <br />
               </div>
               <div class="row">
-                <h4 class="when">I Work Everywhere.</h4>
+                <h4 class="when">I Work Anywhere</h4>
                 <p>Although video chats are nice, I enjoy meeting in person too. I travel out of the Greenville or Charlotte International Airports.</p>
               </div>
             </div>
@@ -259,41 +203,92 @@
 
 
 <!-- ============================= ** WHY ** ============================= -->
-  <div id="why" class="background-color black"></div>
+  <div id="why" class="background-color black" data-dark-bg></div>
     <div class="page-view why testimonials-section">
       <div class="container">
         <h1 class="why">Why?</h1>
         <div class="row">
+          <div class="col-lg-1">
+            <div class="indicators"></div>
+          </div>
+          <div class="col-lg-10">
+            <figure class="br-testimonial showing">
+                <h5>Selected Clients:</h5>
+                <div class="row">
+                  <div class="col-md-6">
+                    <ul>
+                      <li>Use All Five Inc. – Los Angeles, CA</li>
+                      <li>The Rivers Agency – Chapel Hill, NC</li>
+                      <li>Charleston Home Tour - Charleston, SC</li>
+                      <li>AJ Design Co. - Abbeville, SC</li>
+                      <li>Fuzzco - Charleston, SC &amp; Portland, OR</li>
+                      <li>Harbourtowne Real Estate - Charleston, SC</li>
+                      <li>Charleston Trident Association of Realtors</li>
+                      <li>The College of Charleston - Charleston, SC</li>
+                      <li>Blue Ridge Electric Cooperative – Pickens, SC;</li>
+                      <li>Self Regional Healthcare – Greenwood, SC</li>
+                      <li>Biotherm Solutions - Cotari, CA</li>
+                    </ul>
+                  </div>
+                  <div class="col-md-6">
+                    <ul>
+                      <li>Pennebaker & Hegedus Films – New York, NY</li>
+                      <li>Good and Plenty Records – New Orleans, LA</li>
+                      <li>Jerry Moran – New Orleans, LA</li>
+                      <li>Holy City Farms - Charleston, SC</li>
+                      <li>Harvard Kennedy School of Education – Boston, MA;</li>
+                      <li>Clemson University – Clemson, SC;</li>
+                      <li>The Chelcum Family Foundation – Madison, WI</li>
+                      <li>Morris Publishing – Augusta, GA</li>
+                      <li>The State Newspaper - Columbia, SC</li>
+                      <li>GMK Associates – Columbia, SC</li>
+                      <li>Nicholson, Meredith, & Anderson - Greenwood, SC</li>
+                    </ul>
+                  </div>
+                </div>
+            </figure>
 
-          <div class="col-lg-8 offset-lg-1">
             <figure class="br-testimonial">
               <blockquote>
-                "David was excellent in developing web applications.
+                "<strong>David has been a pleasure to work with</strong>.
+                His patient leadership on project made it very easy on us.
+                He has been very flexible in accomodating our requests.
                 In less than two months we had a product ready for launch. David's persistent
-                support throughout development and launch was fast and consistent; <strong>This
-                project would have been impossible without him</strong>"
+                support throughout development and launch was fast and consistent; This
+                project would have been impossible without him"
               </blockquote>
               <figcaption>
-                <cite>Levi Brooks</cite>
-                Use All Five Inc. - Los Angeles, CA
-                <br />Harvard Kennedy School of Education
+                <cite>Chris Hegedus</cite>
+                Pennebaker Hegedus Films<br />
+                New York, NY
               </figcaption>
             </figure>
 
             <figure class="br-testimonial">
               <blockquote>
-                "You have great taste in music and you worked quickly.
-                In less than two months we had a product ready for launch. David's persistent
-                support throughout development and launch was fast and consistent; <strong>This
+                "David has always been creative.
+                I remember him taking apart all of the electronics in our house and never putting them back together.
+                <strong>It makes me very happy to see him doing something I know he enjoys!</strong>"
+              </blockquote>
+              <figcaption>
+                <cite>~ My Mom</cite>
+              </figcaption>
+            </figure>
+
+            <figure class="br-testimonial">
+              <blockquote>
+                "David worked remotely to help build and launch a client project and in less than three months we had a product ready for launch.
+                David's persistent support throughout development and launch was fast and consistent; <strong>This
                 project would have been impossible without him</strong>"
               </blockquote>
               <figcaption>
-                <cite>D.A. Pennebaker</cite>
-                D.A. Pennebaker Films
+                <cite>Levi Brooks</cite>
+                Use All Five Inc.<br />
+                Los Angeles, CA<br />
               </figcaption>
             </figure>
 
-            <figure class="br-testimonial showing">
+            <figure class="br-testimonial">
               <blockquote>
                 "Good developers can be difficult to find, but David is amazing! He’s an
                 <strong>expert developer who works quickly</strong> and ultimately delivered an app that
@@ -306,28 +301,26 @@
             </figure>
         </div>
 
-        <div class="col-lg-3 next-wrapper">
+        <div class="col-lg-1 next-wrapper">
           <div class="next-testimonial">
-            <?xml version='1.0' encoding='utf-8'?>
             <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 129 129">
-              <g>
-                <path d="m40.4,121.3c-0.8,0.8-1.8,1.2-2.9,1.2s-2.1-0.4-2.9-1.2c-1.6-1.6-1.6-4.2 0-5.8l51-51-51-51c-1.6-1.6-1.6-4.2 0-5.8 1.6-1.6 4.2-1.6 5.8,0l53.9,53.9c1.6,1.6 1.6,4.2 0,5.8l-53.9,53.9z"/>
-              </g>
+              <g><path d="m40.4,121.3c-0.8,0.8-1.8,1.2-2.9,1.2s-2.1-0.4-2.9-1.2c-1.6-1.6-1.6-4.2 0-5.8l51-51-51-51c-1.6-1.6-1.6-4.2 0-5.8 1.6-1.6 4.2-1.6 5.8,0l53.9,53.9c1.6,1.6 1.6,4.2 0,5.8l-53.9,53.9z"/></g>
             </svg>
             <span>Next</span>
           </div>
         </div>
       </div>
-      <div class="indicators"></div>
+
 
     </div>
   </div>
 
 
 <!-- ============================= ** HOW ** ============================= -->
-  <div id="how" class="background-color white" data-dark-bg></div>
+  <div id="how" class="background-color white"></div>
     <section class="page-view services">
       <div class="container">
+
         <div class="row services-title">
           <div class="col-lg-6">
             <h1 class="how">&amp; How</h1>
@@ -335,12 +328,13 @@
             <p class="lead"></p>
           </div>
         </div>
+
         <div class="row">
           <div class="col-lg-6">
             <div class="service">
               <i class="pulse"><span></span></i>
               <div class="numbering">01</div>
-              <h4 class="how">Create, Build &amp; Host</h4>
+              <h4 class="how">Create, Build, &amp; Host</h4>
               <p>a new web site or application.</p>
             </div>
             <div class="service">
@@ -349,7 +343,7 @@
               <span></span>
               </i>
               <div class="numbering">02</div>
-                <h4 class="how">Audit, Improve &amp; Repair</h4>
+                <h4 class="how">Audit, Improve, &amp; Repair</h4>
                 <p>an existing web site or application.</p>
               </div>
               <div class="service">
@@ -371,21 +365,133 @@
                 </i>
               </div>
             </div>
-
             <div class="col-lg-5 offset-lg-1">
               <div class="row step">
                 <div class="approach-step">
-                  <h4 class="how">Tailored &amp; Goal Oriented</h4>
-                  <p>Every project is different and the factors that contribute to success are unique. Because of this, I tailor my approach to the specific constraints of your project rather than using a cookie cutter process.</p>
-                  <p>My goal is to help you achieve your goals. To ensure success, during every stage of the project all decisions and every line of code will be in support of these goals.</p>
-                  <p>Our work isn't done when the code is complete. We'll be there to support you and and your customers through launch, and for as long as we're needed afterwords. Our customers count on us at every stage of the development process from concept/idea all the way through launch and beyond.</p>
+                  <h4 class="how">Tailored</h4>
+                  <p>
+                    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
+                    in an effort create sustainable and practical applications that work for you.
+                  </p>
+                  <button type="button" class="btn btn-dark mt-3" data-toggle="modal" data-target="#pricing-modal">
+                    Pricing &amp; Cost
+                  </button>
                 </div>
               </div>
             </div>
+          </div>
 
+          <!-- Pricing Modal -->
+          <div class="modal fade" id="pricing-modal" tabindex="-1" role="dialog" aria-labelledby="pricing-modal" aria-hidden="true">
+            <div class="modal-dialog modal-lg" role="document">
+              <div class="modal-content">
+                <div class="modal-body">
+                  <div class="container-fluid">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                      <span aria-hidden="true">&times;</span>
+                    </button>
+                    <h3 class="modal-title font-weight-bold">Pricing &amp; Costs</h3>
+                    <div class="row">
+                      <div class="col-md-12">
+                        <h6 class="font-weight-bold mt-4">Approach:</h6>
+                        <p class="mt-1">
+                          I have a "take care of it" approach to client services.
+                          I manage, host, and maintain everything I build or install for the lifespan of the project.
+                          I focus on my core competencies and will recomend other providers when the scope of your project falls outside of them.
+                          I provide several basic levels of monthly support based on the scale and maintenence needs of your project.
+                        </p>
+                        <h6 class="font-weight-bold mt-4">Advantages:</h6>
+                        <p class="mt-1">
+                          I take care of ALL of it for you so there are no confusing automated reminders, renewals, and upgrade emails coming from your software or upstream providers.
+                          I offer sensible consulting based on your goals.
+                          I provide a single point of contact for consolidated billing, development, and support.
+                        </p>
+                        <h6 class="font-weight-bold mt-4">Rates:</h6>
+                        <div class="row">
+                          <div class="col-md-4">
+                            <h6>Hourly: $50</h6>
+                          </div>
+                          <div class="col-md-4">
+                            <h6>Monthly: $25 - $75</h6>
+                          </div>
+                          <div class="col-md-4">
+                            <h6>Add-ons:(vendor pricing)</h6>
+                          </div>
+                        </div>
+                        <div class="row">
+                          <div class="col-md-4">
+                            <ul class="pricing">
+                              <li>Design</li>
+                              <li>Development</li>
+                              <li>Consulting</li>
+                              <li>Auditing</li>
+                            </ul>
+                          </div>
+                          <div class="col-md-4">
+                            <ul class="pricing">
+                              <li>Support</li>
+                              <li>Managed Hosting</li>
+                              <li>Regular Maintence</li>
+                              <li>Regular Upgrades</li>
+                            </ul>
+                          </div>
+                          <div class="col-md-4">
+                            <ul class="pricing">
+                              <li>G Suite</li>
+                              <li>Office 365</li>
+                              <li>SaaS Integration</li>
+                              <li>API Integration</li>
+                            </ul>
+                          </div>
+                        </div>
+                        <h6 class="font-weight-bold mt-4">Vendors:</h6>
+                        <div class="row text-center">
+                          <div class="col-md-12">
+                            <div class="btn-group btn-group-toggle" data-toggle="buttons">
+                              <label class="btn btn-light">
+                                <input type="radio" name="options" id="option1" autocomplete="off">
+                                <a target="_blank" href="https://cloud.google.com">
+                                  <img class="vendor-image" src="img/vendor-google.png" width="100%">
+                                </a>
+                              </label>
+                              <label class="btn btn-light">
+                                <input type="radio" name="options" id="option2" autocomplete="off">
+                                <a target="_blank" href="https://linode.com">
+                                <img class="vendor-image" src="img/vendor-linode.png" width="100%">
+                                </a>
+                              </label>
+                              <label class="btn btn-light">
+                                <input type="radio" name="options" id="option2" autocomplete="off">
+                                <a target="_blank" href="https://aws.amazon.com">
+                                <img class="vendor-image" src="img/vendor-amazon.png" width="100%">
+                                </a>
+                              </label>
+                              <label class="btn btn-light">
+                                <input type="radio" name="options" id="option3" autocomplete="off">
+                                <a target="_blank" href="https://azure.microsoft.com/">
+                                <img class="vendor-image" src="img/vendor-microsoft.png" width="100%">
+                                </a>
+                              </label>
+                            </div>
+                          </div>
+                        </div>
+                        <p class="mt-1">
+                          I use one of these four vendors for everything.
+                          Anything can be accomplished between them and
+                          I will recommend each based solely on your project requirements and existing IT infrastructure.
+                          Each vendor offers a marketplace of products which can be integrated into your project.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
-        </div>
+          <!-- END:Pricing Modal -->
 
+        </div>
       </div>
     </div>
   </section>
@@ -413,8 +519,10 @@
       <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://davidawindham.com/desk/" class="github" rel="me"></span><i class="demo-icon icon-pencil"></i>&nbsp; Desk</a></li>
-            <li><a href="https://davidawindham.com/archive/" class="wikipedia" rel="me"><i class="demo-icon icon-docs"></i>&nbsp; Archive</a></li>
+            <li><a href="https://davidawindham.com/desk/" class="github" rel="me"></span><i class="icon-pencil"></i>&nbsp; Desk</a></li>
+            <li><a href="https://davidawindham.com/archive/" class="wikipedia" rel="me"><i class="icon-docs"></i>&nbsp; Archive</a></li>
+            <li><a href="https://davidawindham.com/til/" class="github" rel="me"></span><i class="icon-book"></i>&nbsp; TIL</a></li>
+            <li><a href="https://code.davidawindham.com/" class="github" rel="me"></span><i class="icon-file-code"></i>&nbsp; Code</a></li>
           </ul>
         </div>
       </div>
@@ -422,10 +530,10 @@
       <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"></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"></i>&nbsp; Wikipedia</a></li>
-            <li><a href="https://www.facebook.com/davidawindham" class="facebook"><i class="demo-icon icon-facebook"></i>&nbsp; Facebook</a></li>
-            <li><a href="https://twitter.com/windhamdavid" class="twitter" rel="me"><i class="demo-icon icon-twitter"></i>&nbsp; Twitter</a></li>
+            <li><a href="https://github.com/windhamdavid" class="github" rel="me"></span><i class="icon-github"></i>&nbsp; Github</a></li>
+            <li><a href="https://en.wikipedia.org/wiki/User:Windhamdavid" class="wikipedia" rel="me"><i class="icon-wikipedia-w"></i>&nbsp; Wikipedia</a></li>
+            <li><a href="https://www.facebook.com/davidawindham" class="facebook"><i class="icon-facebook"></i>&nbsp; Facebook</a></li>
+            <li><a href="https://twitter.com/windhamdavid" class="twitter" rel="me"><i class="icon-twitter"></i>&nbsp; Twitter</a></li>
           </ul>
         </div>
       </div>
@@ -434,7 +542,7 @@
     <div class="footer-end">
       <div class="row">
         <div class="col-md-6 text-center text-md-left">
-          &copy; 2020
+          &copy; 2004-2020
         </div>
       </div>
     </div>

css/style.css

@@ -591,10 +591,10 @@ h5.how {
 .hamburger.is-active .hamburger-inner,
 .hamburger.is-active .hamburger-inner::before,
 .hamburger.is-active .hamburger-inner::after {
-  background-color: #afafaf;
+  background-color: #000;
 }
 .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
-  background-color: #afafaf;
+  background-color: #000;
 }
 .hamburger.is-active .hamburger-inner {
   transform: translate3d(0, 10px, 0) rotate(45deg);
@@ -707,7 +707,6 @@ h5.how {
   height: 2rem;
   width: 2rem;
   line-height: 2rem;
-  color: #fff;
   border-radius: 3px;
   text-align: center;
   position: absolute;
@@ -770,19 +769,22 @@ h5.how {
   font-size: 12px;
   vertical-align: super;
 }
+ul.pricing {
+  margin-left:0px;
+  padding: 0 0 0 25px;
+}
+.vendor-image {
+  filter: grayscale(1);
+}
+.vendor-image:hover {
+  filter: grayscale(0);
+  transition: 0.5s ease-in-out;
+}
 blockquote {
-  padding-left: 70px;
+  padding: 0;
   position: relative;
 }
-blockquote:before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: .85em;
-  width: 50px;
-  height: 1px;
-  background-color: currentColor;
-}
+
 .br-testimonial figcaption {
   padding-left: 70px;
   font-size: 13px;
@@ -827,6 +829,7 @@ blockquote:before {
 }
 .testimonials-section blockquote {
   color: #fff;
+  font-size:1.5em;
 }
 .testimonials-section .br-testimonial {
   opacity: 0;
@@ -937,6 +940,9 @@ blockquote:before {
 .fc-event, .fc-event-dot {
     background-color: #737373;
 }
+.fc-unthemed td.fc-today {
+  background: #77777732;
+}
 /*########################################
 ################# FOOT ###################
 #########################################*/
@@ -1436,8 +1442,11 @@ blockquote:before {
 }
 
 .icon-pencil:before { content: '\e800'; } /* '' */
+.icon-book:before { content: '\e801'; } /* '' */
 .icon-twitter:before { content: '\f099'; } /* '' */
 .icon-facebook:before { content: '\f09a'; } /* '' */
 .icon-docs:before { content: '\f0c5'; } /* '' */
+.icon-desktop:before { content: '\f108'; } /* '' */
 .icon-github:before { content: '\f113'; } /* '' */
+.icon-file-code:before { content: '\f1c9'; } /* '' */
 .icon-wikipedia-w:before { content: '\f266'; } /* '' */

gulpfile.js

@@ -4,6 +4,7 @@ const gulp = require('gulp'),
       uglify = require('gulp-uglify'),
       sass = require('gulp-sass'),
       cleanCSS = require('gulp-clean-css'),
+      htmlmin = require('gulp-htmlmin'),
       rename = require("gulp-rename"),
       concat = require("gulp-concat"),
       browserSync = require('browser-sync').create();
@@ -54,6 +55,15 @@ gulp.task('build', async function() {
   console.log("Assets built 🔧 for app/ ");
 });
 
+gulp.task('htmlmin', () => {
+  return gulp.src('./app/index.html')
+    .pipe(htmlmin({
+      collapseWhitespace: true,
+      removeComments:true
+    }))
+    .pipe(gulp.dest('./app/index.min.html'));
+});
+
 function mixin() {
   return gulp.src('./css/_scss/**/*.scss')
     .pipe(sass().on('error',sass.logError))

index.html

@@ -28,7 +28,7 @@
     </div>
   </div>
 </header>
-<header class="header-small showing">
+<header class="header-small">
   <a href="./index.php" 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"/>
@@ -57,9 +57,9 @@
     <div class="container main">
       <div class="row">
         <div class="col-lg-6">
-          <h1>Hello Internet Visitor #1,342,487</h1>
+          <h1>Hello Internet Visitor</h1>
           <p class="lead"></p>
-          <h2 class="">I try to help folks make good use of the web by crafting custom applications and sites.</h2>
+          <h2 class="">I help folks make good use of the web by crafting custom applications and sites.</h2>
         </div>
         <div class="col col-lg-6 align-self-end">
           <img width="200" src="./img/ddog.png" srcset="./img/ddog.png 2x" alt="David Windham"/>
@@ -81,10 +81,10 @@
             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 focus on building custom web applications and
-            I treat my development work like mechanical art.
+            I treat my development like mechanical works of art.
           </p>
           <img width="300" src="./img/dw-sig.png" alt="David Windham signature">
-          <p class="lead">Have a project in mind?</p>
+          <p class="lead mt-5">Have a project in mind?</p>
           <button type="button" class="btn btn-outline-dark">
             <a 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>
           </button>
@@ -99,9 +99,15 @@
     <div class="container">
       <h1 class="what">What?</h1>
       <h2 class="what">My Capabilities</h2>
-      <p>I'm essentially a guided service provider. I'll hold your hand through the whole process and I'll mainting, improve, and host your web sites and applications for thier life online. I offer three basic subscriptions to cloud hosting alongside of my hourly development.</p>
-
-
+      <div class="col-lg-9">
+        <div class="row">
+          <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.
+            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.
+            Aside from the list below, I'm also open to booking my time for any sort of research, brain storming, or any other endevours.
+          </p>
+        </div>
+      </div>
 
       <div class="row capabilities-types">
         <div class="col-lg-12">
@@ -166,68 +172,6 @@
               </ul>
             </div>
           </div>
-
-          <div class="row">
-            <div class="col-lg-12">
-              <div class="row">
-                <div class="col-md-4">
-                  <h5>Cloud ☁️ Hosting</h5>
-                </div>
-              </div>
-              <div class="row">
-                <div class="col-md-4">
-                  <ul>
-                    <button type="button" class="btn btn-dark" data-toggle="modal" data-target="#exampleModalCenter">
-                      White Glove
-                    </button>
-                  </ul>
-                </div>
-                <div class="col-md-4">
-                  <ul>
-                    <button type="button" class="btn btn-dark" data-toggle="modal" data-target="#exampleModalCenter">
-                      Custom Catered
-                    </button>
-                  </ul>
-                </div>
-                <div class="col-md-4">
-                  <ul>
-                    <button type="button" class="btn btn-dark" data-toggle="modal" data-target="#exampleModalCenter">
-                      Brown Bag
-                    </button>
-                  <ul>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Modal -->
-          <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
-            <div class="modal-dialog modal-dialog-centered" role="document">
-              <div class="modal-content">
-                <div class="modal-header">
-                  <h5 class="modal-title" id="whiteglove">White Glove</h5>
-                    <h6 class="modal">$75 per month</h6>
-                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                  </button>
-                </div>
-                <div class="modal-body">
-                  This service includes:
-                  <ol>
-                    <li>A managed Cloud Host from Amazon, Google, or Linode</li>
-                    <li>Regular maintence upgrades</li>
-                    <li>On Call support</li>
-                    <li>Software Maintenence</li>
-                  </ol>
-                </div>
-                <div class="modal-footer">
-                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <!-- END:Modal -->
-
         </div>
       </div>
     </div>
@@ -247,11 +191,11 @@
             <div class="col-lg-3 offset-md-1">
               <div class="row mt-5">
                 <h4 class="when">Request My Time</h4>
-                <p>I work 6 hours a day and I charge $50 per hour. I book hourly sessions regularly and I overlap projects in an effort to keep my schedule full and avoid contract work.</p>
+                <p>I book hourly sessions regularly and I overlap projects in an effort to keep my schedule full.</p>
                 <br />
               </div>
               <div class="row">
-                <h4 class="when">I Work Everywhere.</h4>
+                <h4 class="when">I Work Anywhere</h4>
                 <p>Although video chats are nice, I enjoy meeting in person too. I travel out of the Greenville or Charlotte International Airports.</p>
               </div>
             </div>
@@ -265,41 +209,92 @@
 
 
 <!-- ============================= ** WHY ** ============================= -->
-  <div id="why" class="background-color black"></div>
+  <div id="why" class="background-color black" data-dark-bg></div>
     <div class="page-view why testimonials-section">
       <div class="container">
         <h1 class="why">Why?</h1>
         <div class="row">
+          <div class="col-lg-1">
+            <div class="indicators"></div>
+          </div>
+          <div class="col-lg-10">
+            <figure class="br-testimonial showing">
+                <h5>Selected Clients:</h5>
+                <div class="row">
+                  <div class="col-md-6">
+                    <ul>
+                      <li>Use All Five Inc. – Los Angeles, CA</li>
+                      <li>The Rivers Agency – Chapel Hill, NC</li>
+                      <li>Charleston Home Tour - Charleston, SC</li>
+                      <li>AJ Design Co. - Abbeville, SC</li>
+                      <li>Fuzzco - Charleston, SC &amp; Portland, OR</li>
+                      <li>Harbourtowne Real Estate - Charleston, SC</li>
+                      <li>Charleston Trident Association of Realtors</li>
+                      <li>The College of Charleston - Charleston, SC</li>
+                      <li>Blue Ridge Electric Cooperative – Pickens, SC;</li>
+                      <li>Self Regional Healthcare – Greenwood, SC</li>
+                      <li>Biotherm Solutions - Cotari, CA</li>
+                    </ul>
+                  </div>
+                  <div class="col-md-6">
+                    <ul>
+                      <li>Pennebaker & Hegedus Films – New York, NY</li>
+                      <li>Good and Plenty Records – New Orleans, LA</li>
+                      <li>Jerry Moran – New Orleans, LA</li>
+                      <li>Holy City Farms - Charleston, SC</li>
+                      <li>Harvard Kennedy School of Education – Boston, MA;</li>
+                      <li>Clemson University – Clemson, SC;</li>
+                      <li>The Chelcum Family Foundation – Madison, WI</li>
+                      <li>Morris Publishing – Augusta, GA</li>
+                      <li>The State Newspaper - Columbia, SC</li>
+                      <li>GMK Associates – Columbia, SC</li>
+                      <li>Nicholson, Meredith, & Anderson - Greenwood, SC</li>
+                    </ul>
+                  </div>
+                </div>
+            </figure>
 
-          <div class="col-lg-8 offset-lg-1">
             <figure class="br-testimonial">
               <blockquote>
-                "David was excellent in developing web applications.
+                "<strong>David has been a pleasure to work with</strong>.
+                His patient leadership on project made it very easy on us.
+                He has been very flexible in accomodating our requests.
                 In less than two months we had a product ready for launch. David's persistent
-                support throughout development and launch was fast and consistent; <strong>This
-                project would have been impossible without him</strong>"
+                support throughout development and launch was fast and consistent; This
+                project would have been impossible without him"
               </blockquote>
               <figcaption>
-                <cite>Levi Brooks</cite>
-                Use All Five Inc. - Los Angeles, CA
-                <br />Harvard Kennedy School of Education
+                <cite>Chris Hegedus</cite>
+                Pennebaker Hegedus Films<br />
+                New York, NY
               </figcaption>
             </figure>
 
             <figure class="br-testimonial">
               <blockquote>
-                "You have great taste in music and you worked quickly.
-                In less than two months we had a product ready for launch. David's persistent
-                support throughout development and launch was fast and consistent; <strong>This
+                "David has always been creative.
+                I remember him taking apart all of the electronics in our house and never putting them back together.
+                <strong>It makes me very happy to see him doing something I know he enjoys!</strong>"
+              </blockquote>
+              <figcaption>
+                <cite>~ My Mom</cite>
+              </figcaption>
+            </figure>
+
+            <figure class="br-testimonial">
+              <blockquote>
+                "David worked remotely to help build and launch a client project and in less than three months we had a product ready for launch.
+                David's persistent support throughout development and launch was fast and consistent; <strong>This
                 project would have been impossible without him</strong>"
               </blockquote>
               <figcaption>
-                <cite>D.A. Pennebaker</cite>
-                D.A. Pennebaker Films
+                <cite>Levi Brooks</cite>
+                Use All Five Inc.<br />
+                Los Angeles, CA<br />
               </figcaption>
             </figure>
 
-            <figure class="br-testimonial showing">
+            <figure class="br-testimonial">
               <blockquote>
                 "Good developers can be difficult to find, but David is amazing! He’s an
                 <strong>expert developer who works quickly</strong> and ultimately delivered an app that
@@ -312,28 +307,26 @@
             </figure>
         </div>
 
-        <div class="col-lg-3 next-wrapper">
+        <div class="col-lg-1 next-wrapper">
           <div class="next-testimonial">
-            <?xml version='1.0' encoding='utf-8'?>
             <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 129 129">
-              <g>
-                <path d="m40.4,121.3c-0.8,0.8-1.8,1.2-2.9,1.2s-2.1-0.4-2.9-1.2c-1.6-1.6-1.6-4.2 0-5.8l51-51-51-51c-1.6-1.6-1.6-4.2 0-5.8 1.6-1.6 4.2-1.6 5.8,0l53.9,53.9c1.6,1.6 1.6,4.2 0,5.8l-53.9,53.9z"/>
-              </g>
+              <g><path d="m40.4,121.3c-0.8,0.8-1.8,1.2-2.9,1.2s-2.1-0.4-2.9-1.2c-1.6-1.6-1.6-4.2 0-5.8l51-51-51-51c-1.6-1.6-1.6-4.2 0-5.8 1.6-1.6 4.2-1.6 5.8,0l53.9,53.9c1.6,1.6 1.6,4.2 0,5.8l-53.9,53.9z"/></g>
             </svg>
             <span>Next</span>
           </div>
         </div>
       </div>
-      <div class="indicators"></div>
+
 
     </div>
   </div>
 
 
 <!-- ============================= ** HOW ** ============================= -->
-  <div id="how" class="background-color white" data-dark-bg></div>
+  <div id="how" class="background-color white"></div>
     <section class="page-view services">
       <div class="container">
+
         <div class="row services-title">
           <div class="col-lg-6">
             <h1 class="how">&amp; How</h1>
@@ -341,12 +334,13 @@
             <p class="lead"></p>
           </div>
         </div>
+
         <div class="row">
           <div class="col-lg-6">
             <div class="service">
               <i class="pulse"><span></span></i>
               <div class="numbering">01</div>
-              <h4 class="how">Create, Build &amp; Host</h4>
+              <h4 class="how">Create, Build, &amp; Host</h4>
               <p>a new web site or application.</p>
             </div>
             <div class="service">
@@ -355,7 +349,7 @@
               <span></span>
               </i>
               <div class="numbering">02</div>
-                <h4 class="how">Audit, Improve &amp; Repair</h4>
+                <h4 class="how">Audit, Improve, &amp; Repair</h4>
                 <p>an existing web site or application.</p>
               </div>
               <div class="service">
@@ -377,21 +371,133 @@
                 </i>
               </div>
             </div>
-
             <div class="col-lg-5 offset-lg-1">
               <div class="row step">
                 <div class="approach-step">
-                  <h4 class="how">Tailored &amp; Goal Oriented</h4>
-                  <p>Every project is different and the factors that contribute to success are unique. Because of this, I tailor my approach to the specific constraints of your project rather than using a cookie cutter process.</p>
-                  <p>My goal is to help you achieve your goals. To ensure success, during every stage of the project all decisions and every line of code will be in support of these goals.</p>
-                  <p>Our work isn't done when the code is complete. We'll be there to support you and and your customers through launch, and for as long as we're needed afterwords. Our customers count on us at every stage of the development process from concept/idea all the way through launch and beyond.</p>
+                  <h4 class="how">Tailored</h4>
+                  <p>
+                    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
+                    in an effort create sustainable and practical applications that work for you.
+                  </p>
+                  <button type="button" class="btn btn-dark mt-3" data-toggle="modal" data-target="#pricing-modal">
+                    Pricing &amp; Cost
+                  </button>
                 </div>
               </div>
             </div>
+          </div>
 
+          <!-- Pricing Modal -->
+          <div class="modal fade" id="pricing-modal" tabindex="-1" role="dialog" aria-labelledby="pricing-modal" aria-hidden="true">
+            <div class="modal-dialog modal-lg" role="document">
+              <div class="modal-content">
+                <div class="modal-body">
+                  <div class="container-fluid">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                      <span aria-hidden="true">&times;</span>
+                    </button>
+                    <h3 class="modal-title font-weight-bold">Pricing &amp; Costs</h3>
+                    <div class="row">
+                      <div class="col-md-12">
+                        <h6 class="font-weight-bold mt-4">Approach:</h6>
+                        <p class="mt-1">
+                          I have a "take care of it" approach to client services.
+                          I manage, host, and maintain everything I build or install for the lifespan of the project.
+                          I focus on my core competencies and will recomend other providers when the scope of your project falls outside of them.
+                          I provide several basic levels of monthly support based on the scale and maintenence needs of your project.
+                        </p>
+                        <h6 class="font-weight-bold mt-4">Advantages:</h6>
+                        <p class="mt-1">
+                          I take care of ALL of it for you so there are no confusing automated reminders, renewals, and upgrade emails coming from your software or upstream providers.
+                          I offer sensible consulting based on your goals.
+                          I provide a single point of contact for consolidated billing, development, and support.
+                        </p>
+                        <h6 class="font-weight-bold mt-4">Rates:</h6>
+                        <div class="row">
+                          <div class="col-md-4">
+                            <h6>Hourly: $50</h6>
+                          </div>
+                          <div class="col-md-4">
+                            <h6>Monthly: $25 - $75</h6>
+                          </div>
+                          <div class="col-md-4">
+                            <h6>Add-ons:(vendor pricing)</h6>
+                          </div>
+                        </div>
+                        <div class="row">
+                          <div class="col-md-4">
+                            <ul class="pricing">
+                              <li>Design</li>
+                              <li>Development</li>
+                              <li>Consulting</li>
+                              <li>Auditing</li>
+                            </ul>
+                          </div>
+                          <div class="col-md-4">
+                            <ul class="pricing">
+                              <li>Support</li>
+                              <li>Managed Hosting</li>
+                              <li>Regular Maintence</li>
+                              <li>Regular Upgrades</li>
+                            </ul>
+                          </div>
+                          <div class="col-md-4">
+                            <ul class="pricing">
+                              <li>G Suite</li>
+                              <li>Office 365</li>
+                              <li>SaaS Integration</li>
+                              <li>API Integration</li>
+                            </ul>
+                          </div>
+                        </div>
+                        <h6 class="font-weight-bold mt-4">Vendors:</h6>
+                        <div class="row text-center">
+                          <div class="col-md-12">
+                            <div class="btn-group btn-group-toggle" data-toggle="buttons">
+                              <label class="btn btn-light">
+                                <input type="radio" name="options" id="option1" autocomplete="off">
+                                <a target="_blank" href="https://cloud.google.com">
+                                  <img class="vendor-image" src="img/vendor-google.png" width="100%">
+                                </a>
+                              </label>
+                              <label class="btn btn-light">
+                                <input type="radio" name="options" id="option2" autocomplete="off">
+                                <a target="_blank" href="https://linode.com">
+                                <img class="vendor-image" src="img/vendor-linode.png" width="100%">
+                                </a>
+                              </label>
+                              <label class="btn btn-light">
+                                <input type="radio" name="options" id="option2" autocomplete="off">
+                                <a target="_blank" href="https://aws.amazon.com">
+                                <img class="vendor-image" src="img/vendor-amazon.png" width="100%">
+                                </a>
+                              </label>
+                              <label class="btn btn-light">
+                                <input type="radio" name="options" id="option3" autocomplete="off">
+                                <a target="_blank" href="https://azure.microsoft.com/">
+                                <img class="vendor-image" src="img/vendor-microsoft.png" width="100%">
+                                </a>
+                              </label>
+                            </div>
+                          </div>
+                        </div>
+                        <p class="mt-1">
+                          I use one of these four vendors for everything.
+                          Anything can be accomplished between them and
+                          I will recommend each based solely on your project requirements and existing IT infrastructure.
+                          Each vendor offers a marketplace of products which can be integrated into your project.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
-        </div>
+          <!-- END:Pricing Modal -->
 
+        </div>
       </div>
     </div>
   </section>
@@ -419,9 +525,10 @@
       <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://davidawindham.com/desk/" class="github" rel="me"></span><i class="demo-icon icon-pencil"></i>&nbsp; Site</a></li>
-            <li><a href="https://davidawindham.com/desk/" class="github" rel="me"></span><i class="demo-icon icon-pencil"></i>&nbsp; Desk</a></li>
-            <li><a href="https://davidawindham.com/archive/" class="wikipedia" rel="me"><i class="demo-icon icon-docs"></i>&nbsp; Archive</a></li>
+            <li><a href="https://davidawindham.com/desk/" class="github" rel="me"></span><i class="icon-pencil"></i>&nbsp; Desk</a></li>
+            <li><a href="https://davidawindham.com/archive/" class="wikipedia" rel="me"><i class="icon-docs"></i>&nbsp; Archive</a></li>
+            <li><a href="https://davidawindham.com/til/" class="github" rel="me"></span><i class="icon-book"></i>&nbsp; TIL</a></li>
+            <li><a href="https://code.davidawindham.com/" class="github" rel="me"></span><i class="icon-file-code"></i>&nbsp; Code</a></li>
           </ul>
         </div>
       </div>
@@ -429,10 +536,10 @@
       <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"></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"></i>&nbsp; Wikipedia</a></li>
-            <li><a href="https://www.facebook.com/davidawindham" class="facebook"><i class="demo-icon icon-facebook"></i>&nbsp; Facebook</a></li>
-            <li><a href="https://twitter.com/windhamdavid" class="twitter" rel="me"><i class="demo-icon icon-twitter"></i>&nbsp; Twitter</a></li>
+            <li><a href="https://github.com/windhamdavid" class="github" rel="me"></span><i class="icon-github"></i>&nbsp; Github</a></li>
+            <li><a href="https://en.wikipedia.org/wiki/User:Windhamdavid" class="wikipedia" rel="me"><i class="icon-wikipedia-w"></i>&nbsp; Wikipedia</a></li>
+            <li><a href="https://www.facebook.com/davidawindham" class="facebook"><i class="icon-facebook"></i>&nbsp; Facebook</a></li>
+            <li><a href="https://twitter.com/windhamdavid" class="twitter" rel="me"><i class="icon-twitter"></i>&nbsp; Twitter</a></li>
           </ul>
         </div>
       </div>
@@ -441,7 +548,7 @@
     <div class="footer-end">
       <div class="row">
         <div class="col-md-6 text-center text-md-left">
-          &copy; 2020
+          &copy; 2004-2020
         </div>
       </div>
     </div>

js/_init.js

@@ -53,9 +53,9 @@ document.addEventListener('DOMContentLoaded', function() {
     plugins: [ 'dayGrid','timeGrid', 'googleCalendar' ],
     height: 'auto',
     header: {
-      left: '',
+      left: 'title',
       center: '',
-      right: 'title today,dayGridMonth,timeGridWeek prev,next '
+      right: 'today,dayGridMonth,timeGridWeek prev,next '
     },
     views: {
       dayGrid: {

package.json

@@ -23,6 +23,7 @@
     "gulp": "^4.0.2",
     "gulp-clean-css": "^4.3.0",
     "gulp-concat": "^2.6.1",
+    "gulp-htmlmin": "^5.0.1",
     "gulp-rename": "^2.0.0",
     "gulp-sass": "^4.0.2",
     "gulp-uglify": "^3.0.2",