daw/page-studio.php

<?php get_header('studio'); ?>
	<div id="studio-caro" class="container-fluid leader">
		<div id="caro" class="carousel slide">
			<div class="container">
				<ol class="carousel-indicators">
					<li data-target="#caro" data-slide-to="0" class="active"></li>
					<li data-target="#caro" data-slide-to="1"></li>
					<li data-target="#caro" data-slide-to="2"></li>
					<li data-target="#caro" data-slide-to="3"></li>
					<li data-target="#caro" data-slide-to="4"></li>
					<li data-target="#caro" data-slide-to="5"></li>
				</ol>
			</div>
			<div class="carousel-inner">
				<div class="item active" data-id="0">
					<div class="container animac">
						<div class="row">
							<div class="col-sm-12">
								<h1 class="light super-duper cm-sans wow fadeInLeft">Studio</h1>
							</div>
						</div>
					</div>
				</div>
				<div class="item" data-id="1">
					<div class="container animac">
						<div class="row">
							<div class="col-sm-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" 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"/>
								<path stroke="#FFFFFF" fill="#3A3A3A" d="M184.8,238.6c0,2.9-2.4,5.3-5.3,5.3c-2.9,0-5.3-2.4-5.3-5.3s2.4-5.3,5.3-5.3C182.4,233.2,184.8,235.6,184.8,238.6z"/>
								<path stroke="#FFFFFF" d="M69.8,241.1c0,4.6-3.8,8.4-8.4,8.4H11.9c-4.6,0-8.4-3.8-8.4-8.4V112.5c0-4.6,3.8-8.4,8.4-8.4h49.5c4.6,0,8.4,3.8,8.4,8.4V241.1z"/>
								<path stroke="#FFFFFF" fill="#3A3A3A" d="M42,238.7c0,2.9-2.4,5.3-5.3,5.3c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3C39.6,233.3,42,235.7,42,238.7z"/>
								<path stroke="#FFFFFF" fill="#FFFFFF" d="M66.8,226.5H6.5V122.6h60.3V226.5z"/>
								<path stroke="#FFFFFF" fill="#3A3A3A" d="M46.9,114.9c0,1-0.8,1.8-1.8,1.8h-17c-1,0-1.8-0.8-1.8-1.8l0,0c0-1,0.8-1.8,1.8-1.8h17C46.1,113.1,46.9,113.9,46.9,114.9L46.9,114.9z"/>
								</svg>
							</div>
							<div class="col-sm-5">
								<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"/>
								<path fill="#000000" stroke="#FFFFFF" stroke-width="1px" stroke-miterlimit="10" d="M386.4,1H13.6C7.1,1,1.4,6.6,1.4,13.8V230h397.3V13.8C398.6,6.6,392.9,1,386.4,1z M382.8,212.4H16.3V16h366.4V212.4z"/>
								<path fill="none" stroke="#FFFFFF" stroke-width="1px" stroke-miterlimit="10" d="M16.8,16.1H383v196.6H16.8V16.1z"/>
								</svg>
							</div>
						</div>
					</div>
				</div>
				<div class="item" data-id="2">
					<div class="container animac hide-svg">
						<div class="row">
							<div class="col-sm-3">
								<h1 style="margin:0px" class="light super cm-sans tight wow fadeInDown" data-wow-delay="500ms">UX</h1>
								<h3 class="light cm tight wow fadeInUp" data-wow-delay="500ms">User Experience<br />Design</h3>
								<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" 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"/>
								<path fill="#EBEBEB" stroke="#FFFFFF" stroke-miterlimit="10" d="M504.2,153.4h-0.4l-26.5-7.1l-1.7-18.9H463H452l2.9,37.4l48.8,13.5h0.4V153.4z"/>
								<path fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M503.7,91.6v24h29.4l-2.9,30.7l-26.5,7.1v24.8l48.8-13.5l0.4-4.2l5.5-62.6l0.8-6.3h-6.7H503.7z"/>
								<path fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M503.7,43.7v14.7v8.8l0,0h57.6l0,0l0,0l0.4-5L563,50l0.4-6.3H503.7z"/>
								<path fill="#F7DF1E" stroke="#FFFFFF" stroke-miterlimit="10" d="M205.2,4.2h190.3v190.3H205.2V4.2z"/>
								<path fill="#000000" stroke="#FFFFFF" stroke-miterlimit="10" d="M333.1,152.9c3.8,6.3,8.8,10.9,17.6,10.9c7.4,0,12.1-3.7,12.1-8.8c0-6.1-4.9-8.3-13-11.9l-4.5-1.9c-12.9-5.5-21.5-12.4-21.5-27c0-13.4,10.2-23.6,26.2-23.6c11.4,0,19.5,4,25.4,14.3l-13.9,8.9c-3.1-5.5-6.4-7.7-11.5-7.7c-5.2,0-8.6,3.3-8.6,7.7c0,5.4,3.3,7.5,11,10.9l4.5,1.9c15.2,6.5,23.8,13.2,23.8,28.1c0,16.1-12.7,24.9-29.6,24.9c-16.6,0-27.3-7.9-32.6-18.3L333.1,152.9z"/>
								<path fill="#000000" stroke="#FFFFFF" stroke-miterlimit="10" d="M269.9,154.4c2.8,5,5.4,9.2,11.5,9.2c5.9,0,9.6-2.3,9.6-11.2V91.6h17.9v61.1c0,18.5-10.9,27-26.7,27c-14.3,0-22.6-7.4-26.8-16.3L269.9,154.4z"/>
								<path fill="#1572B6" stroke="#FFFFFF" stroke-miterlimit="10" d="M21.6,196.1L4.4,4.3h187.9l-17.1,191.8l-76.9,21.3L21.6,196.1z"/>
								<path fill="#33A9DC" stroke="#FFFFFF" stroke-miterlimit="10" d="M98.4,201.1l62.2-17.2L175.3,20H98.4V201.1z"/>
								<path fill="#EBEBEB" stroke="#FFFFFF" stroke-miterlimit="10" d="M97.9,89.6v14.5v8.8v0.1H72.3h-0.1l-0.4-5.3l-1.1-11.9l-0.6-6.3L97.9,89.6L97.9,89.6z"/>
								<path fill="#EBEBEB" stroke="#FFFFFF" stroke-miterlimit="10" d="M97.9,42v14.5v8.8v0.1H41.6h-0.1L41,60.1L40,48.2l-0.6-6.3L97.9,42L97.9,42z"/>
								<path fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M127.6,112.1l-2.8,31.5l-26.2,7.1v24.4l48.2-13.4l0.4-4l4.1-45.7L127.6,112.1L127.6,112.1z"/>
								<path fill="#EBEBEB" stroke="#FFFFFF" stroke-miterlimit="10" d="M98,150.7h-0.1l-26.1-7l-1.7-18.7H57.4H46.6l3.3,36.7l47.9,13.3h0.1L98,150.7L98,150.7z"/>
								<path fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M98.4,89.5h31.1l2.1-24.1H98.4V41.9h0.1h58.9l-0.6,6.3l-5.8,64.8H98.4L98.4,89.5L98.4,89.5z"/>
								</svg>
							</div>
						</div>
					</div>
				</div>
				<div class="item" data-id="3">
					<div class="container animac hide-svg">
						<div class="row">
							<div class="col-sm-4">
								<h1 class="super cm-sans tight wow fadeInDown" data-wow-delay="500ms">Graphic</h1>
								<h3 class="cm tight wow fadeInUp" data-wow-delay="500ms">Design Communication</h3>
								<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" 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"/>
								<path stroke="#000000" fill="#FFFFFF" d="M438.6,256.8H63.2V25.3h375.4V256.8z"/>
								<path stroke="#000000" fill="#828282" d="M25.5,290h206.3h37.9h206.3c9.5,0,17.9-3.4,21.3-5.7H4.2C7.6,286.5,16,290,25.5,290z"/>
								<path stroke="#000000" fill="#D6D6D6" d="M3.7,284.7c0-3.2,0-6.4,0-9.6c164.9,0,329.9,0,494.8,0c0,3.2,0,6.4,0,9.6C333.6,284.7,168.7,284.7,3.7,284.7z"/>
								<path stroke="#000000" fill="#FFFFFF" d="M216.4,281.1c0-2,0-4,0-6c23.2,0,46.4,0,69.6,0c0,2,0,4,0,6C262.8,281.1,239.6,281.1,216.4,281.1z"/>
								</svg>
							</div>
						</div>
					</div>
				</div>
				<div class="item" data-id="4">
					<div class="container">
						<div class="row">
							<div class="col-sm-6">
								<h1 class="light super cm-sans tight wow fadeInDown" data-wow-delay="500ms">Media</h1>
								<h3 class="light cm tight wow fadeInUp" data-wow-delay="500ms">Communications</h3>
								<h5 class="light wow fadeIn" data-wow-delay="2s">Motion | Video | Audio<br />Streaming<br />WebRTC</h5>
							</div>
							<div class="col-sm-6">
							</div>
						</div>
					</div>
				</div>
				<div class="item" data-id="5">
					<div class="container animac hide-svg">
						<div class="row">
							<div class="col-sm-3">
								<h1 class="light super cm-sans tight wow fadeInDown" data-wow-delay="500ms">Art</h1>
							</div>
							<div class="col-sm-9">
								
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="container">
		<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> <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="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="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">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="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 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>Tools</em></li>
								<li>Sony a7</li>
								<li>Tascam DR60d</li>
								<li>Adobe Premier Pro</li>
								<li>Blackmagic DaVinci Resolve</li>
							</ul>
						</div>
					</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</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>
			</div>
		</div>
	</div>
	
	<div class="container">
		<div class="row">
			<h4><em>Projects</em></h4>
		</div>
		<div class="row">							
			<?php query_posts('category_name=studio&showposts=3'); ?>
			<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
			<div class="col-sm-4">
				<div class="studio-thumbnail">
					<?php $img_url = wp_get_attachment_image_src(get_post_thumbnail_id(),'medium'); ?>
					<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( '%s', 'daw' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><img class="studio-thumb" src="<?php echo $img_url[0];?>" width="100%" alt="<?php the_title(); ?>"/></a>
				</div>
				<article class="studio">
					<div class="entry-content">		
						<h4><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( '%s', 'daw' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h4>
						<?php dw_good_excerpt(110); ?>
					</div>
				</article>
			</div>
			<?php endwhile; ?>
		</div>
		<div class="row">							
			<?php query_posts('category_name=studio&offset=3&showposts=3'); ?>
			<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
			<div class="col-sm-4">
				<div class="studio-thumbnail">
					<?php $img_url = wp_get_attachment_image_src(get_post_thumbnail_id(),'studio'); ?>
					<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( '%s', 'daw' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><img class="studio-thumb" src="<?php echo $img_url[0];?>" width="100%" alt="<?php the_title(); ?>"/></a>
				</div>
				<article class="studio">
					<div class="entry-content">		
						<h4><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( '%s', 'daw' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h4>
						<?php dw_good_excerpt(110); ?>
					</div>
				</article>
			</div>
			<?php endwhile; ?>
		</div>
		<div class="row">							
			<?php query_posts('category_name=studio&offset=6&showposts=3'); ?>
			<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
			<div class="col-sm-4">
				<div class="studio-thumbnail">
					<?php $img_url = wp_get_attachment_image_src(get_post_thumbnail_id(),'studio'); ?>
					<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( '%s', 'daw' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><img class="studio-thumb" src="<?php echo $img_url[0];?>" width="100%" alt="<?php the_title(); ?>"/></a>
				</div>
				<article class="studio">
					<div class="entry-content">		
						<h4 class="tight"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( '%s', 'daw' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h4>
						<?php dw_good_excerpt(110); ?>
					</div>
				</article>
			</div>
			<?php endwhile; ?>
		</div>
	</div>
	
<?php get_footer('studio'); ?>