65 lines
4.1 KiB
HTML
65 lines
4.1 KiB
HTML
{% extends "_base.html" %}
|
|
|
|
{% block title %}Portfolio{% endblock %}
|
|
|
|
{% block header %}
|
|
<section class="site__banner">
|
|
<h1>NATHAN CHAPMAN</h1>
|
|
</section>
|
|
<section class="header__preamble">
|
|
<p><a href="mailto:contact@nathanjchapman.com">Contact me</a></p>
|
|
<p>Nathan Chapman is a web <strong><mark>designer</mark></strong> and app <strong><mark>developer</mark></strong> based in Utah.</p>
|
|
</section>
|
|
|
|
{% endblock %}
|
|
|
|
{% block main %}
|
|
<article>
|
|
<section id="websites">
|
|
<h2>WEBSITES</h2>
|
|
<div class="project__list">
|
|
<figure class="project__item project__a">
|
|
<a class="project__figure" href="https://jhcillustration.com/">
|
|
<img src="/images/jhc/landing.png" alt="">
|
|
</a>
|
|
<figcaption class="project__description">01.<br>A static website for a Designer. Written in plain HTML, CSS, JavaScript, and a little Vue for a simple image carousel and filter.</figcaption>
|
|
</figure>
|
|
<h3>Webites that are beautifully designed are usually slow and spaghetti under the hood. Conversely: websites that are well-made often aren't much to look at. <mark>Striking the balance in this trade-off is key to a well crafted website.</mark></h3>
|
|
<figure class="project__item project__b">
|
|
<a class="project__figure" href="https://blog.monolithofminds.com/">
|
|
<img src="/images/mom/article.png" alt="Monolith of Minds blog">
|
|
</a>
|
|
<figcaption class="project__description">02.<br>A custom theme for a <a href="https://ghost.org/">Ghost</a> blog. Created using the Handlebars template language, HTML, and CSS.</figcaption>
|
|
</figure>
|
|
<h3>Most websites have too many fonts with too many sizes, poor color choices, and inconsistent designs that distract rather than clarify. <mark>Implementing an appropriate typeface and type-scale, simple color scheme, and consistent rules is the base for a good design.</mark></h3>
|
|
<figure class="project__item project__c">
|
|
<figcaption class="project__description">03.<br>A portfolio website for the Composer JJay Berthume, which features embedded audio. Created with plain HTML and CSS.</figcaption>
|
|
<a class="project__figure" href="https://jjayberthumemusic.com/">
|
|
<img src="/images/berthume/landing.png" alt="">
|
|
</a>
|
|
</figure>
|
|
<figure class="project__item project__d">
|
|
<a class="project__figure_a" href="http://jac.nathanjchapman.com/">
|
|
<img src="/images/website_jac.png" alt="Jefferson Associated Council">
|
|
</a>
|
|
<a class="project__figure_b" href="http://ptdefense.com/">
|
|
<img src="/images/website_ptdefense.png" alt="PT Defense">
|
|
</a>
|
|
<figcaption class="project__description_a">04.<br>Website for Public Defenders. Built with HTML and CSS.</figcaption>
|
|
<figcaption class="project__description_b">05.<br>Website for a Lawyer. Built with HTML and CSS.</figcaption>
|
|
</figure>
|
|
<h3>Working face-to-face with clients, you can get a sense of what they value and can incorporate that in the work. <mark>If you do it right it will resonate with them.</mark></h3>
|
|
<figure class="project__item project__e">
|
|
<a class="project__figure_a" href="https://owlsprit.nathanjchapman.com/">
|
|
<img src="/images/website_owlsprit.png" alt="Owl Sprit Cafe">
|
|
</a>
|
|
<a class="project__figure_b" href="https://bltc.nathanjchapman.com/">
|
|
<img src="/images/website_bltc.png" alt="Better Living Coffee">
|
|
</a>
|
|
<figcaption class="project__description_a">06.<br>Website for a restaurant. Built with HTML, CSS, and Vue.</figcaption>
|
|
<figcaption class="project__description_b">07.<br>Website for a coffee shop. Built with HTML and CSS.</figcaption>
|
|
</figure>
|
|
</div>
|
|
</section>
|
|
</article>
|
|
{% endblock %} |