|
|
@@ -11,7 +11,7 @@
|
|
|
<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">
|
|
|
<!-- build:css css/dw.css -->
|
|
|
-<link rel="stylesheet" href="./css/fullcalendar.css">
|
|
|
+<link rel="stylesheet" href="css/fullcalendar.css">
|
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
|
<link rel="stylesheet" href="css/style.css">
|
|
|
<!-- endbuild -->
|
|
|
@@ -61,69 +61,46 @@
|
|
|
"https://www.reddit.com/user/windhamdavid"
|
|
|
]
|
|
|
}
|
|
|
- </script>
|
|
|
+</script>
|
|
|
</head>
|
|
|
<body>
|
|
|
|
|
|
<div id="backgroundsvg"></div>
|
|
|
<div id="backgroundsvg2"></div>
|
|
|
<div id="backgroundsvg3"></div>
|
|
|
-<script>
|
|
|
- var backgroundsvg = document.querySelector('#backgroundsvg');
|
|
|
- var backgroundsvg2 = document.querySelector('#backgroundsvg2');
|
|
|
- var backgroundsvg3 = document.querySelector('#backgroundsvg3');
|
|
|
- function setTranslate(xPos, yPos, el) {
|
|
|
- el.style.transform = "translate3d(" + xPos + ", " + yPos + "px, 0)";
|
|
|
- }
|
|
|
- window.addEventListener("DOMContentLoaded", scrollLoop, false);
|
|
|
- var xScrollPosition;
|
|
|
- var yScrollPosition;
|
|
|
- function scrollLoop() {
|
|
|
- xScrollPosition = window.scrollX;
|
|
|
- yScrollPosition = window.scrollY;
|
|
|
- setTranslate(0, yScrollPosition * -0.2, backgroundsvg);
|
|
|
- setTranslate(0, yScrollPosition * -1.5, backgroundsvg2);
|
|
|
- setTranslate(0, yScrollPosition * 0.5, backgroundsvg3);
|
|
|
- requestAnimationFrame(scrollLoop);
|
|
|
- }
|
|
|
-</script>
|
|
|
|
|
|
<!-- ============================= ** HEADER ** ============================= -->
|
|
|
-
|
|
|
<header id="header" class="header" role="banner">
|
|
|
<div class="header-ui">
|
|
|
- <div class="brand--nav">
|
|
|
- <h1>David Windham</h1>
|
|
|
+ <div class="brand--nav text-end">
|
|
|
+ <h1 class="d-none ">David Windham</h1>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="header-small">
|
|
|
- <a href="#header" class="brand">
|
|
|
- <img class="light" src="./img/dw-sm-white.svg" srcset="./img/dw-sm-white.svg 2x" alt="David Windham logo"/>
|
|
|
- <img class="dark" src="./img/dw-sm.svg" srcset="./img/dw-sm.svg 2x" alt="David Windham logo"/>
|
|
|
- </a>
|
|
|
- <button class="hamburger" type="button" aria-label="Open Close Menu">
|
|
|
- <span class="hamburger-box">
|
|
|
- <span class="hamburger-inner"></span>
|
|
|
- </span>
|
|
|
- </button>
|
|
|
- <div class="header-small-menu">
|
|
|
- <a href="#who">Who</a>
|
|
|
- <a href="#what">What</a>
|
|
|
- <a href="#when">When</a>
|
|
|
- <a href="#why">Why</a>
|
|
|
- <a href="#how">How</a>
|
|
|
- </div>
|
|
|
+</header>
|
|
|
+<header class="header-small">
|
|
|
+ <a href="#header" class="brand">
|
|
|
+ <img class="light" src="img/dw-sm-white.svg" srcset="img/dw-sm-white.svg 2x" alt="David Windham logo"/>
|
|
|
+ <img class="dark" src="img/dw-sm.svg" srcset="img/dw-sm.svg 2x" alt="David Windham logo"/>
|
|
|
+ </a>
|
|
|
+ <button class="hamburger" type="button" aria-label="Open Close Menu">
|
|
|
+ <span class="hamburger-box">
|
|
|
+ <span class="hamburger-inner"></span>
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="header-small-menu">
|
|
|
+ <a href="#who">Who</a>
|
|
|
+ <a href="#what">What</a>
|
|
|
+ <a href="#when">When</a>
|
|
|
+ <a href="#why">Why</a>
|
|
|
+ <a href="#how">How</a>
|
|
|
</div>
|
|
|
</header>
|
|
|
|
|
|
+
|
|
|
+
|
|
|
<!-- ============================= ** MAIN ** ============================= -->
|
|
|
<main id="main" class="main">
|
|
|
<!-- ============================= ** HELLO ** ============================= -->
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
<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">
|
|
|
@@ -132,36 +109,35 @@
|
|
|
<div class="col-lg-5 offset-lg-1">
|
|
|
<h1 class="mb-4">David A. Windham</h1>
|
|
|
<p>( 1973 - )</p>
|
|
|
- <h3>Welcome Good People of the Internet ✌🏼</h3>
|
|
|
- <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>
|
|
|
+ <h3><i>Welcome Good People of the Internet</i> ✌🏼,</h3>
|
|
|
+ <p class="lead">I'm glad you dropped in. I like to create things.
|
|
|
+ It'll all started with...
|
|
|
+ </p>
|
|
|
|
|
|
</div>
|
|
|
<div class="col col-lg-5 ">
|
|
|
- <img class="float-end" width="200" src="img/ddog.svg" srcset="./img/ddog.svg 2x" alt="David Windham"/>
|
|
|
+ <img class="float-start" width="100" src="img/ddog.svg" srcset="./img/ddog.svg 2x" alt="David Windham"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
-
|
|
|
-
|
|
|
<!-- ============================= ** WHO ** ============================= -->
|
|
|
<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">
|
|
|
+ <div class="col-lg-7 ps-5 pt-5 mt-5">
|
|
|
<h1>Who?</h1>
|
|
|
<p class="lead">
|
|
|
I've been a web developer for almost 20 years.
|
|
|
I have a BA in Studio Art and a minor in Art History from The College of Charleston.
|
|
|
I've worked in advertising, publishing, education, and an assortment of businesses for clients.
|
|
|
- I focus on building custom web applications and
|
|
|
- I treat my development like mechanical works of art.
|
|
|
+ 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 the web by crafting custom sites and applications.
|
|
|
</p>
|
|
|
<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>
|
|
|
@@ -184,10 +160,11 @@
|
|
|
<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>
|
|
|
- <div class="col-lg-9">
|
|
|
+
|
|
|
+ <div class="col-lg-10 offset-lg-1">
|
|
|
<div class="row">
|
|
|
+ <h1 class="what">What?</h1>
|
|
|
+ <h2 class="what">My Capabilities</h2>
|
|
|
<p class="mt-3">
|
|
|
I like to tell everyone that the only real skill I have is searching for answers on the internet and reading the instructions.
|
|
|
Although there's certainly a bit of truth in that, I'd say that my two real superpowers are creative thinking and solving challenging technical puzzles.
|
|
|
@@ -197,10 +174,10 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="row capabilities-types">
|
|
|
- <div class="col-lg-12">
|
|
|
+ <div class="col-lg-10 offset-lg-1">
|
|
|
<div class="row">
|
|
|
<div class="col-md-4">
|
|
|
- <h5>Strategy</h5>
|
|
|
+ <h5 class="text-decoration-underline">Strategy</h5>
|
|
|
<ul>
|
|
|
<li>Advertising</li>
|
|
|
<li>Communication</li>
|
|
|
@@ -209,7 +186,7 @@
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="col-md-4">
|
|
|
- <h5>Front End</h5>
|
|
|
+ <h5 class="text-decoration-underline">Front End</h5>
|
|
|
<ul>
|
|
|
<li>HTML / CSS</li>
|
|
|
<li>Javascript ES6 / ES5</li>
|
|
|
@@ -218,7 +195,7 @@
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="col-md-4">
|
|
|
- <h5>Dev-Ops</h5>
|
|
|
+ <h5 class="text-decoration-underline">Dev-Ops</h5>
|
|
|
<ul>
|
|
|
<li>Build Automation</li>
|
|
|
<li>Continuous Integration</li>
|
|
|
@@ -229,7 +206,7 @@
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-md-4">
|
|
|
- <h5>Design</h5>
|
|
|
+ <h5 class="text-decoration-underline">Design</h5>
|
|
|
<ul>
|
|
|
<li>Graphic</li>
|
|
|
<li>Illustration</li>
|
|
|
@@ -239,7 +216,7 @@
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="col-md-4">
|
|
|
- <h5>Back End</h5>
|
|
|
+ <h5 class="text-decoration-underline">Back End</h5>
|
|
|
<ul>
|
|
|
<li>Go / Gorilla / Dart / Flutter</li>
|
|
|
<li>Node / Express / Meteor</li>
|
|
|
@@ -249,7 +226,7 @@
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="col-md-4">
|
|
|
- <h5>Sys-Admin</h5>
|
|
|
+ <h5 class="text-decoration-underline">Sys-Admin</h5>
|
|
|
<ul>
|
|
|
<li>Amazon / Google Services</li>
|
|
|
<li>Ansible / Docker / Kubernetes</li>
|
|
|
@@ -270,7 +247,7 @@
|
|
|
<section class="page-view when">
|
|
|
<div class="container">
|
|
|
<div class="row">
|
|
|
- <div class="col-lg-10">
|
|
|
+ <div class="col-lg-10 offset-lg-1">
|
|
|
<h1 class="when">When & Where?</h1>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -294,17 +271,20 @@
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
-
|
|
|
<!-- ============================= ** WHY ** ============================= -->
|
|
|
<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>
|
|
|
<div class="row">
|
|
|
- <div class="col-lg-1">
|
|
|
+ <div class="col-lg-1 offset-md-1">
|
|
|
+ <h1 class="why">Why?</h1>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-lg-1 offset-md-1">
|
|
|
<div class="indicators"></div>
|
|
|
</div>
|
|
|
- <div class="col-lg-10">
|
|
|
+ <div class="col-lg-9">
|
|
|
<figure class="br-testimonial showing">
|
|
|
<h5>Selected Clients:</h5>
|
|
|
<div class="row">
|
|
|
@@ -408,22 +388,21 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
-
|
|
|
<!-- ============================= ** HOW ** ============================= -->
|
|
|
<div id="how" class="background-color light"></div>
|
|
|
<section class="page-view services">
|
|
|
<div class="container">
|
|
|
|
|
|
<div class="row services-title">
|
|
|
- <div class="col-lg-6">
|
|
|
+ <div class="col-lg-5 offset-md-1">
|
|
|
<h1 class="how">& How</h1>
|
|
|
- <h2 class="how">Can I Help?</h2>
|
|
|
+ <h2 class="how mb-5">Can I Help?</h2>
|
|
|
<p class="lead"></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
|
- <div class="col-lg-6">
|
|
|
+ <div class="col-lg-5 offset-md-1">
|
|
|
<div class="service">
|
|
|
<i class="pulse"><span></span></i>
|
|
|
<div class="numbering">01</div>
|
|
|
@@ -466,13 +445,13 @@
|
|
|
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?
|
|
|
</p>
|
|
|
<button type="button" class="btn btn-dark mt-1" data-bs-toggle="modal" data-bs-target="#pricing-modal">
|
|
|
Pricing & Cost
|
|
|
</button>
|
|
|
- <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:david@davidwindham.com">Email Me</a>
|
|
|
+ <a class="text-light" href="mailto:david@davidwindham.com">Email</a>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -648,12 +627,12 @@
|
|
|
</footer>
|
|
|
|
|
|
<!-- build:js js/dw.js -->
|
|
|
-<script src="./js/jquery.min.js"></script>
|
|
|
-<script src="./js/bootstrap.bundle.js"></script>
|
|
|
-<script src="./js/fullcalendar.js"></script>
|
|
|
-<script src="./js/waypoints.js"></script>
|
|
|
-<script src="./js/waypoints-inview.js"></script>
|
|
|
-<script src="./js/_init.js"></script>
|
|
|
+<script src="js/jquery.min.js"></script>
|
|
|
+<script src="js/bootstrap.bundle.js"></script>
|
|
|
+<script src="js/fullcalendar.js"></script>
|
|
|
+<script src="js/waypoints.js"></script>
|
|
|
+<script src="js/waypoints-inview.js"></script>
|
|
|
+<script src="js/_init.js"></script>
|
|
|
<!-- endbuild -->
|
|
|
<!--
|
|
|
<script>
|
|
|
@@ -673,4 +652,4 @@
|
|
|
<noscript><p><img src="https://davidawindham.com/wik/matomo.php?idsite=5&rec=1" style="border:0;" alt="" /></p></noscript>
|
|
|
-->
|
|
|
</body>
|
|
|
-</html>
|
|
|
+</html>
|
