http://jvcreate.com/portfolio.html

1<!DOCTYPE html> 
2<html lang="en" id="portfolio"> 
3	<head>  
4		<meta charset="utf-8"> 
5		<title> 
6			
7			jvcreate | interactive design | portfolio
8			
9		</title>
10		<!-- Favicon --> 
11			<link rel="shortcut icon" href="resources/images/favicon.ico" type="image/x-icon" /> 
12			<link rel="apple-touch-icon-precomposed" href="resources/images/apple-touch-icon.png"> 
13	 
14			<meta name="viewport" content="width=device-width; initial-scale=1.0"> 
15			
16		<!-- CSS --> 
17			<link rel="stylesheet" type="text/css" media="screen" href="resources/css/fluid.css" />
18			<link rel="stylesheet" type="text/css" media="print" href="resources/css/print.css" />
19			
20			
21					<!--[if IE 7]-->
22					<link rel="stylesheet" href="/css/ie7.css" type="text/css" media="screen"  />
23					<!--[endif]-->
24					
25					<!--[if IE 6]-->
26					<link rel="stylesheet" href="http://universal-ie6-css.googlecode.com/files/ie6.1.1.css" media="screen, projection">
27					<!--[endif]-->
28					
29					<!-- to help IE recognise the new HTML tags -->
30					<!--[if lte IE 8]-->
31					

31<script src="/js/html5.js"></script>

31
32					

32<script src="/js/css3-mediaqueries.js"></script>

32
33					<!--[endif]-->
34
35
36		<!-- Javascript -->
37			

37<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

37 
38			
39			

39<script type="text/javascript"> 
40				// Place all Javascript code here
41			
42				$(document).ready(function(){
43				
44						$("#showFancyModal").click(function() {
45							$("div#fancyModal").addClass("show");
46							return false;
47						});
48						
49						$("#closeFancy").click(function() {
50							$("div#fancyModal").removeClass("show");
51							return false;
52						});
53				});
54			</script>

54
55			
56			

56<script type="text/javascript">
57			
58			  var _gaq = _gaq || [];
59			  _gaq.push(['_setAccount', 'UA-706773-2']);
60			  _gaq.push(['_setDomainName', '.jvcreate.com']);
61			  _gaq.push(['_trackPageview']);
62			
63			  (function() {
64			    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
65			    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
66			    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
67			  })();
68			
69			</script>

69
70			
71	</head>
72	<body>
73		<div class="center">
74			<nav>
75				<ul role="navigation">
76					<li accesskey="h"><a href="contact.html" class="purple super button"><span>contact</span></a></li>
77					<li accesskey="p"><a href="portfolio.html" class="blue super button"><span>portfolio</span></a></li>
78					<li accesskey="c"><a href="blog.html" class="orange super button"><span>blog</span></a></li>
79					<li accesskey="a"><a href="index.html" class="green super button"><span>welcome</span></a></li>
80				</ul>
81			</nav>
82			<div class="head">
83				<h1>jvcreate</h1>
84				<p>interactive design</p>
85			</div>
86			<div class="body">
87				<aside class="sidebar">
88					<h4>about jesse</h4>
89					<img id="profile-pic" src="/resources/images/jesse-vatar.jpg" alt="jesse vanderpol image">
90					<p>jvcreate is run by Jesse VanDerPol. He founded jvcreate in 2004. Since then the company has moved away from print design and towards web design. Primarily all work done now is web work. Still curious about who I am? Find me elsewhere on the web by following the links below.</p>
91					<ul>
92						<li><a href="http://twitter.com/jmvanderpol">twitter</a>
93						<li><a href="http://www.google.com/profiles/jmvanderpol">google</a></li>
94						<li><a href="http://blog.vanderpol.me">blog</a></li>
95						<li><a href="http://linkedin.com/in/jessevanderpol">linkedin</a></li>
96						<li><a href="http://forr.st/-jmvanderpol">forrst</a></li>
97					</ul>
98				</aside>
99				<div class="content">
100					<div id="statement">
101						<div>
102							<p>Look at all that good stuff down there. We are pretty proud of it (to say the least). We hope you enjoy browsing through as much as we enjoyed working on them.</p>
103						</div>
104					</div>
105					<div class="module">
106						<h1>new balance blog design</h1>
107						<div class="info portfolio">
108							<a href="#">
109								<img class="portfolio-image" src="resources/images/portfolio/small/jvcreate-NB-blog-S.jpg" alt="New Balance Blog" />
110							</a>
111							<blockquote class="portfolio-caption">
112								<p>On the New Balance blog design, the client asked for a design that would communicate an individuals voice while still adhering to their overall site design. The challenge of this job was working within the current web site container. Since this blog would be contained within <a href="http://newbalance.com">newbalance.com</a>, maintaining that unique style but still aligning to the brand was a rewarding challenge.</p>
113							</blockquote>
114						</div>
115					</div>
116					<div class="module">
117						<h1>vrid website &amp; storefront</h1>
118						<div class="info portfolio">
119							<a href="#">
120								<img class="portfolio-image" src="resources/images/portfolio/small/jvcreate-vrid-S.jpg" alt="VR Id Cards" />
121							</a>
122							<blockquote class="portfolio-caption">
123								<p>VR Id Cards wanted a complete redesign of their previous webpages and store. I worked with them to create a clean, grid based design which also is applied to their storefront. It was a challenge getting all the pre-existing content to play nice in the new design but the end result was worth it.</p>
124							</blockquote>
125						</div>
126					</div>
127					<div class="module">
128						<h1>travel junkie julia: travel blog</h1>
129						<div class="info portfolio">
130							<a href="#">
131								<img class="portfolio-image" src="resources/images/portfolio/small/jvcreate-tjj-S.jpg" alt="Travel Junkie Julia: travel blog" />
132							</a>
133							<blockquote class="portfolio-caption">
134								<p>Kayak was wanting a unique, traveler feel for a Julia's blog. Her stories are full of interesting &amp; quirky items. She wanted her website to be similar. Going off of a design that was half hashed out we landed with the final design. Something that fits her personality and style well.</p>
135							</blockquote>
136						</div>
137					</div>
138					<div class="module">
139						<h1>preferred wellness network</h1>
140						<div class="info portfolio">
141							<a href="#">
142								<img class="portfolio-image" src="resources/images/portfolio/small/jvcreate-pwn-S.jpg" alt="Preferred Wellness Network" />
143							</a>
144							<blockquote class="portfolio-caption">
145								<p>On the Preferred Wellness Network site the design had already been finalized. It was called 

145in to create the basic HTML/CSS page structure from the finalized art work.</p>
146							</blockquote>
147						</div>
148					</div>
149				</div>
150			</div>
151		</div>
152		<footer class="footer">
153			<p>© 2010 • jvcreate llc • <a href="http://twitter.com/jmvanderpol>">twitter</a> • <a href="http://vanderpol.me">vanderpol</a> • <a href="http://www.linkedin.com/in/jessevanderpol">linkedin</a> • <span class="validator"><a href="http://validator.w3.org/check?uri=http%3A%2F%2Fjvcreate.com%2Fportfolio.html"><img src="http://www.w3.org/Icons/valid-html401-blue" alt="Valid HTML5" height="15" width="44"></a></span> • thanks for visiting!</p>
154		</footer>
155		
156		

156<script type="text/javascript" src="http://include.reinvigorate.net/re_.js"></script>

156
157		

157<script type="text/javascript">
158		try {
159		reinvigorate.track("ja7n9-9n408m0r6j");
160		} catch(err) {}
161		</script>

161
162	</body>
163</html>