<!DOCTYPE HTML>
<html>
<head>
	<title>Wolf's Little Store</title>
	<style type="text/css" media="screen">
		body {
		  background: #FFF;
		  color: #454545;
		  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		  line-height: 1.5;
		  font-size: 15px;
		  -webkit-overflow-scrolling: touch;
		}


		#container {
			padding: 20px;
		}

		@media all and (min-width: 740px) {
			#container {
				width: 700px;
				margin: 0 auto;
			}
		}

		h1, h2, h3, h4 {
		  color: #000;
		  padding: 0 0 12px;
		  margin: 0;
		}

		h1, h2, h3 {
		  font-family: "HelveticaNeue-CondensedBold", "Helvetica Neue CE 600 Condensed", "Helvetica Neue LT Condensed", "Helvetica Neue 600 Condensed", "HelveticaNeue-BoldCondensed", "Helvetica Neue BoldCondensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
		  font-weight: 600;
		  font-stretch: condensed;
		  letter-spacing: -0.02em;
		  font-size: 28px;
		  line-height: 1;
		  font-weight: 700;
		  color: #000;
		}

		h4 {
		  font-size: 15px;
		}


		  h1 { font-size: 48px; }

		h3 {
		  font-size: 26px;
		}

		p {
		  margin: 0;
		  padding: 0 0 12px;
		}

		a {
		  text-decoration: none;
		}

		a:link {
		  border-bottom: 1px solid #9CC6F9;
		  color: #1559AB;
		}

		a:visited {
		  border-bottom: 1px solid #B79CDB;
		  color: #803AB5;
		}

		a:hover, a:active, a:focus {
		  border-color: #ABCDF6;
		  color: #0067E3;
		  -webkit-transition-property: color, border-color, background;
		  -webkit-transition-duration: 0.17s;
		  -moz-transition-property: color;
		  -moz-transition-duration: 0.17s;
		  -o-transition-property: color;
		  -o-transition-duration: 0.17s;
		}
		
		.marked {
			background: #FFA;
		}
		
		table {
		  max-width: 100%;
		  background-color: transparent;
		  border-collapse: collapse;
		  border-spacing: 0;
		}

		.table {
		  width: 100%;
		  margin-bottom: 18px;
		}

		.table th,
		.table td {
		  padding: 8px;
		  line-height: 18px;
		  text-align: left;
		  vertical-align: top;
		  border-top: 1px solid #dddddd;
		font-size: 13px;
		}

		.table th {
		  font-weight: bold;
		color: #000;
		}

		.table thead th {
		  vertical-align: bottom;
		}

		.table caption + thead tr:first-child th,
		.table caption + thead tr:first-child td,
		.table colgroup + thead tr:first-child th,
		.table colgroup + thead tr:first-child td,
		.table thead:first-child tr:first-child th,
		.table thead:first-child tr:first-child td {
		  border-top: 0;
		}

		.table tbody + tbody {
		  border-top: 2px solid #dddddd;
		}

		.table-condensed th,
		.table-condensed td {
		  padding: 4px 5px;
		}

		.table-bordered {
		  border: 1px solid #dddddd;
		  border-collapse: separate;
		  *border-collapse: collapsed;
		  border-left: 0;
		  -webkit-border-radius: 4px;
		     -moz-border-radius: 4px;
		          border-radius: 4px;
		}

		.table-bordered th,
		.table-bordered td {
		  border-left: 1px solid #dddddd;
		}

		.table-bordered caption + thead tr:first-child th,
		.table-bordered caption + tbody tr:first-child th,
		.table-bordered caption + tbody tr:first-child td,
		.table-bordered colgroup + thead tr:first-child th,
		.table-bordered colgroup + tbody tr:first-child th,
		.table-bordered colgroup + tbody tr:first-child td,
		.table-bordered thead:first-child tr:first-child th,
		.table-bordered tbody:first-child tr:first-child th,
		.table-bordered tbody:first-child tr:first-child td {
		  border-top: 0;
		}

		.table-bordered thead:first-child tr:first-child th:first-child,
		.table-bordered tbody:first-child tr:first-child td:first-child {
		  -webkit-border-top-left-radius: 4px;
		          border-top-left-radius: 4px;
		  -moz-border-radius-topleft: 4px;
		}

		.table-bordered thead:first-child tr:first-child th:last-child,
		.table-bordered tbody:first-child tr:first-child td:last-child {
		  -webkit-border-top-right-radius: 4px;
		          border-top-right-radius: 4px;
		  -moz-border-radius-topright: 4px;
		}

		.table-bordered thead:last-child tr:last-child th:first-child,
		.table-bordered tbody:last-child tr:last-child td:first-child {
		  -webkit-border-radius: 0 0 0 4px;
		     -moz-border-radius: 0 0 0 4px;
		          border-radius: 0 0 0 4px;
		  -webkit-border-bottom-left-radius: 4px;
		          border-bottom-left-radius: 4px;
		  -moz-border-radius-bottomleft: 4px;
		}

		.table-bordered thead:last-child tr:last-child th:last-child,
		.table-bordered tbody:last-child tr:last-child td:last-child {
		  -webkit-border-bottom-right-radius: 4px;
		          border-bottom-right-radius: 4px;
		  -moz-border-radius-bottomright: 4px;
		}

		.table-striped tbody tr:nth-child(odd) td,
		.table-striped tbody tr:nth-child(odd) th {
		  background-color: #f9f9f9;
		}

		.table tbody tr:hover td,
		.table tbody tr:hover th {
		  background-color: #f5f5f5;
		}
		
		.socialNetworks {
			margin: 0;
			padding: 0;
		}
		
		.socialNetworks li {
			list-style: none;
			margin: 0;
			float: left;
			margin-right: 8px;
		}
		
		.socialNetworks li a {
			padding: 0 6px;
			line-height: 24px;
			border: 1px solid #DDD;
			background: #F5F5F5;
			-moz-border-radius: 4px;
			-webkit-border-radius: 4px;
			border-radius: 4px;
			display: block;
			float: left;
			font-size: 13px;
		}
	</style>
</head>
<body>
	<div id="container" class="content">


		<h1>Wolf's Little Store</h1>
		<p><span class="marked">Wolf's Little Store</span> is an interface design company based in Antwerp, Belgium.</p>
		<p><span class="marked">What you are looking at</span> is a temporary version of Wolf's Little Store. While I reshuffle things and rethink my business, this page will be the main "hub" to what I'm doing and what I've done.</p>
		<p>Below you'll find a list of my projects, in reverse chronological order.</p>

		<table class="table table-bordered table-striped">
			<tr>
				<th width="200">Project name</th>
				<th>Description</th>
				<th>Timestamp</th>
			</tr>
			<tr>
				<td>
					<a href="http://fantasticons.be/">Fantasticons</a>
				</td>
				<td>
					Handmade interface icons - coming soon. Follow <a href="https://twitter.com/#!/fantasticons">@fantasticons</a> to stay up to date.
				</td>
				<td>TBD</td>
			</tr>
			<tr>
				<td>
					<a href="http://wolfslittlestore.tumblr.com/">Project 365 - a photo project</a>
				</td>
				<td>
					Active photo project where I try to post one photo a day
				</td>
				<td>April 2012 - Now</td>
			</tr>
			<tr>
				<td>
					<a href="http://v3.wolfslittlestore.be/">Wolf's Little Store version 3</a>
				</td>
				<td>
					Archived version of Wolf's Little Store (v3). This time a company: the site contains examples of my work. Still has the blog part (now called journal) where I wrote about interface design. Increased focus on mobile.
				</td>
				<td>
					March 2011 - May 2012
				</td>
			</tr>
			<tr>
				<td><a href="http://www.slideshare.net/Wolfr/design-for-developersonlineversionlong">Design for Developers</a></td>
				<td>The goal of Design for Developers is to teach interface design as a set of rules.</td>
				<td>November 2011</td>
			</tr>
			<tr>
				<td>
					<a href="http://www.slideshare.net/Wolfr/ios-design-a-case-study">iOS Design: a case study</a>
				</td>
				<td>
					Presentation about <a href="http://concertwall.mobi">ConcertWall</a>, an iOS application I designed with <a href="http://www.coin-c.com/">Kristof</a> to find the best concerts.
				</td>
				<td>
					March 2012
				</td>
			<tr>
				<td>
					<a href="http://www.slideshare.net/Wolfr/designing-better-user-interfaces">Designing better user interfaces</a>
				</td>
				<td>
					A presentation about designing better user interfaces.
				</td>
				<td>
					February 2012
				</td>
			</tr>
			<tr>
				<td>
					<a href="http://v3.wolfslittlestore.be/nyc">New York City guide</a>
				</td>
				<td>
					A small guide I wrote about visiting the city of New York.
				</td>
				<td>
					October 2011
				</td>
			</tr>
			<tr>
				<td>
					<a href="http://v2.wolfslittlestore.be/">Wolf's Little Store version 2</a>
				</td>
				<td>
					Archived version of Wolf's Little Store in Dutch (v2). Still a blog about web and interface design.
				</td>
				<td>
					January 2009 - February 2011
				</td>
			</tr>
			<tr>
				<td>
					<a href="http://v1.wolfslittlestore.be/">Wolf's Little Store version 1</a>
				</td>
				<td>
					The first version of Wolf's Little Store, started as a blog about web and interface design
				</td>
				<td>
					August 2007 - December 2008
				</td>
			</tr>
			<tr>
				<td>
					<a href="http://v2.wolfslittlestore.be/2009">2009 in Review</a>
				</td>
				<td>
					A website I made to review 2009. An experiment in editorial design.
				</td>
				<td>December 2009</td>
			</tr>
		</table>

		<p>Follow me on various social networks:</p>
		<ul class="socialNetworks">
			<li><a href="http://twitter.com/wolfr_">Twitter</a></li>
			<li><a href="http://www.facebook.com/wolfslittlestore">Facebook (company)</a></li>
			<li><a href="http://www.facebook.com/wolfr">Facebook (personal)</a></li>
			<li><a href="http://www.flickr.com/photos/wolfr/">Flickr</a></li>
			<li><a href="http://be.linkedin.com/in/johanronsse">LinkedIn</a></li>
			<li><a href="http://dribbble.com/Wolfr">Dribbble</a></li>
			<li><a href="https://github.com/Wolfr">Github</a></li>
		</ul>

	</div>
</body>
</html>