<commit_before><!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="HandheldFriendly" content="True">
	<meta name="MobileOptimized" content="320">
	<meta name="description" content="<NAME> is a web designer and developer based out of San Francisco, CA."/>
	<meta name="author" content="<NAME>" />

	<title><NAME> | Front-End Developer</title>

	<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
	<link rel="icon" type="image/png" href="/favicons/favicon-16x16.png" sizes="16x16">
	<link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32">
	<link rel="manifest" href="/favicons/manifest.json">
	<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#fafafa">

  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
	<link rel="stylesheet" href="dist/site.css" />

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="site.js"></script>

	<script src="https://use.typekit.net/hid0bbh.js"></script>
	<script>try{Typekit.load({ async: true });}catch(e){}</script>
</head>
<body>
  <header role="main" container>
    <div grid>
      <h1 column="6"><a href="index.html" title="Home">Keenan Payne</a></h1>

      <nav role="navigation" column="6">
        <ul>
          <li class="-active"><a href="work.html" title="Work">Work</a></li>
          <li><a href="reading.html" title="Reading">Reading</a></li>
          <li><a href="contact.html" title="Contact">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main class="we-up-in-this" container>
		<hgroup>
			<h2>Selected Work</h2>
		</hgroup>

		<div grid>
			<aside column="5">
				<p class="-headline"><strong>Overview</strong></p>

				<p>I have been working as a professional front-end developer for seven years. I have built hundreds of websites and consider myself an expert at HTML, CSS, and WordPress.</p>

				<p>I also have a new love for JavaScript and have been improving my skills with the language; learning the low-level aspects and using that knowledge to build single page apps in my spare time.</p>

				<p class="-headline"><strong>Specialties</strong></p>

				<p>I love high-level thinking when it comes to front-end development. I excel at thinking about how to create maintainable and scalable codebases that ensure clarity for all developers.</p>

				<p>I was the original author of the <a href="http://concisecss.com" title="concise.css" target="_blank">concise.css framework</a> and have also used my skills to build an internal front-end framework for the customer-facing aspects of Asana <small>(website, blogs, marketing, internal tools)</small>.</p>

				<p>I take a component-based approach in developing front-end architectures; breaking CSS into maintainable pieces so that it is easy to understand, maintain, and extend. I have also written many coding style guides to help ensure that code written within the context of a framework is consistently written at a high quality.</p>

				<hr>

				<p><strong>If you need somebody to help build a maintainable and scalable user interface, you should <a href="/contact.html" title="Get in touch">get in touch</a>.</strong></p>
			</aside>

			<!--
				TODO
					Add:
						- Gala App
						- Service Target
						- Any logos I formerly designed?
			-->
			<div column="7">
				<a class="tile" href="https://wavelength.asana.com/" title="Wavelength" target="_blank">
					<img src="images/wavelength.png" alt="Wavelength">
				</a>

				<a class="tile" href="https://blog.asana.com/" title="Asana Blog" target="_blank">
					<img src="images/asana-blog.png" alt="Asana Blog">
				</a>

				<a class="tile" href="https://asana.com/developers" title="Asana Developers" target="_blank">
					<img src="images/asana-developers.png" alt="Asana Developers">
				</a>

				<a class="tile" href="https://dribbble.com/shots/1637126-Concise-Homepage" title="Concise CSS Website" target="_blank">
					<img src="images/concise.png" alt="Concise CSS Website">
				</a>

				<a class="tile" href="https://dribbble.com/shots/2315187-Keenan-Payne-Personal-Website-2015" title="2016 Personal Website" target="_blank">
					<img src="images/keenanpayne-2016.png" alt="2016 Personal Website">
				</a>

				<a class="tile" href="https://dribbble.com/shots/1633664-Keenan-Payne-Personal-Website" title="2015 Personal Website" target="_blank">
					<img src="images/keenanpayne-2015.png" alt="2015 Personal Website">
				</a>

				<a class="tile" href="https://dribbble.com/shots/1642470-Personal-Blog-Design" title="Personal Blog Design" target="_blank">
					<img src="images/personal-blog.png" alt="Personal Blog Design">
				</a>

				<a class="tile" href="https://www.behance.net/gallery/14583965/HalfPast-Luxury-Watches" title="Halfpast Watches" target="_blank">
					<img src="images/halfpast.png" alt="Halfpast Watches">
				</a>

				<a class="tile" href="http://www.serendipityfood.com/" title="Serendipity Catering" target="_blank">
					<img src="images/serendipity-catering.png" alt="Serendipity Catering">
				</a>

				<a class="tile" href="https://www.behance.net/gallery/14582679/KeenanPaynecom-(Jan-2014)" title="2014 Personal Website" target="_blank">
					<img src="images/keenanpayne-2014.png" alt="2014 Personal Website">
				</a>

				<a class="tile" href="https://www.behance.net/gallery/14782705/Project-Management-Dashboard-Mockup" title="Project Management Mockup" target="_blank">
					<img src="images/project-management.png" alt="Project Management Mockup">
				</a>

				<a class="tile" href="https://www.behance.net/gallery/14601675/AnswerQi" title="AnswerQi" target="_blank">
					<img src="images/answerqi.png" alt="AnswerQi">
				</a>

				<a class="tile" href="https://www.behance.net/gallery/1312747/Default-Prime" title="Default Prime" target="_blank">
					<img src="images/defaultprime.png" alt="Default Prime">
				</a>

				<a class="tile" href="https://www.behance.net/gallery/14581449/SlackrMedia-(2014)" title="SlackrMedia" target="_blank">
					<img src="images/slackrmedia.png" alt="SlackrMedia">
				</a>

				<a class="tile" href="https://www.behance.net/gallery/2531219/KeenanPaynecom-(2011)" title="2011 Personal Website" target="_blank">
					<img src="images/keenanpayne-2011.png" alt="2011 Personal Website">
				</a>
			</div>
		</div>

		<div grid>
			<dl column="7 +5" class="-no-bottom-margin">
				<h3>Open Source <small>(I like building stuff)</small></h3>

				<span>
					<dt><a href="https://github.com/ConciseCSS/concise.css" title="concise.css" target="_blank">concise.css</a></dt>
					<dd>Concise is a lightweight front-end framework that I built with the help of my colleague <a href="http://jameskolce.com/" title="<NAME>" target="_blank"><NAME></a>.</dd>
				</span>

				<span>
					<dt><a href="https://github.com/ConciseCSS/concisecss.github.io" title="concise.css" target="_blank">concise.css website</a></dt>
					<dd>This is the website that houses the documentation for concise.css</dd>
				</span>

				<span>
					<dt><a href="https://github.com/keenanpayne/postcss-npm-boilerplate" title="postcss npm boilerplate" target="_blank">postcss npm boilerplate</a></dt>
					<dd>This is a simple boilerplate for using NPM and PostCSS to handle common front-end development environments.</dd>
				</span>

				<span>
					<dt><a href="https://github.com/keenanpayne/normalize.less" title="normalize.less" target="_blank">normalize.less</a></dt>
					<dd>A LESS port of <a href="http://necolas.github.com/normalize.css/" target="_blank">normalize.css</a></dd>
				</span>
<commit_msg>Add link to my personal website<commit_after><!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="HandheldFriendly" content="True">
	<meta name="MobileOptimized" content="320">
	<meta name="description" content="<NAME> is a web designer and developer based out of San Francisco, CA."/>
	<meta name="author" content="<NAME>" />

	<title><NAME> | Front-End Developer</title>

	<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
	<link rel="icon" type="image/png" href="/favicons/favicon-16x16.png" sizes="16x16">
	<link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32">
	<link rel="manifest" href="/favicons/manifest.json">
	<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#fafafa">

  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
	<link rel="stylesheet" href="dist/site.css" />

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="site.js"></script>

	<script src="https://use.typekit.net/hid0bbh.js"></script>
	<script>try{Typekit.load({ async: true });}catch(e){}</script>
</head>
<body>
  <header role="main" container>
    <div grid>
      <h1 column="6"><a href="index.html" title="Home"><NAME></a></h1>

      <nav role="navigation" column="6">
        <ul>
          <li class="-active"><a href="work.html" title="Work">Work</a></li>
          <li><a href="reading.html" title="Reading">Reading</a></li>
          <li><a href="contact.html" title="Contact">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main class="we-up-in-this" container>
		<hgroup>
			<h2>Selected Work</h2>
		</hgroup>

		<div grid>
			<aside column="5">
				<p class="-headline"><strong>Overview</strong></p>

				<p>I have been working as a professional front-end developer for seven years. I have built hundreds of websites and consider myself an expert at HTML, CSS, and WordPress.</p>

				<p>I also have a new love for JavaScript and have been improving my skills with the language; learning the low-level aspects and using that knowledge to build single page apps in my spare time.</p>

				<p class="-headline"><strong>Specialties</strong></p>

				<p>I love high-level thinking when it comes to front-end development. I excel at thinking about how to create maintainable and scalable codebases that ensure clarity for all developers.</p>

				<p>I was the original author of the <a href="http://concisecss.com" title="concise.css" target="_blank">concise.css framework</a> and have also used my skills to build an internal front-end framework for the customer-facing aspects of Asana <small>(website, blogs, marketing, internal tools)</small>.</p>

				<p>I take a component-based approach in developing front-end architectures; breaking CSS into maintainable pieces so that it is easy to understand, maintain, and extend. I have also written many coding style guides to help ensure that code written within the context of a framework is consistently written at a high quality.</p>

				<hr>

				<p><strong>If you need somebody to help build a maintainable and scalable user interface, you should <a href="/contact.html" title="Get in touch">get in touch</a>.</strong></p>
			</aside>

			<!--
				TODO
					Add:
						- Gala App
						- Service Target
						- Any logos I formerly designed?
			-->
			<div column="7">
				<a class="tile" href="https://wavelength.asana.com/" title="Wavelength" target="_blank">
					<img src="images/wavelength.png" alt="Wavelength">
				</a>

				<a class="tile" href="https://blog.asana.com/" title="Asana Blog" target="_blank">
					<img src="images/asana-blog.png" alt="Asana Blog">
				</a>

				<a class="tile" href="https://asana.com/developers" title="Asana Developers" target="_blank">
					<img src="images/asana-developers.png" alt="Asana Developers">
				</a>

				<a class="tile" href="https://dribbble.com/shots/1637126-Concise-Homepage" title="Concise CSS Website" target="_blank">
					<img src="images/concise.png" alt="Concise CSS Website">
				</a>

				<a class="tile" href="https://dribbble.com/shots/2315187-Keenan-Payne-Personal-Website-2015" title="2016 Personal Website" target="_blank">
					<img src="images/keenanpayne-2016.png" alt="2016 Personal Website">
				</a>

				<a class="tile" href="https://dribbble.com/shots/1633664-Keenan-Payne-Personal-Website" title="2015 Personal Website" target="_blank">
					<img src="images/keenanpayne-2015.png" alt="2015 Personal Website">
				</a>

				<a class="tile" href="https://dribbble.com/shots/1642470-Personal-Blog-Design" title="Personal Blog Design" target="_blank">
					<img src="images/personal-blog.png" alt="Personal Blog Design">
				</a>

				<a class="tile" href="https://www.behance.net/gallery/14583965/HalfPast-Luxury-Watches" title="Halfpast Watches" target="_blank">
					<img src="images/halfpast.png" alt="Halfpast Watches">
				</a>

				<a class="tile" href="http://www.serendipityfood.com/" title="Serendipity Catering" target="_blank">
					<img src="images/serendipity-catering.png" alt="Serendipity Catering">
				</a>

				<a class="tile" href="https://www.behance.net/gallery/14582679/KeenanPaynecom-(Jan-2014)" title="2014 Personal Website" target="_blank">
					<img src="images/keenanpayne-2014.png" alt="2014 Personal Website">
				</a>

				<a class="tile" href="https://www.behance.net/gallery/14782705/Project-Management-Dashboard-Mockup" title="Project Management Mockup" target="_blank">
					<img src="images/project-management.png" alt="Project Management Mockup">
				</a>

				<a class="tile" href="https://www.behance.net/gallery/14601675/AnswerQi" title="AnswerQi" target="_blank">
					<img src="images/answerqi.png" alt="AnswerQi">
				</a>

				<a class="tile" href="https://www.behance.net/gallery/1312747/Default-Prime" title="Default Prime" target="_blank">
					<img src="images/defaultprime.png" alt="Default Prime">
				</a>

				<a class="tile" href="https://www.behance.net/gallery/14581449/SlackrMedia-(2014)" title="SlackrMedia" target="_blank">
					<img src="images/slackrmedia.png" alt="SlackrMedia">
				</a>

				<a class="tile" href="https://www.behance.net/gallery/2531219/KeenanPaynecom-(2011)" title="2011 Personal Website" target="_blank">
					<img src="images/keenanpayne-2011.png" alt="2011 Personal Website">
				</a>
			</div>
		</div>

		<div grid>
			<dl column="7 +5" class="-no-bottom-margin">
				<h3>Open Source <small>(I like building stuff)</small></h3>

				<span>
					<dt><a href="https://github.com/ConciseCSS/concise.css" title="concise.css" target="_blank">concise.css</a></dt>
					<dd>Concise is a lightweight front-end framework that I built with the help of my colleague <a href="http://jameskolce.com/" title="<NAME>" target="_blank"><NAME></a>.</dd>
				</span>

				<span>
					<dt><a href="https://github.com/ConciseCSS/concisecss.github.io" title="concise.css" target="_blank">concise.css website</a></dt>
					<dd>This is the website that houses the documentation for concise.css</dd>
				</span>

				<span>
					<dt><a href="https://github.com/keenanpayne/keenanpayne.com" title="keenanpayne.com" target="_blank">keenanpayne.com</a></dt>
					<dd>My personal website &mdash; you're on it!</dd>
				</span>

				<span>
					<dt><a href="https://github.com/keenanpayne/postcss-npm-boilerplate" title="postcss npm boilerplate" target="_blank">postcss npm boilerplate</a></dt>
					<dd>This is a simple boilerplate for using NPM and PostCSS to handle common front-end development environments.</dd>
				</span>

				<span>
					<dt><a href="https://github.com/keenanpayne/normalize.less" title="normalize.less" target="_blank">normalize.less</a></dt>
					<dd>A LESS port of <a href="http://necolas.github.com/normalize.css/" target="_blank">normalize.css</a></dd>
				</span>

{'fraction_non_alphanumeric': 0.17177914110429449, 'fraction_numerical': 0.024160394661944216, 'mean_word_length': 4.203027311615663, 'pattern_counts': {'":': 0, '<': 384, '<?xml version=': 0, '>': 384, 'https://': 43, 'lorem ipsum': 0, 'www.': 16, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6358963', 'n_tokens_mistral': 6170, 'n_tokens_neox': 5146, 'n_words': 1223}