lyout

app/index.html

@@ -9,7 +9,7 @@
 <title>David Windham</title>
 <meta property="og:title" content="David Windham"/>
 <meta property="og:description" content="Something Else"/>
-<meta property="og:type" content="website"/><meta property="og:url" content="https://davidwindham.com"/><meta property="og:site_name" content="David Windham"/><meta property="og:image" content="img/og_image.jpg"/><meta property="fb:app_id" content="203136806559589" /><meta name="twitter:site" content="@windhamdavid"><meta name="twitter:creator" content="@windhamdavid"><meta name="twitter:title" content="David Windham"><meta name="twitter:description" content="Something Else"><meta name="twitter:image" content="img/ogt_image.jpg"><meta name="twitter:card" content="summary_large_image"><link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png"><link rel="manifest" href="img/site.webmanifest"><link rel="mask-icon" href="img/safari-pinned-tab.svg" color="#3f3f3f"><meta name="msapplication-TileColor" content="#000000"><meta name="theme-color" content="#ffffff">
+<meta property="og:type" content="website"/><meta property="og:url" content="https://davidwindham.com"/><meta property="og:site_name" content="David Windham"/><meta property="og:image" content="img/og_image.jpg"/><meta property="fb:app_id" content="203136806559589" /><meta name="twitter:site" content="@windhamdavid"><meta name="twitter:creator" content="@windhamdavid"><meta name="twitter:title" content="David Windham"><meta name="twitter:description" content="Something Else"><meta name="twitter:image" content="img/ogt_image.jpg"><meta name="twitter:card" content="summary_large_image"><link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png"><link rel="manifest" href="img/site.webmanifest"><!--<link rel="mask-icon" href="img/safari-pinned-tab.svg" color="#3f3f3f">--><meta name="msapplication-TileColor" content="#000000"><meta name="theme-color" content="#ffffff">
 <link rel="stylesheet" href="css/dw.css">
 <script type="application/ld+json">
   {
@@ -64,7 +64,7 @@
 <!-- ============================= ** HEADER ** ============================= -->
 <header id="header" class="header" role="banner">
   <div class="header-ui">
-    <div class="brand--nav float-end">
+    <div class="brand--nav text-end">
       <h1>David Windham</h1>
     </div>
   </div>
@@ -92,29 +92,32 @@
 <main id="main" class="main">
  <!-- ============================= ** HELLO ** ============================= -->
 
-  <div id="hello" class="background-color black" data-dark-bg></div>
+  <div id="hello" class="background-color dark" data-dark-bg></div>
   <section class="page-view hero dw-header d-flex align-items-center">
     <div class="container main">
       <div class="row">
-        <div class="col-lg-6">
-          <h1>Hello Internet Visitor</h1>
-          <p class="lead"></p>
-          <h2 class="">I help folks make good use of the web by crafting custom applications and sites.</h2>
+        <div class="col-lg-6 offset-lg-1">
+          <h1 class="mb-4">David A. Windham</h1>
+          <h2>Welcome Good People of the Internet ✌🏼</h2>
+          <p class="lead">What is this</p>
+          <h3 class="">I'm a middle aged fella... developer, designer, programmer, tinkerer, and all around good guy who makes a living trying to help folks make good use of the web by crafting custom sites and applications.</h3>
         </div>
-        <div class="col col-lg-6 align-self-end">
-          <img width="200" src="./img/ddog.png" srcset="./img/ddog.png 2x" alt="David Windham"/>
-          <!--<img width="400" src="./img/dw.svg" srcset="./img/dw.svg 2x" alt="David Windham"/>-->
+        <div class="col col-lg-5 float-end">
+          <img width="200" src="img/ddog.svg" srcset="./img/ddog.svg 2x" alt="David Windham"/>
         </div>
       </div>
     </div>
   </section>
 
 <!-- ============================= ** WHO ** ============================= -->
-  <div id="who" class="background-color white"></div>
+  <div id="who" class="background-color light"></div>
   <section class="page-view hello">
     <div class="container">
       <div class="row">
-        <div class="col-lg-10">
+        <div class="col-lg-4">
+          <img width="400" src="img/dw.svg" srcset="./img/dw.svg 2x" alt="David Windham"/>
+        </div>
+        <div class="col-lg-8 ps-5 pt-5 mt-5">
           <h1>Who?</h1>
           <p class="lead">
             I've been a web developer for almost 20 years.
@@ -123,15 +126,25 @@
             I focus on building custom web applications and
             I treat my development like mechanical works of art.
           </p>
-          <img width="300" src="./img/dw-sig.png" alt="David Windham signature">
-
+          <svg id="signature" x="0px" y="0px" viewBox="0 0 1000 300" width="300">
+            <style type="text/css"> .st0{fill:none;stroke:#535763;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} </style>
+            <g id="daw">
+              <path class="st0" d="M188.28,63.54l25,148c0,0,4.98,30.96-2,33c-6.86,2-36.28-68.04-76-98c-28.32-21.36-111.67-55.04-112-76 C23,52.5,86.83,33.5,193,33.5c28,0,203.19,7.85,192.28,71.04c-18.28,105.96-251.24,177.92-266,164c-4.28-4.04,187-59,187-59 s20.28-6.22,37.08-11.57c11.16-3.55,14.63-0.47,20.92-5.43c4.87-3.85,4.48-10.62-1-8c-8.28,3.96,9.6,7.13,13,6c6-2,13.92,4.45,18,4 c9-1,8.72-7.96,14-8c5.72-0.04,4.06,4.87,10,5c4.6,0.1,22.6-5.11,28-10c2.65-2.4,3.74-9.43,4-13c0.47-6.31-1.1-18.96-3-25 c-2.25-7.17-11.77-36.08-14-36c-1.9,0.07,1.18,37.4,3,43c2.36,7.24,10.14,35.44,14,42c1.72,2.93,5.26,8.98,8,11c1.72,1.27,8,3,8,3" />
+              <polyline class="st0" points="383.28,154.54 381.28,159.54 387.28,157.54 	"/>
+              <path class="st0" d="M554.28,197.54c0,0-50-10-52-7c-3,4.5,12,18,12,18s-2.76-23.76-8.44-49c-6.34-28.17-15.57-58.16-13.56-59 c12-5,59.17,104.23,66,127"/>
+              <line class="st0" x1="572.28" y1="201.54" x2="569.28" y2="198.54"/>
+              <path class="st0" d="M603.28,163.54c0,0-4,5-4,14c0,8.85,11,27,24,26c6.07-0.47,15,0,23-8c3.25-3.25,8.41-12.79,13-13 c4.07-0.19,8.7,8.61,12,11c5.51,3.99,19.31,9.2,26,8c13.25-2.37,35-5,46-28c4.51-9.42,9.33-30.64,8-41 c-2.23-17.33-11.1-53.21-23-66c-13.02-14-28-32-68-35c-11.39-0.85-35.11,5.28-45,11c-2.75,1.59-9,6.82-9,10"/>
+              <polyline class="st0" points="726.28,132.54 727.28,133.54 730.28,131.54 	"/>
+              <path class="st0" d="M739.28,162.54c0,0,6.17,19.8,12,20c3.05,0.11,4.17-8.87,7-10c4.36-1.74,12.66,6.19,17,8 c3.49,1.45,11.34,2.94,15,2c3.7-0.95,7.18-5.95,11-6c2.15-0.03,6.81,3.58,9,3c3.42-0.91,8.54-6.78,10-10 c4.55-10.02,2.15-32.19,0-44c-2.42-13.3-16-57-19-55c-3.72,2.48-0.4,42.4,3,56c1.75,7,10.14,46.8,17.28,52.14 c6.44,4.82,11.72-35.14,11.72-35.14s3.72-26.04,2-26c-3.28,0.08-6,23-6,23s-3,32-2.19,32.57c3.28,2.3,4.19-7.57,7.19-7.57 c2.81,0,4.27,5.75,8,8c5.34,3.22,12.05,5,16,5c8,0,8.85-15,14-15c5,0,15.55,12.97,23,15c11,3,14-11,14-11s21.98,11.25,43,13 c12,1,24-11,24-11s2-2-1-3"/>
+            </g>
+          </svg>
         </div>
       </div>
     </div>
   </section>
 
 <!-- ============================= ** WHAT ** ============================= -->
-  <div id="what" class="background-color black" data-dark-bg></div>
+  <div id="what" class="background-color dark" data-dark-bg></div>
   <section class="page-view capabilities">
     <div class="container">
       <h1 class="what">What?</h1>
@@ -216,7 +229,7 @@
 
 <!-- ============================= ** WHEN ** ============================= -->
 
-  <div id="when" class="background-color white"></div>
+  <div id="when" class="background-color light"></div>
       <section class="page-view when">
         <div class="container">
           <div class="row">
@@ -246,7 +259,7 @@
 
 
 <!-- ============================= ** WHY ** ============================= -->
-  <div id="why" class="background-color black" data-dark-bg></div>
+  <div id="why" class="background-color dark" data-dark-bg></div>
     <div class="page-view why testimonials-section">
       <div class="container">
         <h1 class="why">Why?</h1>
@@ -360,7 +373,7 @@
 
 
 <!-- ============================= ** HOW ** ============================= -->
-  <div id="how" class="background-color white"></div>
+  <div id="how" class="background-color light"></div>
     <section class="page-view services">
       <div class="container">
 
@@ -420,7 +433,7 @@
                   <button type="button" class="btn btn-dark mt-1" data-bs-toggle="modal" data-bs-target="#pricing-modal">
                     Pricing &amp; Cost
                   </button>
-                  <p class="lead mt-5">Have a project in mind?</p>
+                  <p class="lead mt-4">Have a project in mind?</p>
                   <button type="button" class="btn btn-dark mt-1">
                     <a class="text-light" href="mailto:&#100;&#097;&#118;&#105;&#100;&#064;&#100;&#097;&#118;&#105;&#100;&#119;&#105;&#110;&#100;&#104;&#097;&#109;&#046;&#099;&#111;&#109;">Email Me</a>
                   </button>
@@ -435,9 +448,7 @@
               <div class="modal-content">
                 <div class="modal-body">
                   <div class="container-fluid">
-                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
-                      <span aria-hidden="true">&times;</span>
-                    </button>
+                    <button type="button" class="btn-close float-end" data-bs-dismiss="modal" aria-label="Close"></button>
                     <h3 class="modal-title font-weight-bold">Pricing &amp; Costs</h3>
                     <div class="row">
                       <div class="col-md-12">
@@ -489,31 +500,26 @@
                           <div class="col-md-12">
                             <div class="btn-group btn-group-toggle" data-toggle="buttons">
                               <label class="btn btn-light">
-                                <input type="radio" name="options" id="option1" autocomplete="off">
                                 <a href="https://cloud.google.com" target="_blank" rel="noopener">
                                   <img class="vendor-image" src="img/vendor-google.png">
                                 </a>
                               </label>
                               <label class="btn btn-light">
-                                <input type="radio" name="options" id="option2" autocomplete="off">
                                 <a href="https://linode.com" target="_blank" rel="noopener">
                                 <img class="vendor-image" src="img/vendor-linode.png">
                                 </a>
                               </label>
                               <label class="btn btn-light">
-                                <input type="radio" name="options" id="option3" autocomplete="off">
                                 <a href="https://kinsta.com" target="_blank" rel="noopener">
                                 <img class="vendor-image" src="img/vendor-kinsta.png">
                                 </a>
                               </label>
                               <label class="btn btn-light">
-                                <input type="radio" name="options" id="option4" autocomplete="off">
                                 <a href="https://aws.amazon.com" target="_blank" rel="noopener">
                                 <img class="vendor-image" src="img/vendor-amazon.png">
                                 </a>
                               </label>
                               <label class="btn btn-light">
-                                <input type="radio" name="options" id="option5" autocomplete="off">
                                 <a href="https://azure.microsoft.com/" target="_blank" rel="noopener">
                                 <img class="vendor-image" src="img/vendor-microsoft.png">
                                 </a>
@@ -561,21 +567,22 @@
         </div>
       </div>
 
-      <div class="col-lg-2 col-md-4 offset-md-2 mt-5 mt-md-0">
+      <div class="col-lg-2 col-xxs-4 offset-lg-2 mt-5">
         <div class="br-widget">
           <ul class="footer-links">
-            <li><a href="https://davidawindham.com/desk/" rel="me"><i class="icon-pencil"></i>&nbsp; Desk</a></li>          
-            <li><a href="https://davidawindham.com/til/" rel="me"><i class="icon-book"></i>&nbsp; TIL</a></li>
+            <li><a href="https://davidawindham.com/desk/" rel="me"><i class="bi bi-pencil"></i>&nbsp; Desk / Archive</a></li>          
+            <li><a href="https://davidawindham.com/til/" rel="me"><i class="bi bi-journal-bookmark"></i>&nbsp; Today I Learned</a></li>
+            <li><a href="https://davidawindham.com/about/bio" rel="me"><i class="bi bi-person-rolodex"></i>&nbsp; Biography</a></li>
           </ul>
         </div>
       </div>
 
-      <div class="col-lg-2 col-md-4 mt-5 mt-md-0">
+      <div class="col-lg-2 col-xxs-4 mt-5">
         <div class="br-widget">
-          <ul class="footer-links">
-            <li><a href="https://davidawindham.com/cv/" rel="me"><i class="icon-docs"></i>&nbsp; CV</a></li>
-            <li><a href="https://code.davidawindham.com/" rel="me"><i class="icon-file-code"></i>&nbsp; Code</a></li>
-            <li><a href="https://davidwindham.com/davidwindham.asc" rel="me"><i class="icon-folder-open-empty"></i>&nbsp; Key</a></li>
+          <ul class="footer-links text-lg-end">
+            <li><a href="https://davidawindham.com/cv/" rel="me"><i class="bi bi-file-earmark-person-fill"></i>&nbsp; CV</a></li>
+            <li><a href="https://code.davidawindham.com/" rel="me"><i class="bi bi-journal-code"></i>&nbsp; Code</a></li>
+            <li><a href="https://davidwindham.com/davidwindham.asc" rel="me"><i class="bi bi-key"></i>&nbsp; Key</a></li>
           </ul>
         </div>
       </div>
@@ -583,16 +590,19 @@
 
     <div class="footer-end">
       <div class="row">
-        <div class="col-md-6 text-center text-md-left">
+        <div class="col-md-6 text-md-left">
           &copy; 2004-2023
         </div>
-        <div class="col-md-6 text-center text-md-right">
+        <div class="col-md-6 text-end">
           <ul class="footer-links footer-social list-inline">
-            <li class="list-inline-item"><a href="https://twitter.com/windhamdavid" class="twitter" rel="me"><i class="bi bi-twitter"></i></a></li>
-            <li class="list-inline-item"><a href="https://github.com/windhamdavid" class="github" rel="me"><i class="icon-github"></i></a></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>
-            <li class="list-inline-item"><a href="https://www.facebook.com/windhamdavid" class="facebook"><i class="icon-facebook"></i></a></li>
-            
+            <li class="list-inline-item"><a href="https://twitter.com/windhamdavid" class="twitter" rel="me"><i class="bi bi-twitter"></i></a></li>
+            <li class="list-inline-item"><a href="https://github.com/windhamdavid" class="github" rel="me"><i class="bi bi-github"></i></a></li>
+            <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://www.linkedin.com/in/windhamdavid" class="linkedin" rel="me"><i class="bi bi-linkedin"></i></a></li>
           </ul>
         </div>
       </div>

css/styles.scss

@@ -1,30 +1,49 @@
-/* ########################################
-########### davidwindham.com ##############
-###########################################
+/***********************************************************
+############################################################
+
 	     .     . .              .       .  .
 	. . ...-..-| |-. .-. .-.-..-| .-.. ...-|
 	 ` ` '' '`-'-' '-`-`-' ' '`-'-`-`-` '`-'-
-1 - Body
-2 - Typography
-3 - Header
-4 - Navigation
-5 - Layout
-6 - Parts
-7 - Footer
-9 - Queries
-10 - Fonts
 
 url - https://davidwindham.com
 git - https://github.com/windhamdavid/dw
 
+############################################################
+************************************************************/
+
+/***********************************************************
+################### Bootstrap Functions ####################
+************************************************************/
+
+@import '../node_modules/bootstrap/scss/functions';
+@import '../node_modules/bootstrap/scss/variables';
+@import '../node_modules/bootstrap/scss/mixins';
+@import '../node_modules/bootstrap/scss/maps';
+
 
-/*########################################
-################# BODY ###################
-#########################################*/
+/***********************************************************
+####################### Custom  ############################
+************************************************************/
 
-$body-bg: #2b3444;
+$body-bg: #d3d3d3;
 $body-color: #232323;
+$link-color: #67000a;
+$theme-colors: (
+  "dark": #535763,
+);
+
+$custom-colors: (
+  'dw-blue-dark': #484C57,
+  'dw-blue':#535763,
+);
 
+$theme-colors: map-merge($theme-colors, $custom-colors);
+$theme-colors: map-remove($theme-colors, 'primary','secondary','success','warning', 'danger', 'info');
+$colors: map-remove($colors, 'white','black','gray','gray-dark','dark','blue','indigo','purple','pink', 'red', 'orange', 'yellow', 'green', 'teal', 'cyan');
+$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
+$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");
 
 /***********************************************************
 ################## Bootstrap Complete ######################
@@ -75,4 +94,10 @@ $body-color: #232323;
 ################### Bootstrap Icons ########################
 ************************************************************/
 
-@import '../node_modules/bootstrap-icons/font/bootstrap-icons';
+@import '../node_modules/bootstrap-icons/font/bootstrap-icons';
+
+@font-face {
+  font-display: block;
+  font-family: "bootstrap-icons";
+  src: url("/fonts/bootstrap-icons.woff2?24e3eb84d0bcaf83d77f904c78ac1f47") format("woff2"), url("./fonts/bootstrap-icons.woff?24e3eb84d0bcaf83d77f904c78ac1f47") format("woff");
+}

index.html

@@ -68,7 +68,7 @@
 <!-- ============================= ** HEADER ** ============================= -->
 <header id="header" class="header" role="banner">
   <div class="header-ui">
-    <div class="brand--nav float-end">
+    <div class="brand--nav text-end">
       <h1>David Windham</h1>
     </div>
   </div>
@@ -96,29 +96,30 @@
 <main id="main" class="main">
  <!-- ============================= ** HELLO ** ============================= -->
 
-  <div id="hello" class="background-color black" data-dark-bg></div>
-  <section class="page-view hero dw-header d-flex align-items-center">
-    <div class="container main">
+  <div id="hello" class="background-color dark" data-dark-bg></div>
+  <section class="page-view hello dw-header d-flex align-items-center">
+    <div class="container">
       <div class="row">
-        <div class="col-lg-6">
-          <h1>Hello ✌🏼 Internet Visitor</h1>
-          <p class="lead"></p>
-          <h3 class="">I help folks make good use of the web by crafting custom applications and sites.</h3>
+        <div class="col-lg-6 offset-lg-1">
+          <h1 class="mb-4">David A. Windham</h1>
+          <h2>Welcome Good People of the Internet ✌🏼</h2>
+          <p class="lead">What is this</p>
+          <h3 class="">I'm a middle aged fella... developer, designer, programmer, tinkerer, and all around good guy who makes a living trying to help folks make good use of the web by crafting custom sites and applications.</h3>
         </div>
-        <div class="col col-lg-6 float-end">
-          <img width="200" src="./img/ddog.png" srcset="./img/ddog.png 2x" alt="David Windham"/>
+        <div class="col col-lg-5 float-end">
+          <img width="200" src="img/ddog.svg" srcset="./img/ddog.svg 2x" alt="David Windham"/>
         </div>
       </div>
     </div>
   </section>
 
 <!-- ============================= ** WHO ** ============================= -->
-  <div id="who" class="background-color white"></div>
-  <section class="page-view hello">
+  <div id="who" class="background-color light"></div>
+  <section class="page-view who">
     <div class="container">
       <div class="row">
         <div class="col-lg-4">
-          <img width="400" src="./img/dw.svg" srcset="./img/dw.svg 2x" alt="David Windham"/>
+          <img width="400" src="img/dw.svg" srcset="./img/dw.svg 2x" alt="David Windham"/>
         </div>
         <div class="col-lg-8 ps-5 pt-5 mt-5">
           <h1>Who?</h1>
@@ -141,16 +142,14 @@
               <path class="st0" d="M739.28,162.54c0,0,6.17,19.8,12,20c3.05,0.11,4.17-8.87,7-10c4.36-1.74,12.66,6.19,17,8 c3.49,1.45,11.34,2.94,15,2c3.7-0.95,7.18-5.95,11-6c2.15-0.03,6.81,3.58,9,3c3.42-0.91,8.54-6.78,10-10 c4.55-10.02,2.15-32.19,0-44c-2.42-13.3-16-57-19-55c-3.72,2.48-0.4,42.4,3,56c1.75,7,10.14,46.8,17.28,52.14 c6.44,4.82,11.72-35.14,11.72-35.14s3.72-26.04,2-26c-3.28,0.08-6,23-6,23s-3,32-2.19,32.57c3.28,2.3,4.19-7.57,7.19-7.57 c2.81,0,4.27,5.75,8,8c5.34,3.22,12.05,5,16,5c8,0,8.85-15,14-15c5,0,15.55,12.97,23,15c11,3,14-11,14-11s21.98,11.25,43,13 c12,1,24-11,24-11s2-2-1-3"/>
             </g>
           </svg>
-          <!--<img width="300" src="./img/dw-sig.png" alt="David Windham signature">-->
-
         </div>
       </div>
     </div>
   </section>
 
 <!-- ============================= ** WHAT ** ============================= -->
-  <div id="what" class="background-color black" data-dark-bg></div>
-  <section class="page-view capabilities">
+  <div id="what" class="background-color dark" data-dark-bg></div>
+  <section class="page-view what">
     <div class="container">
       <h1 class="what">What?</h1>
       <h2 class="what">My Capabilities</h2>
@@ -234,7 +233,7 @@
 
 <!-- ============================= ** WHEN ** ============================= -->
 
-  <div id="when" class="background-color white"></div>
+  <div id="when" class="background-color light"></div>
       <section class="page-view when">
         <div class="container">
           <div class="row">
@@ -264,7 +263,7 @@
 
 
 <!-- ============================= ** WHY ** ============================= -->
-  <div id="why" class="background-color black" data-dark-bg></div>
+  <div id="why" class="background-color dark" data-dark-bg></div>
     <div class="page-view why testimonials-section">
       <div class="container">
         <h1 class="why">Why?</h1>
@@ -378,7 +377,7 @@
 
 
 <!-- ============================= ** HOW ** ============================= -->
-  <div id="how" class="background-color white"></div>
+  <div id="how" class="background-color light"></div>
     <section class="page-view services">
       <div class="container">
 
@@ -438,7 +437,7 @@
                   <button type="button" class="btn btn-dark mt-1" data-bs-toggle="modal" data-bs-target="#pricing-modal">
                     Pricing &amp; Cost
                   </button>
-                  <p class="lead mt-5">Have a project in mind?</p>
+                  <p class="lead mt-4">Have a project in mind?</p>
                   <button type="button" class="btn btn-dark mt-1">
                     <a class="text-light" href="mailto:&#100;&#097;&#118;&#105;&#100;&#064;&#100;&#097;&#118;&#105;&#100;&#119;&#105;&#110;&#100;&#104;&#097;&#109;&#046;&#099;&#111;&#109;">Email Me</a>
                   </button>
@@ -453,9 +452,7 @@
               <div class="modal-content">
                 <div class="modal-body">
                   <div class="container-fluid">
-                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
-                      <span aria-hidden="true">&times;</span>
-                    </button>
+                    <button type="button" class="btn-close float-end" data-bs-dismiss="modal" aria-label="Close"></button>
                     <h3 class="modal-title font-weight-bold">Pricing &amp; Costs</h3>
                     <div class="row">
                       <div class="col-md-12">
@@ -507,31 +504,26 @@
                           <div class="col-md-12">
                             <div class="btn-group btn-group-toggle" data-toggle="buttons">
                               <label class="btn btn-light">
-                                <input type="radio" name="options" id="option1" autocomplete="off">
                                 <a href="https://cloud.google.com" target="_blank" rel="noopener">
                                   <img class="vendor-image" src="img/vendor-google.png">
                                 </a>
                               </label>
                               <label class="btn btn-light">
-                                <input type="radio" name="options" id="option2" autocomplete="off">
                                 <a href="https://linode.com" target="_blank" rel="noopener">
                                 <img class="vendor-image" src="img/vendor-linode.png">
                                 </a>
                               </label>
                               <label class="btn btn-light">
-                                <input type="radio" name="options" id="option3" autocomplete="off">
                                 <a href="https://kinsta.com" target="_blank" rel="noopener">
                                 <img class="vendor-image" src="img/vendor-kinsta.png">
                                 </a>
                               </label>
                               <label class="btn btn-light">
-                                <input type="radio" name="options" id="option4" autocomplete="off">
                                 <a href="https://aws.amazon.com" target="_blank" rel="noopener">
                                 <img class="vendor-image" src="img/vendor-amazon.png">
                                 </a>
                               </label>
                               <label class="btn btn-light">
-                                <input type="radio" name="options" id="option5" autocomplete="off">
                                 <a href="https://azure.microsoft.com/" target="_blank" rel="noopener">
                                 <img class="vendor-image" src="img/vendor-microsoft.png">
                                 </a>
@@ -579,20 +571,21 @@
         </div>
       </div>
 
-      <div class="col-lg-2 col-md-4 offset-md-2 mt-5 mt-md-0">
+      <div class="col-lg-2 col-xxs-4 offset-lg-2 mt-5">
         <div class="br-widget">
           <ul class="footer-links">
-            <li><a href="https://davidawindham.com/desk/" rel="me"><i class="bi bi-pencil"></i>&nbsp; Desk</a></li>          
-            <li><a href="https://davidawindham.com/til/" rel="me"><i class="icon-book"></i>&nbsp; TIL</a></li>
+            <li><a href="https://davidawindham.com/desk/" rel="me"><i class="bi bi-pencil"></i>&nbsp; Desk / Archive</a></li>          
+            <li><a href="https://davidawindham.com/til/" rel="me"><i class="bi bi-journal-bookmark"></i>&nbsp; Today I Learned</a></li>
+            <li><a href="https://davidawindham.com/about/bio" rel="me"><i class="bi bi-person-rolodex"></i>&nbsp; Biography</a></li>
           </ul>
         </div>
       </div>
 
-      <div class="col-lg-2 col-md-4 mt-5 mt-md-0">
+      <div class="col-lg-2 col-xxs-4 mt-5">
         <div class="br-widget">
-          <ul class="footer-links">
-            <li><a href="https://davidawindham.com/cv/" rel="me"><i class="icon-docs"></i>&nbsp; CV</a></li>
-            <li><a href="https://code.davidawindham.com/" rel="me"><i class="icon-file-code"></i>&nbsp; Code</a></li>
+          <ul class="footer-links text-lg-end">
+            <li><a href="https://davidawindham.com/cv/" rel="me"><i class="bi bi-file-earmark-person-fill"></i>&nbsp; CV</a></li>
+            <li><a href="https://code.davidawindham.com/" rel="me"><i class="bi bi-journal-code"></i>&nbsp; Code</a></li>
             <li><a href="https://davidwindham.com/davidwindham.asc" rel="me"><i class="bi bi-key"></i>&nbsp; Key</a></li>
           </ul>
         </div>
@@ -609,8 +602,9 @@
             <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>
             <li class="list-inline-item"><a href="https://twitter.com/windhamdavid" class="twitter" rel="me"><i class="bi bi-twitter"></i></a></li>
             <li class="list-inline-item"><a href="https://github.com/windhamdavid" class="github" rel="me"><i class="bi bi-github"></i></a></li>
+            <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://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://www.linkedin.com/in/windhamdavid" class="linkedin" rel="me"><i class="bi bi-linkedin"></i></a></li>
           </ul>

js/_init.js

@@ -56,7 +56,7 @@ document.addEventListener('DOMContentLoaded', function() {
     headerToolbar: {
       start: 'title',
       center: '',
-      end: 'list,dayGridMonth,timeGridWeek,prev,next'
+      end: 'list,timeGridWeek,dayGridMonth,prev,next'
     },
     buttonText: {
       list:'day'
@@ -74,6 +74,16 @@ document.addEventListener('DOMContentLoaded', function() {
         hiddenDays: [ 0,6,7 ]
       },
     },
+    displayEventEnd: {
+      month: true,
+      basicWeek: true,
+      "default": true
+    },
+    stickyHeaderDates: false,
+    eventDataTransform: function(event) {
+      event.url = "";
+      return event;
+    },
     firstDay : 1,
     //defaultView: 'dayGridMonth',
     googleCalendarApiKey: 'AIzaSyAGowGJYx6dOaQvG_vSUI73uT88VWOTcNQ',
@@ -158,7 +168,6 @@ function waypoints() {
   function manageSize() {
     isSmallWindow = $window.width() <= 620;
   }
-
   function manageBackground($element) {
     var $colorSource = $element.prev('.background-color'),
     bgClass = false, hasGradient, background, gradient;
@@ -167,7 +176,7 @@ function waypoints() {
       bgClass = $colorSource[0].hasAttribute('data-dark-bg') ? 'dark-bg' : 'light-bg';
       background = $colorSource.css('background-color');
       $body.css('background', background);
-      $html.css('background', background);
+      //$html.css('background', background);
       $body.attr('bg', bgClass);
       $headerSmall.css('color', background);
     }
@@ -281,13 +290,13 @@ function waypoint_init() {
     }
   };
 
-  $.fn.scrollEnd = function (callback, timeout) {
-    $(this).scroll(function () {
-      var $this = $(this);
-      if ($this.data('scrollTimeout')) {
-          clearTimeout($this.data('scrollTimeout'));
-      }
-      $this.data('scrollTimeout', setTimeout(callback, timeout));
-    });
-  };
+//  $.fn.scrollEnd = function (callback, timeout) {
+//    $(this).scroll(function () {
+//      var $this = $(this);
+//      if ($this.data('scrollTimeout')) {
+//          clearTimeout($this.data('scrollTimeout'));
+//      }
+//      $this.data('scrollTimeout', setTimeout(callback, timeout));
+//    });
+//  };
 }