zw logo

app/index.html

@@ -96,6 +96,7 @@
 
  <!-- ============================= ** MAIN ** ============================= -->
 <main id="main" class="main">
+
  <!-- ============================= ** HELLO ** ============================= -->
   <div id="hello" class="background-color dark" data-dark-bg></div>
   <section class="page-view hello d-flex align-items-center">
@@ -105,14 +106,27 @@
         <div class="col-lg-8 offset-lg-2">
           <h2 class="mb-2">David A. Windham</h2>
           <p>( 1973 - )</p>
-          <h3>Welcome Good People of the Internet,</h3>
-          <p class="lead">I'm glad you dropped in. 
-            I've got a computer and I'm fairly clever... 
-            so here you are on the website I made for my business. 
-            The web was inherently social long before the media part,
-            so please feel free to test it out.         
+          <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 I'm a one man show.
+            I published this site as a professional overview so I can opine away on my personal site and not look like a weirdo to potential clients.
+ 
+            <br><br>
+            Right on,
           </p>
-
+          <svg class="img-fluid"id="signature" x="0px" y="0px" viewBox="0 0 1000 300" width="300">
+            <style type="text/css"> .st0{fill:none;stroke:#9c9ea5;stroke-width:5;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>
@@ -124,29 +138,20 @@
     <div class="container">
       <div class="row">
         <div class="col-lg-3 mt-5">
-          <img class="mt-5 float-end" width="100" src="img/ddog.svg" srcset="./img/ddog.svg 2x" alt="David Windham">
+          <img class="mt-5 float-end" width="180" src="img/dw-dog.svg" srcset="./img/dw-dog.svg 2x" alt="David Windham">
+          <p class="mt-1 ps-5 gaegu illustration small float-end">
+            I use this for my profile everywhere. It started off as the backside of a rabbit based on a Japanese Woodblock print.
+          </p>
         </div>
         <div class="col-lg-7 ps-5 pt-5">
           <h2>Who?</h2>
           <p class="lead">
-            I've been a web developer for almost 20 years.
-            I have a BA in Studio Art from The College of Charleston.
+            I've been a developer for almost 20 years.
+            I have a BA in Studio Art from The College of Charleston which is where I first got started publishing websites.
             I've worked in advertising, publishing, education, and an assortment of businesses for clients.
-            I focus on building custom web applications and I treat my development like mechanical works of art.
-            I try to help folks make good use of software and the web by crafting custom applications.
+            I try to help folks make practical software decisions and good use of the web by crafting custom applications.
           </p>
-          <svg class="img-fluid"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>
@@ -156,21 +161,48 @@
   <div id="what" class="background-color dark" data-dark-bg></div>
   <section class="page-view what">
     <div class="container">
-
-      <div class="col-lg-10 offset-lg-1">
-        <div class="row">
+      <div class="row">
+        <div class="col-lg-7 offset-lg-1">   
           <h2>What?</h2>
-          
           <p class="lead">
             Although solving challenging technical puzzles pays the bills,
-            I like to say that all I do is search for answers on the internet and read the instructions.
-            Aside from the list below, I'm also open to booking my time for any sort of research, brain storming, or any other endeavors.
+            I like to say that all I do is search for answers on the internet and read the documentation.
+            I'm detail oriented, productive, and creative. 
+            Aside from the list below, I'm open to booking my time for any sort of research, brain storming, or other endeavors.
+          </p>
+        </div>
+        <div class="col-lg-3 mt-5">
+          <a class="btn btn-primary zw-logo" data-bs-toggle="modal" data-bs-target="#zw-card-modal">
+            <svg id="ZW" width="80" class="img-fluid" x="0px" y="0px" viewBox="0 0 249 249">
+              <path class="st0" d="M124.5,0C55.7,0,0,55.7,0,124.5S55.7,249,124.5,249S249,193.3,249,124.5S193.3,0,124.5,0z M124.1,231.5 c-15.2,0-39.4,2.8-39.4,2.8s13.8-13.1,26.6-38.8c10.7-21.5,13.2-41.9,13.2-41.9v0c0,0,3.2,22.5,12.2,41.5 c12.3,25.9,27.6,39.6,27.6,39.6S139.3,231.5,124.1,231.5z M191.6,186.1c-42.3,0-59.1-27.6-64-43.2c-3-14.5-0.1-13.8-0.1-13.8 c3.5,1.5,14.7,26.7,34.9,16.5c7.8-3.9,10.1-16.6,6-26.9c-6.7-16.8-19.3-19.2-36.7-40.4c-6.6-8-7.8-13.2-7.8-13.2s-1.4,5.3-8.2,13.6 c-17.8,21.6-29.7,23.3-36,40.3c-3.6,9.6-1.7,22.5,5.2,26.3c21.1,11.7,32.5-14.5,35.6-16.1c0,0,2.1-0.7,0,13.9 c-3.9,15.4-26.8,43.9-61,43.5C22.2,186.1,8,165.8,6.8,132.4c-0.6-17,9.2-49.8,48.8-51c15.2-0.4,29,8.2,29,8.2S72.1,75.8,71.8,55 c-0.4-29.5,24.5-50.1,54-50.1s52.2,23.2,52.4,47.9c0.2,20.7-12.6,36.9-12.6,36.9s11.7-8.4,28.6-8.4c26,0,47.7,20.1,48.1,50l0,0 C242.6,155.7,225.8,186.1,191.6,186.1z"/>
+            </svg>
+          </a>
+          <p class="mt-3 ps-5 gaegu illustration-dark small float-start">
+            This is the icon I use everywhere. It came from a card I designed for my business name. Click to see the original.
           </p>
-          <h3>My Capabilities</h3>
         </div>
       </div>
 
-      <div class="row mt-2 capabilities">
+      <!-- ** ZW CARD ** -->
+      <div id="zw-card-modal" class="modal fade" tabindex="-1" aria-labelledby="zw-card-modal" aria-hidden="true">
+        <div class="modal-dialog">
+          <div class="modal-content">
+            <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" />
+                  </div> 
+                  <div class="back">
+                    <img onclick="flip()" src="img/card.png" alt="zeken woozer card back"> 
+                  </div> 
+                </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- ** ZW CARD ** -->
+
+      <div class="row mt-4 capabilities">
         <div class="col-lg-10 offset-lg-1">
           <div class="row">
             <div class="col-md-4">
@@ -272,8 +304,12 @@
   <section class="page-view why testimonials-section">
     <div class="container">
       <div class="row mb-3">
-        <div class="col-lg-1 offset-md-1">
+        <div class="col-lg-10 offset-md-1">
           <h2 class="why">Why?</h2>
+          <p class="lead">
+            I used to view 'business' as a competition, but I've learned to look at it as a collaboration.
+            I looking a good match in my clients.     
+          </p>
         </div>
       </div>
       <div class="row">
@@ -569,7 +605,6 @@
 <footer id="dw-footer" class="dw-footer">
   <div class="container">
     <div class="row">
-
       <div class="col-lg-6 col-md-4">
         <div class="br-widget">
           <h5>David Windham</h5>
@@ -604,14 +639,27 @@
       </div>
     </div>
 
-    <div class="footer-end">
+    <div class="row">
+      <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>
+        </ol>
+      </div>
+    </div>
+
+  <div class="footer-end">
+    <div class="container">
       <div class="row">
         <div class="col-md-6 text-md-left">
           &copy; 2004-2023<br>
           <small>Updated: 11/28/22</small>
         </div>
         <div class="col-md-6 text-end">
-          <ul class="footer-links footer-social list-inline">    
+          The web was inherently social long before the<br> media part, so please feel free to test it out.
+          <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>
             <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>

css/style.css

@@ -211,7 +211,9 @@ h2.intro {
   letter-spacing: .01em;
 }
 
-
+.gaegu {
+  font-family: 'Gaegu', serif;
+}
 
 h1.when {
   font-weight: 800;
@@ -249,7 +251,12 @@ h5.modal-title {
 h6.modal {
   color: #535763 !important;
 }
-
+.illustration-light {
+  color: #000 !important
+}
+.illustration-dark {
+  color: rgb(255, 255, 255) !important
+}
 .numbering {
   display: inline-block;
   margin-right: .5rem;
@@ -717,6 +724,103 @@ h6.modal {
   padding-left: 1rem;
 }
 
+/*########################################
+################# CARD ###################
+#########################################*/
+.zw-logo svg path {
+  fill:rgb(36, 36, 36);
+  stroke:transparent;
+}
+.zw-logo svg path {
+  stroke:transparent;
+}
+.zw-logo svg:hover path {
+  fill:#e3e3e363;
+}
+.modal {
+  text-align: center;
+}
+.modal:before {
+  display: inline-block;
+  vertical-align: middle;
+  content: " ";
+  height: 100%;
+}
+.modal-dialog {
+  display: inline-block;
+  text-align: left;
+  vertical-align: middle;
+}
+.modal-body {
+  padding:0 !important;
+  background:transparent !important;
+}
+.modal-content {
+  background:transparent !important;
+}
+.modal-dialog{
+  width:auto;
+}
+.panel {
+	width: 301px;
+	height: 401px;
+	position: relative;
+	font-size: .8em;	
+	-webkit-perspective: 600;
+}
+.panel .front {
+  float: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 900;
+  width: inherit;
+  height: inherit;
+  text-align: center;
+  box-shadow: 0 1px 5px rgba(0,0,0,0.9);
+  -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.9);
+  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.9);
+  -webkit-transform: rotateY(0deg);
+  -webkit-transform-style: preserve-3d;
+  -webkit-backface-visibility: hidden;
+  transition: all .4s ease-in-out;
+  -moz-transition: all .4s ease-in-out;
+  -webkit-transition: all .4s ease-in-out;
+}
+.panel.flip .front {
+  z-index: 900;
+  border-color: #eee;
+  -webkit-transform: rotateY(180deg);
+  box-shadow: 0 15px 50px rgba(0,0,0,0.2);
+  -moz-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
+  -webkit-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
+}	
+.panel .back {
+  float: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 800;
+  width: inherit;
+  height: inherit;
+  text-shadow: 1px  1px 1px rgba(0,0,0,0.6); 			
+  -webkit-transform: rotateY(-180deg);
+  -webkit-transform-style: preserve-3d;
+  -webkit-backface-visibility: hidden;
+  transition: all .4s ease-in-out;
+  -moz-transition: all .4s ease-in-out;
+  -webkit-transition: all .4s ease-in-out;
+}	
+.panel.flip .back {
+  z-index: 1000;	
+  -webkit-transform: rotateY(0deg);
+  box-shadow: 0 15px 50px rgba(0,0,0,0.2);
+  -moz-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
+  -webkit-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
+}
+
+
+
 .services,
 .approach {
   padding-bottom: 10rem;
@@ -1660,4 +1764,17 @@ blockquote {
     url('/fonts/playfair-display-v20-latin-700italic.svg#PlayfairDisplay') format('svg');
   /* Legacy iOS */
   font-display: swap;
+}
+
+@font-face {
+  font-family: 'Gaegu';
+  font-style: normal;
+  font-weight: 300;
+  src: url('/fonts/gaegu-v15-latin-300.eot'); /* IE9 Compat Modes */
+  src: local(''),
+       url('/fonts/gaegu-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('/fonts/gaegu-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
+       url('/fonts/gaegu-v15-latin-300.woff') format('woff'), /* Modern Browsers */
+       url('/fonts/gaegu-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
+       url('/fonts/gaegu-v15-latin-300.svg#Gaegu') format('svg'); /* Legacy iOS */
 }

index.html

@@ -100,6 +100,7 @@
 
  <!-- ============================= ** MAIN ** ============================= -->
 <main id="main" class="main">
+
  <!-- ============================= ** HELLO ** ============================= -->
   <div id="hello" class="background-color dark" data-dark-bg></div>
   <section class="page-view hello d-flex align-items-center">
@@ -109,14 +110,27 @@
         <div class="col-lg-8 offset-lg-2">
           <h2 class="mb-2">David A. Windham</h2>
           <p>( 1973 - )</p>
-          <h3>Welcome Good People of the Internet,</h3>
-          <p class="lead">I'm glad you dropped in. 
-            I've got a computer and I'm fairly clever... 
-            so here you are on the website I made for my business. 
-            The web was inherently social long before the media part,
-            so please feel free to test it out.         
+          <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 I'm a one man show.
+            I published this site as a professional overview so I can opine away on my personal site and not look like a weirdo to potential clients.
+ 
+            <br><br>
+            Right on,
           </p>
-
+          <svg class="img-fluid"id="signature" x="0px" y="0px" viewBox="0 0 1000 300" width="300">
+            <style type="text/css"> .st0{fill:none;stroke:#9c9ea5;stroke-width:5;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>
@@ -128,29 +142,20 @@
     <div class="container">
       <div class="row">
         <div class="col-lg-3 mt-5">
-          <img class="mt-5 float-end" width="100" src="img/ddog.svg" srcset="./img/ddog.svg 2x" alt="David Windham">
+          <img class="mt-5 float-end" width="180" src="img/dw-dog.svg" srcset="./img/dw-dog.svg 2x" alt="David Windham">
+          <p class="mt-1 ps-5 gaegu illustration small float-end">
+            I use this for my profile everywhere. It started off as the backside of a rabbit based on a Japanese Woodblock print.
+          </p>
         </div>
         <div class="col-lg-7 ps-5 pt-5">
           <h2>Who?</h2>
           <p class="lead">
-            I've been a web developer for almost 20 years.
-            I have a BA in Studio Art from The College of Charleston.
+            I've been a developer for almost 20 years.
+            I have a BA in Studio Art from The College of Charleston which is where I first got started publishing websites.
             I've worked in advertising, publishing, education, and an assortment of businesses for clients.
-            I focus on building custom web applications and I treat my development like mechanical works of art.
-            I try to help folks make good use of software and the web by crafting custom applications.
+            I try to help folks make practical software decisions and good use of the web by crafting custom applications.
           </p>
-          <svg class="img-fluid"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>
@@ -160,21 +165,48 @@
   <div id="what" class="background-color dark" data-dark-bg></div>
   <section class="page-view what">
     <div class="container">
-
-      <div class="col-lg-10 offset-lg-1">
-        <div class="row">
+      <div class="row">
+        <div class="col-lg-7 offset-lg-1">   
           <h2>What?</h2>
-          
           <p class="lead">
             Although solving challenging technical puzzles pays the bills,
-            I like to say that all I do is search for answers on the internet and read the instructions.
-            Aside from the list below, I'm also open to booking my time for any sort of research, brain storming, or any other endeavors.
+            I like to say that all I do is search for answers on the internet and read the documentation.
+            I'm detail oriented, productive, and creative. 
+            Aside from the list below, I'm open to booking my time for any sort of research, brain storming, or other endeavors.
+          </p>
+        </div>
+        <div class="col-lg-3 mt-5">
+          <a class="btn btn-primary zw-logo" data-bs-toggle="modal" data-bs-target="#zw-card-modal">
+            <svg id="ZW" width="80" class="img-fluid" x="0px" y="0px" viewBox="0 0 249 249">
+              <path class="st0" d="M124.5,0C55.7,0,0,55.7,0,124.5S55.7,249,124.5,249S249,193.3,249,124.5S193.3,0,124.5,0z M124.1,231.5 c-15.2,0-39.4,2.8-39.4,2.8s13.8-13.1,26.6-38.8c10.7-21.5,13.2-41.9,13.2-41.9v0c0,0,3.2,22.5,12.2,41.5 c12.3,25.9,27.6,39.6,27.6,39.6S139.3,231.5,124.1,231.5z M191.6,186.1c-42.3,0-59.1-27.6-64-43.2c-3-14.5-0.1-13.8-0.1-13.8 c3.5,1.5,14.7,26.7,34.9,16.5c7.8-3.9,10.1-16.6,6-26.9c-6.7-16.8-19.3-19.2-36.7-40.4c-6.6-8-7.8-13.2-7.8-13.2s-1.4,5.3-8.2,13.6 c-17.8,21.6-29.7,23.3-36,40.3c-3.6,9.6-1.7,22.5,5.2,26.3c21.1,11.7,32.5-14.5,35.6-16.1c0,0,2.1-0.7,0,13.9 c-3.9,15.4-26.8,43.9-61,43.5C22.2,186.1,8,165.8,6.8,132.4c-0.6-17,9.2-49.8,48.8-51c15.2-0.4,29,8.2,29,8.2S72.1,75.8,71.8,55 c-0.4-29.5,24.5-50.1,54-50.1s52.2,23.2,52.4,47.9c0.2,20.7-12.6,36.9-12.6,36.9s11.7-8.4,28.6-8.4c26,0,47.7,20.1,48.1,50l0,0 C242.6,155.7,225.8,186.1,191.6,186.1z"/>
+            </svg>
+          </a>
+          <p class="mt-3 ps-5 gaegu illustration-dark small float-start">
+            This is the icon I use everywhere. It came from a card I designed for my business name. Click to see the original.
           </p>
-          <h3>My Capabilities</h3>
         </div>
       </div>
 
-      <div class="row mt-2 capabilities">
+      <!-- ** ZW CARD ** -->
+      <div id="zw-card-modal" class="modal fade" tabindex="-1" aria-labelledby="zw-card-modal" aria-hidden="true">
+        <div class="modal-dialog">
+          <div class="modal-content">
+            <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" />
+                  </div> 
+                  <div class="back">
+                    <img onclick="flip()" src="img/card.png" alt="zeken woozer card back"> 
+                  </div> 
+                </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- ** ZW CARD ** -->
+
+      <div class="row mt-4 capabilities">
         <div class="col-lg-10 offset-lg-1">
           <div class="row">
             <div class="col-md-4">
@@ -276,8 +308,12 @@
   <section class="page-view why testimonials-section">
     <div class="container">
       <div class="row mb-3">
-        <div class="col-lg-1 offset-md-1">
+        <div class="col-lg-10 offset-md-1">
           <h2 class="why">Why?</h2>
+          <p class="lead">
+            I used to view 'business' as a competition, but I've learned to look at it as a collaboration.
+            I looking a good match in my clients.     
+          </p>
         </div>
       </div>
       <div class="row">
@@ -573,7 +609,6 @@
 <footer id="dw-footer" class="dw-footer">
   <div class="container">
     <div class="row">
-
       <div class="col-lg-6 col-md-4">
         <div class="br-widget">
           <h5>David Windham</h5>
@@ -608,14 +643,27 @@
       </div>
     </div>
 
-    <div class="footer-end">
+    <div class="row">
+      <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>
+        </ol>
+      </div>
+    </div>
+
+  <div class="footer-end">
+    <div class="container">
       <div class="row">
         <div class="col-md-6 text-md-left">
           &copy; 2004-2023<br>
           <small>Updated: 11/28/22</small>
         </div>
         <div class="col-md-6 text-end">
-          <ul class="footer-links footer-social list-inline">    
+          The web was inherently social long before the<br> media part, so please feel free to test it out.
+          <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>
             <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>

js/_init.js

@@ -28,11 +28,17 @@ window.onload = function () {
   header();
   hamburger();
   parallax();
+  flip();
   waypoint_init();
   waypoints();
   why();
 };
 
+function flip() {
+  var card = document.getElementById('zw-card');
+  card.classList.toggle('flip');
+}
+
 
 function header() {
   var $window = $(window),