studio

js/studio.js

@@ -33,25 +33,14 @@ jQuery(document).ready(function($) {
 			}  
 		);
 	});
-	$("#studio-caro").wallpaper({source: "../wp-content/themes/dw/img/desk2.jpg"});
-	$('.caro-grad').appear();
-	$('.caro-grad').one('appear', dw_appear);
-	function dw_appear() {
-		$('#caro').carousel({
-			interval: false,
-			wrap: true,
-		});
-		$('#svg-imac').addClass('bg');
-		
-		var anima = new DrawFillSVG({elementId: 'svg-imac'});
-		anima.replay();
-	};
 	
-	$('.studio-subnav a').click(function (e) {
-	  e.preventDefault()
-	  $(this).tab('show')
-	})
+	$("#studio-caro").wallpaper({source: "../wp-content/themes/dw/img/desk2.jpg"});
 
+	$('#caro').carousel({
+		interval: false,
+		wrap: true,
+	});
+	
 	$(document).bind('keyup', function(e) {
 	    if(e.which === 39){
 			$('#caro').carousel('next');
@@ -60,6 +49,11 @@ jQuery(document).ready(function($) {
 			$('#caro').carousel('prev');
 	    }
 	});
+	
+	$('.studio-subnav a').click(function (e) {
+	  e.preventDefault()
+	  $(this).tab('show')
+	})
 
 	$('#caro').on('slid.bs.carousel', function(event) {
 		var consta = $(event.target);

page-studio.php

@@ -28,7 +28,7 @@
 								<h1 style="margin:0px" class="light super cm-sans tight wow fadeInDown" data-wow-delay="500ms">Web</h1>
 								<h2 class="light cm tight wow fadeInUp" data-wow-delay="500ms">Development</h4>
 								<h5 class="light wow fadeIn" data-wow-delay="2s">Client and Server Side Programming<br />Application Development<br />Database Design</h5>
-								<svg id="svg-device" class="svg" height="190px" viewBox="0 0 280 250">
+								<svg id="svg-device" class="svg" viewBox="0 0 280 250">
 								<path d="M274.9,238.2c0,6.2-5.1,11.3-11.3,11.3H95.3c-6.2,0-11.3-5.1-11.3-11.3V14.1c0-6.2,5.1-11.3,11.3-11.3h168.3c6.2,0,11.3,5.1,11.3,11.3V238.2z"/>
 								<path stroke="#FFFFFF" fill="#FFFFFF" d="M256.3,227.4H102.6V24.8h153.7V227.4z"/>
 								<path stroke="#FFFFFF" fill="#3A3A3A" d="M181.4,13.4c0,1.1-0.9,2-2,2c-1.1,0-2-0.9-2-2s0.9-2,2-2C180.6,11.4,181.4,12.3,181.4,13.4z"/>
@@ -40,7 +40,7 @@
 								</svg>
 							</div>
 							<div class="col-sm-5">
-								<svg id="svg-imac" class="svg screen" height="290px" viewBox="0 0 400 340">
+								<svg id="svg-imac" class="svg screen" viewBox="0 0 400 340">
 								<path fill="#9e9e9e" stroke="#FFFFFF" stroke-width="1px" stroke-miterlimit="10" d="M272.2,329.5l-23.3-23.3c-5.7-6.8-4.9-29.4-4.8-32.6h-88c0.1,3.2,0.9,25.7-4.8,32.6l-23.3,23.3c-1,1.1-1.4,2-1.3,2.7l0,0c0.6,6.2,5.4,5.1,10.9,5.1h125.1c5.4,0,10,1.1,10.8-4.5C273.7,332,273.5,331,272.2,329.5L272.2,329.5z"/>
 								<path fill="#E3E3E3" stroke="#FFFFFF" stroke-width="1px" stroke-miterlimit="10" d="M386.4,1H13.6C7.1,1,1.4,6.5,1.4,13.3v248c0,6.8,5.7,12.8,12.2,12.8h372.8c6.5,0,12.2-5.9,12.2-12.8v-248C398.6,6.5,392.9,1,386.4,1z M382.8,212.4H17.2V16h365.6V212.4z"/>
 								<path fill="#000000" stroke="#FFFFFF" stroke-width="1px" stroke-miterlimit="10" d="M207.2,252.2c0-3.3,2.7-5,2.9-5.1c-1.6-2.3-4.1-2.6-4.8-2.6c-2.1-0.2-4.1,1.2-5.1,1.2c-1.1,0-2.7-1.2-4.4-1.1c-2.3,0-4.4,1.3-5.5,3.3c-2.4,4.1-0.6,10.1,1.7,13.5c1.1,1.6,2.5,3.4,4.2,3.3c1.7-0.1,2.3-1.1,4.4-1.1c2,0,2.6,1.1,4.4,1.1c1.8,0,3-1.7,4.1-3.3c1.3-1.8,1.8-3.7,1.8-3.8C210.7,257.6,207.2,256.3,207.2,252.2 M203.9,242.3c1-1.1,1.6-2.7,1.4-4.2c-1.3,0.1-3,0.9-4,2c-0.9,1-1.6,2.6-1.4,4.1C201.4,244.3,202.9,243.4,203.9,242.3"/>
@@ -60,7 +60,7 @@
 								<h5 class="light wow fadeIn" data-wow-delay="2s">Information Architecture<br/>Interaction Design<br />Usability Testing</h5>
 							</div>
 							<div class="col-sm-9">
-								<svg id="sv" height="220px" viewBox="0 0 600 220">
+								<svg id="sv" viewBox="0 0 600 220">
 								<path fill="#E34F26" stroke="#FFFFFF" stroke-miterlimit="10" d="M426.2,195.4l-17-191.2h187.5l-17,191.2L502.7,217"/>
 								<path fill="#EF652A" stroke="#FFFFFF" stroke-miterlimit="10" d="M504.2,202.6l62.6-17.2l14.7-165.7h-77.4"/>
 								<path fill="#EBEBEB" stroke="#FFFFFF" stroke-miterlimit="10" d="M504.2,91.6h-31.5l-2.1-24.4h33.6V43.7h-0.4h-59.3l0.4,6.3l5.9,65.6h53.4V91.6z"/>
@@ -91,7 +91,7 @@
 								<h5 class="wow fadeIn" data-wow-delay="2s">Branding | Print | Illustration<br/>Infographics<br/>Data Visualization</h5>
 							</div>
 							<div class="col-sm-8">
-								<svg id="svg-mac" class="svg" height="290px" viewBox="0 0 500 300">
+								<svg id="svg-mac" class="svg" viewBox="0 0 500 300">
 								<path stroke="#000000" d="M49.3,270.1c0,8,6.5,14.5,14.5,14.5h374c8,0,14.5-6.5,14.5-14.5V20.3c0-8-6.5-14.5-14.5-14.5h-374c-8,0-14.5,6.5-14.5,14.5V270.1z"/>
 								<path stroke="#000000" d="M451.3,20c0-7.3-5.9-13.2-13.2-13.2H63.6c-7.3,0-13.2,5.9-13.2,13.2v249.8c0,7.3,5.9,13.2,13.2,13.2h374.5c7.3,0,13.2-5.9,13.2-13.2V20z"/>
 								<path stroke="#000000" d="M51.2,20c0-6.9,5.6-12.4,12.4-12.4h374.5c6.9,0,12.4,5.6,12.4,12.4l-0.1,218.3v1.3l0.1,24.2c0,2.9-2.3,5.2-5.2,5.2h-389c-2.9,0-5.2-2.3-5.2-5.2V20z"/>
@@ -136,45 +136,75 @@
 		<div class="row">
 			<div class="col-sm-2">
 				<ul class="nav-stacked studio-subnav">
-					<li data-target="#caro" data-slide-to="0"><a href="#studio" aria-controls="studio" role="tab" data-toggle="tab"><span class="fa fa-eye fa-fw"></span>&nbsp; <em>Studio</em></a></li>
-					<li data-target="#caro" data-slide-to="1"><a href="#webdev" aria-controls="webdev" role="tab" data-toggle="tab"><span class="fa fa-desktop fa-fw"></span>&nbsp; <em>Web</em></a></li>
-					<li data-target="#caro" data-slide-to="2"><a href="#ux" aria-controls="ux" role="tab" data-toggle="tab"><span class="fa fa-terminal fa-fw"></span>&nbsp; <em>UX</em></a></li>
-					<li data-target="#caro" data-slide-to="3"><a href="#graphic" aria-controls="graphic" role="tab" data-toggle="tab"><span class="fa fa-pencil fa-fw"></span>&nbsp; <em>Graphic</em></a></li>
-					<li data-target="#caro" data-slide-to="4"><a href="#media" aria-controls="media" role="tab" data-toggle="tab"><span class="fa fa-film fa-fw"></span>&nbsp; <em>Media</em></a></li>	
-					<li data-target="#caro" data-slide-to="5"><a href="#art" aria-controls="art" role="tab" data-toggle="tab"><span class="fa fa-paint-brush fa-fw"></span>&nbsp; <em>Art</em></a></li>
+					<li data-target="#caro" data-slide-to="0"><a href="#studio" aria-controls="studio" role="tab" data-toggle="tab"><span class="fa fa-eye fa-fw"></span> <em>Studio</em></a></li>
+					<li data-target="#caro" data-slide-to="1"><a href="#webdev" aria-controls="webdev" role="tab" data-toggle="tab"><span class="fa fa-desktop fa-fw"></span> <em>Web</em></a></li>
+					<li data-target="#caro" data-slide-to="2"><a href="#ux" aria-controls="ux" role="tab" data-toggle="tab"><span class="fa fa-terminal fa-fw"></span> <em>UX</em></a></li>
+					<li data-target="#caro" data-slide-to="3"><a href="#graphic" aria-controls="graphic" role="tab" data-toggle="tab"><span class="fa fa-pencil fa-fw"></span> <em>Graphic</em></a></li>
+					<li data-target="#caro" data-slide-to="4"><a href="#media" aria-controls="media" role="tab" data-toggle="tab"><span class="fa fa-film fa-fw"></span> <em>Media</em></a></li>	
+					<li data-target="#caro" data-slide-to="5"><a href="#art" aria-controls="art" role="tab" data-toggle="tab"><span class="fa fa-paint-brush fa-fw"></span> <em>Art</em></a></li>
 				</ul>
 			</div>
 			<div class="col-sm-10">
 				<div id="studio-tab" class="tab-content">
 					<div role="tabpanel" class="tab-pane wow fadeIn active" id="studio">
-						<div class="entry-content">
-							<h4 class="georgia"><em><span class="firstcharacter">A</span>lthough it seems that in the shower or sleeping is where my best work occurs,</em> the studio is the place where the shoe leather hits the pavement. This page is here so that I have a place to feature projects. I mostly work with web and application development, but I also do a good deal of graphic, print, and multimedia design. On my off hours, I like to turn off the computers to paint with oil, camel hair, canvas, and ground minerals.</h4>
+						<div class="col-sm-9">
+							<div class="entry-content">
+								<h4 class="georgia"><em><span class="firstcharacter">A</span>lthough it seems that in the shower or sleeping is where my best work occurs,</em> the studio is the place where the shoe leather hits the pavement. I mostly work with web and application development, but I also do a good deal of graphic, print, and multimedia design. On my off hours, I like to turn off the computers to paint with oil, camel hair, canvas, and minerals.</h4>
+							</div>
+						</div>
+						<div class="col-sm-3 studio-tools">		
+							<ul>
+								<li><em>Tools</em></li>
+								<li>Macbook Pro 15'</li>
+								<li>iMac 27'</li>
+								<li>Apple Thunderbolt 27'</li>
+								<li>Lacie Drives</li>
+								<li>Klipsh Monitors</li>
+							</ul>
 						</div>
 					</div>
 					<div role="tabpanel" class="tab-pane wow fadeIn" id="webdev">
-						<div class="entry-content">
-							<h4 class="georgia"><em><span class="firstcharacter">T</span>hey don't call it the information age for nothing</em>. The web browser has become the default medium for communication and the craft that powers it is still a mystery to most. Unbeknownst to the educated colleage I once heard say that "Any kid can do a website", It's actually a very broad spectrum of knowledge and skills that give a good developer complete control to align how a website performs, looks and operates to the needs of the publisher.</h4>
+						<div class="col-sm-9">
+							<div class="entry-content">
+								<h4 class="georgia"><em><span class="firstcharacter">T</span>hey don't call it the information age for nothing</em>. The web browser has become the default medium for communication and the craft that powers it is still a mystery for many. It's a broad spectrum of knowledge and skills that give a developer complete control over how a web application performs, looks, and operates.</h4>
+							</div>
+						</div>
+						<div class="col-sm-3 studio-tools">		
+							<ul>
+								<li><em>Toolbelt</em></li>
+								<li>Z-shell, Vim, SSH, Git, Grunt, Gulp, JavaScript, PHP, Python, Ruby, Node.js, Apache, Ngnix, Redis, MongoDB, MySQL, &amp; Textmate.</li>
+							</ul>
 						</div>
 					</div>
 					<div role="tabpanel" class="tab-pane wow fadeIn" id="ux">
 						<div class="entry-content">
-							<h4 class="georgia"><em><span class="firstcharacter">U</span>ser Experience Design is a very important aspect of modern communications</em> that encompasses psychology, human factors and ergonomics. Recent testing methodologies have taken some of the psuedo science. I find myself oftern referening to one of the most cited papers in cognitive psychology, The magical number sever plus or minus two, while consulting on a web projects. </h4>
+							<h4 class="georgia"><em><span class="firstcharacter">I</span> believe that user experience design is a very important aspect of modern communications</em>. It encompasses psychology, human factors and ergonomics. I've found myself referening to one of the most cited papers in cognitive psychology on more than one project. The concept is called 'The magical number sever plus or minus two'. </h4>
 						</div>
 					</div>
 					<div role="tabpanel" class="tab-pane wow fadeIn" id="graphic">
-						<div class="entry-content">
-							<h4 class="georgia"><em><span class="firstcharacter">D</span>on't mistake legibility with communication</em> is my favorite quote about graphic design is from David Carson.</h4>
+						<div class="col-sm-9">
+							<div class="entry-content">
+								<h4 class="georgia"><em><span class="firstcharacter">D</span>on't mistake legibility with communication</em> - David Carson. Visual communication is powerful and it can make or break a presentation, brochure, website, or company.</h4>
+							</div>
+						</div>
+						<div class="col-sm-3 studio-tools">		
+							<ul>
+								<li><em>Tools</em></li>
+								<li>Adobe Illustrator / Photoshop / InDesign</li>
+								<li>Wacom Intuos Pro</li>
+								<li>Sketchbook</li>
+							</ul>
 						</div>
 					</div>
 					<div role="tabpanel" class="tab-pane wow fadeIn" id="media">
 						<div class="col-sm-9">
 							<div class="entry-content">
-								<h4 class="georgia"><em><span class="firstcharacter">T</span>he average human attention span is a bit shorter than that of a goldfish</em>. People often forget that the web is a multimedia medium. I'm a decent videographer with enough production skills and an eye for detail to make your multimedia look like it was actually done by a professional.</h4>
+								<h4 class="georgia"><em><span class="firstcharacter">T</span>he average human attention span is a bit shorter than that of a goldfish</em>. People often forget that the web is a multimedia medium. I'm a decent videographer with enough production abilities, lighting, equipment, and an eye for detail to make your multimedia look and sound like it was actually done by a seasoned professional.</h4>
 							</div>
 						</div>
 						<div class="col-sm-3 studio-tools">		
 							<ul>
-								<li><em>Favorite Tools</em></li>
+								<li><em>Tools</em></li>
 								<li>Sony a7</li>
 								<li>Tascam DR60d</li>
 								<li>Adobe Premier Pro</li>
@@ -184,7 +214,8 @@
 					</div>
 					<div role="tabpanel" class="tab-pane wow fadeIn" id="art">
 						<div class="entry-content">
-							<h4 class="georgia"><em><span class="firstcharacter">L</span>ife doesn't imitate art, it imitates bad television. - Woody Allen</em></h4>
+							<h4 class="georgia"><em><span class="firstcharacter">L</span>ife doesn't imitate art, it imitates bad television</em>. - Woody Allen<br />
+								I like to paint portraits, landscapes and abstractions in oil, watercolor and gauche. I wish I was able to paint more often and I keep joking with my better half that it's my retirement plan. Compared to my digital work, it's nice knowing that a painting will last several hundred years.</h4>
 						</div>
 					</div>
 				</div>

style.css

@@ -232,6 +232,18 @@ h5.contact {
 	#caro {
 		min-height: 300px;
 	}
+	#caro #svg-imac {
+		height: 220px !important;
+	}
+	#caro #svg-device {
+		display: none;
+	}
+	#caro #sv {
+		height: 100px !important;
+	}
+	#caro #svg-mac {
+		height: 150px !important;
+	}
 }
 @media (max-width: 768px) and  (min-width: 668px) {
   article.single {
@@ -676,7 +688,7 @@ h5.contact {
 	animation: fadeIn 1s;
 }
 #caro #svg-imac {
-	max-height: 340px;
+	height: 290px;
 }
 #caro #svg-imac.bg {
 	background: transparent url('img/web.gif') no-repeat 28% 15%;
@@ -685,6 +697,13 @@ h5.contact {
 #caro #svg-device {
 	float:right;
 	margin-top:-115px;
+	height: 190px;
+}
+#caro #sv {
+	height: 220px;
+}
+#caro #svg-mac {
+	height: 290px;
 }
 #studio-caro {
 	-webkit-transition: all 1s ease;
@@ -1176,7 +1195,7 @@ img.dw {
 .studio-subnav {
 	border-right: 1px solid #cecece;
 	margin: 28px 0px;
-	padding: 0 10px;
+	padding: 0px;
 }
 .studio-subnav a {
 	color: #000;