DALLAS WEB DESIGNER &
FRONT-END DEVELOPER

Nice to meet you

Photo of Adam Davis

I recently completed a Web Development certificate program at Brookhaven College that focussed on HTML5, CSS3, PHP, MySQL and JavaScript.

My first taste of the internet was in 1994 when we got a 486 computer and I daialed 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-raio 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. These sites included e-commerce, mailing lists, ticketing, user accounts and password protected sections, and podcasts.

Always interested in experimenting with microphones, speakers, and recording, I inadvertenty fell deep into the live event buisines. What started as running sound for bands on the weekend for fun and extra money eventually turned into a crazy lifestyle with long, late hours and no semblance of a normal schedule.

I am now leaving the event world and moving into development. 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.

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.

For the carousel, I used jQuery plugin Slick , and the Vide jQuery plugin to create the video background within the carousel. The videos are from Coverr, and were further optimized using Handbrake. I also used an animated gif version of the videos as the posters in order to still have the video play on mobile devices.

In the first iteration of the project, the videos were played 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.

Once I implemented Vide, these issues were fixed.

The carousel divs are structured like so:

<div class="surround" id="m2">
<div class="articlebox">
<div class="articlecontainer">
<h2>Vacation Home Vibes</h2>
<a href="#vibes">
<p class="readbtn">Read Article</p>
</a>
</div>
</div>
</div>

  • .surround: sets the height and width, and sets the overflow to hidden.
  • .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. The id only comes into play as a fallback for small mobile screens where it's just not practical to play videos. Instead of the video, a gif version of the video is used as the background of the "surround" div.

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 jQuery and vanilla JS 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 collapses down into a vertical elipses and remains fixed so the user always has access to it. The menu collapses when the menu icon or link is clicked.

DobbinStreet

Dobbin Street Custom Bicycles

This is a semi-responsive and simple site for a custom bicycle builder. The main requirement of the project was to add an image carousel to the main page. I also added a map, and 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 of 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);

	});
			

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