<!--
NNNNNNNNNNNNNNDDNDDDDOOOOOOOZZOOOOOOOO88888DNOOOOOOOOO8O8O888888888888888D8DDDDD
NNNNNDDDDDDNDDDDDDDDDOZZZOOZZZZOO88DDDDDDDDDDDOZOOOOOOOOOOOO88888888888888888DDD
NNDDDDDDDDDD8DDDD8888OZZZOOZZO888OO8O888D8DDDDDDD8OOOO8OOOOOOOO88888888888888888
DDDDDDDDDDDD8DDD88888ZZZZOOOOOOO8OZZOOOZOO88DDDNDNDOOOOOOOOOOOOO8888888888888888
DDDDDDDDD888888DO8OO8ZZZZ8OZ88OO$?==?III$$O8888DNNDN88OOOOOOOOOOOO88888888888888
DDDDDDD8D88888O8OOOO8ZZ$ZOOZ?+~~::::::,,:~=+77$ODNDDDDO8OOOOOOOOOOOO888888888888
DDDD8D8888888O8OOOOOO$$ZO+~~~:::,::::::::::~===+?7$8DD8OOOOOOOOOOOOOOO8888888888
DD8D888888888888888OO7ZOI~=~:::::::::::::~~=====++??$DD888OOOO888888888888888888
D8888888888888OOOOZOZIOI==~~:::::::::::~~~~~~===++??I7DD88OOOOOOOOOOOOOOO8888888
D88888888O8OZZZZZ$$Z$IZ+=~~~:::::::::::~~~~~~===+???I7OD8OOOOOOOOOOOOOOOO8888888
888888OOOZOOZZZZ$$$$$Z7==~~~:::::::::::~:::~~~~=++?II7$88OOOOOOOOOOOOOOO8O888888
88888OOOOZZZZZZZ$$$7Z8I==~~~:::::::::::::::::~~=++?II7Z8DOOOOOOOOZOOOOOOOOOOOO8O
8888OOOOOZZZOZZZZO$$O8?==~::::::::~:~~~~~~~~~~==++?II7Z8NOZZZZZZZZOOOOOOOOOO888O
8O88OOOOOZZZOOOOZZ$$8D?=~:~~~~====+++++??++??????++?I7Z8NOZZZZZZZZOOOOOOOOOOOO88
8O8OOOOOOZZOZZOO$$ZZDN=~:~=?$ZZ$II?I?III7I7I77$$77I?+?Z8M8ZZZZZZZZZZZOOOOOOOOOOO
8O8OOOOOOZOZZZZZ$$$ONN++~+?IZOOOOZ$$$$$$ZZZO8DDD88O$$778M8$$ZZZZZ$ZZZZZOOOOOOOOO
888OOOOOOOOZZZZZZ$$8NO7$ZZ$$$$$$ZOZ$$$ZOO88888888OOOOO$OMD77$$$$$$Z$ZZZZZZZZOOOO
888O8OOOOOOOZOZZOOZONMI7OZO88DDD88ONMNNNNNDDDDDD88OOOODNNN$77$$$$7$$$$ZZ$ZZZZZZZ
888OOOOOOZZOOOOOZZ$ZNMI7ODDONMNNND8ZMM8DMDNNNMNNMMND888DMZ7I7777$7$$$$$$$$$ZZZZZ
88O8OOOOOOOZZZZZZ$OI$D?77777ZOO88OZ8$,::?DNNND88888NNN8NM7II77I7777777$$$$$$$$Z$
OOOOOOOOOOZZZZZZZZZ+7=$++?I7$$77?+?7:,::=D88888DDDD8OOZ8OODNIIII77777777$$$$$$$$
OOOOOOOOZZZOOOOOOZI??~~=I777777$Z$$~:,:~?$DD$77I77III7OZODND?IIIIII777777$$$$$$$
OOOOOOOOOZOOOOOOOOIZI=========++?7?~:::~?$O87I???????IZOO88N?III77777777777$$$$$
OOOOOOOOOOOZZOOOOO7+++=======++?II+::::~+IZ8Z$$$77777$OOODZIIIIIIII777$$$$$$$$Z$
88OOOOOOOOOZZZZZZZZ~=?+++++++?I77=::::~~=?+I8OZ$$$$$ZZOOOZ7+????IIIIIIII7777$$77
O8OOOOOOOOOZZZZZZZZ=~???????I7ZZ+==~~=++?7$ID88OZZZZOOOOO$??????IIIIIIII77777777
O8OOOOOOOOZZZZZZOZZ$~+I???I7$Z$I+IZ?I$ZZO888ZZO88OOOO888OI+????IIIIIIIIII7777777
8OOOOOOOOOZOOZZZ8OZZ++IIII7$$I+===IOZZO8DNN87$Z$888888OOO+??????IIIIIII7777777$$
88OOOOOOOZZOOOZOOOZ$++?III77++===+?7Z8NNNND8Z$ZZZOO888OZI???????IIIIIIII7777777$
8OOOOOOOOZOOOOOOOOO$+++??I??7II?III77$$Z88OZZO8O88OO88OI+?????????IIII777777$$$$
88OO88OO8OO8ZO88ZOO$+++????7$O8Z$ZO8DDDDNNNDDDNNDD888O$++?????I?IIII77777777$$$$
888OO8OOOOOOOO8OZZO$+++????IOZ$II+++I7II7ZZZ8DDND888OO????????IIIIII7777777$$$$$
8888888888OOOOOOOZO$++++???II??++?7$ZZZOOO88OOO88D88OO+?????IIIIIIIII77777$$$$$$
8888888888OOOOOOOOO$+++++?I$7I???I7ZOO888D88OOOO888OOI+??????IIIIII7777$$$7$$$$$
88888888O8OOOOOOOOO$++++=?I7Z7?+?I7$$ZD88OOOZ$Z8888OI+??????IIIIII7777777$$$$$$$
88888888OOOOOOOOOOO$++++,?IIZ$I?==~=+I$7777I7ZO8888?+++??????IIII7I77777$7$$$$$$
88888888OOOOOOOOOOO7++?+.~?IO$7I+=++?I77$7I7$ODDOOO++???????IIIIII7777777$$$$$$$
888888888OOOO8OOOOO$+?I~..~IO8Z7?II7$$$$$$$Z88DD8D$+++????IIIIIIII777777$7$$$$$Z
888888888888888OD88I:,.,...:I$OO$$$$$ZZZZOO8DDD8DZ7????????IIIIIII77777$$$$$$$$$
88888888888DD8ZI,......,,,,,=7$$OOOOZOOOO88DD8DNZ7III?+++I77777777$$$$$$$$$$$$Z$
8DDDDDDO$=:,..........,,,,,,.,?ZZZZO88888888NNDZIII???+===~~=+++77I????II7$$$$ZZ
$?~,,,,,,,,.,,,,.......,,,,,,,,,$OZO88888DNNOZ$$III???+====+====~~~~=+7$Z$$Z$ZZZ
,,,,,:,,,,,,,,,,,,,........,.,,,:+OOOO88D8OZ777III???+=====~~~:~~~~~:~~:~I$ZZZZZ
:,:,,,:,,,,,,,,,,,,,.,,.......,.,::O8D8DZ7$$$777I?????+++===~~~~~~~~~:::::~~I$OZ
:::,,,,,,,,,,,,,,,,,,,,....,.,,,.+$I++=~~ZZZZ$7I??+II?+=======~~~~~~~~~~~~~~~~~I
::::,,:,,,,,,,,,,,,,,,,........:DOZ++78I:?77+::~===++===========~~~~~~~~~~~~~~++
:::::,::,,,,,,,,,,,,,::..,...?NDDDZ888NNM?+=:::~~~~==++============~~~~~~=~~~~==
:::::,,::,,,,,,,,,,,:~:....,D8O8DDDZ$7ZZZ?::~=++===================~~~~~~=~~~~~+
::::::,,:,,,,,,,,,,::~:.,~~=?$O7~~=~~~~=~::~=~~~~====++========~~~~~~~~~~~~~~~~=
:::::::,::,,,,,,:::::~:~~~~~~~+I===+??=~=~::::::===~=+7+====?+=~~~~~~~~~=~~~~~~~
~::::::,,::,,,,::~:~~~==+??+::~=ZDD87=~~~::::~~=++++=IO?====?+==~~~~~~~~=~~~~~~~
~:::::::::::::~~~~~~=+???$Z7+~~~=+$~:~=~~~~+I7$$Z$7+?I7+=====++=~~~~~~~=+~~~~~~~
~:::::::::::~~~~~~~~~~:::~~~+?+==?I=====+$ZOOOO7=~~~~=++=====+?+~~~~~~~=+~~~~~~~
~::::::::::~=~~~~~~::::::~~~===+=+=+=++7ZDNNM$~:::~~=++====+++??~~~~~~=++~~~~~~~
~::::::::~~====~~~=====++==~~~~~=+++++ODNNNN=~~~===?II+++++????I==~~=~=+=~~~~~~~
~::::::::~~=~===~~~~~~~==I77+~::~==MNNNDNN8?++II7$$ZZ$77IIII???I??+====+=~~=~~~~
~::~~:::::++===~~~~~~~~====~==+=~==+?DDD8DZ7$ZO8888888OOOZZ$7777$I+===++=~~=~~~~
~~:~~::::+?==+?+===~~~~=++==~~~~~=++?78DD88DDD8OOOO8888888OZ$$$$O7?==++++====~~~
~~::~~:::??+++==I77???+=====~~~~======??7D88N88OZZO888DDD8OZZZOO8OI++++++=======
~:::~~~~:II?++++=~~+?I$ZZ$7I++===+==+=~:~ODDDD8ZZZO888DDDOZZOO8888Z+++??+==+====


Ahh, the venerable view source. Normally I'd be ecstatic you're here. 

Unfortunately, this page was started as a Wordpress page and then stopped before
it got anywhere.. and now I've just hacked pieces together. As you can see,
I made it before responsive design was a "thing"... even though I do responsive
design as my primary work these days. Embarrassing, I know.

Sorry! I promise it'll be better soon, and feel free to email me for code
samples. I can deliver.

-matt


--><!DOCTYPE html> 
<html lang="en">
<head> 
	<link href='http://fonts.googleapis.com/css?family=Cardo' rel='stylesheet'>
	<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet'>
	
	<title>Matt Stauffer Design - Web Development and User Experience Design, Chicago, IL</title> 
	<meta charset="utf-8">

	<meta name="Description" content="Matt Stauffer is a web developer and user experience designer who designs beautiful, functional, simple web sites for businesses and organizations."> 

	<!-- Coming soon: Responsive redesign -->
	<link rel="stylesheet" href="scripts/css/style.css" type="text/css"> 
	<!-- Temporary tweaks for under construction site -->
	<link rel="stylesheet" href="scripts/css/under_construction.css" type="text/css"> 
	
</head> 
<body> 

<div id="container"> 
	<div id="popover">
		<a href="#" class="show_portfolio">Close this</a>

		<p>I primarily work in two contextss: contracting as a developer (<a href="mailto:info@mattstaufferdesign.com">contact me</a> for code samples) and helping small businesses and non-profits establish themselves online.</p>

		<h1>Portfolio: small businesses and non-profits</h1>
		<ul>
			<li><h2>Businesses</h2>
				<ul>
					<li><a href="https://karaniapp.com/" target="_blank">Karani for Fundraising - Webapp</a></li>
					<li><a href="http://www.seeryanwrite.com/" target="_blank">See Ryan Write - the Portfolio of Ryan Day</a></li>
					<li><a href="http://www.staffhacker.com/" target="_blank">Staffhacker</a></li>
					<li><a href="http://www.preservationconsulting.net/" target="_blank">Preservation Consulting</a></li>
					<li><a href="http://www.solomonsway.net/" target="_blank">Solomon's Way</a></li>
					<li><a href="http://precontanks.com/" target="_blank">Precon Pre-stressed Steel Tanks</a></li>
					<li><a href="http://www.servantsystems.com/" target="_blank">Servant Systems</a></li>
					<li><a href="http://www.gainesvilleyouthsoccer.net/" target="_blank">Gainesville Youth Soccer</a></li>
				</ul>
			</li>
			<li><h2>Non-profits</h2>
				<ul>
					<li><a href="http://kyintervarsity.org/" target="_blank">InterVarsity - Kentucky Area</a></li>
					<li><a href="http://www.ivsoutheast.com/" target="_blank">InterVarsity Southeast Region</a></li>
					<li><a href="http://www.chaptercamp.org/" target="_blank">InterVarsity Southeast Chapter Camp</a></li>
					<li><a href="http://www.gaintervarsity.org/" target="_blank">InterVarsity - Georgia Area</a></li>
					<li><a href="http://www.ivspringconference.org/" target="_blank">InterVarsity Spring Conference</a></li>
					<li><a href="http://www.intervarsityuf.org/" target="_blank">InterVarsity at UF</a></li>
				</ul>
			</li>
		</ul>

		<!-- <h1>Code samples: contract development work</h1> -->

	</div><!--/#popover-->
	<div id="popover_screen"></div>
	
	<!-- Development tab -->
	<a href="#" id="development_tab_button">Looking for a front-end or back-end freelance web developer? Click here.</a>
	<div id="development_tab">
		<p>I contract work regularly in front-end development (XHTML, HTML5, CSS2, CSS3, jQuery) and back-end development (PHP, MySQL, Wordpress, Perch, ExpressionEngine).</p>
		<p>If you need beautiful, effective, standards-compliant code, <a href="mailto:info@mattstaufferdesign.com">contact me now</a>.</p>
	</div>
	<!-- End Development tab -->
	
	<header id="head">
		<h1 id="logo">Matt Stauffer Design</h1>
	</header><!--/#head-->
	
	<div id="body">
		<section id="greeting">
			Hello! My name is Matt Stauffer, and I design <a href="#" class="show_portfolio">beautiful,<br> functional, simple web sites</a> for businesses &amp; organizations.
		</section><!--/#greeting-->		
	</div><!--/#body-->
</div><!--/#container-->

	<footer>
		<div class="inner">
			<section class="three_cols">
				<section class="column">
					<header><h1>About Me</h1></header>
					<img src="images/matt-real.jpg" alt="A real picture of Matt" id="real-matt">
					<p>I'm an architect, developer and designer living in Chicago, Illinois. I'm married to Tereva, I play bass, and I'm an active Internet citizen (see "Find Me Elsewhere").</p>
					<p>In all of my work, I love providing the simplest, easiest solution for the problem in front of me. For a sample of a few sites I've worked on recently, check out <a href="#" class="show_portfolio">this small portfolio.</a></p>
				</section><!--/.column-->
				<section class="column">
					<header><h1>Services</h1></header>
					<p>As an <strong>architect</strong> I work at the "big picture" level, focusing on understanding the problems and planning for the solutions.</p>
					<p>As a <strong>developer</strong> I create and adapt code to implement these solutions.</p>
					<p>And as a <strong>designer</strong> I work to understand and shape how the user experiences the solutions.</p>
					
					<p>To see some of my previous work, please take a look at <a href="#" class="show_portfolio">this small portfolio</a>.</p>
				</section><!--/.column-->
				<section class="column">
					<section>
						<header><h1>Contact Me</h1></header>
						<p>I'm currently <strong>unavailable</strong> for work.</p>
						<!-- <p><a href="mailto:info@mattstaufferdesign.com">Contact me now</a> to talk about how I can help you with your product or project.</p> -->
						<p>Please still feel free to <a href="mailto:info@mattstaufferdesign.com">contact me</a>, but I'm not taking on new projects at the moment.</p>
					</section>
					<section>
						<header><h1>Find Me Elsewhere</h1></header>
						<ul>
							<li><a href="http://careers.stackoverflow.com/mattstauffer" target="_blank">StackOverflow Careers</a></li>
							<li><a href="http://stackoverflow.com/users/1052406/matt-stauffer" target="_blank">StackOverflow</a></li>
							<li><a href="http://coderwall.com/mattstauffer" target="_blank">Coderwall</a></li>
							<li><a href="http://github.com/mattstauffer/" target="_blank">GitHub</a></li>
							<li><a href="http://codepen.io/mattstauffer" target="_blank">CodePen</a></li>
							<li>--</li>
							<li><a href="http://www.linkedin.com/in/mattstauffer" target="_blank">Linkedin</a></li>
							<li><a href="http://www.twitter.com/stauffermatt" target="_blank">Twitter</a></li>
							<li><a href="http://www.flickr.com/photos/mstauffer" target="_blank">Flickr</a></li>
							<li><a href="http://thisenddown.tumblr.com/" target="_blank">Tumblr</a></li>
						</ul>
					</section>
				</section><!--/.column-->
			</section><!--/.three_cols-->
		</div>
		<div class="end">All content copyright &copy; 2013 Matt Stauffer</div>
	</footer><!--/#footer-->

<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script> 
<script>!window.jQuery && document.write(unescape('%3Cscript src="scripts/js/libs/jquery-1.5.min.js"%3E%3C/script%3E'))</script>

<script type="text/javascript">
// Inlined for simple under construction script
$.noConflict();
jQuery(document).ready(function( $ ){
	var $popover = $('#popover'),
		$popover_screen = $('#popover_screen');

	$('.show_portfolio').click(function(e){
		$popover.trigger('pop');
		e.preventDefault();
	});
	$popover_screen.click(function(e){
		$popover.trigger('pop');
		e.preventDefault();
	});
	// @todo: Upgrade jQuery and re-work as 'on'
	$popover.bind('pop', function(){
		$popover.toggle();
		$popover_screen.toggle();
	});

	$('#development_tab_button').click(function(e) {
		$('#development_tab').animate({
			height: 'toggle'
		}, 500);
		e.preventDefault();
	});
});

// Google Analytics
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-25859819-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

</body>
</html>