index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calvin Ju&aacute;rez &middot; Web Developer &amp; Designer</title>

<!-- Open Graph Meta -->
<meta property="og:type" content="website">
<meta property="og:url" content="http://calvinjuarez.com">
<meta property="og:title" content="Calvin Juárez · Web Developer & Designer">
<meta property="og:description" content="The web development & design portfolio of Calvin Juárez.">
<meta property="og:image" content="http://calvinjuarez.com/site.png">

<!-- Bookmark Icons & Meta -->
<link rel="shortcut icon" href="icon.png">
<link rel="apple-touch-icon-precomposed" href="icon.png">
<meta name="apple-mobile-web-app-title" content="Calvin Juárez">

<!-- Styles -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/data-graph.css">
<link rel="stylesheet" href="css/main.css">
<!-- TODO: register data-graph with bower and include as a library -->

<!-- Polyfills & Such -->
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>

<body>

<header class="header">
	<div class="container">
		<h1>Calvin Ju&aacute;rez</h1>
		<p>Front-end Web Developer &amp; Designer</p>
		<ul class="connect">
			<li>
				<!-- The href is URL encoded and the title has zero-width spaces between all the characters, to hopefully prevent email address scraping. -->
				<a href="mailto:%6D%65%40%63%61%6C%76%69%6E%6A%75%61%72%65%7A%2E%63%6F%6D" title="m​e​@​c​a​l​v​i​n​j​u​a​r​e​z​.​c​o​m" target="_blank">
					<i class="fa fa-2x fa-envelope"></i>
				</a>
			</li><li>
				<a href="http://www.twitter.com/calvinjuarez" title="@calvinjuarez" target="_blank">
					<i class="fa fa-2x fa-twitter"></i>
				</a>
			</li><li>
				<a href="http://www.instagram.com/calvinjuarez" title="@calvinjuarez" target="_blank">
					<i class="fa fa-2x fa-instagram"></i>
				</a>
			</li><li>
				<a href="http://www.github.com/calvinjuarez" title="calvinjuarez"  target="_blank">
					<i class="fa fa-2x fa-github"></i>
				</a>
			</li><li>
				<a href="https://www.linkedin.com/pub/calvin-juárez/9b/ba/447" title="Calvin Juárez" target="_blank">
					<i class="fa fa-2x fa-linkedin-square"></i>
				</a>
			</li>
		</ul>
	</div>
</header>


<div class="main" role="main">
	<div class="container">
		<section class="page  grid" id="skills">
			<div class="section  grid-item-full">
				<h1>Skills</h1>
				<hr>
			</div>
			<section class="section" id="code">
				<h2>Code</h2>
				<p class="lead">Navigable. Readable. Maintainable. Semantic. Organized. Concise. Efficient.</p>
			</section>
			<section class="section" id="design">
				<h2>Design</h2>
				<p class="lead">User-oriented. Audience-aware. Intuitive. Beautiful.</p>
			</section>
			<section class="section" id="languages">
				<h3>Languages</h3>
				<ul class="graph" data-draw="graph" data-scale="5" data-rubric="proficiency" data-legend="true">
					     <li data-value="5">
						HTML <!-- TODO: Add fallback labels. -->
					</li><li data-value="5">
						CSS
					</li><li data-value="5">
						JavaScript
					</li><li data-value="5">
						Less & Sass
					</li><li data-value="4">
						PHP
					</li>
				</ul>
			</section>
			<section class="section" id="applications">
				<h3>Tools</h3>
				<ul class="graph" data-draw="graph" data-scale="5" data-rubric="proficiency">
					     <li data-value="5">
						Coda 2
					</li><li data-value="5">
						Adobe Photoshop
					</li><li data-value="5">
						Adobe Illustrator
					</li><li data-value="4">
						Sublime Text, Atom, & Other Editors/IDEs
					</li>
				</ul>
			</section>
			<section class="section  grid-item-full" id="technologies">
				<div class="grid">
					<div class="grid-item-full">
						<h3>Technologies</h3>
					</div>
						<section class="subsection">
							<h4>Libraries & Frameworks</h4>
							<ul class="graph" data-draw="graph" data-scale="5" data-rubric="proficiency">
								     <li data-value="5">
									Bootstrap
								</li><li data-value="5">
									jQuery
								</li><li data-value="3">
									React
								</li><li data-value="3">
									Angular
								</li><li data-value="2">
									Underscore/Lodash
								</li><li data-value="2">
									Backbone.js
								</li><li data-value="2">
									Node.js
								</li>
							</ul>
						</section>
						<section class="subsection">
							<h4>Workflow</h4>
							<ul class="graph" data-draw="graph" data-scale="5" data-rubric="proficiency">
							        <li data-value="5">
									Git (CLI, GitHub App)
								</li><li data-value="5">
									NPM
								</li><li data-value="5">
									CodeKit
								</li><li data-value="4">
									Babel
								</li><li data-value="4">
									Grunt
								</li><li data-value="3">
									Webpack
								</li>
							</ul>
						</section>
						<section class="subsection">
							<h4>PHP Content Management Systems</h4>
							<ul class="graph" data-draw="graph" data-scale="5" data-rubric="proficiency">
								     <li data-value="5">
									Drupal
								</li><li data-value="4">
									Wordpress
								</li><li data-value="2">
									Concrete5
								</li>
							</ul>
						</section>
						<section class="subsection">
							<h4>Responsive Web Design</h4>
							<p>Responsive web design is the practice of developing a web site so that it responds and adapts to the features and limits of whatever device is used to view it.  Everything should be responsive these days.</p>
						</section>
				</div>
			</section>
		</section>
		<section class="page  grid" id="work">
			<div class="section  grid-item-full">
				<h1>Selected Work</h1>
				<hr>
			</div>
			<article class="section  thumbnail">
				<a href="https://www.zijainternational.com">
					<h3>Zija&nbsp;International Corporate&nbsp;Site <small>June 2013 &ndash; present</small></h3>
					<picture>
						<source media="(min-width: 768px)"
						  srcset="img/zijainternational@1x.png,
						          img/zijainternational@2x.png @1.5x,
						          img/zijainternational@2x.png @2x">
						<img src="img/zijainternational@.5x.png"
						  srcset="img/zijainternational@1x.png @1.5x,
						          img/zijainternational@1x.png @2x"
						  alt="Screenshot of ZijaInternational.com.">
					</picture>

				</a>
			</article>
			<article class="section  thumbnail">
				<a href="https://www.zijainternational.com/shop/category/core">
					<h3>Zija&nbsp;International Shop (React&nbsp;App) <small>September 2016 &ndash; present</small></h3>
					<picture>
						<source media="(min-width: 768px)"
						  srcset="img/zijainternationalshop@1x.png,
						          img/zijainternationalshop@2x.png @1.5x,
						          img/zijainternationalshop@2x.png @2x">
						<img src="img/zijainternationalshop@.5x.png"
						  srcset="img/zijainternationalshop@1x.png @1.5x,
						          img/zijainternationalshop@1x.png @2x"
						  alt="Screenshot of the shop on ZijaInternational.com.">
					</picture>

				</a>
			</article>
			<article class="section  thumbnail">
				<a href="https://www.zijasummit.com/index.html#home">
					<h3>Zija&nbsp;Summit 2018 <small>October 2017 &ndash; present</small></h3>
					<picture>
						<source media="(min-width: 768px)"
						  srcset="img/zijasummit2018@1x.png,
						          img/zijasummit2018@2x.png @1.5x,
						          img/zijasummit2018@2x.png @2x">
						<img src="img/zijasummit2018@.5x.png"
						  srcset="img/zijasummit2018@1x.png @1.5x,
						          img/zijasummit2018@1x.png @2x"
						  alt="Screenshot of ZijaSummit.com.">
					</picture>

				</a>
			</article>
			<article class="section  thumbnail">
				<a href="https://web.archive.org/web/20160425141833/http://www.zijasummit.com/index.html#home">
					<h3>Zija&nbsp;Summit 2016 <small>January 2016</small></h3>
					<picture>
						<source media="(min-width: 768px)"
						  srcset="img/zijasummit2016@1x.png,
						          img/zijasummit2016@2x.png @1.5x,
						          img/zijasummit2016@2x.png @2x">
						<img src="img/zijasummit2016@.5x.png"
						  srcset="img/zijasummit2016@1x.png @1.5x,
						          img/zijasummit2016@1x.png @2x"
						  alt="Screenshot of ZijaSummit.com.">
					</picture>

					<p><em class="note">On the Way Back Machine. (The loading gif is an artifact of the archiving.)</em></p>
				</a>
			</article>
			<article class="section  thumbnail">
				<a href="https://web.archive.org/web/20150302133036/http://www.zijasummit.com/regional/index.html#highlights">
					<h3>Zija&nbsp;Regionals <small>April 2015</small></h3>
					<picture>
						<source media="(min-width: 768px)"
						  srcset="img/zijaregionals2015@1x.png,
						          img/zijaregionals2015@2x.png @1.5x,
						          img/zijaregionals2015@2x.png @2x">
						<img src="img/zijaregionals2015@.5x.png"
						  srcset="img/zijaregionals2015@1x.png @1.5x,
						          img/zijaregionals2015@1x.png @2x"
						  alt="Screenshot of ZijaRegionals.com from 2015 on the WayBackMachine.">
					</picture>

					<p><em class="note">On the Way Back Machine. (Note that there will be errors introduced by archiving.)</em></p>
				</a>
			</article>
			<article class="section  thumbnail">
				<a href="https://web.archive.org/web/20140921125641/http://www.zijasummit.com/">
					<h3>Zija&nbsp;Summit 2014 <small>April 2014</small></h3>
					<picture>
						<source media="(min-width: 768px)"
						  srcset="img/zijasummit2014@1x.png,
						          img/zijasummit2014@2x.png @1.5x,
						          img/zijasummit2014@2x.png @2x">
						<img src="img/zijasummit2014@.5x.png"
						  srcset="img/zijasummit2014@1x.png @1.5x,
						          img/zijasummit2014@1x.png @2x"
						  alt="Screenshot of ZijaSummit.com from 2014 on the WayBackMachine.">
					</picture>

					<p><em class="note">On the Way Back Machine.</em></p>
				</a>
			</article>
			<article class="section  thumbnail">
				<a href="https://web.archive.org/web/20130917163932/http://www.zijasummit.com/index.html">
					<h3>Zija&nbsp;Summit 2013 <small>April 2013</small></h3>
					<picture>
						<source media="(min-width: 768px)"
						  srcset="img/zijasummit2013@1x.png,
						          img/zijasummit2013@2x.png @1.5x,
						          img/zijasummit2013@2x.png @2x">
						<img src="img/zijasummit2013@.5x.png"
						  srcset="img/zijasummit2013@1x.png @1.5x,
						          img/zijasummit2013@1x.png @2x"
						  alt="Screenshot of ZijaSummit.com from 2013 on the WayBackMachine.">
					</picture>

					<p><em class="note">On the Way Back Machine.</em></p>
				</a>
			</article>
			<article class="section  thumbnail">
				<a href="http://avantar.us">
					<h3>Avantar.us <small>Summer 2012</small></h3>
					<picture>
						<source media="(min-width: 768px)"
						  srcset="img/avantar@1x.png,
						          img/avantar@2x.png @1.5x,
						          img/avantar@2x.png @2x">
						<img src="img/avantar@.5x.png"
						  srcset="img/avantar@1x.png @1.5x,
						          img/avantar@1x.png @2x"
						  alt="Screenshot of Avantar.us.">
					</picture>

				</a>
			</article>
			<section class="section  grid-item-full">
				<h2>More</h2>
				<ul>
					<li>Check out this site's source <a href="https://github.com/calvinjuarez/calvinjuarez.com">on GitHub</a>.</li>
					<li><a href="http://calvinmois.es">CalvinMois.es</a>, my personal sandbox site.</li>
					<li><a href="http://dragon.calvinmois.es">Dragon.CalvinMois.es</a>, a personal WordPress site and some single-page tools I've built around a new hobby of mine.</li>
				</ul>
			</section>
		</section>
	</div>
</div>

<footer class="footer">
	<div class="container">
		<p><small class="copyright">&copy; 2014 &ndash; 2018 Calvin Ju&aacute;rez</small></p>
	</div>
</footer>


<div id="scripts">
	<script src="js/lib/jquery.min.js"></script>
	<script src="js/lib/mustache.js"></script>
	<script src="js/lib/jquery.data-graph.js"></script>
</div>


</body>
</html>