tabs

app/index.html

@@ -273,7 +273,7 @@
             <ul>
               <li>Domain Registry / Routing / DNS</li>
               <li>Brand Trademark / Identity Monitoring</li>
-              <li>Advertising Campaign Monitoring</li>
+              <li>Analytics / Campaign Reporting</li>
               <li>Email Accounts / Hosting / Security</li>
               <li>System / Network Security</li>
               <li>Hardware Acquisition / Management</li>
@@ -334,7 +334,7 @@
   <div id="why" class="background-color dark" data-dark-bg></div>
   <section class="page-view why testimonials-section">
     <div class="container">
-      <div class="row mb-3">
+      <div class="row">
         <div class="col-lg-6 offset-md-1">
           <h2 class="why">Why?</h2>
           <p class="lead">
@@ -351,103 +351,112 @@
                 David's persistent support throughout development and launch was fast and consistent; 
                 This project would have been impossible without him"
               </blockquote>
-              <figcaption>
-                <cite>client</cite>
+              <figcaption class="text-end">
+                <cite>Project client</cite>
                 New York, NY
               </figcaption>
             </figure>
             <figure class="br-testimonial">
               <blockquote>
-                "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>"
+                "David joined our team 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>David is a strong asset for any team</strong>"
               </blockquote>
-              <figcaption>
-                <cite>~ My Mom</cite>
+              <figcaption class="text-end">
+                <cite>Contract client</cite>
+                Los Angeles, CA
               </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>"
+                "Good developers can be difficult to find, but David is amazing! 
+                <strong>He's an expert developer who works quickly</strong> and ultimately delivered an app that exceeded my expectations. We will definitely be working with him again."
               </blockquote>
-              <figcaption>
-                <cite>client</cite>
-                Los Angeles, CA<br>
+              <figcaption class="text-end">
+                <cite>Project client</cite>
+                Greenville, SC
               </figcaption>
             </figure>
             <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
-                exceeded my expectations. I would definitely work with him again."
+                "David has handled all of my computer needs for the last 10 years. 
+                He runs our company email, website, and sets up our computers. He's been very reliable and fair. 
+                <strong>I can only imagine how much money he has saved my company.</strong>"
               </blockquote>
-              <figcaption>
-                <cite>waiting on approval</cite>
-                Communications Director <br>
-                Greenwood, SC
+              <figcaption class="text-end">
+                <cite>Managed client</cite>
+                Charleston, SC
+              </figcaption>
+            </figure>
+            <figure class="br-testimonial">
+              <blockquote>
+                "I remember you taking apart all of the electronics in our house and never putting them back together. 
+                I'd imagine that you're very good at what you do.
+                <strong>It makes me very happy to see you doing something you enjoy.</strong>"
+              </blockquote>
+              <figcaption class="text-end">
+                <cite>My Mom</cite>
+                Columbia, SC
               </figcaption>
             </figure>
-            <div class="next-testimonial">
-              <svg viewBox="0 0 129 129" 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>
-              </svg>
-              <span>Next</span>
-            </div>
           </div>
         </div>
         <div class="col-lg-4 mt-5 ps-5 pt-2">
           <h5>Approach</h5>
-          <p>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.</p>
+          <p>I just "take care of it". I manage, host, and maintain everything I build or install for the lifespan of the project or your business. I offer sensible consulting based on your goals and I succeed using my experience, enthusiasm, and commitment to personal service.</p>
           <h5>Advantages</h5>
-          <p>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>
+          <p>I provide a single point of contact for consolidated billing, development, and support. There are no confusing automated reminders, renewals, and upgrade emails coming from your software or upstream providers. </p>
         </div>
       </div>
-      <div class="row">
-        <div class="col-lg-10 offset-lg-1">
-        <h5>Selected Clients:</h5>
-        <div class="row">
-          <div class="col-md-6">
-            <ul class="nodot">
-              <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 class="nodot">
-              <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 class="row mt-3">
+        <div class="col-lg-6 offset-lg-1">
+          <h5>Selected Clients:</h5>
+          <div class="row">
+            <div class="col-md-6">
+              <ul class="clients">
+                <li>Use All Five Inc.</li>
+                <li>The Rivers Agency</li>
+                <li>Charleston Home Tour</li>
+                <li>AJ Design Co.</li>
+                <li>Fuzzco Inc.</li>
+                <li>Harbourtowne Real Estate</li>
+                <li>Charleston Trident Association of Realtors</li>
+                <li>The College of Charleston</li>
+                <li>Blue Ridge Electric Cooperative</li>
+                <li>Self Regional Healthcare</li>
+                <li>Biotherm Solutions</li>
+              </ul>
+            </div>
+            <div class="col-md-6">
+              <ul class="clients">
+                <li>Pennebaker & Hegedus Films</li>
+                <li>Good and Plenty Records</li>
+                <li>Jerry Moran</li>
+                <li>Holy City Farms</li>
+                <li>Harvard Kennedy School</li>
+                <li>Clemson University;</li>
+                <li>The Chelcum Family Foundation</li>
+                <li>Morris Publishing</li>
+                <li>The State Newspaper </li>
+                <li>GMK Associates</li>
+                <li>Nicholson, Meredith, & Anderson</li>
+              </ul>
+            </div>
           </div>
         </div>
-        <div class="col-lg-1 offset-md-1">
-          
-        </div>
-        <div class="col-lg-9">
-
-        </div>
-        <div class="col-lg-1 next-wrapper">
-
+        <div class="col-lg-4 ps-5">
+          <h5>Experience</h5>
+          <ul class="clients">
+            <li>2005 - David A. Windham Consulting</li>
+            <li>2011 - 2014 Clemson University</li>
+            <li>2009 - 2011 Morris Communications</li>
+            <li>2007 - 2009 Fuzzco Inc.</li>
+            <li>2005 -> Radio Announcer, Wine Sales, Wine Steward, Waiter, Slide Library Manager, Woodworker apprentice, Pizza Delivery, Lifeguard.</li>
+          </ul>
+          <ul class="clients">
+            <li>2003 - College of Charleston - B.A. Fine Arts</li>
+            <li>1993 - Savannah College of Art and Design</li>
+            <li>1991 – Chapin High School</li>
+          </ul>
         </div>
       </div>
     </div>
@@ -468,174 +477,184 @@
 
       <div class="row">
         <div class="col-lg-5 offset-md-1">
-          <div class="service">
-            <i class="pulse"><span></span></i>
-            <div class="numbering">01</div>
-            <h4 class="how">Create, Build, &amp; Host</h4>
-            <p>a new web site or application.</p>
-          </div>
-          <div class="service">
-            <i class="pulse">
-            <span></span>
-            <span></span>
-            </i>
-            <div class="numbering">02</div>
-              <h4 class="how">Audit, Improve, &amp; Repair</h4>
-              <p>an existing web site or application.</p>
+          <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">
+                <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>
+              </a>
             </div>
             <div class="service">
-              <i class="pulse">
-                <span></span>
-                <span></span>
-                <span></span>
-              </i>
-              <div class="numbering">03</div>
-              <h4 class="how">Advise, Consult, &amp; Review</h4>
-              <p>on web site and application best practices.</p>
+              <a class="nav-link" data-bs-toggle="tab" data-bs-target="#audit-tab" type="button" role="tab" aria-controls="audit-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>
+              </a>
             </div>
             <div class="service">
-              <i class="pulse">
-                <span></span>
-                <span></span>
-                <span></span>
-                <span></span>
-              </i>
+              <a class="nav-link" data-bs-toggle="tab" data-bs-target="#consult-tab" type="button" role="tab" aria-controls="consult-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>
+              </a>
             </div>
-          </div>
-          <div class="col-lg-5">
-            <div class="row step">
-              <div class="approach-step">
+            <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">
+                <i class="pulse"><span></span></i>
+                <div class="numbering">04</div>
+                <h4 class="how">Manage</h4>
+                <p>on site and application best practices.</p>
+              </a>
+            </div>
+          </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 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.
-                  Have a project in mind?
+                  in an effort create sustainable and practical applications that work for you.             
                 </p>
-                <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 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>
+            <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 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 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>
-
-                      <h6 class="fw-bold mt-2">Rates:</h6>
-                      <div class="row">
-                        <div class="col-md-4">
-                          <h6>Hourly: $50</h6>
-                          <ul class="pricing">
-                            <li>Design</li>
-                            <li>Development</li>
-                            <li>Consulting</li>
-                            <li>Auditing</li>
-                          </ul>
-                        </div>
-                        <div class="col-md-4">
-                          <h6>Monthly: $25 - $75</h6>
-                          <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">
-                          <h6>Add-ons:( vendor pricing + 10% )</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>
-                          </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>
+      <!-- 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>
 
+              <h6 class="fw-bold mt-2">Rates:</h6>
+              <div class="row">
+                <div class="col-md-4">
+                  <h6>Hourly: $50</h6>
+                  <ul class="pricing">
+                    <li>Design</li>
+                    <li>Development</li>
+                    <li>Consulting</li>
+                    <li>Auditing</li>
+                  </ul>
+                </div>
+                <div class="col-md-4">
+                  <h6>Monthly: $25 - $75</h6>
+                  <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">
+                  <h6>Add-ons:( vendor pricing + 10% )</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>
+                  </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>
+              </div>
 
-        <!-- END:Pricing Modal -->
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- END:Pricing Modal -->
 
     </div>
   </section>

css/style.css

@@ -252,8 +252,12 @@ h5.modal-title {
 h6.modal {
   color: #535763 !important;
 }
-.nodot {
+ul.clients {
   list-style: none;
+  padding-left: 0;
+}
+ul.client li {
+  padding-left:3px;
 }
 .numbering {
   display: inline-block;
@@ -668,6 +672,29 @@ h6.modal {
   display: block;
   margin-top: -2px;
 }
+.nav-tabs {
+  border-bottom: none;
+}
+.nav-link {
+  padding:0;
+}
+.nav-tabs .nav-link {
+  border:none;
+}
+.nav-tabs .nav-link.active, 
+.nav-tabs .nav-item.show .nav-link {
+  background-color: #484c5708;
+  border:none;
+}
+.nav-tabs .nav-link.active, 
+.nav-tabs .nav-item.show .nav-link {
+  background-color: #484c5708;
+  border:none;
+}
+.nav-tabs .nav-link:hover, 
+.nav-tabs .nav-link:focus {
+  border:none;
+}
 /* purgecss end ignore */
 
 /*########################################
@@ -882,7 +909,7 @@ h6.modal {
 .services .service p,
 .approach .service p {
   margin-top: 0 !important;
-  margin-bottom: 2rem;
+  margin-bottom: 1rem;
 }
 
 .services .service h4,
@@ -971,11 +998,10 @@ blockquote {
 .br-testimonial figcaption cite {
   display: block;
   font-style: normal;
-  font-weight: bold;
 }
 
 .br-testimonial blockquote {
-  margin: 0 0 20px 0;
+  margin: 0 0 10px 0;
 }
 
 .br-testimonial figcaption {
@@ -1013,7 +1039,7 @@ blockquote {
 
 .testimonials-section blockquote {
   color: #e3e3e3;
-  font-size: 1.5em;
+  font-size: 1.3em;
 }
 
 .testimonials-section .br-testimonial {
@@ -1033,53 +1059,13 @@ blockquote {
   left: 0;
 }
 
-.testimonials-section .next-wrapper {
-  text-align: right;
-  padding-top: 2rem;
-  padding-right: 2rem;
-}
-
-.testimonials-section .next-testimonial {
-  display: inline-block;
-  cursor: pointer;
-}
-
-.testimonials-section .next-testimonial:hover svg {
-  opacity: 1;
-}
-
-.testimonials-section .next-testimonial:hover span {
-  opacity: 1;
-}
-
-.testimonials-section .next-testimonial svg {
-  max-width: 40px;
-  max-height: 40px;
-  opacity: 0.5;
-  transition: opacity 0.2s ease;
-}
-
-.testimonials-section .next-testimonial span {
-  display: block;
-  font-size: 56%;
-  padding-top: 17px;
-  width: 53px;
-  text-align: center;
-  opacity: 0;
-  transition: opacity 0.2s ease;
-}
-
-.testimonials-section .next-testimonial path {
-  fill: #e3e3e3;
-}
-
 .testimonials-section .indicators {
   text-align: right;
 }
 
 .testimonials-section .indicators span {
-  height: 14px;
-  width: 14px;
+  height: 12px;
+  width: 12px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.2);
   margin: 5px;

index.html

@@ -277,7 +277,7 @@
             <ul>
               <li>Domain Registry / Routing / DNS</li>
               <li>Brand Trademark / Identity Monitoring</li>
-              <li>Advertising Campaign Monitoring</li>
+              <li>Analytics / Campaign Reporting</li>
               <li>Email Accounts / Hosting / Security</li>
               <li>System / Network Security</li>
               <li>Hardware Acquisition / Management</li>
@@ -338,7 +338,7 @@
   <div id="why" class="background-color dark" data-dark-bg></div>
   <section class="page-view why testimonials-section">
     <div class="container">
-      <div class="row mb-3">
+      <div class="row">
         <div class="col-lg-6 offset-md-1">
           <h2 class="why">Why?</h2>
           <p class="lead">
@@ -355,103 +355,112 @@
                 David's persistent support throughout development and launch was fast and consistent; 
                 This project would have been impossible without him"
               </blockquote>
-              <figcaption>
-                <cite>client</cite>
+              <figcaption class="text-end">
+                <cite>Project client</cite>
                 New York, NY
               </figcaption>
             </figure>
             <figure class="br-testimonial">
               <blockquote>
-                "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>"
+                "David joined our team 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>David is a strong asset for any team</strong>"
               </blockquote>
-              <figcaption>
-                <cite>~ My Mom</cite>
+              <figcaption class="text-end">
+                <cite>Contract client</cite>
+                Los Angeles, CA
               </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>"
+                "Good developers can be difficult to find, but David is amazing! 
+                <strong>He's an expert developer who works quickly</strong> and ultimately delivered an app that exceeded my expectations. We will definitely be working with him again."
               </blockquote>
-              <figcaption>
-                <cite>client</cite>
-                Los Angeles, CA<br>
+              <figcaption class="text-end">
+                <cite>Project client</cite>
+                Greenville, SC
               </figcaption>
             </figure>
             <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
-                exceeded my expectations. I would definitely work with him again."
+                "David has handled all of my computer needs for the last 10 years. 
+                He runs our company email, website, and sets up our computers. He's been very reliable and fair. 
+                <strong>I can only imagine how much money he has saved my company.</strong>"
               </blockquote>
-              <figcaption>
-                <cite>waiting on approval</cite>
-                Communications Director <br>
-                Greenwood, SC
+              <figcaption class="text-end">
+                <cite>Managed client</cite>
+                Charleston, SC
+              </figcaption>
+            </figure>
+            <figure class="br-testimonial">
+              <blockquote>
+                "I remember you taking apart all of the electronics in our house and never putting them back together. 
+                I'd imagine that you're very good at what you do.
+                <strong>It makes me very happy to see you doing something you enjoy.</strong>"
+              </blockquote>
+              <figcaption class="text-end">
+                <cite>My Mom</cite>
+                Columbia, SC
               </figcaption>
             </figure>
-            <div class="next-testimonial">
-              <svg viewBox="0 0 129 129" 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>
-              </svg>
-              <span>Next</span>
-            </div>
           </div>
         </div>
         <div class="col-lg-4 mt-5 ps-5 pt-2">
           <h5>Approach</h5>
-          <p>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.</p>
+          <p>I just "take care of it". I manage, host, and maintain everything I build or install for the lifespan of the project or your business. I offer sensible consulting based on your goals and I succeed using my experience, enthusiasm, and commitment to personal service.</p>
           <h5>Advantages</h5>
-          <p>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>
+          <p>I provide a single point of contact for consolidated billing, development, and support. There are no confusing automated reminders, renewals, and upgrade emails coming from your software or upstream providers. </p>
         </div>
       </div>
-      <div class="row">
-        <div class="col-lg-10 offset-lg-1">
-        <h5>Selected Clients:</h5>
-        <div class="row">
-          <div class="col-md-6">
-            <ul class="nodot">
-              <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 class="nodot">
-              <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 class="row mt-3">
+        <div class="col-lg-6 offset-lg-1">
+          <h5>Selected Clients:</h5>
+          <div class="row">
+            <div class="col-md-6">
+              <ul class="clients">
+                <li>Use All Five Inc.</li>
+                <li>The Rivers Agency</li>
+                <li>Charleston Home Tour</li>
+                <li>AJ Design Co.</li>
+                <li>Fuzzco Inc.</li>
+                <li>Harbourtowne Real Estate</li>
+                <li>Charleston Trident Association of Realtors</li>
+                <li>The College of Charleston</li>
+                <li>Blue Ridge Electric Cooperative</li>
+                <li>Self Regional Healthcare</li>
+                <li>Biotherm Solutions</li>
+              </ul>
+            </div>
+            <div class="col-md-6">
+              <ul class="clients">
+                <li>Pennebaker & Hegedus Films</li>
+                <li>Good and Plenty Records</li>
+                <li>Jerry Moran</li>
+                <li>Holy City Farms</li>
+                <li>Harvard Kennedy School</li>
+                <li>Clemson University;</li>
+                <li>The Chelcum Family Foundation</li>
+                <li>Morris Publishing</li>
+                <li>The State Newspaper </li>
+                <li>GMK Associates</li>
+                <li>Nicholson, Meredith, & Anderson</li>
+              </ul>
+            </div>
           </div>
         </div>
-        <div class="col-lg-1 offset-md-1">
-          
-        </div>
-        <div class="col-lg-9">
-
-        </div>
-        <div class="col-lg-1 next-wrapper">
-
+        <div class="col-lg-4 ps-5">
+          <h5>Experience</h5>
+          <ul class="clients">
+            <li>2005 - David A. Windham Consulting</li>
+            <li>2011 - 2014 Clemson University</li>
+            <li>2009 - 2011 Morris Communications</li>
+            <li>2007 - 2009 Fuzzco Inc.</li>
+            <li>2005 -> Radio Announcer, Wine Sales, Wine Steward, Waiter, Slide Library Manager, Woodworker apprentice, Pizza Delivery, Lifeguard.</li>
+          </ul>
+          <ul class="clients">
+            <li>2003 - College of Charleston - B.A. Fine Arts</li>
+            <li>1993 - Savannah College of Art and Design</li>
+            <li>1991 – Chapin High School</li>
+          </ul>
         </div>
       </div>
     </div>
@@ -472,174 +481,184 @@
 
       <div class="row">
         <div class="col-lg-5 offset-md-1">
-          <div class="service">
-            <i class="pulse"><span></span></i>
-            <div class="numbering">01</div>
-            <h4 class="how">Create, Build, &amp; Host</h4>
-            <p>a new web site or application.</p>
-          </div>
-          <div class="service">
-            <i class="pulse">
-            <span></span>
-            <span></span>
-            </i>
-            <div class="numbering">02</div>
-              <h4 class="how">Audit, Improve, &amp; Repair</h4>
-              <p>an existing web site or application.</p>
+          <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">
+                <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>
+              </a>
             </div>
             <div class="service">
-              <i class="pulse">
-                <span></span>
-                <span></span>
-                <span></span>
-              </i>
-              <div class="numbering">03</div>
-              <h4 class="how">Advise, Consult, &amp; Review</h4>
-              <p>on web site and application best practices.</p>
+              <a class="nav-link" data-bs-toggle="tab" data-bs-target="#audit-tab" type="button" role="tab" aria-controls="audit-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>
+              </a>
             </div>
             <div class="service">
-              <i class="pulse">
-                <span></span>
-                <span></span>
-                <span></span>
-                <span></span>
-              </i>
+              <a class="nav-link" data-bs-toggle="tab" data-bs-target="#consult-tab" type="button" role="tab" aria-controls="consult-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>
+              </a>
             </div>
-          </div>
-          <div class="col-lg-5">
-            <div class="row step">
-              <div class="approach-step">
+            <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">
+                <i class="pulse"><span></span></i>
+                <div class="numbering">04</div>
+                <h4 class="how">Manage</h4>
+                <p>on site and application best practices.</p>
+              </a>
+            </div>
+          </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 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.
-                  Have a project in mind?
+                  in an effort create sustainable and practical applications that work for you.             
                 </p>
-                <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 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>
+            <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 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 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>
-
-                      <h6 class="fw-bold mt-2">Rates:</h6>
-                      <div class="row">
-                        <div class="col-md-4">
-                          <h6>Hourly: $50</h6>
-                          <ul class="pricing">
-                            <li>Design</li>
-                            <li>Development</li>
-                            <li>Consulting</li>
-                            <li>Auditing</li>
-                          </ul>
-                        </div>
-                        <div class="col-md-4">
-                          <h6>Monthly: $25 - $75</h6>
-                          <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">
-                          <h6>Add-ons:( vendor pricing + 10% )</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>
-                          </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>
+      <!-- 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>
 
+              <h6 class="fw-bold mt-2">Rates:</h6>
+              <div class="row">
+                <div class="col-md-4">
+                  <h6>Hourly: $50</h6>
+                  <ul class="pricing">
+                    <li>Design</li>
+                    <li>Development</li>
+                    <li>Consulting</li>
+                    <li>Auditing</li>
+                  </ul>
+                </div>
+                <div class="col-md-4">
+                  <h6>Monthly: $25 - $75</h6>
+                  <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">
+                  <h6>Add-ons:( vendor pricing + 10% )</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>
+                  </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>
+              </div>
 
-        <!-- END:Pricing Modal -->
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- END:Pricing Modal -->
 
     </div>
   </section>