PORTFOLIO

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>{% if page_title %}{{ page_title }} - {% endif %}{{ site_title }}</title>
{% if page_description %}<meta name="description" content="{{ page_description }}" />{% endif %}

{% if favicon %}<link rel="shortcut icon" href="{{ favicon }}">{% endif %}

{% if apex_options.enable_lightbox %}
<link rel="preload" href="{{ cdn_base_url }}assets/dist/lightbox-dunked.min.css" media="screen" as="style" onload="this.rel='stylesheet'"/>
{% endif %}
{% if template_css %}<link rel="stylesheet" href="{{ template_css }}" media="screen" />{% endif %}

<script type="text/javascript">document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/,'js'); if (!("ontouchstart" in document.documentElement)) { document.documentElement.className += " no-touch"; }</script>
{{ template_inline_head_scripts() }}
{{ custom_css }}

{% if not is_preview %}
<script>this.top.location !== this.location && (this.top.location = this.location);</script>
{% endif %}

<!-- BEGIN Open Graph -->
{% if page_title %}<meta property="og:title" content="{{ page_title }}" />{% endif %}
{% if page_description %}<meta property="og:description" content="{{ page_description }}" />{% endif %}
<meta property="og:site_name" content="{{ site_title }}" />
{% if is_project %}
{% if project.thumb_url %}<meta property="og:image" content="{{ project.thumb_url }}" />{% endif %}
{% else %}
{% if logo %}<meta property="og:image" content="{{ logo }}" />{% endif %}
{% endif %}
{% if is_project %}
<meta property="og:url" content="{{ project.permalink }}" />
{% elseif is_page %}
<meta property="og:url" content="{{ page.permalink }}" />
{% elseif is_tag %}
{% for tag in tags %}
{% if tag.active %}<meta property="og:url" content="{{ tag.permalink }}" />{% endif %}
{% endfor %}
{% else %}
<meta property="og:url" content="{{ site_url }}" />
{% endif %}
<!-- END Open Graph -->
</head>
<body class="{{ body_class }}">
<svg style="display: none;" xmlns="http://www.w3.org/2000/svg"><symbol enable-background="new 0 0 128 128" id="shape-close-icon" viewBox="0 0 128 128" xml:space="preserve"><title>close-icon</title><polygon points="123.5429688,11.59375 116.4765625,4.5185547 64.0019531,56.9306641 11.5595703,4.4882813 4.4882813,11.5595703 56.9272461,63.9970703 4.4570313,116.4052734 11.5244141,123.4814453 63.9985352,71.0683594 116.4423828,123.5117188 123.5126953,116.4414063 71.0732422,64.0019531 "/></symbol></svg>
<div class="wrap">
<header class="site-header cf">
<div class="site-title">
<a href="{{ site_url }}">
{% if logo or logo_x2 %}
<img srcset="{% if logo %}{{ logo }} 1x,{% endif %}{% if logo_x2 %} {{ logo_x2 }} 2x{% endif %}" alt="{{ site_title }}">
{% else %}
{{ site_title }}
{% endif %}
</a>
</div>
{% if site_tagline %}
<div class="site-tagline">{{ site_tagline }}</div>
{% endif %}
{{ social_icons() }}
{% if apex_options.show_page_menu %}
<nav id="navigation" class="site-nav">
{{ list_pages({ active_class: 'current-page' }) }}
</nav>
{% endif %}
</header><!-- / .site-header -->

<section class="site-content">
{% if is_project %}
<article id="ajax-content" class="project project--{{ project.id }}">
{% if apex_options.show_project_titles %}
<header class="project__header">
<h1 class="title title--project">{{ project.title }}</h1>
</header>
{% endif %}

<div class="project__content cf">
{% set show_meta = false %}
{% if apex_options.show_project_meta and (project.date_text or project.client or project.role or project.url or project.tags) %}
{% set show_meta = true %}
{% endif %}
{% if project.description %}
<div class="project__description {% if not show_meta %} project__description--no-meta {% endif %}">{{ project.description }}</div>
{% endif %}

{% if show_meta %}
<footer class="project__meta">
{% if project.date_text %}
<span class="date">Date: <span>{{ project.date_text }}</span></span><br/>
{% endif %}

{% if project.client %}
<span class="client">Client: <span>{{ project.client }}</span></span><br/>
{% endif %}

{% if project.role %}
<span class="role">Role: <span>{{ project.role }}</span></span><br/>
{% endif %}

{% if project.url %}<span class="url">URL: <a href="{{ project.url_escaped }}" target="_blank">{{ project.pretty_url }}</a></span><br/>
{% endif %}

{% if project.tags %}
<div class="tags">Tags: {% for tag in project.tags %}<a href="{{ tag.permalink }}">#{{ tag.name }}</a>{% if not loop.last %}, {% endif %}{% endfor %}</div>
{% endif %}
</footer>
{% endif %}
</div>

{% if project.assets %}
{% set lightbox_index = 0 %}
{% if apex_options.enable_lightbox %}<div class="gallery">{% endif %}
{% for asset in project.assets %}
<div id="asset-{{ asset.id }}" class="{{ asset.type }}" {% if asset.type == 'image' %}data-index="{{ lightbox_index }}" {% set lightbox_index = lightbox_index + 1 %} {% endif %}>
{% if asset.type == "image" %}
{% if apex_options.enable_lightbox %}
<a href="{{ asset.full_url }}" data-size="{{ asset.full_width }}x{{ asset.full_height }}" class="view" rel="project-gallery-{{ project.id }}" data-thumb-src="{{ asset.content_url }}">
{% endif %}
<img srcset="{{ asset.content_srcset }}" alt="">
{% if apex_options.enable_lightbox %}
</a>
{% endif %}
{% else %}
{{ asset.embed }}
{% endif %}

{% if asset.description %}<p class="asset-description">{{ asset.description }}</p>{% endif %}
</div>
{% endfor %}
{% if apex_options.enable_lightbox %}</div>{% endif %}
{% endif %}
</article>
{% endif %}

{% if is_page %}
<article id="ajax-content" class="page page--{{ page.id }} cf">
{% if apex_options.show_page_titles %}
<header class="page__header">
<h1 class="title title--page">{{ page.title }}</h1>
</header>
{% endif %}
<div class="page__content">{{ page.content }}</div>
</article>
{% endif %}

{% if is_home or is_tag %}
<div id="ajax-projects-feed" class="projects-feed cf">
{% import _self as macros %}

{% if is_home or is_project or is_page %}
{% for project in projects %}
{{ macros.project(project, apex_options) }}
{% endfor %}
{% endif %}

{% if is_tag %}
{% for project in tagged_projects %}
{{ macros.project(project, apex_options) }}
{% endfor %}
{% endif %}

{% macro project(project, apex_options) %}

{% if project.thumb_url %}
{% set thumb = project.thumb_url %}
{% else %}
{% set thumb = 'no-image' %}
{% endif %}

{% if project.assets %}
{% for asset in project.assets|slice(0,1) %}
{% if asset.type == "image" %}
{% set thumb = asset.thumb_url %}
{% endif %}
{% endfor %}
{% endif %}

<article id="project-{{ project.id }}" class="project project--{{ project.id }} brick cf" data-img-url="{{ thumb }}">
<a href="{{ project.permalink }}" title="{{ project.title|e }}">
{% if project.thumb_url %}
<div class="thumb">
<img srcset="{{ project.thumb_srcset }}" alt="{{ project.title }}">
</div>
{% else %}
<div class="thumb no-thumb"></div>
{% endif %}
{% if apex_options.show_thumbnail_titles or apex_options.show_thumbnail_tags %}
<div class="thumbnail-title-wrap">
<div class="center">
<h2 class="title title--thumbnail">{{ project.title }}</h2>
{% if apex_options.show_thumbnail_tags and project.tags %}
<div class="tags tags--thumbnail">
{% for tag in project.tags %}
<span>#{{ tag.name }}</span>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endif %}
</a>
</article>
{% endmacro %}

<!--END .projects-feed-->
</div>
{# end home/project/tag check #}
{% endif %}

<!--END .site-content-->
</section>

<footer class="site-footer cf">
<p class="footer-text">{% if footer_text %}{{ footer_text }}{% endif %} {{ dunked_branding() }}</p>
</footer>
<!--END .wrap-->
</div>

<div id="modal" class="modal">
<div id="modal-content" class="modal-content"></div>
<button id="close-button" class="button button--close"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#shape-close-icon"></use></svg></button>
</div>
<div id="loading" class="loading"></div>
<div id="loading-body" class="loading loading--body loading--show"></div>

{% if apex_options.enable_lightbox %}
{{ lightbox_code() }}
<script>
// LoadCSS w/ rel=preload polyfill https://github.com/filamentgroup/loadCSS [c]2016 @scottjehl, Filament Group, Inc. Licensed MIT
!function(a){"use strict";var b=function(b,c,d){function j(a){return e.body?a():void setTimeout(function(){j(a)})}function l(){f.addEventListener&&f.removeEventListener("load",l),f.media=d||"all"}var g,e=a.document,f=e.createElement("link");if(c)g=c;else{var h=(e.body||e.getElementsByTagName("head")[0]).childNodes;g=h[h.length-1]}var i=e.styleSheets;f.rel="stylesheet",f.href=b,f.media="only x",j(function(){g.parentNode.insertBefore(f,c?g:g.nextSibling)});var k=function(a){for(var b=f.href,c=i.length;c--;)if(i[c].href===b)return a();setTimeout(function(){k(a)})};return f.addEventListener&&f.addEventListener("load",l),f.onloadcssdefined=k,k(l),f};"undefined"!=typeof exports?exports.loadCSS=b:a.loadCSS=b}("undefined"!=typeof global?global:this),function(a){if(a.loadCSS){var b=loadCSS.relpreload={};if(b.support=function(){try{return a.document.createElement("link").relList.supports("preload")}catch(b){return!1}},b.poly=function(){for(var b=a.document.getElementsByTagName("link"),c=0;c<b.length;c++){var d=b[c];"preload"===d.rel&&"style"===d.getAttribute("as")&&(a.loadCSS(d.href,d),d.rel=null)}},!b.support()){b.poly();var c=a.setInterval(b.poly,300);a.addEventListener&&a.addEventListener("load",function(){a.clearInterval(c)}),a.attachEvent&&a.attachEvent("onload",function(){a.clearInterval(c)})}}}(this);
</script>
<script src="{{ cdn_base_url }}assets/dist/lightbox-dunked.min.js"></script>
{% endif %}
<script src="{{ cached_file_url({ base: template_base_url, path: '1/scripts/lib.min.js' }) }}"></script>
<!-- BEGIN Analytics -->
<script>
window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
{% if analytics_code %}ga('create','{{ analytics_code }}','auto');{% else %}ga('create','UA-6564188-11','auto');{% endif %}ga('send','pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
<!-- END Analytics -->
<script id="dunked-admin-bar-script" data-base="{{ site_url }}" src="{{ admin_bar_js }}"></script>
</body>
</html>