DALLAS WEB DESIGNER &
FRONT-END DEVELOPER

Nice to meet you

Photo of Adam Davis

I am not exactly new to web design and development, but I have been out of the game for a little while. To get back up to current standards, I recently completed a Web Development certificate program at Brookhaven College that focused on HTML5, CSS3, PHP, MySQL and JavaScript.

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 2005-2010, while working as an editor, producer and general tech guy for a morning talk-radio host, I built and maintained three WordPress-based 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 just love learning and making things work. These sites included e-commerce, mailing lists, ticketing for live events, user accounts, password protected sections, and podcasts.

After I decided to leave the radio business, I inadvertenty fell deep into the live event industry. What started as running sound for bands on the weekend for fun and extra money eventually turned into a crazy lifestyle with no semblance of a normal schedule.

To me, web programming and audio are very closely related - it's all about getting the signal flow right and troubleshooting when it doesn't work. Finding creative solutions to problems is one of my favorite things to do.

Photo of Adam Davis

Work

CasaCurator

Casa Curator - Interior Design Blog

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

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 remains fixed so the user always has access to it. The header is hidden while scrolling.

View Live Website
DobbinStreet

Dobbin Street Custom Bicycles

This is a simple responsive site for a custom bicycle builder. 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, 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

Casa Curator
Casa Curator - Interior Design Blog
Retro Palm Springs Website
RetroPalmSprings.com
Dobbin Street Custom Bicycles
Dobbin Street Custom Bicycles