275 lines
12 KiB
HTML
275 lines
12 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=3" rel="stylesheet">
|
|
|
|
<script type="module" src="/scripts/index.js" defer></script>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Nathan Chapman</h1>
|
|
<p><em>Web designer and developer</em></p>
|
|
<nav>
|
|
<a href="/" class="">Portfolio</a>
|
|
<a href="/about" class="">About</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
|
|
<article>
|
|
<section>
|
|
<h5>Contents</h5>
|
|
<ol>
|
|
<li><a href="#websites">Websites</a></li>
|
|
<li><a href="#webapps-list">Web applications</a></li>
|
|
<li><a href="#assignments-list">School projects</a></li>
|
|
</ol>
|
|
</section>
|
|
<section id="websites">
|
|
<h3>Websites</h3>
|
|
<div class="website-list">
|
|
<a class="website-list__item" href="https://blog.monolithofminds.com/">
|
|
<img src="/images/website_mom.png">
|
|
<strong>Monolith of Minds Blog</strong><br>
|
|
<small>Custom Ghost blog theme <br>Handlebars, HTML5, CSS3</small>
|
|
</a>
|
|
<a class="website-list__item" href="https://jhcillustration.com/">
|
|
<img src="/images/website_jhc.png">
|
|
<strong>JHC Illustration</strong><br>
|
|
<small>Online portfolio for a graphic designer<br>HTML5, CSS3, Vue</small>
|
|
</a>
|
|
<a class="website-list__item" href="https://jjayberthumemusic.com/">
|
|
<img src="/images/website_berthume.png">
|
|
<strong>JJay Berthume Music</strong><br>
|
|
<small>Online portfolio for a composer<br>HTML5, CSS3</small>
|
|
</a>
|
|
<a class="website-list__item" href="http://wallyworks.net/">
|
|
<img src="/images/website_wallyworks.png">
|
|
<strong>Wallyworks Construction</strong><br>
|
|
<small>Website for construction company<br>HTML5, CSS3</small>
|
|
</a>
|
|
<a class="website-list__item" href="https://owlsprit.nathanjchapman.com/">
|
|
<img src="/images/website_owlsprit.png">
|
|
<strong>Owl Sprit Cafe</strong><br>
|
|
<small>Website for a small restaurant<br>HTML5, CSS3, Vue</small>
|
|
</a>
|
|
<a class="website-list__item" href="https://bltc.nathanjchapman.com/">
|
|
<img src="/images/website_bltc.png">
|
|
<strong>Better Living Coffee</strong><br>
|
|
<small>Website for a coffee shop<br>HTML5, CSS3</small>
|
|
</a>
|
|
<a class="website-list__item" href="http://ptdefense.com/">
|
|
<img src="/images/website_ptdefense.png">
|
|
<strong>PT Defense</strong><br>
|
|
<small>Website for a Lawyer<br>HTML5, CSS3</small>
|
|
</a>
|
|
<a class="website-list__item" href="http://jac.nathanjchapman.com/">
|
|
<img src="/images/website_jac.png">
|
|
<strong>JAC Defenders</strong><br>
|
|
<small>Website for attorneys<br>HTML5, CSS3</small>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
<section id="webapps-list">
|
|
<h3>Web Applications</h3>
|
|
<h5>Contents</h5>
|
|
<ol>
|
|
<li>
|
|
<a href="#btech-time-tracker">BTech Time Tracker</a>
|
|
</li>
|
|
<li>
|
|
<a href="#workdesk">Workdesk</a>
|
|
</li>
|
|
<li>
|
|
<a href="#btech-cna-charting">BTech CNA Charting</a>
|
|
</li>
|
|
<li>
|
|
<a href="#workroom">Workroom</a>
|
|
</li>
|
|
</ol>
|
|
<h4 id="btech-time-tracker">BTech Time Tracker</h4>
|
|
<p>Track and manage sessions<br><small>Django, HTML5, SCSS</small></p>
|
|
<div class="carousel-wrapper btech-time-tracker">
|
|
<div class="carousel">
|
|
<figure class="carousel__photo initial">
|
|
<img src="/images/time_home.png">
|
|
<figcaption>Welcome page</figcaption>
|
|
</figure>
|
|
<figure class="carousel__photo">
|
|
<img src="/images/time_profile.png">
|
|
<figcaption>Student profile and recent activity</figcaption>
|
|
</figure>
|
|
<figure class="carousel__photo">
|
|
<img src="/images/time_log.png">
|
|
<figcaption>Past sessions (pagination)</figcaption>
|
|
</figure>
|
|
<figure class="carousel__photo">
|
|
<img src="/images/time_scan.png">
|
|
<figcaption>Scan a QR code to clock in</figcaption>
|
|
</figure>
|
|
<figure class="carousel__photo">
|
|
<img src="/images/time_instructor.png">
|
|
<figcaption>Instructor home page shows activity for department</figcaption>
|
|
</figure>
|
|
|
|
<div class="carousel__button--next"></div>
|
|
<div class="carousel__button--prev"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h4 id="workdesk">Workdesk</h4>
|
|
<p>Shift assignments and preferences<br><small>Django, Stimulusjs, HTML5, CSS3</small></p>
|
|
<div class="carousel-wrapper workdesk">
|
|
<div class="carousel">
|
|
<figure class="carousel__photo initial">
|
|
<img src="/images/wd_home.png">
|
|
<figcaption>All shifts</figcaption>
|
|
</figure>
|
|
<figure class="carousel__photo">
|
|
<img src="/images/wd_filter.png">
|
|
<figcaption>Type to filter shifts</figcaption>
|
|
</figure>
|
|
<figure class="carousel__photo">
|
|
<img src="/images/wd_detail.png">
|
|
<figcaption>See employee details</figcaption>
|
|
</figure>
|
|
<figure class="carousel__photo">
|
|
<img src="/images/wd_sort.png">
|
|
<figcaption>Employee can sort their shift preferences</figcaption>
|
|
</figure>
|
|
|
|
<div class="carousel__button--next"></div>
|
|
<div class="carousel__button--prev"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h4 id="btech-cna-charting">BTech CNA Charting</h4>
|
|
<p>Certified Nurse Assistant Charting Application<br><small>Django, Stimulusjs, HTML5, CSS3</small></p>
|
|
<div class="carousel-wrapper btech-cna-charting">
|
|
<div class="carousel">
|
|
<figure class="carousel__photo initial">
|
|
<img src="/images/charting_01.png" alt="">
|
|
<figcaption>Track charting information</figcaption>
|
|
</figure>
|
|
<figure class="carousel__photo">
|
|
<img src="/images/charting_02.png" alt="">
|
|
<figcaption>Create a new chart</figcaption>
|
|
</figure>
|
|
<figure class="carousel__photo">
|
|
<img src="/images/charting_03.png" alt="">
|
|
<figcaption>Add a new entry</figcaption>
|
|
</figure>
|
|
<figure class="carousel__photo">
|
|
<img src="/images/charting_04.png" alt="">
|
|
<figcaption>Input patient vitals</figcaption>
|
|
</figure>
|
|
<figure class="carousel__photo">
|
|
<img src="/images/charting_05.png" alt="">
|
|
<figcaption>Review information recorded, automatically sorted by time</figcaption>
|
|
</figure>
|
|
|
|
<div class="carousel__button--next"></div>
|
|
<div class="carousel__button--prev"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h4 id="workroom">Workroom</h4>
|
|
<p>Timecards and labor tracking<br><small>Django, HTML5, CSS3</small></p>
|
|
<div class="carousel-wrapper workroom-carousel">
|
|
<div class="carousel">
|
|
<figure class="carousel__photo initial">
|
|
<img src="/images/workroom_01.png">
|
|
<figcaption>Employee timecard</figcaption>
|
|
</figure>
|
|
<figure class="carousel__photo">
|
|
<img src="/images/workroom_02.png">
|
|
<figcaption>Input daily tasks</figcaption>
|
|
</figure>
|
|
<figure class="carousel__photo">
|
|
<img src="/images/workroom_03.png">
|
|
<figcaption>Manage projects for consistent naming</figcaption>
|
|
</figure>
|
|
<figure class="carousel__photo">
|
|
<img src="/images/workroom_04.png">
|
|
<figcaption>See and edit task details</figcaption>
|
|
</figure>
|
|
|
|
<div class="carousel__button--next"></div>
|
|
<div class="carousel__button--prev"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="assignments-list">
|
|
<h2>Assignments and projects</h2>
|
|
<p>I'm currently attending <a href="https://btech.edu/">Bridgerland Technical College</a> and this page is a collection of links to projects and assignments I've made. A portfolio from school.</p>
|
|
<dl>
|
|
<dt>PHP Work</dt>
|
|
<dd>
|
|
<a href="http://btech-php.nathanjchapman.com/">Website</a> /
|
|
<a href="https://github.com/nathanjchapman/btech-php">Github</a>
|
|
</dd>
|
|
|
|
<dt>MySQL</dt>
|
|
<dd><a href="https://github.com/nathanjchapman/btech-mysql">Github</a></dd>
|
|
|
|
<dt>SQL Sandbox</dt>
|
|
<dd><a href="https://github.com/nathanjchapman/sql-sandbox">Github</a></dd>
|
|
|
|
<dt>BTech Time Tracker</dt>
|
|
<dd>
|
|
<a href="https://btech-timetracker.nathanjchapman.com/">Website</a> /
|
|
<a href="https://github.com/nathanjchapman/btech-timetracker/">Github</a>
|
|
</dd>
|
|
<dd>With Django, Postgresql, Javascript</dd>
|
|
|
|
<dt>Python Exercises</dt>
|
|
<dd><a href="https://github.com/nathanjchapman/python">Github</a></dd>
|
|
|
|
<dt>Typing Test with Javascript</dt>
|
|
<dd>
|
|
<a href="https://btech-typingtest.nathanjchapman.com/">Website</a> /
|
|
<a href="https://github.com/nathanjchapman/btech-typingtest">Github</a>
|
|
</dd>
|
|
|
|
<dt>Analog Clock with Javascript</dt>
|
|
<dd>
|
|
<a href="https://btech-clock.nathanjchapman.com/">Website</a> /
|
|
<a href="https://github.com/nathanjchapman/btech-clock">Github</a>
|
|
</dd>
|
|
</dl>
|
|
</section>
|
|
</article>
|
|
|
|
</main>
|
|
|
|
<button id="to-top-button" class="button" title="Go to top">↑</button>
|
|
|
|
<footer>
|
|
<section id="contact">
|
|
<h5>Want to work with me?</h5>
|
|
<p><a href="mailto:contact@nathanjchapman.com">Email me</a> and let's start a conversation.</p>
|
|
</section>
|
|
<section>
|
|
<p>
|
|
<a href="/" class="">Portfolio</a>
|
|
<a href="/about" class="">About</a>
|
|
</p>
|
|
<p><small>Copyright ©<span id="year"></span> Nathan Chapman. All rights reserved.</small></p>
|
|
</section>
|
|
</footer>
|
|
</body>
|
|
</html> |