112 lines
5.5 KiB
HTML
112 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
|
|
<meta content="width=device-width, initial-scale=1" name="viewport">
|
|
|
|
<link rel="shortcut icon" href="/images/favicon.ico">
|
|
|
|
<title>Portfolio | Nathan Chapman</title>
|
|
|
|
<meta name="author" content="Nathan Chapman">
|
|
<meta content="Custom websites and web applications. Stand out from the crowd with a custom built website, just the way you want it." name="description">
|
|
<meta content="websites, web design, custom, simple, fast, clean, html, css, javascript, designer, writer" name="keywords">
|
|
|
|
<link href="/styles/normalize.css" rel="stylesheet">
|
|
<link href="/styles/main.css?v=1" rel="stylesheet">
|
|
|
|
<script type="module" src="/scripts/index.js" defer></script>
|
|
</head>
|
|
<body>
|
|
<header class="site__header">
|
|
<nav class="site__nav">
|
|
<ul>
|
|
<li><a href="/#websites">Websites</a></li>
|
|
<li><a href="https://github.com/nathanjchapman/">Github</a></li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
<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>
|
|
|
|
|
|
</header>
|
|
|
|
<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 spagetti under the hood. Conversly: 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 templating 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 embeded 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>
|
|
|
|
</main>
|
|
|
|
<footer>
|
|
<section id="contact">
|
|
<h5>Want to work with me?</h5>
|
|
<p><a href="mailto:contact@nathanjchapman.com">Contact me</a> and let's start a conversation.</p>
|
|
</section>
|
|
<section class="site__nav footer__nav">
|
|
<ul>
|
|
<li><a href="/#websites">Websites</a></li>
|
|
<li><a href="https://github.com/nathanjchapman/">Github</a></li>
|
|
|
|
</ul>
|
|
</section>
|
|
<section>
|
|
<p><small>Copyright ©<span id="year"></span> Nathan Chapman. All rights reserved.</small></p>
|
|
</section>
|
|
</footer>
|
|
</body>
|
|
</html> |