<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>Ryan Baudoin - Interface Design and Web Development</title>
<meta name="description" content="An Austin-based freelance designer and developer with over 10 years of experience delivering cost-effective solutions for small businesses and agencies.">

<meta name="twitter:card" value="An Austin-based freelance designer and developer with over 10 years of experience delivering cost-effective solutions for small businesses and agencies.">

<meta property="og:title" content="Ryan Baudoin - Interface Design and Web Development" />
<meta property="og:image" content="http://www.ryanbaudoin.com/images/rbaud-og.jpg" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.ryanbaudoin.com/" />
<meta property="og:description" content="An Austin-based freelance designer and developer with over 10 years of experience delivering cost-effective solutions for small businesses and agencies." /> 

<link href="http://fonts.googleapis.com/css?family=Raleway:500,900" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="rbaud-favicon.ico">
<link rel="stylesheet" href="style.min.css" type="text/css">

<!--[if lt IE 9]>
<link rel="stylesheet" href="css/style-ie8.min.css" type="text/css">
<![endif]-->

<script>
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

	ga('create', 'UA-2440025-3', 'auto');
	ga('send', 'pageview');
</script>
</head>
<body>
	<!--[if lt IE 9]>
	<div class="upgrade_wrapper">
		<div class="upgrade_browser">
			<div class="upgrade__inner">
				<p><strong>Rocking one of the old models, eh?</strong></p>
				<p>This website, like the sites I build, supports the full range of modern browsers.  My work reaches customers on iPhones, iPads, Android phones &amp; tablets, Macs, PCs, and devices that we don't even know exist yet!</p>
				<p>But, just like <a href="https://googleappsupdates.blogspot.com/2012/09/supporting-modern-browsers-internet.html">Google</a>, I can no longer support outdated browsers with the full range of features my clients, and their customers, demand.</p>
				<p>I'd recommend that you take this opportunity to <a href="https://www.mozilla.org/en-US/firefox/products/">upgrade your browser</a> so that you can enjoy a fuller, better internet.</p>
				<p>If you'd like to contact me about this (or anything else), please drop me a line at <script type="text/javascript">document.write("<a data-lt='ie8-contact' href=" + "mail" + "to:" + "info" + "@" + "ryanbaudoin.com" + ">" + "info" + "@" + "ryanbaudoin.com" + "</a>");</script>.</p>
			</div>
		</div>
	</div>
	<![endif]-->
	<div class="loading ani ani-load">
		<div class="loading__inner">
			<img src="images/loading.gif" alt="Loading...">
		</div>
	</div>
	<div class="wrapper ani" id="wrapper">
		<div data-slideid="intro" class="slide slide-intro">
			<div class="intro__content">
				<p class="hello">Hello,</p>
				<h1>
					My name is Ryan.  I'm an interface designer and developer with more than 10 years of experience building for the web.  I live in Austin with my wonderful wife, our daughter, and an exotic catdog named Mildred.
				</h1>
				<h2>
					I run a digital consultancy called <a href="http://www.pepck.com/" data-lt="intro-pepck">Pepck</a>, where I help small businesses and agencies look sharper and work smarter.  And when I'm not working, you can find me toiling away on an endless series of side projects.
				</h2>
				<a href="#" class="btn btn-view_work" data-lt="intro-work_samples">
					<span>View work samples</span>
				</a>
				<span> or </span>
				<script type="text/javascript">document.write("<a data-lt='intro-contact' class='btn btn-contact' href=" + "mail" + "to:" + "info" + "@" + "ryanbaudoin.com" + "><span>Contact me</span></a>");</script>
				<p class="linkedin">I can also be found on <a href="https://www.linkedin.com/in/ryanbaudoin" data-lt="intro-linkedin">LinkedIn</a>.</p>
			</div>
			<img src="images/itsame.gif" alt="One of many possible Ryan Baudoins." class="headshot">
		</div>
		<div data-slideid="work1" class="slide slide-work slide-hyrbidracing ani ani-out_right">
			<div class="work__graphics">
				<div class="gfx gfx-lazy gfx-2x2" data-src="images/hybridracing-1.jpg">
					<div class="gfx__inner">
						<div class="gfx__img"></div>
					</div>
				</div>
				<div class="gfx gfx-lazy gfx-2x2 gfx-nopad" data-src="images/hybridracing-4.jpg">
					<div class="gfx__inner">
						<div class="gfx__img"></div>
					</div>
				</div>
				<div class="gfx gfx-lazy gfx-2x2" data-src="images/hybridracing-3.jpg">
					<div class="gfx__inner">
						<div class="gfx__img"></div>
					</div>
				</div>
				<div class="gfx gfx-2x2 gfx-nopad" data-src="images/hybridracing-2.jpg">
					<div class="gfx__inner">
						<div class="gfx__img">
							<img src="images/hybridracing-2.jpg" alt="Hybrid-Racing / 2008-2015">
						</div>
					</div>
				</div>
			</div>
			<div class="work__content">
				<div class="work__content__inner">
					<p class="project_date">2008-2015</p>
					<h2>Hybrid-Racing</h2>
					<p>Throughout my career, I've specialized in providing all-in-one solutions for small businesses, like the robust eCommerce and marketing site I built for Hybrid-Racing in 2008.</p>
					<p>As a designer, I understand the importance of a coherent brand image and a smooth, enjoyable user experience.  And as a developer, I'm equipped to bring even the most complex designs to life.</p>
					<h3>Services provided</h3>
					<ul>
						<li>Web design</li>
						<li>HTML/CSS development</li>
						<li>Magento eCommerce integration</li>
						<li>Custom Wordpress &amp; Magento themes</li>
					</ul>
					<div class="work__buttons">
						<a href="#" class="btn btn-slide_prev" title="Back to the intro">
							<span>Back to the intro</span>
						</a>
						<script type="text/javascript">document.write("<a data-lt='work1-contact_me' class='btn btn-contact' href=" + "mail" + "to:" + "info" + "@" + "ryanbaudoin.com" + "><span>Contact me</span></a>");</script>
						<a href="#" class="btn btn-slide_next" title="Next work sample">
							<span>Next work sample</span>
						</a>
					</div>
				</div>
			</div>
		</div>
		<div data-slideid="work2" class="slide slide-work slide-natureconservancy ani ani-out_right">
			<div class="work__graphics">
				<div class="gfx gfx-lazy gfx-4x1" data-src="images/natureconservancy-1.jpg">
					<div class="gfx__inner">
						<div class="gfx__img"></div>
					</div>
				</div>
				<div class="gfx gfx-lazy gfx-2x3" data-src="images/natureconservancy-3.jpg">
					<div class="gfx__inner">
						<div class="gfx__img"></div>
					</div>
				</div>
				<div class="gfx gfx-2x3 gfx-nopad" data-src="images/natureconservancy-2.jpg">
					<div class="gfx__inner">
						<div class="gfx__img">
							<img src="images/natureconservancy-1.jpg" alt="My.Nature.Org / 2009-2015">
						</div>
					</div>
				</div>
			</div>
			<div class="work__content">
				<div class="work__content__inner">
					<p class="project_date">2009-2015</p>
					<h2>My.Nature.Org</h2>
					<p>My clean, minimal design aesthetic lends itself well to websites that need to look fresh for years to come.</p>
					<p>In 2009, I designed the look and feel of the personalized My.Nature.Org portal for The Nature Conservancy, a million-member charity working to preserve and protect natural habitats around the world.</p>
					<p>The designs I created for The Nature Conservancy were live from 2009 until 2015, when My.Nature.Org was retired.</p>
					<h3>Services provided</h3>
					<ul>
						<li>Web design</li>
					</ul>
					<div class="work__buttons">
						<a href="#" class="btn btn-slide_prev" title="Previous work sample">
							<span>Previous work sample</span>
						</a>
						<script type="text/javascript">document.write("<a data-lt='work2-contact_me' class='btn btn-contact' href=" + "mail" + "to:" + "info" + "@" + "ryanbaudoin.com" + "><span>Contact me</span></a>");</script>
						<a href="#" class="btn btn-slide_next" title="Next work sample">
							<span>Next work sample</span>
						</a>
					</div>
				</div>
			</div>
		</div>
		<div data-slideid="work3" class="slide slide-work slide-tinroof ani ani-out_right">
			<div class="work__graphics">
				<div class="gfx gfx-4x2" data-src="images/tinroof-1.jpg">
					<div class="gfx__inner">
						<div class="gfx__img">
							<img src="images/tinroof-1.jpg" alt="Tin Roof Brewing Co. / 2011-Current">
						</div>
					</div>
				</div>
				<div class="gfx gfx-lazy gfx-2x2" data-src="images/tinroof-2.jpg">
					<div class="gfx__inner">
						<div class="gfx__img"></div>
					</div>
				</div>
				<div class="gfx gfx-lazy gfx-2x2 gfx-nopad" data-src="images/tinroof-4.jpg">
					<div class="gfx__inner">
						<div class="gfx__img"></div>
					</div>
				</div>
			</div>
			<div class="work__content">
				<div class="work__content__inner">
					<p class="project_date">2011-Current</p>
					<h2>Tin Roof Brewing Co.</h2>
					<p>Having a wide range of skills means I often get to collaborate with other designers and creative firms to deliver beautiful, effective websites for their clients.</p>
					<p>In 2011, I partnered with New Orleans designer Rick Dobbs to build Tin Roof Brewing Company's new online home.  Four years later, the custom Wordpress website we created for them continues to serve as their primary online touchpoint for customers.</p>
					<h3>Services provided</h3>
					<ul>
						<li>Web design</li>
						<li>HTML/CSS development</li>
						<li>Custom Wordpress theme</li>
					</ul>
					<div class="work__buttons">
						<a href="#" class="btn btn-slide_prev" title="Previous work sample">
							<span>Previous work sample</span>
						</a>
						<script type="text/javascript">document.write("<a data-lt='work3-contact_me' class='btn btn-contact' href=" + "mail" + "to:" + "info" + "@" + "ryanbaudoin.com" + "><span>Contact me</span></a>");</script>
						<a href="#" class="btn btn-slide_next" title="Next work sample">
							<span>Next work sample</span>
						</a>
					</div>
				</div>
			</div>
		</div>
		<div data-slideid="work4" class="slide slide-work slide-hungeratlas ani ani-out_right">
			<div class="work__graphics">
				<div class="gfx gfx-lazy gfx-1x4 gfx-nopad" data-src="images/hungeratlas-2.gif">
					<div class="gfx__inner">
						<div class="gfx__img"></div>
					</div>
				</div>
				<div class="gfx gfx-3x1" data-src="images/hungeratlas-1.gif">
					<div class="gfx__inner">
						<div class="gfx__img">
							<img src="images/hungeratlas-1.gif" alt="Hunger Atlas / 2013-Current">
						</div>
					</div>
				</div>
				<div class="gfx gfx-lazy gfx-3x1 gfx-video" data-src="images/hungeratlas-4.gif">
					<div class="gfx__inner">
						<div class="gfx__img">
							<video autoplay loop>
								<source src="video/hungeratlas.ogv" type="video/ogg">
								<source src="video/hungeratlas.webm" type="video/webm">
								<source src="video/hungeratlas.mp4" type="video/mp4">
							</video>
						</div>
					</div>
				</div>
				<div class="gfx gfx-lazy gfx-3x1" data-src="images/hungeratlas-3.gif">
					<div class="gfx__inner">
						<div class="gfx__img"></div>
					</div>
				</div>
			</div>
			<div class="work__content">
				<div class="work__content__inner">
					<p class="project_date">2013-Current</p>
					<h2>The Hunger Atlas</h2>
					<p>The web is always evolving, and one of the most rewarding parts of my job is putting new web technologies and trends to work for my clients.</p>
					<p>Feeding Texas, a nonprofit dedicated to eliminating hunger in Texas, contacted me in 2013 to help create a multi-screen web resource to educate users on computers, tablets, and phones about the realities of food insecurity.</p>
					<h3>Services provided</h3>
					<ul>
						<li>Responsive web design</li>
						<li>HTML/CSS development</li>
						<li>Custom Wordpress plugin</li>
					</ul>
					<div class="work__buttons">
						<a href="#" class="btn btn-slide_prev" title="Previous work sample">
							<span>Previous work sample</span>
						</a>
						<script type="text/javascript">document.write("<a data-lt='work4-contact_me' class='btn btn-contact' href=" + "mail" + "to:" + "info" + "@" + "ryanbaudoin.com" + "><span>Contact me</span></a>");</script>
						<a href="#" class="btn btn-slide_next" title="Thanks for visiting">
							<span>Thanks for visiting</span>
						</a>
					</div>
				</div>
			</div>
		</div>
		<div data-slideid="outro" class="slide slide-outro ani ani-out_right">
			<div class="intro__content">
				<p class="goodbye">Thanks for visiting.</p>
				<p>
					If you're a business, creative agency, or freelancer looking for a creative technical partner, drop me a line.  I can help you stand out, grow your business online, build the next big thing, or just meet your deadlines.</p>
				<p>
					I am currently <span class="availability">available</span> for new business, and I'd love to hear about your project.
				</p>
				<div class="work__buttons">
					<a href="#" class="btn btn-slide_prev" title="Previous work sample">
							<span>Previous work sample</span>
						</a>
					<script type="text/javascript">document.write("<a data-lt='outro-contact_me' class='btn btn-contact' href=" + "mail" + "to:" + "info" + "@" + "ryanbaudoin.com" + "><span>Contact me</span></a>");</script>
					<a href="#" class="btn btn-restart" title="Back to the start">
						<span>Back to the start</span>
					</a>
					<p class="linkedin">I can also be found on <a href="https://www.linkedin.com/in/ryanbaudoin" data-lt="outro-linkedin">LinkedIn</a>.</p>
				</div>
			</div>
			<img src="images/loading.gif" alt="It's a five-minute logo!" class="rbaud-logo">
		</div>
	</div>
	<script>
		var elements = document.querySelectorAll(".ani");
		for(var i=0; i<elements.length; i++) { if(elements[i]) { elements[i].className = elements[i].className + " ani-init"; } }
	</script>
	<style>
		.wrapper.ani-init { opacity: 0; }
	</style>
	<script src="js/rbaud-1.1.all.min.js" type="text/javascript"></script>
</body>
</html>