Sentree.com 2017

Sentree was a new IoT device that opens the market for managed home and commercial HVAC systems. Contractors install the device and can receive alerts when there's a problem.

The initial site at sentree.com was meant to answer initial questions that an HVAC contractor would have about how the system worked. The goal was to capture contact information for follow-up demos.

The client wanted a short deadline and asked that it be created with the X-Theme wordpress platform. That was my first time using X-Theme and although the appeal of it is obvious, I realized immediately that this is not for me.

I learned web standards-based development, and this seems like a complete regression both in terms of process and actual code quality. All primary element styles can be applied through the Wordpress interface, which means that all of it gets added inline to each element.

One thing I did like is the radar signal animation I used to indicate that the device's sensors would broadcast their status to the contractor. The looping animation was achieved using scale3d animation that expanded and faded two simple circle elements.

Here’s the HTML and CSS for that animation:

<div class="signal"></div>

	.signal { 
		position: absolute; 
		top: 10%; 
		left: 10%; 
		width: 50px; 
		height: 50px; 
		z-index: 10; 
	} 
	.signal::before { 
		content: " "; 
		position: absolute; 
		top: -3px; 
		left: -2px; 
		width: 100%; 
		height: 100%; 
		border: 1px solid #249D7F; 
		border-radius: 100%;
		-webkit-animation: pulse 3s linear infinite; 
		animation: pulse 3s linear infinite; 
	} 
		
	.signal::after { 
		content: " "; 
		position: absolute; 
		top: -3px; 
		left: -2px; 
		width: 100%; 
		height: 100%; 
		border: 1px solid #249D7F; 
		border-radius: 100%; 
		-webkit-animation: pulse 3s linear infinite; 
		animation: pulse 3s linear infinite; 
		animation-delay: 0s; 
		animation-delay: -1.5s; 
	} 
	@keyframes pulse { 
		0% { 
			opacity: 0; 
			transform: scale(1); 
		} 
		50% { 
			opacity: 1; 
			transform: scale(1.5); 
		} 
		100% { 
			opacity: 0; 
			transform: scale(2); 
		} 
	}
	

One of the tricky parts was positioning it on the center of the device image, which because it was responsive, meant that its size and position changed with the size of the viewport.