DALLAS WEB DESIGNER &
FRONT-END DEVELOPER

Nice to meet you

Photo of Adam Davis

My first taste of the internet was in 1994 when we got a 486 computer and I dialed into a local BBS on a 2400 baud modem. I was instantly fascinated with the Internet, and around 1998, I started playing with HTML and building websites for fun. Then in college, while working as an editor, producer and general tech guy for a morning talk-radio host, I built and maintained three CMS sites. We didn't have the budget to hire an outside company, so I took on that task and found that I really enjoyed it.

I decided to leave the radio business in 2010 to pursue live sound engineering. I still loved web development, but what started as running sound for bands on the weekend for fun, quickly turned into a crazy lifestyle that provided little time for anything else, including coding.

Now in my 30’s and recently married my life and focus has changed! A few years ago I decided to return to coding roots in hopes of a more predictable schedule and new challenges, and in the fall of 2016 I graduated with my front-end development certificate. Since then, I have been taking on contract projects for a variety of clients from direct mail marketing to financial services, and have been enjoying overcoming challenges while learning many new skills every day.

Photo of Adam Davis

Work

Alcove Senior Advocates

Alcove Senior Advocates

Working with a UX designer and directly with the client, I coded this Bootstrap-based responsive site from scratch using HTML5, CSS3, jQuery and PHP. The site was launched November 24, 2017.

I was involved in the project from day one to get an in-depth understanding of what the client expected, and what the UX designer would be handing off to me for development. Once coding began, I worked from comps in Sketch and InVision and maintained constant communication with the UX designer throughout the process.

In addition to development, I handled all image scaling and optimization using Photoshop, launching of the site, and continue to make minor edits and improvements as the site is still very new. I am also in the process of converting it to a Wordpress theme.

In the site's current iteration, I am using simple PHP tp call the head, navbar and footer:


<?php
$pageTitle = 'Home';
include 'header.php';
?>
</head>
<?php
include 'nav.php';
?>

The break in the PHP, allowing the <head> to close outside of 'header.php' is to allow for the addition of page-specific elements in the <head>. This may change in future versions.

On the "How it Works" page, the site uses Ken Wheeler's Slick carousel with custom extra-large "back" and "next" buttons instead of the default FontAwesome icons at the request of the client.

On mobile, the bios on "Our Team" are manually truncated to the first paragraph, and a "Read More" link is added to expand the content.

That was accomplished with this script which shows/hides the additional content and changes the link from "Read More" to "Show Less" on the click event:


$(document).ready(function() {

  $(".readmore").click(function(){
    $readmore = $(this);
    $content = $readmore.prev();
    $content.slideToggle('300');
    $('html, body').animate({
      scrollTop: $(this).prev().offset().top
      }, 300)
    $(this).html( $(this).html() ==
    "Show Less\&nbsp\;\&nbsp\;\<i class=\"fa fa-caret-up\" aria-hidden=\"true\">\<\/i\>"
?
"Read More\&nbsp\;\&nbsp\;\<i class=\"fa fa-caret-down\" aria-hidden=\"true\">\<\/i\>"
:
"Show Less\&nbsp\;\&nbsp\;\<i class=\"fa fa-caret-up\" aria-hidden=\"true\">\<\/i\>"); }); });

View Live Website
Goldstone Capital

Goldstone Capital

This is a one page responsive site for a financial firm in New York, NY built on Bootstrap with additional jQuery enhancements. The site was launched in October 2017.

For this project, I worked closely with a copywriter & project manager who was the bridge between myself and the end client. The design was very client-driven, but kept simple and patterned after a few websites they liked. It was determined that they wanted a one page, site with 100vh background images, links that scrolled to anchors and highlighted when active, and a “parallax” effect on the large images.

Ian Lunn’s “jQuery-Parallax” plugin was used for the parallax effect.

The client also wanted a loading/splash screen with their logo that faded in, then faded out into the site. This was accomplished with a combination of CSS keyframes and jQuery.

This is the HTML for the “splash page:”


<div id="overlay" class="overlay">
<div id="animate" class="overlayimgcontainer">
<img id="splashimg" src="images/gclogo.jpg" class="fade-in">
</div>
</div>

.overlay creates a white background that covers the entire page initially, hiding the content, and .overlayimgcontainer is the div containing the logo that is faded in.

This bit of the CSS creates the white overlay div, logo image container, and handles the animation of the logo fading in:


.overlay {
position: fixed;
left: 0;
background-color: #fff;
height: 100%;
width: 100%;
}
.overlayimgcontainer {
max-width: 650px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.overlay img {
width: 100%;
min-width: 250px;
}
.fade-in {
animation-name: fade-in;
animation-duration: 2.5s;
animation-iteration-count: 1;
}
@keyframes fade-in {
from {transform: translateX(0); opacity:0; width: 100%;}
to {transform: translateX(0); opacity: 100; width: 100%;}
}

This jQuery function handles the fading out of the overlay and hiding of the logo after 2500ms and 2700ms respectively:


$(document).ready(function() {

  setTimeout(function(){
    $("#overlay").fadeOut('500');
  }, 2500);

  setTimeout(function(){
  $('#animate').hide();
  }, 2700);

});
    

The client wanted the team bios to be hidden until clicked on, and also wanted the user to be able to click anywhere on the site to hide the bio. This was a rather interesting request, but was acommplished with a few lines of jQuery:


  $(document.body).click(function() {
    $('#p, #vp, #p2, #vp2').slideUp();
    setTimeout(function() {
      $('#divider2, #divider1, #divider3, #divider4').removeClass('style14');
    }, 400);
  });

However, if the user left a bio open, scrolled down to the contact form, and clicked a field or other link, the bio would be hidden, causing the page to scroll away from where the user was clicking. This was solved by stopping the propogation of the click event in certain areas:


  $("#ira, #adam, #clint, #harvey, #email, #phone, #name, #message, #mailto, #submit-contact-form, #linkedin").click(function(e) {
    e.stopPropagation();
});

To maintain fucntionality of this "click anywhere to close" feature on mobile, I used a (pretty huge, but comprehensive!) regex to check if the user was on a phone, and if they were, add the class .clickable to the body, which simply turns the cursor into a pointer everywhere on the body, hence creating a "click" event on a touch-screen device.

This is my mobile device detection script:


    	(function(a) {
    		(jQuery.browser = jQuery.browser || {}).mobile =
    			/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge
          |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|
          treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i
    			.test(a) ||
    			/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)
          |aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|
          c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)
          |el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|
          haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|
          ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg(
          g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|
          bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)
          |nok(6|i)|nzph|o2im|op(ti|wv)
          |oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12
          |21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0
          |1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)
          |t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|
          veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|
          wonu|x700|yas\-|your|zeto|zte\-/i
    			.test(a.substr(0, 4))
    	})(navigator.userAgent || navigator.vendor || window.opera);

    	if (jQuery.browser.mobile === true) {
    		$('body').addClass('clickable');
    	}
    });

  

Finally, they needed users to be able to enter a phone number in almost any format possible, including extentions, whether it was spelled "extention," "ext.," or "x-."

This resulted in a longer-than-usual telephone number validation regex, but allows the user to enter their phone number without issue, even if it's an odd format:


  var checkPhone =
    		/^(?:(?:\(?(?:00|\+)([1-4]\d\d|[1-9]\d?)\)?)?[\-\.\ \\\/]?)?((?:\(?\d{1,}\)?[\-\.\ \\\/]?){0,})(?:[\-\.\ \\\/]?(?:#|ext\.?|extension|x)[\-\.\ \\\/]?(\d+))?$/i;
  var phone = $('#phone').val();

View Live Website
CasaCurator

Casa Curator - Interior Design Blog Template

The requirement for this project was to create a responsive blog site, and include a video using the HTML5 <video> tag. I did not want to simply satisfy the minimum requirements and just throw a video on a page. I wanted to take it a few steps further by using several "hero" videos within the carousel which could highlight popular or new articles.

I used two jQuery plugins for this project: the carousel uses Slick, and Vide creates the video background within the carousel. The videos are from Coverr, and were further optimized using Handbrake. I also used a animated gif version of the videos at half the original length as the posters in order to still have the video play on mobile devices.

This is still a work in progress, so not all functionalities are built out yet, and it will eventually become a WordPress theme.

In the first iteration of the project, I had the videos playing via a JavaScript function using an array and event handlers to create a simple looping playlist which populated the <src> section of the <video> tag. These videos were actually behind the carousel and running independent of it, which I found was a clunky way to do it, and the videos did not always sync up with the article card that was being displayed over it. Another issue that arose with this method was that the transition between videos was not seamless - a white flash occurred in between videos on slower systems. As a workaround for this, I added a .fader class to my .surround div in the carousel, which gave it a white background and used another JS function to fade the opacity from 0 to 1 every 10 seconds to cover the the raw transition between videos. These methods seemed pretty hacky to me, and once I implemented Vide, I no longer needed any of those functions.

The carousel divs are structured like so:


<div class="surround" data-vide-bg="video/Home">
  <div class="articlebox">
    <div class="articlecontainer">
        <div class="vertcenter">
          <h2>Vacation Home Vibes</h2>
            <a href="#vibes">
              <p class="readbtn">Read Article</p>
            </a>
        </div>
      </div>
    </div>
</div>

.surround sets the height and width, and sets the overflow to hidden, and data-vide-bg fetches the video for the background.
.articlebox sets the size, location, and transparency of the whole "card" within the .surround.
.articlecontainer contains the text and provides the gold border.
.readbtn styles a <p> tag link to the article as a button.

Font size is set by the <h2> within the .articlecontainer div.

On mobile, the nav menu collapses down into a burger button, and the Casa Curator logo moves into the fixed header using a simple jQuery function:


$(window).scroll(function() {
  if ($(document).scrollTop() > 95) {
    $('#headerlogo').slideDown(150);
      } else {
        $('#headerlogo').slideUp(150);
        }
    });
  

View Live Website
RetroPalmSprings

Retro Palm Springs - Information/Blog Template

The goal of this project was to create a single-page responsive site with a large image covering 100% of the viewport initially, and use links to anchor tags to jump to different parts of the page.

I kept this very simple and used a few JS and jQuery functions to accomplish smooth scrolling to the anchor tags, hiding of the chevron icon, and toggling of the mobile menu.

Smooth Scroll Function:


$("a").on('click', function(event) {
	if (this.hash !== "") {
		event.preventDefault();
		var hash = this.hash;
		$('html, body').animate({
			scrollTop: $(hash).offset().top
			}, 500, function() {
			window.location.hash = hash;
			});
		}
	});

The chevron tab used to "lift" and scroll past the hero image is not needed after clicking it or if the user chooses to scroll, so it is hidden after scrolling 100px:


$(window).bind('scroll', function() {
  if ($(window).scrollTop() > 100) {
      $('#more').hide(100);
        } else {
      $('#more').show(100);
			 }
});
			

On mobile, the nav menu becomes burger icon and the header is hidden when the page is scrolled down to maxmize content real estate. The header and navigation are revealed again if the page is scrolled up.

The following code takes care of this functionality:


var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event) {
didScroll = true;
});

setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);

function hasScrolled() {
var st = $(this).scrollTop();

if (Math.abs(lastScrollTop - st) <= delta)
return;

if (st > lastScrollTop && st > navbarHeight) {
$('header').removeClass('nav-down').addClass('nav-up');
document.getElementById("mobilemenu").style.width = "0px";
} else {
if (st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
document.getElementById("mobilemenu").style.width = "0px";
}
}

lastScrollTop = st;
}

In addition, if the user does decide to scroll all the way back to the top, the header remains visible and becomes transparent instead of black by adding/removing the "bg" class if the top of the page is within 200px of the top of the viewport:


$(window).on("scroll", function() {
if ($(window).scrollTop() > 200) {
$("header").addClass("bg");
} else {
$("header").removeClass("bg");
}
});

View Live Website
DobbinStreet

Dobbin Street Custom Bicycles - Small Business Website Template

This is a simple responsive site for a small business. The main requirement of the project was to add an image carousel to the main page. This is a work in progess and will eventually become a WordPress theme template, so the links in the nav are currently inactive.

I used Slick, which is responsive by design, and added some other rules to hide the arrows and dots of the carousel on smaller screens, as well as manipulate the map element.

I used the Google Maps API to customize the map colors, add a marker, and set a center point different from the marker. The map size, center point and scale change on smaller mobile devices.

On small screens, the map is moved under the main block of copy, and due to the original desktop map size being too wide for dispay on mobile devices without scrolling, I reduced the size of the <div> containing the map using a simple media query. In doing this though, the orientation of the map was not quite what I wanted. In order to display the same map area in a smaller size, I had to change the scale (also known as the zoom level) to show roughly the same map area at a smaller size, and to maintain the orientation at a different scale, I also had to change the center point.

Here, I set the marker, initial map zoom and center point:


google.maps.event.addDomListener(window, 'load', init);

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(40.7252064, -73.9570808),
    map: map,
    title: 'Dobbin Street Custom Bicycles'
});

    function init() {
    var mapOptions = {

    zoom: 13,

    center: new google.maps.LatLng(40.720265, -73.9640047),

Further down in the code, I added a function with an event listener that fires when the window is at or below 450px. This function changes the zoom from 13 to 12, and also changes the coordinates for the center point:


	var mapElement = document.getElementById('map');

	var map = new google.maps.Map(mapElement, mapOptions);

	google.maps.event.addDomListener(window, 'resize', function() {

	  if (window.matchMedia("(min-width: 450px)").matches) {
	    map.setZoom(13);
	  } else {
	    map.setZoom(12);
	  }

	  var latLng;
	  if (window.matchMedia("(min-width: 450px)").matches) {
	    latLng = new google.maps.LatLng(40.720265, -73.9640047);
	  } else {
	    latLng = new google.maps.LatLng(40.718015, -73.971811);
	  }
	  map.setCenter(latLng);

	});
			

View Live Website

Contact

Your Message Has Been Sent

Recent Work

Alcove Senior Advocates
Alcove Senior Advocates
Goldstone Capital
Goldstone Capital
Casa Curator
Casa Curator - Interior Design Blog
Retro Palm Springs Website
RetroPalmSprings.com
Dobbin Street Custom Bicycles
Dobbin Street Custom Bicycles