Browse Source

build - note:need to remove unused icons and fix footer icons

windhamdavid 1 year ago
parent
commit
9ffe8779e9
10 changed files with 1146 additions and 384 deletions
  1. 0 0
      app/css/dw.css
  2. 117 176
      app/index.html
  3. 0 0
      app/index.min.html/index.html
  4. 0 0
      app/js/dw.js
  5. 17 30
      css/style.css
  6. 887 0
      css/styles.css
  7. 4 0
      css/styles.scss
  8. 1 1
      gulpfile.js
  9. 117 176
      index.html
  10. 3 1
      js/_init.js

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


+ 117 - 176
app/index.html

@@ -1,4 +1,9 @@
 <!DOCTYPE html>
+<!--
+	     .     . .              .       .  .
+	. . ...-..-| |-. .-. .-.-..-| .-.. ...-|
+	 ` ` '' '`-'-' '-`-`-' ' '`-'-`-`-` '`-'-
+-->
 <html lang="en" class="no-js default-scroll">
 <head>
 <meta charset="utf-8">
@@ -109,9 +114,8 @@
           <h3 class="mt-5">Welcome Good People of the Internet,</h3>
           <p class="lead">I'm glad you found me. 
             I, too, have a computer on a network, so here you are. 
-            No man is an island<sub>1</sub> even though this is an elevator pitch for one man show.
-            I published this site as a professional overview so I can opine away on my <a href="https://davidawindham.com/desk">personal site</a> and not look like a weirdo to potential clients.
- 
+            No man is an island<sub>1</sub> even though this is mostly a one-man show<sub>2</sub>.
+            I published this site as single-page professional overview so I can have fun with my <a href="https://davidawindham.com/desk">personal site</a> and avoid sending potential clients navigating down the 2,000-page rabbit hole<sub>3</sub>.
             <br><br>
             Right on,
           </p>
@@ -191,7 +195,7 @@
             <div class="modal-body">
                 <div id="zw-card" class="click panel"> 
                   <div class="front">
-                    <img onclick="flip()" src="img/card-back.png" alt="zeken woozer card front" />
+                    <img onclick="flip()" src="img/card-back.png" alt="zeken woozer card front">
                   </div> 
                   <div class="back">
                     <img onclick="flip()" src="img/card.png" alt="zeken woozer card back"> 
@@ -280,17 +284,11 @@
               <li>Backup Automation / Recovery</li>
               <li>Application Monitoring / Support</li>
               <li>Technical Support / Troubleshooting</li>
-              <li class="mt-2">I do <b><u>NOT</u></b> manage Social Media</li>
+              <li class="mt-2">I do <b><u>not</u></b> manage Social Media</li>
             </ul>
           </div>
         </div>
       </div>
-      <div class="row mt-5">
-        <div class="col-lg-9 offset-lg-1">
-          <p><b><u>Note</u></b>: According to my better half and parents, I'm particularly good at being critical ( ... perhaps it's from the years at art school ). I'm a good candidate to contact if you want some unbiased third-party feedback on your product, branding, design, website, or software. I'd be my pleasure to write up a detailed critique that'll give your team some actionable feedback.</p>
-        </div>
-        
-      </div>
     </div>
   </section>
 
@@ -315,13 +313,7 @@
           <p>I can remotely access and manage your computers and devices.</p>
           <h4 class="when mt-4">Availability</h4>
           <p>I'm available to my clients anytime and I'm always open to taking on new clients.</p>
-          <p>New projects are booked until May 2023.</p>
-          <a id="opendate" class="btn btn-outline-dark btn-sm">
-            <i class="bi bi-exclamation-triangle"></i> &nbsp;23/05/01 
-          </a>
-          <a href="#dw-footer"class="btn btn-outline-dark btn-sm">
-            Meeting Request
-          </a>
+          <p>New projects are booked until <a role="button" id="opendate"> May 2023 &nbsp;<i class="bi bi-exclamation-triangle"></i></a></p>
         </div>
         <div class="col-lg-6">
           <div id='calendar'></div>
@@ -470,191 +462,139 @@
       <div class="row services-title">
         <div class="col-lg-5 offset-md-1">
           <h2 class="how">&amp; How</h2>
-          <h3 class="how mb-5">Can I Help?</h3>
+          <h3 class="how mb-4">Can I Help?</h3>
           <p class="lead"></p>
         </div>
       </div>
 
       <div class="row">
-        <div class="col-lg-5 offset-md-1">
+        <div class="col-lg-4 offset-md-1">
           <ul class="nav nav-tabs" id="services" role="tablist">
-            <div class="service">
-              <a class="nav-link" data-bs-toggle="tab" data-bs-target="#create-tab" type="button" role="tab" aria-controls="create-tab" aria-selected="true">
+            <li class="nav-item service">
+              <a href="#create-tab" class="nav-link" data-bs-toggle="tab" data-bs-target="#create-tab" role="tab" aria-controls="create-tab" aria-selected="true">
                 <i class="pulse"><span></span></i>
-                <div class="numbering">01</div>
-                <h4 class="how">Create, Build, &amp; Host</h4>
-                <p>a new site or application.</p>
+                <span class="numbering">01</span>
+                <h4 class="how">Design, Create, &amp; Build</h4>
+                <p class="small">a new site or application.</p>
               </a>
-            </div>
-            <div class="service">
-              <a class="nav-link" data-bs-toggle="tab" data-bs-target="#audit-tab" type="button" role="tab" aria-controls="audit-tab" aria-selected="false">
+            </li>
+            <li class="nav-item service">
+              <a href="#service-tab" class="nav-link" data-bs-toggle="tab" data-bs-target="#service-tab" role="tab" aria-controls="#service-tab" aria-selected="false">
                 <i class="pulse"><span></span></i>
-                <div class="numbering">02</div>
-                <h4 class="how">Audit, Improve, &amp; Repair</h4>
-                <p>an existing site or application.</p>
+                <span class="numbering">02</span>
+                <h4 class="how">Service, Repair, &amp; Improve</h4>
+                <p class="small">an existing site or application.</p>
               </a>
-            </div>
-            <div class="service">
-              <a class="nav-link" data-bs-toggle="tab" data-bs-target="#consult-tab" type="button" role="tab" aria-controls="consult-tab" aria-selected="false">
+            </li>
+            <li class="nav-item service">
+              <a href="#audit-tab" class="nav-link" data-bs-toggle="tab" data-bs-target="#audit-tab" role="tab" aria-controls="audit-tab" aria-selected="false">
                 <i class="pulse"><span></span></i>
-                <div class="numbering">03</div>
-                <h4 class="how">Advise, Consult, &amp; Review</h4>
-                <p>on site and application best practices.</p>
+                <span class="numbering">03</span>
+                <h4 class="how">Audit, Advise, &amp; Consult</h4>
+                <p class="small">on best practices.</p>
               </a>
-            </div>
-            <div class="service">
-              <a class="nav-link" data-bs-toggle="tab" data-bs-target="#manage-tab" type="button" role="tab" aria-controls="manage-tab" aria-selected="false">
+            </li>
+            <li class="nav-item service">
+              <a href="#manage-tab" class="nav-link" data-bs-toggle="tab" data-bs-target="#manage-tab" role="tab" aria-controls="manage-tab" aria-selected="false">
                 <i class="pulse"><span></span></i>
-                <div class="numbering">04</div>
-                <h4 class="how">Manage</h4>
-                <p>on site and application best practices.</p>
+                <span class="numbering">04</span>
+                <h4 class="how">Manage, Monitor, &amp; Host</h4>
+                <p class="small">sites, applications, and campaigns.</p>
               </a>
-            </div>
+            </li>
           </ul>
         </div>
-        <div class="col-lg-5">
-          <div class="row step">
-            <div class="tab-content">
-              <div id="create-tab" class="tab-pane fade show active" role="tabpanel" aria-labelledby="create-tab" tabindex="0">
-                <h4 class="how">Tailored</h4>
-                <p>
-                  I tailor my approach to the unique requirements of each project
-                  in an effort create sustainable and practical applications that work for you.             
-                </p>
-              </div>
-              <div id="audit-tab" class="tab-pane fade" role="tabpanel" aria-labelledby="audit-tab" tabindex="1">
-                <h4 class="how">Audit</h4>
-                <p>Audit</p>
-              </div>
-              <div id="consult-tab" class="tab-pane fade" role="tabpanel" aria-labelledby="consult-tab" tabindex="2">
-                <h4 class="how">Consult</h4>
-                <p>Consult</p>
-              </div>
-              <div id="manage-tab" class="tab-pane fade" role="tabpanel" aria-labelledby="manage-tab" tabindex="3">
-                <h4 class="how">Manage</h4>
-                <p>Manage</p>
-              </div>
+        <div class="col-lg-6 mt-n4">
+          <div class="tab-content">
+            <div id="create-tab" class="tab-pane fade show active" role="tabpanel" aria-labelledby="create-tab" tabindex="0">
+              <h4 class="how fw-bold">Tailored</h4>
+              <p>Even though I mostly work for small clients, I provide them enterprise IT strategies. I tailor my work to the unique requirements of each project in an effort create sustainable and practical applications and designs that work for you. I focus on my core competencies and will recommend other providers when the scope of your project falls outside of them. I write a proposal and prior to starting your project and will provide you all of the source code and vector assets. I'll work alongside of your team and train staff as needed. And I will not try to reinvent the wheel to avoid recommending viable third-party services.</p>        
+            </div>
+            <div id="service-tab" class="tab-pane fade" role="tabpanel" aria-labelledby="service-tab" tabindex="1">
+              <h4 class="how fw-bold">Timely</h4>
+              <p>I've learned to take service request with a timeline of 'yesterday' and I always prioritize my existing client needs over new projects. Service is the key to keeping good clients. I'm a stickler for quality and operability. I've likely already built or worked with similar products, so I'm relatively quick and I'll work to find a remedy after a diagnosis is made.</p>
+            </div>
+            <div id="audit-tab" class="tab-pane fade" role="tabpanel" aria-labelledby="audit-tab" tabindex="2">
+              <h4 class="how fw-bold">Careful</h4>
+              <p>I will carefully review and critique your existing software, applications,  sites and workflow to write up an unbiased detailed report that'll give your team some actionable feedback. I'll provide references and suggestions and I'll either propose a solution or refer elsewhere for assistance.</p>
+            </div>
+            <div id="manage-tab" class="tab-pane fade" role="tabpanel" aria-labelledby="manage-tab" tabindex="3">
+              <h4 class="how fw-bold">Reliable</h4>
+              <p>I provide several basic levels of monthly support based on the scale and maintenance needs of your project. I spend about a quarter of my time managing existing sites and applications. 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. I'll keep your computers, sites, and applications up to speed. I'll set up a monthly service agreement with expectations and I'll provide monthly reporting on campaigns.</p>
             </div>
-            <h5>Have a project in mind?</h5>
-            <a class="btn btn-outline-dark mt-1" data-bs-toggle="collapse" data-bs-target="#pricing" aria-expanded="true" aria-controls="collapseOne">
-              Pricing &amp; Cost
-            </a>
           </div>
         </div>
       </div>
 
-      <!-- Pricing Modal -->
-      <div id="pricing" class="container accordion-collapse collapse">
-        <div class="col-lg-10 offset-md-1">
-          
-          <h3>Pricing &amp; Costs</h3>
-          <div class="row">
-            <div class="col-md-12">
-              <div class="row">
-                <div class="col-md-6">
-                <h6 class="fw-bold mt-2">Approach:</h6>
-                <p class="mt-1">
-                  I focus on my core competencies and will recommend 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 maintenance needs of your project.
-                </p>
-                </div>
-                <div class="col-md-6">
-                <h6 class="fw-bold mt-2">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>
-                </div>
+      <div class="row py-5 bg-dw-bright bg-opacity-10">
+        <div class="col-lg-10 offset-lg-1">      
+          <div class="row">            
+            <div class="col-lg-5">
+              <h6 class="fw-bold ">Vendors</h6>
+              <p class="mb-n2">I keep accounts with these seven vendors and between them, I can purchase and accomplish almost anything. In most cases, I prefer to cut myself out of the middle and register it to your company.</p>
+              <div class="btn-group btn-group-toggle" data-toggle="buttons">
+                <a href="https://www.apple.com/business/" target="_blank" rel="noopener">
+                  <img class="vendor-image" alt="Google Cloud" src="img/vendor-apple.svg">
+                </a>
+                <a href="https://azure.microsoft.com/" target="_blank" rel="noopener">
+                  <img class="vendor-image" alt="Microsoft Azure" src="img/vendor-microsoft.svg">
+                </a>
+                <a href="https://cloud.google.com" target="_blank" rel="noopener">
+                  <img class="vendor-image" alt="Google Cloud" src="img/vendor-google.svg">
+                </a>
               </div>
-
-              <h6 class="fw-bold mt-2">Rates:</h6>
-              <div class="row">
-                <div class="col-md-4">
-                  <h6>Hourly: $50</h6>
+              <div class="mt-n5 btn-group btn-group-toggle" data-toggle="buttons">
+                <a href="https://aws.amazon.com" target="_blank" rel="noopener">
+                  <img class="vendor-image" alt="Amazon Web Services" src="img/vendor-amazon.svg">
+                </a>
+                <a href="https://vercel.com" target="_blank" rel="noopener">
+                  <img class="vendor-image" alt="Linode" src="img/vendor-vercel.svg">
+                </a>
+                <a href="https://linode.com" target="_blank" rel="noopener">
+                  <img class="vendor-image" alt="Linode" src="img/vendor-linode.svg">
+                </a>
+                <a href="https://www.akamai.com/" target="_blank" rel="noopener">
+                  <img class="vendor-image" alt="Google Cloud" src="img/vendor-akamai.svg">
+                </a>
+              </div>
+            </div>
+            <div class="col-lg-7 ps-5">
+              <h6 class="fw-bold mt-2">Rates</h6>
+              <p>I try to be very fair in my billing. I bill the same rate for all work and  I'll log 15 minutes on an invoice. At a rate of $50/hr x 40/wk x 50 wks/yr = $100,000. To hit that goal, I try to stay productive.</p>
+              <div class="row pt-3">
+                <div class="col-lg-4">
+                  <h6>Hourly: <b>$50</b></h6>
                   <ul class="pricing">
-                    <li>Design</li>
-                    <li>Development</li>
-                    <li>Consulting</li>
-                    <li>Auditing</li>
+                    <li>Design / Develop</li>
+                    <li>Service / Repair</li>
+                    <li>Audit / Consult</li>
+                    <li>Configure / Train</li>
+                    <li></li>
                   </ul>
                 </div>
-                <div class="col-md-4">
-                  <h6>Monthly: $25 - $75</h6>
+                <div class="col-lg-4">
+                  <h6>Monthly: <b>$25-75</b></h6>
                   <ul class="pricing">
-                    <li>Support</li>
-                    <li>Managed Hosting</li>
-                    <li>Regular Maintence</li>
-                    <li>Regular Upgrades</li>
+                    <li>Management</li>
+                    <li>Maintenance</li>
+                    <li>Monitor / Report</li>
+                    <li>Campaigns</li>
                   </ul>
                 </div>
-                <div class="col-md-4">
-                  <h6>Add-ons:( vendor pricing + 10% )</h6>
+                <div class="col-lg-4">
+                  <h6>Vendor: + <b>10%</b></h6>
                   <ul class="pricing">
-                    <li>Apple Business Manager</li>
-                    <li>Google Workspace</li>
-                    <li>Microsoft Office 365</li>
-                    <li>SaaS Integration</li>
-                    <li>API Integration</li>
+                    <li>Workspace / 365</li>
+                    <li>CRM / IMS / ERP</li>
+                    <li>WAF / DBaaS / Storage</li>
+                    <li>SaaS / APIs / ML</li>
                   </ul>
                 </div>
               </div>
-              <h6 class="fw-bold mt-4">Vendors:</h6>
-              <div class="row">
-                <div class="col-md-12">
-                  <p class="mt-1">
-                    I use one of these 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 class="btn-group btn-group-toggle" data-toggle="buttons">
-                    <label class="btn btn-light">
-                      <a href="https://www.apple.com/business/" target="_blank" rel="noopener">
-                        <img class="vendor-image" alt="Google Cloud" src="img/vendor-apple.svg">
-                      </a>
-                    </label>
-                    <label class="btn btn-light">
-                      <a href="https://azure.microsoft.com/" target="_blank" rel="noopener">
-                        <img class="vendor-image" alt="Microsoft Azure" src="img/vendor-microsoft.svg">
-                      </a>
-                    </label>
-                    <label class="btn btn-light">
-                      <a href="https://cloud.google.com" target="_blank" rel="noopener">
-                        <img class="vendor-image" alt="Google Cloud" src="img/vendor-google.svg">
-                      </a>
-                    </label>
-                    <label class="btn btn-light">
-                      <a href="https://aws.amazon.com" target="_blank" rel="noopener">
-                        <img class="vendor-image" alt="Amazon Web Services" src="img/vendor-amazon.svg">
-                      </a>
-                    </label>
-                    <label class="btn btn-light">
-                      <a href="https://www.akamai.com/" target="_blank" rel="noopener">
-                        <img class="vendor-image" alt="Google Cloud" src="img/vendor-akamai.svg">
-                      </a>
-                    </label>
-                    <label class="btn btn-light">
-                      <a href="https://linode.com" target="_blank" rel="noopener">
-                        <img class="vendor-image" alt="Linode" src="img/vendor-linode.svg">
-                      </a>
-                    </label>
-                    <label class="btn btn-light">
-                      <a href="https://vercel.com" target="_blank" rel="noopener">
-                        <img class="vendor-image" alt="Linode" src="img/vendor-vercel.svg">
-                      </a>
-                    </label>
-
-
-                  </div>
-                </div>
-              </div>
-
             </div>
           </div>
         </div>
       </div>
-      <!-- END:Pricing Modal -->
 
     </div>
   </section>
@@ -691,8 +631,8 @@
       <div class="col-lg-2 col-xxs-4 mt-5">
         <div class="br-widget">
           <ul class="footer-links text-lg-end">
-            <li><a href="https://davidawindham.com/cv/" rel="me">CV &nbsp;<i class="bi bi-file-pdf"></i></a></li>
-            <li><a href="https://code.davidawindham.com/" rel="me">Code &nbsp;<i class="bi bi-file-code"></i></a></li>
+            <li><a href="https://davidawindham.com/contract/" rel="me">Contract &nbsp;<i class="bi bi-pencil-square"></i></a></li>
+            <li><a href="https://code.davidawindham.com/david/dw" rel="me">Code &nbsp;<i class="bi bi-file-code"></i></a></li>
             <li><a href="https://davidwindham.com/davidwindham.asc" rel="me">Key &nbsp;<i class="bi bi-file-earmark-lock"></i></a></li>
           </ul>
         </div>
@@ -703,21 +643,22 @@
       <div class="col-lg-4 offset-lg-8 mt-5 fw-light small">
         References:
         <ol>
-          <li><a href="https://en.wikipedia.org/wiki/Devotions_upon_Emergent_Occasions">Donne, John. 1624. <i>Devotions upon Emergent Occasions</i></a></li>
-          <li><a href="https://en.wikipedia.org/wiki/Corporate_personhood">Wikipedia. 2022. Corporate Personhood</a></li>
+          <li><a target="_blank" href="https://en.wikipedia.org/wiki/Devotions_upon_Emergent_Occasions">Donne, John. 1624. <i>Devotions upon Emergent Occasions</i></a></li>
+          <li><a target="_blank" href="https://en.wikipedia.org/wiki/Corporate_personhood">Wikipedia. 2022. Corporate Personhood</a></li>
+          <li><a target="_blank" href="https://www.merriam-webster.com/dictionary/rabbit%20hole">Merriam Webster. 2022. rabbit hole n.</a></li>
         </ol>
       </div>
     </div>
-
+  </div>
   <div class="footer-end">
     <div class="container">
       <div class="row">
         <div class="col-md-6 text-md-left">
-          &copy; 2004-2023<br>
+          &copy; 2004-2022<br>
           <small>Updated: 11/28/22</small>
         </div>
         <div class="col-md-6 text-end">
-          The web was inherently social long before the<br> media part, so please feel free to test it out.
+          <p class="gaegu mb-n1">I'm not active on most of these:</p>
           <ul class="footer-links footer-social list-inline">  
             <li class="list-inline-item"><i class="bi bi-arrow-90deg-up"></i>  </li>
             <li class="list-inline-item"><a href="https://en.wikipedia.org/wiki/User:Windhamdavid" class="wikipedia" rel="me"><i class="icon-wikipedia-w"></i></a></li>
@@ -726,7 +667,7 @@
             <li class="list-inline-item"><a href="https://stackexchange.com/users/521983/david-windham" class="stackoverflow"><i class="bi bi-stack-overflow"></i></a></li>
             <li class="list-inline-item"><a href="https://www.facebook.com/windhamdavid" class="facebook"><i class="bi bi-facebook"></i></a></li>
             <li class="list-inline-item"><a href="https://www.reddit.com/windhamdavid" class="reddit"><i class="bi bi-reddit"></i></a></li>   
-            <li class="list-inline-item"><a href="https://twitter.com/windhamdavid" class="spotify" rel="me"><i class="bi bi-spotify"></i></a></li>
+            <li class="list-inline-item"><a href="https://open.spotify.com/user/windhamdavid" class="spotify" rel="me"><i class="bi bi-spotify"></i></a></li>
             <li class="list-inline-item"><a href="https://www.linkedin.com/in/windhamdavid" class="linkedin" rel="me"><i class="bi bi-linkedin"></i></a></li>
           </ul>
         </div>
@@ -752,6 +693,6 @@
   })();
 </script>
 <noscript><p><img src="https://davidawindham.com/wik/matomo.php?idsite=5&amp;rec=1" style="border:0;" alt="" /></p></noscript>
---> 
+-->
 </body>
 </html>

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


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


+ 17 - 30
css/style.css

@@ -239,6 +239,7 @@ h4.when {
 
 h4.how {
   color: #535763 !important;
+  font-size: 1.2em;
 }
 
 h5.how {
@@ -259,6 +260,14 @@ ul.clients {
 ul.client li {
   padding-left:3px;
 }
+ul.pricing {
+  margin-left: 0px;
+  padding: 0 0 0 0;
+  list-style: none;
+}
+ul.work {
+  list-style-type: square;
+}
 .numbering {
   display: inline-block;
   margin-right: .5rem;
@@ -534,7 +543,10 @@ ul.client li {
 [bg=dark-bg] .hamburger-inner:after {
   background-color: #e3e3e3 !important;
 }
-
+[bg=dark-bg] .zw-logo svg path {
+  fill:#b0b0b0;
+  stroke:transparent;
+}
 
 /*########################################
 ################# NAVI ###################
@@ -756,10 +768,6 @@ ul.client li {
   fill:#535763;
   stroke:transparent;
 }
-[bg=dark-bg] .zw-logo svg path {
-  fill:#b0b0b0;
-  stroke:transparent;
-}
 .zw-logo svg path {
   stroke:transparent;
 }
@@ -848,8 +856,6 @@ ul.client li {
   -webkit-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
 }
 
-
-
 .services,
 .approach {
   padding-bottom: 10rem;
@@ -867,8 +873,8 @@ ul.client li {
 
 .services .service,
 .approach .service {
-  padding-left: 4rem;
-  padding-bottom: 1rem;
+  padding-left: 3rem;
+  padding-bottom: .5rem;
   border-radius: 4px;
   position: relative;
   transition: all 0.2s ease;
@@ -968,11 +974,6 @@ ul.client li {
   vertical-align: super;
 }
 
-ul.pricing {
-  margin-left: 0px;
-  padding: 0 0 0 25px;
-}
-
 .vendor-image {
   filter: grayscale(1);
   width: 100%;
@@ -1028,15 +1029,6 @@ blockquote {
   color: #9c9ea5;
 }
 
-.testimonials-section h1,
-.testimonials-section h2,
-.testimonials-section h4,
-.testimonials-section h5,
-.testimonials-section h6,
-.testimonials-section a {
-  color: #e3e3e3 !important;
-}
-
 .testimonials-section blockquote {
   color: #e3e3e3;
   font-size: 1.3em;
@@ -1255,7 +1247,7 @@ blockquote {
 }
 
 #dw-footer {
-  margin: 0;
+  margin: 6rem 0 0;
   padding: 4rem 0 4rem;
 }
 
@@ -1302,11 +1294,6 @@ blockquote {
   fill: #25c2a0;
 }
 
-#dw-footer {
-  margin: 0;
-  padding: 4rem 0 4rem;
-}
-
 #dw-footer .br-widget {
   margin: 4rem 0 0;
   padding: 0 0 0;
@@ -1369,7 +1356,7 @@ blockquote {
 }
 
 #dw-footer .footer-end .footer-social .list-inline-item:not(:last-child) {
-  margin-right: 0.1rem
+  margin-right: 2px
 }
 
 #dw-footer .footer-social a.twitter:hover {

+ 887 - 0
css/styles.css

@@ -39,9 +39,13 @@ git - https://github.com/windhamdavid/dw
   --bs-dark: #535763;
   --bs-dw-blue-dark: #484C57;
   --bs-dw-blue: #535763;
+  --bs-dw-light: #e2e2e2;
+  --bs-dw-bright: #e3e3e3;
   --bs-dark-rgb: 83, 87, 99;
   --bs-dw-blue-dark-rgb: 72, 76, 87;
   --bs-dw-blue-rgb: 83, 87, 99;
+  --bs-dw-light-rgb: 226, 226, 226;
+  --bs-dw-bright-rgb: 227, 227, 227;
   --bs-white-rgb: 255, 255, 255;
   --bs-black-rgb: 0, 0, 0;
   --bs-body-color-rgb: 35, 35, 35;
@@ -2849,6 +2853,40 @@ textarea.form-control-lg {
   --bs-btn-disabled-border-color: #535763;
 }
 
+.btn-dw-light {
+  --bs-btn-color: #000;
+  --bs-btn-bg: #e2e2e2;
+  --bs-btn-border-color: #e2e2e2;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #e6e6e6;
+  --bs-btn-hover-border-color: #e5e5e5;
+  --bs-btn-focus-shadow-rgb: 192, 192, 192;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #e8e8e8;
+  --bs-btn-active-border-color: #e5e5e5;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-bg: #e2e2e2;
+  --bs-btn-disabled-border-color: #e2e2e2;
+}
+
+.btn-dw-bright {
+  --bs-btn-color: #000;
+  --bs-btn-bg: #e3e3e3;
+  --bs-btn-border-color: #e3e3e3;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #e7e7e7;
+  --bs-btn-hover-border-color: #e6e6e6;
+  --bs-btn-focus-shadow-rgb: 193, 193, 193;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #e9e9e9;
+  --bs-btn-active-border-color: #e6e6e6;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-bg: #e3e3e3;
+  --bs-btn-disabled-border-color: #e3e3e3;
+}
+
 .btn-outline-dark {
   --bs-btn-color: #535763;
   --bs-btn-border-color: #535763;
@@ -2900,6 +2938,40 @@ textarea.form-control-lg {
   --bs-gradient: none;
 }
 
+.btn-outline-dw-light {
+  --bs-btn-color: #e2e2e2;
+  --bs-btn-border-color: #e2e2e2;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #e2e2e2;
+  --bs-btn-hover-border-color: #e2e2e2;
+  --bs-btn-focus-shadow-rgb: 226, 226, 226;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #e2e2e2;
+  --bs-btn-active-border-color: #e2e2e2;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #e2e2e2;
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: #e2e2e2;
+  --bs-gradient: none;
+}
+
+.btn-outline-dw-bright {
+  --bs-btn-color: #e3e3e3;
+  --bs-btn-border-color: #e3e3e3;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #e3e3e3;
+  --bs-btn-hover-border-color: #e3e3e3;
+  --bs-btn-focus-shadow-rgb: 227, 227, 227;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #e3e3e3;
+  --bs-btn-active-border-color: #e3e3e3;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #e3e3e3;
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: #e3e3e3;
+  --bs-gradient: none;
+}
+
 .btn-link {
   --bs-btn-font-weight: 400;
   --bs-btn-color: var(--bs-link-color);
@@ -4467,6 +4539,24 @@ textarea.form-control-lg {
   color: #282a2f;
 }
 
+.alert-dw-light {
+  --bs-alert-color: #5a5a5a;
+  --bs-alert-bg: #f9f9f9;
+  --bs-alert-border-color: #f6f6f6;
+}
+.alert-dw-light .alert-link {
+  color: #484848;
+}
+
+.alert-dw-bright {
+  --bs-alert-color: #5b5b5b;
+  --bs-alert-bg: #f9f9f9;
+  --bs-alert-border-color: #f7f7f7;
+}
+.alert-dw-bright .alert-link {
+  color: #494949;
+}
+
 @keyframes progress-bar-stripes {
   0% {
     background-position-x: 1rem;
@@ -4801,6 +4891,34 @@ textarea.form-control-lg {
   border-color: #32343b;
 }
 
+.list-group-item-dw-light {
+  color: #5a5a5a;
+  background-color: #f9f9f9;
+}
+.list-group-item-dw-light.list-group-item-action:hover, .list-group-item-dw-light.list-group-item-action:focus {
+  color: #5a5a5a;
+  background-color: #e0e0e0;
+}
+.list-group-item-dw-light.list-group-item-action.active {
+  color: #fff;
+  background-color: #5a5a5a;
+  border-color: #5a5a5a;
+}
+
+.list-group-item-dw-bright {
+  color: #5b5b5b;
+  background-color: #f9f9f9;
+}
+.list-group-item-dw-bright.list-group-item-action:hover, .list-group-item-dw-bright.list-group-item-action:focus {
+  color: #5b5b5b;
+  background-color: #e0e0e0;
+}
+.list-group-item-dw-bright.list-group-item-action.active {
+  color: #fff;
+  background-color: #5b5b5b;
+  border-color: #5b5b5b;
+}
+
 .btn-close {
   box-sizing: content-box;
   width: 1em;
@@ -6332,6 +6450,16 @@ textarea.form-control-lg {
   background-color: RGBA(83, 87, 99, var(--bs-bg-opacity, 1)) !important;
 }
 
+.text-bg-dw-light {
+  color: #000 !important;
+  background-color: RGBA(226, 226, 226, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-dw-bright {
+  color: #000 !important;
+  background-color: RGBA(227, 227, 227, var(--bs-bg-opacity, 1)) !important;
+}
+
 .link-dark {
   color: #535763 !important;
 }
@@ -6353,6 +6481,20 @@ textarea.form-control-lg {
   color: #42464f !important;
 }
 
+.link-dw-light {
+  color: #e2e2e2 !important;
+}
+.link-dw-light:hover, .link-dw-light:focus {
+  color: #e8e8e8 !important;
+}
+
+.link-dw-bright {
+  color: #e3e3e3 !important;
+}
+.link-dw-bright:hover, .link-dw-bright:focus {
+  color: #e9e9e9 !important;
+}
+
 .ratio {
   position: relative;
   width: 100%;
@@ -7305,6 +7447,156 @@ textarea.form-control-lg {
   margin-left: auto !important;
 }
 
+.m-n1 {
+  margin: -0.25rem !important;
+}
+
+.m-n2 {
+  margin: -0.5rem !important;
+}
+
+.m-n3 {
+  margin: -1rem !important;
+}
+
+.m-n4 {
+  margin: -1.5rem !important;
+}
+
+.m-n5 {
+  margin: -3rem !important;
+}
+
+.mx-n1 {
+  margin-right: -0.25rem !important;
+  margin-left: -0.25rem !important;
+}
+
+.mx-n2 {
+  margin-right: -0.5rem !important;
+  margin-left: -0.5rem !important;
+}
+
+.mx-n3 {
+  margin-right: -1rem !important;
+  margin-left: -1rem !important;
+}
+
+.mx-n4 {
+  margin-right: -1.5rem !important;
+  margin-left: -1.5rem !important;
+}
+
+.mx-n5 {
+  margin-right: -3rem !important;
+  margin-left: -3rem !important;
+}
+
+.my-n1 {
+  margin-top: -0.25rem !important;
+  margin-bottom: -0.25rem !important;
+}
+
+.my-n2 {
+  margin-top: -0.5rem !important;
+  margin-bottom: -0.5rem !important;
+}
+
+.my-n3 {
+  margin-top: -1rem !important;
+  margin-bottom: -1rem !important;
+}
+
+.my-n4 {
+  margin-top: -1.5rem !important;
+  margin-bottom: -1.5rem !important;
+}
+
+.my-n5 {
+  margin-top: -3rem !important;
+  margin-bottom: -3rem !important;
+}
+
+.mt-n1 {
+  margin-top: -0.25rem !important;
+}
+
+.mt-n2 {
+  margin-top: -0.5rem !important;
+}
+
+.mt-n3 {
+  margin-top: -1rem !important;
+}
+
+.mt-n4 {
+  margin-top: -1.5rem !important;
+}
+
+.mt-n5 {
+  margin-top: -3rem !important;
+}
+
+.me-n1 {
+  margin-right: -0.25rem !important;
+}
+
+.me-n2 {
+  margin-right: -0.5rem !important;
+}
+
+.me-n3 {
+  margin-right: -1rem !important;
+}
+
+.me-n4 {
+  margin-right: -1.5rem !important;
+}
+
+.me-n5 {
+  margin-right: -3rem !important;
+}
+
+.mb-n1 {
+  margin-bottom: -0.25rem !important;
+}
+
+.mb-n2 {
+  margin-bottom: -0.5rem !important;
+}
+
+.mb-n3 {
+  margin-bottom: -1rem !important;
+}
+
+.mb-n4 {
+  margin-bottom: -1.5rem !important;
+}
+
+.mb-n5 {
+  margin-bottom: -3rem !important;
+}
+
+.ms-n1 {
+  margin-left: -0.25rem !important;
+}
+
+.ms-n2 {
+  margin-left: -0.5rem !important;
+}
+
+.ms-n3 {
+  margin-left: -1rem !important;
+}
+
+.ms-n4 {
+  margin-left: -1.5rem !important;
+}
+
+.ms-n5 {
+  margin-left: -3rem !important;
+}
+
 .p-0 {
   padding: 0 !important;
 }
@@ -7686,6 +7978,16 @@ textarea.form-control-lg {
   color: rgba(var(--bs-dw-blue-rgb), var(--bs-text-opacity)) !important;
 }
 
+.text-dw-light {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-dw-light-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-dw-bright {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-dw-bright-rgb), var(--bs-text-opacity)) !important;
+}
+
 .text-muted {
   --bs-text-opacity: 1;
   color: #6c757d !important;
@@ -7772,6 +8074,16 @@ textarea.form-control-lg {
   background-color: rgba(var(--bs-dw-blue-rgb), var(--bs-bg-opacity)) !important;
 }
 
+.bg-dw-light {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-dw-light-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-dw-bright {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-dw-bright-rgb), var(--bs-bg-opacity)) !important;
+}
+
 .bg-transparent {
   --bs-bg-opacity: 1;
   background-color: transparent !important;
@@ -8215,6 +8527,121 @@ textarea.form-control-lg {
   .ms-sm-auto {
     margin-left: auto !important;
   }
+  .m-sm-n1 {
+    margin: -0.25rem !important;
+  }
+  .m-sm-n2 {
+    margin: -0.5rem !important;
+  }
+  .m-sm-n3 {
+    margin: -1rem !important;
+  }
+  .m-sm-n4 {
+    margin: -1.5rem !important;
+  }
+  .m-sm-n5 {
+    margin: -3rem !important;
+  }
+  .mx-sm-n1 {
+    margin-right: -0.25rem !important;
+    margin-left: -0.25rem !important;
+  }
+  .mx-sm-n2 {
+    margin-right: -0.5rem !important;
+    margin-left: -0.5rem !important;
+  }
+  .mx-sm-n3 {
+    margin-right: -1rem !important;
+    margin-left: -1rem !important;
+  }
+  .mx-sm-n4 {
+    margin-right: -1.5rem !important;
+    margin-left: -1.5rem !important;
+  }
+  .mx-sm-n5 {
+    margin-right: -3rem !important;
+    margin-left: -3rem !important;
+  }
+  .my-sm-n1 {
+    margin-top: -0.25rem !important;
+    margin-bottom: -0.25rem !important;
+  }
+  .my-sm-n2 {
+    margin-top: -0.5rem !important;
+    margin-bottom: -0.5rem !important;
+  }
+  .my-sm-n3 {
+    margin-top: -1rem !important;
+    margin-bottom: -1rem !important;
+  }
+  .my-sm-n4 {
+    margin-top: -1.5rem !important;
+    margin-bottom: -1.5rem !important;
+  }
+  .my-sm-n5 {
+    margin-top: -3rem !important;
+    margin-bottom: -3rem !important;
+  }
+  .mt-sm-n1 {
+    margin-top: -0.25rem !important;
+  }
+  .mt-sm-n2 {
+    margin-top: -0.5rem !important;
+  }
+  .mt-sm-n3 {
+    margin-top: -1rem !important;
+  }
+  .mt-sm-n4 {
+    margin-top: -1.5rem !important;
+  }
+  .mt-sm-n5 {
+    margin-top: -3rem !important;
+  }
+  .me-sm-n1 {
+    margin-right: -0.25rem !important;
+  }
+  .me-sm-n2 {
+    margin-right: -0.5rem !important;
+  }
+  .me-sm-n3 {
+    margin-right: -1rem !important;
+  }
+  .me-sm-n4 {
+    margin-right: -1.5rem !important;
+  }
+  .me-sm-n5 {
+    margin-right: -3rem !important;
+  }
+  .mb-sm-n1 {
+    margin-bottom: -0.25rem !important;
+  }
+  .mb-sm-n2 {
+    margin-bottom: -0.5rem !important;
+  }
+  .mb-sm-n3 {
+    margin-bottom: -1rem !important;
+  }
+  .mb-sm-n4 {
+    margin-bottom: -1.5rem !important;
+  }
+  .mb-sm-n5 {
+    margin-bottom: -3rem !important;
+  }
+  .ms-sm-n1 {
+    margin-left: -0.25rem !important;
+  }
+  .ms-sm-n2 {
+    margin-left: -0.5rem !important;
+  }
+  .ms-sm-n3 {
+    margin-left: -1rem !important;
+  }
+  .ms-sm-n4 {
+    margin-left: -1.5rem !important;
+  }
+  .ms-sm-n5 {
+    margin-left: -3rem !important;
+  }
   .p-sm-0 {
     padding: 0 !important;
   }
@@ -8711,6 +9138,121 @@ textarea.form-control-lg {
   .ms-md-auto {
     margin-left: auto !important;
   }
+  .m-md-n1 {
+    margin: -0.25rem !important;
+  }
+  .m-md-n2 {
+    margin: -0.5rem !important;
+  }
+  .m-md-n3 {
+    margin: -1rem !important;
+  }
+  .m-md-n4 {
+    margin: -1.5rem !important;
+  }
+  .m-md-n5 {
+    margin: -3rem !important;
+  }
+  .mx-md-n1 {
+    margin-right: -0.25rem !important;
+    margin-left: -0.25rem !important;
+  }
+  .mx-md-n2 {
+    margin-right: -0.5rem !important;
+    margin-left: -0.5rem !important;
+  }
+  .mx-md-n3 {
+    margin-right: -1rem !important;
+    margin-left: -1rem !important;
+  }
+  .mx-md-n4 {
+    margin-right: -1.5rem !important;
+    margin-left: -1.5rem !important;
+  }
+  .mx-md-n5 {
+    margin-right: -3rem !important;
+    margin-left: -3rem !important;
+  }
+  .my-md-n1 {
+    margin-top: -0.25rem !important;
+    margin-bottom: -0.25rem !important;
+  }
+  .my-md-n2 {
+    margin-top: -0.5rem !important;
+    margin-bottom: -0.5rem !important;
+  }
+  .my-md-n3 {
+    margin-top: -1rem !important;
+    margin-bottom: -1rem !important;
+  }
+  .my-md-n4 {
+    margin-top: -1.5rem !important;
+    margin-bottom: -1.5rem !important;
+  }
+  .my-md-n5 {
+    margin-top: -3rem !important;
+    margin-bottom: -3rem !important;
+  }
+  .mt-md-n1 {
+    margin-top: -0.25rem !important;
+  }
+  .mt-md-n2 {
+    margin-top: -0.5rem !important;
+  }
+  .mt-md-n3 {
+    margin-top: -1rem !important;
+  }
+  .mt-md-n4 {
+    margin-top: -1.5rem !important;
+  }
+  .mt-md-n5 {
+    margin-top: -3rem !important;
+  }
+  .me-md-n1 {
+    margin-right: -0.25rem !important;
+  }
+  .me-md-n2 {
+    margin-right: -0.5rem !important;
+  }
+  .me-md-n3 {
+    margin-right: -1rem !important;
+  }
+  .me-md-n4 {
+    margin-right: -1.5rem !important;
+  }
+  .me-md-n5 {
+    margin-right: -3rem !important;
+  }
+  .mb-md-n1 {
+    margin-bottom: -0.25rem !important;
+  }
+  .mb-md-n2 {
+    margin-bottom: -0.5rem !important;
+  }
+  .mb-md-n3 {
+    margin-bottom: -1rem !important;
+  }
+  .mb-md-n4 {
+    margin-bottom: -1.5rem !important;
+  }
+  .mb-md-n5 {
+    margin-bottom: -3rem !important;
+  }
+  .ms-md-n1 {
+    margin-left: -0.25rem !important;
+  }
+  .ms-md-n2 {
+    margin-left: -0.5rem !important;
+  }
+  .ms-md-n3 {
+    margin-left: -1rem !important;
+  }
+  .ms-md-n4 {
+    margin-left: -1.5rem !important;
+  }
+  .ms-md-n5 {
+    margin-left: -3rem !important;
+  }
   .p-md-0 {
     padding: 0 !important;
   }
@@ -9207,6 +9749,121 @@ textarea.form-control-lg {
   .ms-lg-auto {
     margin-left: auto !important;
   }
+  .m-lg-n1 {
+    margin: -0.25rem !important;
+  }
+  .m-lg-n2 {
+    margin: -0.5rem !important;
+  }
+  .m-lg-n3 {
+    margin: -1rem !important;
+  }
+  .m-lg-n4 {
+    margin: -1.5rem !important;
+  }
+  .m-lg-n5 {
+    margin: -3rem !important;
+  }
+  .mx-lg-n1 {
+    margin-right: -0.25rem !important;
+    margin-left: -0.25rem !important;
+  }
+  .mx-lg-n2 {
+    margin-right: -0.5rem !important;
+    margin-left: -0.5rem !important;
+  }
+  .mx-lg-n3 {
+    margin-right: -1rem !important;
+    margin-left: -1rem !important;
+  }
+  .mx-lg-n4 {
+    margin-right: -1.5rem !important;
+    margin-left: -1.5rem !important;
+  }
+  .mx-lg-n5 {
+    margin-right: -3rem !important;
+    margin-left: -3rem !important;
+  }
+  .my-lg-n1 {
+    margin-top: -0.25rem !important;
+    margin-bottom: -0.25rem !important;
+  }
+  .my-lg-n2 {
+    margin-top: -0.5rem !important;
+    margin-bottom: -0.5rem !important;
+  }
+  .my-lg-n3 {
+    margin-top: -1rem !important;
+    margin-bottom: -1rem !important;
+  }
+  .my-lg-n4 {
+    margin-top: -1.5rem !important;
+    margin-bottom: -1.5rem !important;
+  }
+  .my-lg-n5 {
+    margin-top: -3rem !important;
+    margin-bottom: -3rem !important;
+  }
+  .mt-lg-n1 {
+    margin-top: -0.25rem !important;
+  }
+  .mt-lg-n2 {
+    margin-top: -0.5rem !important;
+  }
+  .mt-lg-n3 {
+    margin-top: -1rem !important;
+  }
+  .mt-lg-n4 {
+    margin-top: -1.5rem !important;
+  }
+  .mt-lg-n5 {
+    margin-top: -3rem !important;
+  }
+  .me-lg-n1 {
+    margin-right: -0.25rem !important;
+  }
+  .me-lg-n2 {
+    margin-right: -0.5rem !important;
+  }
+  .me-lg-n3 {
+    margin-right: -1rem !important;
+  }
+  .me-lg-n4 {
+    margin-right: -1.5rem !important;
+  }
+  .me-lg-n5 {
+    margin-right: -3rem !important;
+  }
+  .mb-lg-n1 {
+    margin-bottom: -0.25rem !important;
+  }
+  .mb-lg-n2 {
+    margin-bottom: -0.5rem !important;
+  }
+  .mb-lg-n3 {
+    margin-bottom: -1rem !important;
+  }
+  .mb-lg-n4 {
+    margin-bottom: -1.5rem !important;
+  }
+  .mb-lg-n5 {
+    margin-bottom: -3rem !important;
+  }
+  .ms-lg-n1 {
+    margin-left: -0.25rem !important;
+  }
+  .ms-lg-n2 {
+    margin-left: -0.5rem !important;
+  }
+  .ms-lg-n3 {
+    margin-left: -1rem !important;
+  }
+  .ms-lg-n4 {
+    margin-left: -1.5rem !important;
+  }
+  .ms-lg-n5 {
+    margin-left: -3rem !important;
+  }
   .p-lg-0 {
     padding: 0 !important;
   }
@@ -9703,6 +10360,121 @@ textarea.form-control-lg {
   .ms-xl-auto {
     margin-left: auto !important;
   }
+  .m-xl-n1 {
+    margin: -0.25rem !important;
+  }
+  .m-xl-n2 {
+    margin: -0.5rem !important;
+  }
+  .m-xl-n3 {
+    margin: -1rem !important;
+  }
+  .m-xl-n4 {
+    margin: -1.5rem !important;
+  }
+  .m-xl-n5 {
+    margin: -3rem !important;
+  }
+  .mx-xl-n1 {
+    margin-right: -0.25rem !important;
+    margin-left: -0.25rem !important;
+  }
+  .mx-xl-n2 {
+    margin-right: -0.5rem !important;
+    margin-left: -0.5rem !important;
+  }
+  .mx-xl-n3 {
+    margin-right: -1rem !important;
+    margin-left: -1rem !important;
+  }
+  .mx-xl-n4 {
+    margin-right: -1.5rem !important;
+    margin-left: -1.5rem !important;
+  }
+  .mx-xl-n5 {
+    margin-right: -3rem !important;
+    margin-left: -3rem !important;
+  }
+  .my-xl-n1 {
+    margin-top: -0.25rem !important;
+    margin-bottom: -0.25rem !important;
+  }
+  .my-xl-n2 {
+    margin-top: -0.5rem !important;
+    margin-bottom: -0.5rem !important;
+  }
+  .my-xl-n3 {
+    margin-top: -1rem !important;
+    margin-bottom: -1rem !important;
+  }
+  .my-xl-n4 {
+    margin-top: -1.5rem !important;
+    margin-bottom: -1.5rem !important;
+  }
+  .my-xl-n5 {
+    margin-top: -3rem !important;
+    margin-bottom: -3rem !important;
+  }
+  .mt-xl-n1 {
+    margin-top: -0.25rem !important;
+  }
+  .mt-xl-n2 {
+    margin-top: -0.5rem !important;
+  }
+  .mt-xl-n3 {
+    margin-top: -1rem !important;
+  }
+  .mt-xl-n4 {
+    margin-top: -1.5rem !important;
+  }
+  .mt-xl-n5 {
+    margin-top: -3rem !important;
+  }
+  .me-xl-n1 {
+    margin-right: -0.25rem !important;
+  }
+  .me-xl-n2 {
+    margin-right: -0.5rem !important;
+  }
+  .me-xl-n3 {
+    margin-right: -1rem !important;
+  }
+  .me-xl-n4 {
+    margin-right: -1.5rem !important;
+  }
+  .me-xl-n5 {
+    margin-right: -3rem !important;
+  }
+  .mb-xl-n1 {
+    margin-bottom: -0.25rem !important;
+  }
+  .mb-xl-n2 {
+    margin-bottom: -0.5rem !important;
+  }
+  .mb-xl-n3 {
+    margin-bottom: -1rem !important;
+  }
+  .mb-xl-n4 {
+    margin-bottom: -1.5rem !important;
+  }
+  .mb-xl-n5 {
+    margin-bottom: -3rem !important;
+  }
+  .ms-xl-n1 {
+    margin-left: -0.25rem !important;
+  }
+  .ms-xl-n2 {
+    margin-left: -0.5rem !important;
+  }
+  .ms-xl-n3 {
+    margin-left: -1rem !important;
+  }
+  .ms-xl-n4 {
+    margin-left: -1.5rem !important;
+  }
+  .ms-xl-n5 {
+    margin-left: -3rem !important;
+  }
   .p-xl-0 {
     padding: 0 !important;
   }
@@ -10199,6 +10971,121 @@ textarea.form-control-lg {
   .ms-xxl-auto {
     margin-left: auto !important;
   }
+  .m-xxl-n1 {
+    margin: -0.25rem !important;
+  }
+  .m-xxl-n2 {
+    margin: -0.5rem !important;
+  }
+  .m-xxl-n3 {
+    margin: -1rem !important;
+  }
+  .m-xxl-n4 {
+    margin: -1.5rem !important;
+  }
+  .m-xxl-n5 {
+    margin: -3rem !important;
+  }
+  .mx-xxl-n1 {
+    margin-right: -0.25rem !important;
+    margin-left: -0.25rem !important;
+  }
+  .mx-xxl-n2 {
+    margin-right: -0.5rem !important;
+    margin-left: -0.5rem !important;
+  }
+  .mx-xxl-n3 {
+    margin-right: -1rem !important;
+    margin-left: -1rem !important;
+  }
+  .mx-xxl-n4 {
+    margin-right: -1.5rem !important;
+    margin-left: -1.5rem !important;
+  }
+  .mx-xxl-n5 {
+    margin-right: -3rem !important;
+    margin-left: -3rem !important;
+  }
+  .my-xxl-n1 {
+    margin-top: -0.25rem !important;
+    margin-bottom: -0.25rem !important;
+  }
+  .my-xxl-n2 {
+    margin-top: -0.5rem !important;
+    margin-bottom: -0.5rem !important;
+  }
+  .my-xxl-n3 {
+    margin-top: -1rem !important;
+    margin-bottom: -1rem !important;
+  }
+  .my-xxl-n4 {
+    margin-top: -1.5rem !important;
+    margin-bottom: -1.5rem !important;
+  }
+  .my-xxl-n5 {
+    margin-top: -3rem !important;
+    margin-bottom: -3rem !important;
+  }
+  .mt-xxl-n1 {
+    margin-top: -0.25rem !important;
+  }
+  .mt-xxl-n2 {
+    margin-top: -0.5rem !important;
+  }
+  .mt-xxl-n3 {
+    margin-top: -1rem !important;
+  }
+  .mt-xxl-n4 {
+    margin-top: -1.5rem !important;
+  }
+  .mt-xxl-n5 {
+    margin-top: -3rem !important;
+  }
+  .me-xxl-n1 {
+    margin-right: -0.25rem !important;
+  }
+  .me-xxl-n2 {
+    margin-right: -0.5rem !important;
+  }
+  .me-xxl-n3 {
+    margin-right: -1rem !important;
+  }
+  .me-xxl-n4 {
+    margin-right: -1.5rem !important;
+  }
+  .me-xxl-n5 {
+    margin-right: -3rem !important;
+  }
+  .mb-xxl-n1 {
+    margin-bottom: -0.25rem !important;
+  }
+  .mb-xxl-n2 {
+    margin-bottom: -0.5rem !important;
+  }
+  .mb-xxl-n3 {
+    margin-bottom: -1rem !important;
+  }
+  .mb-xxl-n4 {
+    margin-bottom: -1.5rem !important;
+  }
+  .mb-xxl-n5 {
+    margin-bottom: -3rem !important;
+  }
+  .ms-xxl-n1 {
+    margin-left: -0.25rem !important;
+  }
+  .ms-xxl-n2 {
+    margin-left: -0.5rem !important;
+  }
+  .ms-xxl-n3 {
+    margin-left: -1rem !important;
+  }
+  .ms-xxl-n4 {
+    margin-left: -1.5rem !important;
+  }
+  .ms-xxl-n5 {
+    margin-left: -3rem !important;
+  }
   .p-xxl-0 {
     padding: 0 !important;
   }

+ 4 - 0
css/styles.scss

@@ -35,6 +35,8 @@ $theme-colors: (
 $custom-colors: (
   'dw-blue-dark': #484C57,
   'dw-blue':#535763,
+  'dw-light':#e2e2e2,
+  'dw-bright':#e3e3e3,
 );
 
 $theme-colors: map-merge($theme-colors, $custom-colors);
@@ -45,6 +47,8 @@ $utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
 $utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
 $utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");
 
+$enable-negative-margins: true;
+
 /***********************************************************
 ################## Bootstrap Complete ######################
 ************************************************************/

+ 1 - 1
gulpfile.js

@@ -51,7 +51,7 @@ function html(cb) {
       removeComments:true
     }))
     .pipe(gulp.dest('./app/index.min.html'));
-  console.log("HTMLmin ๐Ÿ—œ๏ธfor app/ ");
+  console.log("HTMLmin ๐Ÿ—œ๏ธ for app/");
   cb();
 }
 

+ 117 - 176
index.html

@@ -1,4 +1,9 @@
 <!DOCTYPE html>
+<!--
+	     .     . .              .       .  .
+	. . ...-..-| |-. .-. .-.-..-| .-.. ...-|
+	 ` ` '' '`-'-' '-`-`-' ' '`-'-`-`-` '`-'-
+-->
 <html lang="en" class="no-js default-scroll">
 <head>
 <meta charset="utf-8">
@@ -113,9 +118,8 @@
           <h3 class="mt-5">Welcome Good People of the Internet,</h3>
           <p class="lead">I'm glad you found me. 
             I, too, have a computer on a network, so here you are. 
-            No man is an island<sub>1</sub> even though this is an elevator pitch for one man show.
-            I published this site as a professional overview so I can opine away on my <a href="https://davidawindham.com/desk">personal site</a> and not look like a weirdo to potential clients.
- 
+            No man is an island<sub>1</sub> even though this is mostly a one-man show<sub>2</sub>.
+            I published this site as single-page professional overview so I can have fun with my <a href="https://davidawindham.com/desk">personal site</a> and avoid sending potential clients navigating down the 2,000-page rabbit hole<sub>3</sub>.
             <br><br>
             Right on,
           </p>
@@ -195,7 +199,7 @@
             <div class="modal-body">
                 <div id="zw-card" class="click panel"> 
                   <div class="front">
-                    <img onclick="flip()" src="img/card-back.png" alt="zeken woozer card front" />
+                    <img onclick="flip()" src="img/card-back.png" alt="zeken woozer card front">
                   </div> 
                   <div class="back">
                     <img onclick="flip()" src="img/card.png" alt="zeken woozer card back"> 
@@ -284,17 +288,11 @@
               <li>Backup Automation / Recovery</li>
               <li>Application Monitoring / Support</li>
               <li>Technical Support / Troubleshooting</li>
-              <li class="mt-2">I do <b><u>NOT</u></b> manage Social Media</li>
+              <li class="mt-2">I do <b><u>not</u></b> manage Social Media</li>
             </ul>
           </div>
         </div>
       </div>
-      <div class="row mt-5">
-        <div class="col-lg-9 offset-lg-1">
-          <p><b><u>Note</u></b>: According to my better half and parents, I'm particularly good at being critical ( ... perhaps it's from the years at art school ). I'm a good candidate to contact if you want some unbiased third-party feedback on your product, branding, design, website, or software. I'd be my pleasure to write up a detailed critique that'll give your team some actionable feedback.</p>
-        </div>
-        
-      </div>
     </div>
   </section>
 
@@ -319,13 +317,7 @@
           <p>I can remotely access and manage your computers and devices.</p>
           <h4 class="when mt-4">Availability</h4>
           <p>I'm available to my clients anytime and I'm always open to taking on new clients.</p>
-          <p>New projects are booked until May 2023.</p>
-          <a id="opendate" class="btn btn-outline-dark btn-sm">
-            <i class="bi bi-exclamation-triangle"></i> &nbsp;23/05/01 
-          </a>
-          <a href="#dw-footer"class="btn btn-outline-dark btn-sm">
-            Meeting Request
-          </a>
+          <p>New projects are booked until <a role="button" id="opendate"> May 2023 &nbsp;<i class="bi bi-exclamation-triangle"></i></a></p>
         </div>
         <div class="col-lg-6">
           <div id='calendar'></div>
@@ -474,191 +466,139 @@
       <div class="row services-title">
         <div class="col-lg-5 offset-md-1">
           <h2 class="how">&amp; How</h2>
-          <h3 class="how mb-5">Can I Help?</h3>
+          <h3 class="how mb-4">Can I Help?</h3>
           <p class="lead"></p>
         </div>
       </div>
 
       <div class="row">
-        <div class="col-lg-5 offset-md-1">
+        <div class="col-lg-4 offset-md-1">
           <ul class="nav nav-tabs" id="services" role="tablist">
-            <div class="service">
-              <a class="nav-link" data-bs-toggle="tab" data-bs-target="#create-tab" type="button" role="tab" aria-controls="create-tab" aria-selected="true">
+            <li class="nav-item service">
+              <a href="#create-tab" class="nav-link" data-bs-toggle="tab" data-bs-target="#create-tab" role="tab" aria-controls="create-tab" aria-selected="true">
                 <i class="pulse"><span></span></i>
-                <div class="numbering">01</div>
-                <h4 class="how">Create, Build, &amp; Host</h4>
-                <p>a new site or application.</p>
+                <span class="numbering">01</span>
+                <h4 class="how">Design, Create, &amp; Build</h4>
+                <p class="small">a new site or application.</p>
               </a>
-            </div>
-            <div class="service">
-              <a class="nav-link" data-bs-toggle="tab" data-bs-target="#audit-tab" type="button" role="tab" aria-controls="audit-tab" aria-selected="false">
+            </li>
+            <li class="nav-item service">
+              <a href="#service-tab" class="nav-link" data-bs-toggle="tab" data-bs-target="#service-tab" role="tab" aria-controls="#service-tab" aria-selected="false">
                 <i class="pulse"><span></span></i>
-                <div class="numbering">02</div>
-                <h4 class="how">Audit, Improve, &amp; Repair</h4>
-                <p>an existing site or application.</p>
+                <span class="numbering">02</span>
+                <h4 class="how">Service, Repair, &amp; Improve</h4>
+                <p class="small">an existing site or application.</p>
               </a>
-            </div>
-            <div class="service">
-              <a class="nav-link" data-bs-toggle="tab" data-bs-target="#consult-tab" type="button" role="tab" aria-controls="consult-tab" aria-selected="false">
+            </li>
+            <li class="nav-item service">
+              <a href="#audit-tab" class="nav-link" data-bs-toggle="tab" data-bs-target="#audit-tab" role="tab" aria-controls="audit-tab" aria-selected="false">
                 <i class="pulse"><span></span></i>
-                <div class="numbering">03</div>
-                <h4 class="how">Advise, Consult, &amp; Review</h4>
-                <p>on site and application best practices.</p>
+                <span class="numbering">03</span>
+                <h4 class="how">Audit, Advise, &amp; Consult</h4>
+                <p class="small">on best practices.</p>
               </a>
-            </div>
-            <div class="service">
-              <a class="nav-link" data-bs-toggle="tab" data-bs-target="#manage-tab" type="button" role="tab" aria-controls="manage-tab" aria-selected="false">
+            </li>
+            <li class="nav-item service">
+              <a href="#manage-tab" class="nav-link" data-bs-toggle="tab" data-bs-target="#manage-tab" role="tab" aria-controls="manage-tab" aria-selected="false">
                 <i class="pulse"><span></span></i>
-                <div class="numbering">04</div>
-                <h4 class="how">Manage</h4>
-                <p>on site and application best practices.</p>
+                <span class="numbering">04</span>
+                <h4 class="how">Manage, Monitor, &amp; Host</h4>
+                <p class="small">sites, applications, and campaigns.</p>
               </a>
-            </div>
+            </li>
           </ul>
         </div>
-        <div class="col-lg-5">
-          <div class="row step">
-            <div class="tab-content">
-              <div id="create-tab" class="tab-pane fade show active" role="tabpanel" aria-labelledby="create-tab" tabindex="0">
-                <h4 class="how">Tailored</h4>
-                <p>
-                  I tailor my approach to the unique requirements of each project
-                  in an effort create sustainable and practical applications that work for you.             
-                </p>
-              </div>
-              <div id="audit-tab" class="tab-pane fade" role="tabpanel" aria-labelledby="audit-tab" tabindex="1">
-                <h4 class="how">Audit</h4>
-                <p>Audit</p>
-              </div>
-              <div id="consult-tab" class="tab-pane fade" role="tabpanel" aria-labelledby="consult-tab" tabindex="2">
-                <h4 class="how">Consult</h4>
-                <p>Consult</p>
-              </div>
-              <div id="manage-tab" class="tab-pane fade" role="tabpanel" aria-labelledby="manage-tab" tabindex="3">
-                <h4 class="how">Manage</h4>
-                <p>Manage</p>
-              </div>
+        <div class="col-lg-6 mt-n4">
+          <div class="tab-content">
+            <div id="create-tab" class="tab-pane fade show active" role="tabpanel" aria-labelledby="create-tab" tabindex="0">
+              <h4 class="how fw-bold">Tailored</h4>
+              <p>Even though I mostly work for small clients, I provide them enterprise IT strategies. I tailor my work to the unique requirements of each project in an effort create sustainable and practical applications and designs that work for you. I focus on my core competencies and will recommend other providers when the scope of your project falls outside of them. I write a proposal and prior to starting your project and will provide you all of the source code and vector assets. I'll work alongside of your team and train staff as needed. And I will not try to reinvent the wheel to avoid recommending viable third-party services.</p>        
+            </div>
+            <div id="service-tab" class="tab-pane fade" role="tabpanel" aria-labelledby="service-tab" tabindex="1">
+              <h4 class="how fw-bold">Timely</h4>
+              <p>I've learned to take service request with a timeline of 'yesterday' and I always prioritize my existing client needs over new projects. Service is the key to keeping good clients. I'm a stickler for quality and operability. I've likely already built or worked with similar products, so I'm relatively quick and I'll work to find a remedy after a diagnosis is made.</p>
+            </div>
+            <div id="audit-tab" class="tab-pane fade" role="tabpanel" aria-labelledby="audit-tab" tabindex="2">
+              <h4 class="how fw-bold">Careful</h4>
+              <p>I will carefully review and critique your existing software, applications,  sites and workflow to write up an unbiased detailed report that'll give your team some actionable feedback. I'll provide references and suggestions and I'll either propose a solution or refer elsewhere for assistance.</p>
+            </div>
+            <div id="manage-tab" class="tab-pane fade" role="tabpanel" aria-labelledby="manage-tab" tabindex="3">
+              <h4 class="how fw-bold">Reliable</h4>
+              <p>I provide several basic levels of monthly support based on the scale and maintenance needs of your project. I spend about a quarter of my time managing existing sites and applications. 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. I'll keep your computers, sites, and applications up to speed. I'll set up a monthly service agreement with expectations and I'll provide monthly reporting on campaigns.</p>
             </div>
-            <h5>Have a project in mind?</h5>
-            <a class="btn btn-outline-dark mt-1" data-bs-toggle="collapse" data-bs-target="#pricing" aria-expanded="true" aria-controls="collapseOne">
-              Pricing &amp; Cost
-            </a>
           </div>
         </div>
       </div>
 
-      <!-- Pricing Modal -->
-      <div id="pricing" class="container accordion-collapse collapse">
-        <div class="col-lg-10 offset-md-1">
-          
-          <h3>Pricing &amp; Costs</h3>
-          <div class="row">
-            <div class="col-md-12">
-              <div class="row">
-                <div class="col-md-6">
-                <h6 class="fw-bold mt-2">Approach:</h6>
-                <p class="mt-1">
-                  I focus on my core competencies and will recommend 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 maintenance needs of your project.
-                </p>
-                </div>
-                <div class="col-md-6">
-                <h6 class="fw-bold mt-2">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>
-                </div>
+      <div class="row py-5 bg-dw-bright bg-opacity-10">
+        <div class="col-lg-10 offset-lg-1">      
+          <div class="row">            
+            <div class="col-lg-5">
+              <h6 class="fw-bold ">Vendors</h6>
+              <p class="mb-n2">I keep accounts with these seven vendors and between them, I can purchase and accomplish almost anything. In most cases, I prefer to cut myself out of the middle and register it to your company.</p>
+              <div class="btn-group btn-group-toggle" data-toggle="buttons">
+                <a href="https://www.apple.com/business/" target="_blank" rel="noopener">
+                  <img class="vendor-image" alt="Google Cloud" src="img/vendor-apple.svg">
+                </a>
+                <a href="https://azure.microsoft.com/" target="_blank" rel="noopener">
+                  <img class="vendor-image" alt="Microsoft Azure" src="img/vendor-microsoft.svg">
+                </a>
+                <a href="https://cloud.google.com" target="_blank" rel="noopener">
+                  <img class="vendor-image" alt="Google Cloud" src="img/vendor-google.svg">
+                </a>
               </div>
-
-              <h6 class="fw-bold mt-2">Rates:</h6>
-              <div class="row">
-                <div class="col-md-4">
-                  <h6>Hourly: $50</h6>
+              <div class="mt-n5 btn-group btn-group-toggle" data-toggle="buttons">
+                <a href="https://aws.amazon.com" target="_blank" rel="noopener">
+                  <img class="vendor-image" alt="Amazon Web Services" src="img/vendor-amazon.svg">
+                </a>
+                <a href="https://vercel.com" target="_blank" rel="noopener">
+                  <img class="vendor-image" alt="Linode" src="img/vendor-vercel.svg">
+                </a>
+                <a href="https://linode.com" target="_blank" rel="noopener">
+                  <img class="vendor-image" alt="Linode" src="img/vendor-linode.svg">
+                </a>
+                <a href="https://www.akamai.com/" target="_blank" rel="noopener">
+                  <img class="vendor-image" alt="Google Cloud" src="img/vendor-akamai.svg">
+                </a>
+              </div>
+            </div>
+            <div class="col-lg-7 ps-5">
+              <h6 class="fw-bold mt-2">Rates</h6>
+              <p>I try to be very fair in my billing. I bill the same rate for all work and  I'll log 15 minutes on an invoice. At a rate of $50/hr x 40/wk x 50 wks/yr = $100,000. To hit that goal, I try to stay productive.</p>
+              <div class="row pt-3">
+                <div class="col-lg-4">
+                  <h6>Hourly: <b>$50</b></h6>
                   <ul class="pricing">
-                    <li>Design</li>
-                    <li>Development</li>
-                    <li>Consulting</li>
-                    <li>Auditing</li>
+                    <li>Design / Develop</li>
+                    <li>Service / Repair</li>
+                    <li>Audit / Consult</li>
+                    <li>Configure / Train</li>
+                    <li></li>
                   </ul>
                 </div>
-                <div class="col-md-4">
-                  <h6>Monthly: $25 - $75</h6>
+                <div class="col-lg-4">
+                  <h6>Monthly: <b>$25-75</b></h6>
                   <ul class="pricing">
-                    <li>Support</li>
-                    <li>Managed Hosting</li>
-                    <li>Regular Maintence</li>
-                    <li>Regular Upgrades</li>
+                    <li>Management</li>
+                    <li>Maintenance</li>
+                    <li>Monitor / Report</li>
+                    <li>Campaigns</li>
                   </ul>
                 </div>
-                <div class="col-md-4">
-                  <h6>Add-ons:( vendor pricing + 10% )</h6>
+                <div class="col-lg-4">
+                  <h6>Vendor: + <b>10%</b></h6>
                   <ul class="pricing">
-                    <li>Apple Business Manager</li>
-                    <li>Google Workspace</li>
-                    <li>Microsoft Office 365</li>
-                    <li>SaaS Integration</li>
-                    <li>API Integration</li>
+                    <li>Workspace / 365</li>
+                    <li>CRM / IMS / ERP</li>
+                    <li>WAF / DBaaS / Storage</li>
+                    <li>SaaS / APIs / ML</li>
                   </ul>
                 </div>
               </div>
-              <h6 class="fw-bold mt-4">Vendors:</h6>
-              <div class="row">
-                <div class="col-md-12">
-                  <p class="mt-1">
-                    I use one of these 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 class="btn-group btn-group-toggle" data-toggle="buttons">
-                    <label class="btn btn-light">
-                      <a href="https://www.apple.com/business/" target="_blank" rel="noopener">
-                        <img class="vendor-image" alt="Google Cloud" src="img/vendor-apple.svg">
-                      </a>
-                    </label>
-                    <label class="btn btn-light">
-                      <a href="https://azure.microsoft.com/" target="_blank" rel="noopener">
-                        <img class="vendor-image" alt="Microsoft Azure" src="img/vendor-microsoft.svg">
-                      </a>
-                    </label>
-                    <label class="btn btn-light">
-                      <a href="https://cloud.google.com" target="_blank" rel="noopener">
-                        <img class="vendor-image" alt="Google Cloud" src="img/vendor-google.svg">
-                      </a>
-                    </label>
-                    <label class="btn btn-light">
-                      <a href="https://aws.amazon.com" target="_blank" rel="noopener">
-                        <img class="vendor-image" alt="Amazon Web Services" src="img/vendor-amazon.svg">
-                      </a>
-                    </label>
-                    <label class="btn btn-light">
-                      <a href="https://www.akamai.com/" target="_blank" rel="noopener">
-                        <img class="vendor-image" alt="Google Cloud" src="img/vendor-akamai.svg">
-                      </a>
-                    </label>
-                    <label class="btn btn-light">
-                      <a href="https://linode.com" target="_blank" rel="noopener">
-                        <img class="vendor-image" alt="Linode" src="img/vendor-linode.svg">
-                      </a>
-                    </label>
-                    <label class="btn btn-light">
-                      <a href="https://vercel.com" target="_blank" rel="noopener">
-                        <img class="vendor-image" alt="Linode" src="img/vendor-vercel.svg">
-                      </a>
-                    </label>
-
-
-                  </div>
-                </div>
-              </div>
-
             </div>
           </div>
         </div>
       </div>
-      <!-- END:Pricing Modal -->
 
     </div>
   </section>
@@ -695,8 +635,8 @@
       <div class="col-lg-2 col-xxs-4 mt-5">
         <div class="br-widget">
           <ul class="footer-links text-lg-end">
-            <li><a href="https://davidawindham.com/cv/" rel="me">CV &nbsp;<i class="bi bi-file-pdf"></i></a></li>
-            <li><a href="https://code.davidawindham.com/" rel="me">Code &nbsp;<i class="bi bi-file-code"></i></a></li>
+            <li><a href="https://davidawindham.com/contract/" rel="me">Contract &nbsp;<i class="bi bi-pencil-square"></i></a></li>
+            <li><a href="https://code.davidawindham.com/david/dw" rel="me">Code &nbsp;<i class="bi bi-file-code"></i></a></li>
             <li><a href="https://davidwindham.com/davidwindham.asc" rel="me">Key &nbsp;<i class="bi bi-file-earmark-lock"></i></a></li>
           </ul>
         </div>
@@ -707,21 +647,22 @@
       <div class="col-lg-4 offset-lg-8 mt-5 fw-light small">
         References:
         <ol>
-          <li><a href="https://en.wikipedia.org/wiki/Devotions_upon_Emergent_Occasions">Donne, John. 1624. <i>Devotions upon Emergent Occasions</i></a></li>
-          <li><a href="https://en.wikipedia.org/wiki/Corporate_personhood">Wikipedia. 2022. Corporate Personhood</a></li>
+          <li><a target="_blank" href="https://en.wikipedia.org/wiki/Devotions_upon_Emergent_Occasions">Donne, John. 1624. <i>Devotions upon Emergent Occasions</i></a></li>
+          <li><a target="_blank" href="https://en.wikipedia.org/wiki/Corporate_personhood">Wikipedia. 2022. Corporate Personhood</a></li>
+          <li><a target="_blank" href="https://www.merriam-webster.com/dictionary/rabbit%20hole">Merriam Webster. 2022. rabbit hole n.</a></li>
         </ol>
       </div>
     </div>
-
+  </div>
   <div class="footer-end">
     <div class="container">
       <div class="row">
         <div class="col-md-6 text-md-left">
-          &copy; 2004-2023<br>
+          &copy; 2004-2022<br>
           <small>Updated: 11/28/22</small>
         </div>
         <div class="col-md-6 text-end">
-          The web was inherently social long before the<br> media part, so please feel free to test it out.
+          <p class="gaegu mb-n1">I'm not active on most of these:</p>
           <ul class="footer-links footer-social list-inline">  
             <li class="list-inline-item"><i class="bi bi-arrow-90deg-up"></i>  </li>
             <li class="list-inline-item"><a href="https://en.wikipedia.org/wiki/User:Windhamdavid" class="wikipedia" rel="me"><i class="icon-wikipedia-w"></i></a></li>
@@ -730,7 +671,7 @@
             <li class="list-inline-item"><a href="https://stackexchange.com/users/521983/david-windham" class="stackoverflow"><i class="bi bi-stack-overflow"></i></a></li>
             <li class="list-inline-item"><a href="https://www.facebook.com/windhamdavid" class="facebook"><i class="bi bi-facebook"></i></a></li>
             <li class="list-inline-item"><a href="https://www.reddit.com/windhamdavid" class="reddit"><i class="bi bi-reddit"></i></a></li>   
-            <li class="list-inline-item"><a href="https://twitter.com/windhamdavid" class="spotify" rel="me"><i class="bi bi-spotify"></i></a></li>
+            <li class="list-inline-item"><a href="https://open.spotify.com/user/windhamdavid" class="spotify" rel="me"><i class="bi bi-spotify"></i></a></li>
             <li class="list-inline-item"><a href="https://www.linkedin.com/in/windhamdavid" class="linkedin" rel="me"><i class="bi bi-linkedin"></i></a></li>
           </ul>
         </div>
@@ -763,6 +704,6 @@
   })();
 </script>
 <noscript><p><img src="https://davidawindham.com/wik/matomo.php?idsite=5&amp;rec=1" style="border:0;" alt="" /></p></noscript>
---> 
+-->
 </body>
 </html>

+ 3 - 1
js/_init.js

@@ -42,7 +42,6 @@ function flip() {
   card.classList.toggle('flip');
 }
 
-
 function header() {
   var $window = $(window),
   $smallHeader = $('.header-small'),
@@ -287,6 +286,9 @@ function waypoint_init() {
         this.createWaypoint(config)
     }
   };
+$(".nav-link").hover(function(){
+    $(this).tab('show');
+});
 
 //  $.fn.scrollEnd = function (callback, timeout) {
 //    $(this).scroll(function () {

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