nathanjchapman/index.html
2021-12-13 20:38:50 -07:00

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 &copy;<span id="year"></span> Nathan Chapman. All rights reserved.</small></p>
</section>
</footer>
</body>
</html>