<!DOCTYPE html>




<html class='zda-hugo' lang="en-us">

<head>
	<meta name="generator" content="Hugo 0.17" />
  <meta charset="utf-8">
<title>Zach Alexander | Design &amp; Development</title>
<meta name="description" content="I&#39;m a self-taught designer and San Francisco-trained web developer. I&#39;ve worked with startups, nonprofits, and individuals, helped design and build software for an award-winning journalism project, and taught students from around the world.">
<meta name="author" content="Zach Alexander">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">

<link rel="shortcut icon" href="/favicon.ico">
<meta name="msapplication-config" content="/browserconfig.xml">
<meta name="theme-color" content="#724d24">


  
  <meta property="og:image" name="og:image" content="https://www.zachalexander.com/images/zachalexander-macbook-1520px.jpg">
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:image" content="https://www.zachalexander.com/images/zachalexander-macbook-1520px.jpg">
  

<meta property="og:title" name="og:title" content="Zach Alexander | Design &amp; Development">
<meta name="twitter:title" content="Zach Alexander | Design &amp; Development">

  <meta property="og:description" content="I&#39;m a self-taught designer and San Francisco-trained web developer. I&#39;ve worked with startups, nonprofits, and individuals, helped design and build software for an award-winning journalism project, and taught students from around the world.">
  

<meta property="og:site_name" name="og:site_name" content="Zach Alexander | Design &amp; Development">
<meta name="twitter:site" content="@zachalexander">
<meta name="twitter:creator" content="@zachalexander">
<meta property="og:url" name="og:url" content="https://www.zachalexander.com/">
<meta name="twitter:url" content="https://www.zachalexander.com/">

<link rel="canonical" href="https://www.zachalexander.com/"/>

<script class='vendor-mixpanel' type="text/javascript">(function(e,a){if(!a.__SV){var b=window;try{var c,l,i,j=b.location,g=j.hash;c=function(a,b){return(l=a.match(RegExp(b+"=([^&]*)")))?l[1]:null};g&&c(g,"state")&&(i=JSON.parse(decodeURIComponent(c(g,"state"))),"mpeditor"===i.action&&(b.sessionStorage.setItem("_mpcehash",g),history.replaceState(i.desiredHash||"",e.title,j.pathname+j.search)))}catch(m){}var k,h;window.mixpanel=a;a._i=[];a.init=function(b,c,f){function e(b,a){var c=a.split(".");2==c.length&&(b=b[c[0]],a=c[1]);b[a]=function(){b.push([a].concat(Array.prototype.slice.call(arguments,
0)))}}var d=a;"undefined"!==typeof f?d=a[f]=[]:f="mixpanel";d.people=d.people||[];d.toString=function(b){var a="mixpanel";"mixpanel"!==f&&(a+="."+f);b||(a+=" (stub)");return a};d.people.toString=function(){return d.toString(1)+".people (stub)"};k="disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config reset people.set people.set_once people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" ");
for(h=0;h<k.length;h++)e(d,k[h]);a._i.push([b,c,f])};a.__SV=1.2;b=e.createElement("script");b.type="text/javascript";b.async=!0;b.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===e.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";c=e.getElementsByTagName("script")[0];c.parentNode.insertBefore(b,c)}})(document,window.mixpanel||[]);
mixpanel.init("d7b80d1a427472031169337b795fd7f2");</script>


  <link class='deprecated' rel="stylesheet" href="css/bootstrap.css">
  <link class='deprecated' rel="stylesheet" href="css/style.css">

<link rel="stylesheet" href="css/theme.css">
<link rel="stylesheet" href="css/simple-line-icons.css">
<style class='critical-styles'>
  html{background-color:#50381d}body{color:#444;font-family:Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"}a,a:hover,a:focus{color:#0a31f5}button,button:hover,.btn,.btn:hover{background:#0a31f5}.theme-hero{background:#865a2b;height:100vh;max-height:148vw;position:relative}.theme-hero:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(at bottom, rgba(80,56,29,0) 0%, rgba(80,56,29,0) 50%, rgba(80,56,29,0.6) 100%),linear-gradient(to bottom, #50381d 0%, rgba(80,56,29,0) 67%),linear-gradient(to right, rgba(128,85,40,0.1) 0%, rgba(128,85,40,0) 10%, rgba(128,85,40,0) 90%, rgba(128,85,40,0.1) 100%)}.theme-hero .theme-hero__container{margin-right:auto;margin-left:auto;padding-left:16px;padding-right:16px;margin:0 auto;height:100%;position:relative}@media (min-width: 768px){.theme-hero .theme-hero__container{width:750px}}@media (min-width: 992px){.theme-hero .theme-hero__container{width:970px}}@media (min-width: 1200px){.theme-hero .theme-hero__container{width:1170px}}.theme-hero .theme-hero__image-row{position:absolute;bottom:0;left:0;right:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.theme-hero .theme-hero__image-wrap{position:relative;width:100%;max-width:100%}@media screen and (min-width: 768px){.theme-hero .theme-hero__image-wrap{width:950px}}@media screen and (min-width: 1366px){.theme-hero .theme-hero__image-wrap{width:100%}}.theme-hero img{display:block;width:100%;margin:0 auto}.site-nav{position:absolute;z-index:1;width:100%;padding-top:12px}.site-nav .site-nav__container{margin-right:auto;margin-left:auto;padding-left:16px;padding-right:16px;height:44px;display:-webkit-box;display:-ms-flexbox;display:flex}@media (min-width: 768px){.site-nav .site-nav__container{width:750px}}@media (min-width: 992px){.site-nav .site-nav__container{width:970px}}@media (min-width: 1200px){.site-nav .site-nav__container{width:1170px}}.site-nav .site-nav__brand{position:relative;z-index:2;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;min-width:250px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;color:#fff}.site-nav .site-nav__brand-primary{text-shadow:0px 0px 16px rgba(17,17,17,0.15);font-size:22px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;position:relative;height:100%;padding-top:4px;padding-bottom:4px;margin:0;font-size:22px;font-weight:300;color:#fff}.site-nav .site-nav__brand-primary:hover{text-decoration:none;color:#0f93ff}.site-nav .site-nav__brand-primary:hover span:before{visibility:visible;-webkit-transform:scaleX(1);transform:scaleX(1)}.site-nav .site-nav__brand-primary span{display:inline-block;position:relative;padding:2px 0}.site-nav .site-nav__brand-primary span:before{display:none;content:"";position:absolute;width:100%;height:2px;bottom:0;left:0;background-color:rgba(15,147,255,0.7);visibility:hidden;-webkit-transform:scaleX(0);transform:scaleX(0);transition:all 0.3s ease-in-out 0s}@media screen and (min-width: 768px){.site-nav .site-nav__brand-primary span:before{display:block}}.site-nav .site-nav__tagline{position:absolute;top:100%;font-size:21px;color:rgba(255,255,255,0.33)}.site-nav .site-nav__toggle{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:0}.site-nav .site-nav__toggle-hamburger{cursor:pointer;text-decoration:none;border-bottom:none}.site-nav .site-nav__toggle-hamburger:hover,.site-nav .site-nav__toggle-hamburger:focus,.site-nav .site-nav__toggle-hamburger:active{outline:none}.site-nav .site-nav__toggle-hamburger i{position:relative;z-index:2;display:block;width:25px;height:3px;color:#fff;font:bold 14px/.4 Helvetica;text-transform:uppercase;text-indent:-55px;background:#907e66;transition:all 0.2s ease-out;border-radius:4px}.site-nav .site-nav__toggle-hamburger i::before,.site-nav .site-nav__toggle-hamburger i::after{content:'';width:25px;height:3px;background:#907e66;position:absolute;left:0;transition:0.2s ease;border-radius:4px}.site-nav .site-nav__toggle-hamburger i::before{top:-8px}.site-nav .site-nav__toggle-hamburger i::after{bottom:-8px}.site-nav input{display:none}.site-nav input:checked ~ .site-nav__toggle-hamburger i{background:transparent}.site-nav input:checked ~ .site-nav__toggle-hamburger i::before{top:0;-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}.site-nav input:checked ~ .site-nav__toggle-hamburger i::after{bottom:0;-webkit-transform:rotateZ(-45deg);transform:rotateZ(-45deg)}.site-nav .site-nav__menu{padding-top:0;padding-bottom:0;position:absolute;z-index:1;top:0;right:0;left:0;max-height:0;overflow:hidden;opacity:0;transition:opacity 300ms cubic-bezier(0.19, 1, 0.22, 1),padding 300ms cubic-bezier(0.95, 0.05, 0.795, 0.035),max-height 300ms cubic-bezier(0.95, 0.05, 0.795, 0.035);background:rgba(0,0,0,0.67)}.site-nav .site-nav__menu ul{padding:0;margin-right:auto;margin-left:auto;padding-left:16px;padding-right:16px;list-style:none}@media (min-width: 768px){.site-nav .site-nav__menu ul{width:750px}}@media (min-width: 992px){.site-nav .site-nav__menu ul{width:970px}}@media (min-width: 1200px){.site-nav .site-nav__menu ul{width:1170px}}.site-nav .site-nav__menu li{padding-left:24px}.site-nav .site-nav__menu li a{text-shadow:0px 0px 16px rgba(17,17,17,0.15);font-size:22px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;position:relative;height:100%;padding-top:4px;padding-bottom:4px;margin:0;font-size:22px;font-weight:300;color:#fff}.site-nav .site-nav__menu li a:hover{text-decoration:none;color:#0f93ff}.site-nav .site-nav__menu li a:hover span:before{visibility:visible;-webkit-transform:scaleX(1);transform:scaleX(1)}.site-nav .site-nav__menu li a span{display:inline-block;position:relative;padding:2px 0}.site-nav .site-nav__menu li a span:before{display:none;content:"";position:absolute;width:100%;height:2px;bottom:0;left:0;background-color:rgba(15,147,255,0.7);visibility:hidden;-webkit-transform:scaleX(0);transform:scaleX(0);transition:all 0.3s ease-in-out 0s}@media screen and (min-width: 768px){.site-nav .site-nav__menu li a span:before{display:block}}.site-nav input:checked ~ .site-nav__menu{max-height:9999px;padding-top:110px;padding-bottom:20px;opacity:1;transition:opacity 300ms cubic-bezier(0.77, 0, 0.175, 1),padding 300ms cubic-bezier(0.19, 1, 0.22, 1),max-height 300ms cubic-bezier(0.19, 1, 0.22, 1)}.site-nav .site-nav__underlay{display:none;position:absolute;top:0;left:0;right:0;height:0;height:100vh}.site-nav input:checked ~ .site-nav__underlay{display:unset}@media screen and (min-width: 992px){.site-nav .site-nav__toggle-hamburger{display:none}.site-nav .site-nav__menu,.site-nav input:checked ~ .site-nav__menu{position:static;padding-top:0;padding-right:0;max-height:none;text-align:right;overflow:hidden;opacity:1;background:transparent}.site-nav .site-nav__menu ul,.site-nav input:checked ~ .site-nav__menu ul{padding-right:0;width:auto}.site-nav .site-nav__menu li,.site-nav input:checked ~ .site-nav__menu li{padding-left:32px;display:inline-block}}

</style>

</head>
<body>
  <header class='site-nav'>
  <div class='site-nav__container'>
    <div class='site-nav__brand'>
      <a class='site-nav__brand-primary' href="/">
        <span>Zach Alexander</span>
      </a>
      <span class='site-nav__tagline'>Design &amp; Development</span>
    </div>

    <label class='site-nav__toggle'>
      <input type='checkbox'>
      <div class='site-nav__toggle-hamburger'><i></i></div>
      <aside class='site-nav__underlay'></aside>
      <div class='site-nav__menu site-nav__menu--mobile'>
        <ul>
  
  
  <li><a href="#about"><span>About</span></a></li>
  
  
  <li><a href="#work"><span>Work</span></a></li>
  
  
  <li><a href="#testimonials"><span>Testimonials</span></a></li>
  
  
  <li><a href="#services"><span>Services</span></a></li>
  
  
  <li><a href="#contact"><span>Contact</span></a></li>
  
  
</ul>

      </div>
    </label>
  </div>
</header>


  <section
  class='theme-hero'
  id="fh5co-home"
  data-section="home">
  <div class='theme-hero__container'>
    <div class='theme-hero__image-row'>
      <div class='theme-hero__image-wrap'>
        <picture>
          <source srcset="/images/zachalexander-headshot-768px2x.jpg" media="(min-width: 500px)">
          <source srcset="/images/zachalexander-headshot-500px2x.jpg" media="(min-width: 414px)">
          <source srcset="/images/zachalexander-headshot-414px2x.jpg" media="(min-width: 375px)">
          <source srcset="/images/zachalexander-headshot-375px2x.jpg" media="(min-width: 320px)">
          <img src="/images/zachalexander-headshot-320px2x.jpg" alt="Photo of Zach Alexander">
        </picture>
      </div>
    </div>
  </div>
</section>


  <section class="theme-intro">
  <div class="theme-intro__container">

    <div class='theme-intro__items'>
      
      <div class="theme-intro__item">
        <img class='theme-intro__icon' src="/images/intro-design.svg"/>
        <h2>UX &amp; UI Design</h2>
        <p>I provide design services to companies and nonprofits, from research to prototyping to visual design.</p>
      </div>
      
      <div class="theme-intro__item">
        <img class='theme-intro__icon' src="/images/intro-development.svg"/>
        <h2>Development</h2>
        <p>I can build my own designs (or yours) with the latest and greatest web dev tools – and time-tested ones.</p>
      </div>
      
      <div class="theme-intro__item">
        <img class='theme-intro__icon' src="/images/intro-business.svg"/>
        <h2>Consulting</h2>
        <p>If you tell me your business goals, I can offer design &amp; development consultancy tailored towards getting you there.</p>
      </div>
      
    </div>
</section>


  	<section class="theme-about" id="about">
		<div class="container">
			<div class="theme-about__headings / row">
				<div class="col-md-12 section-heading text-center">
					<h2>About</h2>
					<h3 class='theme-about__subhead / subtext'>Hi – I&rsquo;m Zach.</h3>
				</div>
			</div>
			<div class="theme-about__body / row">
				<picture class="theme-about__image / col-lg-offset-1 col-lg-4 col-md-5 col-sm-offset-0 col-sm-4 col-xs-offset-2 col-xs-8">
					<source media="(min-width: 992px)" srcset="/images/about-400px2x.jpg">
					<img src="/images/about-250px2x.jpg" alt="Me on a mountain in Connecticut">
				</picture>
				<div class="theme-about__text / col-lg-6 col-md-7 col-sm-8 col-xs-12">
					I&rsquo;m a self-taught designer and <a href="https://www.appacademy.io/">San Francisco-trained</a> web developer. I&rsquo;ve worked with startups, nonprofits, and individuals, helped design and build <a href="https://medium.com/meedan-updates/checking-the-vote-how-check-was-used-during-electionland-4242dd875e4b">software for</a> <a href="https://www.propublica.org/atpropublica/item/propublicas-electionland-wins-data-journalism-award-for-news-data-app-of-th">an award-winning journalism project</a>, and taught <a href="https://trydesignlab.com/zachalexander">students from around the&nbsp;world</a>.</p>

<p><a href="#contact">You can hire me</a>. I&rsquo;m especially interested in projects involving climate change, privacy, media, and human&nbsp;rights.</p>

<p>My main tools are JavaScript, CSS/Sass, React, Meteor, Ruby, Rails, and Hugo. I design using paper, Sketch, and directly in the browser with&nbsp;CSS.</p>

<p>I call California and New England home, by way of Arizona, Ohio, Virginia, Maine, Massachusetts, England, and Manitoba. I&rsquo;m currently in the SF Bay Area.</p>

<p>You can subscribe to my newsletter at <a href='https://tinyletter.com/zda' target='_blank'>tinyletter.com/zda</a>.
				</div>
			</div>
			
			
			
			
			</div>
		</div>
	</section>


  	<section class='theme-work' id="work">
		<div class="container">
			<div class="row">
				<div class="col-md-12 section-heading text-center">
					<h2>Work</h2>
					<div class="row">
						<div class="col-md-8 col-md-offset-2 subtext">
							<h3>Projects I&rsquo;ve worked&nbsp;on:</h3>
						</div>
					</div>
				</div>
			</div>
			<div class="theme-work__items / row row-bottom-padded-sm">
			
				<div class="theme-work__item-wrapper / col-md-4 col-sm-6 col-xxs-12">
					<a href="/work/check" class="theme-work__item / fh5co-project-item">
						<img src="images/work-check-360px2x.jpg" alt="Check: Verify breaking news online" class="img-responsive">
						<div class="fh5co-text">
							<h2 class='theme-work__title'>Check</h2>
							<span>Development; Design</span>
						</div>
					</a>
				</div>
				
			
				<div class="theme-work__item-wrapper / col-md-4 col-sm-6 col-xxs-12">
					<a href="/work/electionland" class="theme-work__item / fh5co-project-item">
						<img src="images/work-electionland-360px2x.jpg" alt="Electionland: Monitoring access to the vote in real time." class="img-responsive">
						<div class="fh5co-text">
							<h2 class='theme-work__title'>Electionland</h2>
							<span>Development; Design</span>
						</div>
					</a>
				</div>
				
			
				<div class="theme-work__item-wrapper / col-md-4 col-sm-6 col-xxs-12">
					<a href="/work/designlab" class="theme-work__item / fh5co-project-item">
						<img src="images/work-designlab-360px2x.jpg" alt="How To Use A Grid 101 infographic" class="img-responsive">
						<div class="fh5co-text">
							<h2 class='theme-work__title'>Designlab</h2>
							<span>Design; Teaching</span>
						</div>
					</a>
				</div>
				
			
				<div class="theme-work__item-wrapper / col-md-4 col-sm-6 col-xxs-12">
					<a href="/work/securityscorecard" class="theme-work__item / fh5co-project-item">
						<img src="images/work-securityscorecard-360px2x.jpg" alt="SecurityScorecard.com front-end development" class="img-responsive">
						<div class="fh5co-text">
							<h2 class='theme-work__title'>SecurityScorecard</h2>
							<span>Development</span>
						</div>
					</a>
				</div>
				
			
				<div class="theme-work__item-wrapper / col-md-4 col-sm-6 col-xxs-12">
					<a href="/work/onegordon" class="theme-work__item / fh5co-project-item">
						<img src="images/work-onegordon-360px2x.jpg" alt="OneGordon website with photo of people holding sign: &#39;We &lt;3 LGBTQ&#43; Gordon Students&#39;" class="img-responsive">
						<div class="fh5co-text">
							<h2 class='theme-work__title'>OneGordon</h2>
							<span>Design; Development</span>
						</div>
					</a>
				</div>
				
			
				<div class="theme-work__item-wrapper / col-md-4 col-sm-6 col-xxs-12">
					<a href="/work/tengu" class="theme-work__item / fh5co-project-item">
						<img src="images/work-tengu-360px2x.jpg" alt="Tengu: The most advanced toolkit for mobile app development." class="img-responsive">
						<div class="fh5co-text">
							<h2 class='theme-work__title'>Tengu</h2>
							<span>Development; Design</span>
						</div>
					</a>
				</div>
				
			
				<div class="theme-work__item-wrapper / col-md-4 col-sm-6 col-xxs-12">
					<a href="/work/spritebuilder-store" class="theme-work__item / fh5co-project-item">
						<img src="images/work-spritebuilder-store-360px2x.jpg" alt="SpriteBuilder Store" class="img-responsive">
						<div class="fh5co-text">
							<h2 class='theme-work__title'>SpriteBuilder Store</h2>
							<span>Development; Design</span>
						</div>
					</a>
				</div>
				
			
				<div class="theme-work__item-wrapper / col-md-4 col-sm-6 col-xxs-12">
					<a href="/work/spritebuilder" class="theme-work__item / fh5co-project-item">
						<img src="images/work-spritebuilder-360px2x.jpg" alt="SpriteBuilder: Open source game development suite" class="img-responsive">
						<div class="fh5co-text">
							<h2 class='theme-work__title'>SpriteBuilder</h2>
							<span>Development; Design</span>
						</div>
					</a>
				</div>
				
			
				<div class="theme-work__item-wrapper / col-md-4 col-sm-6 col-xxs-12">
					<a href="/work/apportable" class="theme-work__item / fh5co-project-item">
						<img src="images/work-apportable-360px2x.jpg" alt="Apportable: Multi-platform mobile apps the smart way." class="img-responsive">
						<div class="fh5co-text">
							<h2 class='theme-work__title'>Apportable</h2>
							<span>Development; Design</span>
						</div>
					</a>
				</div>
				
			
				<div class="theme-work__item-wrapper / col-md-4 col-sm-6 col-xxs-12">
					<a href="/work/cocos2d" class="theme-work__item / fh5co-project-item">
						<img src="images/work-cocos2d-360px2x.jpg" alt="Cocos2D" class="img-responsive">
						<div class="fh5co-text">
							<h2 class='theme-work__title'>Cocos2D</h2>
							<span>Design; Development</span>
						</div>
					</a>
				</div>
				
			
				<div class="theme-work__item-wrapper / col-md-4 col-sm-6 col-xxs-12">
					<a href="/work/orderwithit" class="theme-work__item / fh5co-project-item">
						<img src="images/work-orderwithit-360px2x.jpg" alt="Orderwith.it" class="img-responsive">
						<div class="fh5co-text">
							<h2 class='theme-work__title'>Orderwith.it</h2>
							<span>Development</span>
						</div>
					</a>
				</div>
				
			
				<div class="theme-work__item-wrapper / col-md-4 col-sm-6 col-xxs-12">
					<a href="/work/neym" class="theme-work__item / fh5co-project-item">
						<img src="images/work-neym-360px2x.jpg" alt="New England Yearly Meeting website" class="img-responsive">
						<div class="fh5co-text">
							<h2 class='theme-work__title'>New England Yearly Meeting</h2>
							<span>Design</span>
						</div>
					</a>
				</div>
				
			
				<div class="theme-work__item-wrapper / col-md-4 col-sm-6 col-xxs-12">
					<a href="/work/tweet2gplus" class="theme-work__item / fh5co-project-item">
						<img src="images/work-tweet2gplus-360px2x.jpg" alt="Tweet to Google&#43; timeline and settings screens" class="img-responsive">
						<div class="fh5co-text">
							<h2 class='theme-work__title'>Tweet to Google&#43;</h2>
							<span>Development; Design</span>
						</div>
					</a>
				</div>
				
			
				<div class="theme-work__item-wrapper / col-md-4 col-sm-6 col-xxs-12">
					<a href="/work/ifitoldyou" class="theme-work__item / fh5co-project-item">
						<img src="images/work-ifitoldyou-360px2x.jpg" alt="&#39;If I Told You&#39; issue #1 pages 8-9" class="img-responsive">
						<div class="fh5co-text">
							<h2 class='theme-work__title'>If I Told You</h2>
							<span>Design</span>
						</div>
					</a>
				</div>
				
			
			</div>
			<div class="row">
				<div class="col-md-12 text-center">
					<p></p>
				</div>
			</div>
		</div>
	</section>


  	<section class='theme-testimonials' id="testimonials">
		<div class="container">
			<div class="row">
				<div class="col-md-12 section-heading text-center">
					<h2>Testimonials</h2>
					<div class="row">
						<div class="col-md-8 col-md-offset-2 subtext ">
							<h3>What people who&rsquo;ve worked with me say:</h3>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
			
				<div class="col-md-4">
					<div class="theme-testimonials__testimonial / box-testimony">
						<blockquote>
							Zach is a magician. It&rsquo;s rare to find people who have such technical depth and sophisticated grasp of design. Zach can doggedly debug a complex tangle of JavaScript in the morning with enough time left over to discuss subtle points of web typography in the afternoon. All with candor and energy. We depended on Zach to help us redesign and deliver our flagship product — we shipped on time with higher UI standards than we&rsquo;d ever reached before.
						</blockquote>
						<div class="theme-testimonials__author">
							
							<span><a href='https://twitter.com/unthinkingly'>Chris Blow</a></span>
							<span>Design Director, <a href='https://meedan.com/'>Meedan</a></span>
						</div>
					</div>
				</div>
			
				<div class="col-md-4">
					<div class="theme-testimonials__testimonial / box-testimony">
						<blockquote>
							Zach joined Meedan to fill a short-term front-end designer/developer position. His role was primarily to assist our lead designer with product design tasks, and also to translate those designs to HTML/CSS. But quickly, Zach carved for himself a place in the dev team by coding the React components directly instead of plain HTML, much to our delight. I came to rely on him to act as the dev team's main design contact point, and to steer design thinking towards feasible and standards-based implementation.</p>
<p>Zach also displayed much diligence with integration and browser testing, by refactoring our testing code and optimizing it. We were so happy with Zach's performance that we hired him for a second contract period. We heartily recommend him for front-end work, both on design and development sides.
						</blockquote>
						<div class="theme-testimonials__author">
							
							<span><a href='https://github.com/infojunkie'>Karim Ratib</a></span>
							<span>CTO, <a href='https://meedan.com/'>Meedan</a></span>
						</div>
					</div>
				</div>
			
				<div class="col-md-4">
					<div class="theme-testimonials__testimonial / box-testimony">
						<blockquote>
							As lead developer of the web team at Apportable, Zach took on numerous responsibilities, including design, project management, and writing tons of code. He effectively handled our constantly changing priorities and put a lot of energy into mentoring other engineers on the web team. He works hard and communicates extremely well. I would love to have an opportunity to work with him again.
						</blockquote>
						<div class="theme-testimonials__author">
							
							<span><a href='https://github.com/collinjackson'>Collin Jackson</a></span>
							<span>Founder, Apportable</span>
						</div>
					</div>
				</div>
			
			</div>
		</div>
	</section>


  <section class='theme-services' id="services">
	<div class="container">
		<div class="row">
			<div class="col-md-12 section-heading text-left">
				<h2 class="left-border">Services</h2>
				<div class="row">
					<div class="col-md-8 subtext">
						<h3 class='theme-services__subhead'>Things you can hire me to&nbsp;do:</h3>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
		
			<div class="theme-services__service / col-md-6 col-sm-6 fh5co-service">
				<img class='theme-services__icon' src="/images/intro-development.svg"/>
				<h4>Web Development</h4>
				<p>If you already have designs and just need them implemented, I can take care of that. I notice the small details and can translate them accurately – to pixel-perfect if necessary.</p>

<p>I am most experienced in front-end development – JavaScript, JS frameworks (Meteor, React, Ember), and CSS/Sass – and I see <a href="https://jamstack.org/">&ldquo;JAMstack&rdquo;</a> (static sites + APIs) as the best default strategy for most websites. That said, I also know my way around Rails, Node, Meteor, and GraphQL if they&rsquo;re appropriate for the job or part of your codebase.</p>

<p>I am also familiar with WordPress, but I&rsquo;ll only help you with it if it&rsquo;s to migrate your WordPress site/theme into something more sensible like <a href="https://www.siteleaf.com/">Siteleaf</a> (Jekyll) or <a href="https://forestry.io">Forestry.io</a> (Hugo).</p>
			</div>
		
			<div class="theme-services__service / col-md-6 col-sm-6 fh5co-service">
				<img class='theme-services__icon' src="/images/intro-design.svg"/>
				<h4>UX &amp; UI Design</h4>
				<p>Good design is the foundation of a successful product, and it starts with understanding your users and customers. My approach is influenced by the Stanford d.school&rsquo;s <a href="http://d1ijjxzthis87e.cloudfront.net/static/main/images/resources/Design-Thinking.8c3bad772d4c.png">Design Thinking</a>, which involves structured exercises to help generate empathy and insight.</p>

<p>I prefer design projects where I also get to build (or help build) the product, because it&rsquo;s not uncommon for a design to be lost in translation during the handoff to engineering. Plus, rapid design/dev iteration more often leads to success than waterfall handoffs to begin with.</p>

<p>My favorite roles involve being embedded in both design/product and engineering teams, where I can help each understand the other&rsquo;s work.</p>
			</div>
		
			<div class="theme-services__service / col-md-6 col-sm-6 fh5co-service">
				<img class='theme-services__icon' src="/images/intro-business.svg"/>
				<h4>Business/Product Consulting</h4>
				<p>Although I&rsquo;m often hired for pure design and development roles, I see both as just means to higher ends – like increasing conversions, or achieving a nonprofit mission. If you show me a graph of a metric you want to go &lsquo;up and to the right&rsquo;, I can provide advice and/or services focused on making it happen with the tools I know.</p>
			</div>
		
		</div>
	</div>
</section>


  	<section class='theme-contact' id="contact">
		<div class="theme-contact__container / container">
			<div class="row">
				<div class="col-md-12 section-heading text-center">
					<h2>Contact</h2>
					<div class="row">
						<div class="col-md-8 col-md-offset-2 subtext">
							<h3>Ways to get in touch:</h3>
						</div>
					</div>
				</div>
			</div>
			<div class="row row-bottom-padded-md">
				<div class="col-md-6">
					<h3></h3>
					<ul class="theme-contact__details / fh5co-contact-info">
					
						<li><i class="icon-envelope"></i><a href='mailto:hello@zachalexander.com'>hello@zachalexander.com</a></li>
					
						<li><i class="icon-speech"></i><a href='tel:+16172999291'>+1 (617) 299-9291</a></li>
					
						<li><i class="icon-social-twitter"></i><a target='_blank'href='https://twitter.com/zachalexander'>twitter.com/zachalexander</a></li>
					
						<li><i class="icon-social-github"></i><a target='_blank' href='https://github.com/zda'>github.com/zda</a></li>
					
						<li><i class="icon-envelope-letter"></i><a target='_blank' href='https://tinyletter.com/zda'>tinyletter.com/zda</a></li>
					
						<li><i class="icon-globe"></i><a href="http://www.zachalexander.com/">www.zachalexander.com</a></li>
					
						<li><i class="icon-location-pin"></i><a target='_blank' href='https://www.google.com/maps/place/Oakland+CA'>Oakland, CA</a></li>
					
					</ul>
				</div>

				<div class="col-md-6">
					<h3></h3>
					<form method="post" action="//formspree.io/hello@zachalexander.com">
					<div class="form-group">
						
						<label for="name" class="sr-only">Name</label>
						<input id="name" class="form-control" name="name" placeholder="Name" type="text">
						
					</div>
					<div class="form-group">
						
						<label for="email" class="sr-only">Email</label>
						<input id="email" class="form-control" name="_replyto" placeholder="Email" type="email">
						
					</div>
					<div class="form-group">
						
						<label for="subject" class="sr-only">Subject</label>
						<input id="subject" class="form-control" name="subject" placeholder="Subject" type="text">
						
					</div>
					<div class="form-group">
						
						<label for="message" class="sr-only">How can I help?</label>
						<textarea id="message" cols="30" rows="5" class="form-control" name="message" placeholder="How can I help?"></textarea>
						
					</div>
					<div class='theme-contact__form-subtext'>You'll have to fill out a CAPTCHA on the next page, FYI. <i class='icon-ghost'></i></div>
					<div class="form-group">
						<input class="theme-contact__submit / btn btn-primary btn-lg" value="Send" type="submit">
					</div>
					</form>
				</div>

			</div>

			<p class='theme-contact__footer'>© 2007–2017 Zach Alexander</p>
		</div>
	</section>


  
</body>
</html>
