{% extends "_base.html" %}

{% block title %}Portfolio{% endblock %}

{% block 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>
{% endblock %}