Complete redesign of whole site
This commit is contained in:
Nathan Chapman
parent
a7e4b7adc9
commit
c398d46ec6
3
Pipfile
3
Pipfile
@ -4,10 +4,9 @@ verify_ssl = true
|
|||||||
name = "pypi"
|
name = "pypi"
|
||||||
|
|
||||||
[packages]
|
[packages]
|
||||||
jinja2 = "*"
|
|
||||||
staticjinja = "*"
|
staticjinja = "*"
|
||||||
|
|
||||||
[dev-packages]
|
[dev-packages]
|
||||||
|
|
||||||
[requires]
|
[requires]
|
||||||
python_version = "3.9"
|
python_version = "3.10"
|
||||||
|
|||||||
12
Pipfile.lock
generated
12
Pipfile.lock
generated
@ -1,11 +1,11 @@
|
|||||||
{
|
{
|
||||||
"_meta": {
|
"_meta": {
|
||||||
"hash": {
|
"hash": {
|
||||||
"sha256": "4ae95b28a4c1596654dab03c10dfd9a18bd7498b1500071b7a8797c5eb3606f6"
|
"sha256": "1234916fabebf0811f03f9699efe95a2e02607bca52d793b40508d3784133ecb"
|
||||||
},
|
},
|
||||||
"pipfile-spec": 6,
|
"pipfile-spec": 6,
|
||||||
"requires": {
|
"requires": {
|
||||||
"python_version": "3.9"
|
"python_version": "3.10"
|
||||||
},
|
},
|
||||||
"sources": [
|
"sources": [
|
||||||
{
|
{
|
||||||
@ -35,7 +35,7 @@
|
|||||||
"sha256:077ce6014f7b40d03b47d1f1ca4b0fc8328a692bd284016f806ed0eaca390ad8",
|
"sha256:077ce6014f7b40d03b47d1f1ca4b0fc8328a692bd284016f806ed0eaca390ad8",
|
||||||
"sha256:611bb273cd68f3b993fabdc4064fc858c5b47a973cb5aa7999ec1ba405c87cd7"
|
"sha256:611bb273cd68f3b993fabdc4064fc858c5b47a973cb5aa7999ec1ba405c87cd7"
|
||||||
],
|
],
|
||||||
"index": "pypi",
|
"markers": "python_version >= '3.6'",
|
||||||
"version": "==3.0.3"
|
"version": "==3.0.3"
|
||||||
},
|
},
|
||||||
"markupsafe": {
|
"markupsafe": {
|
||||||
@ -115,11 +115,11 @@
|
|||||||
},
|
},
|
||||||
"staticjinja": {
|
"staticjinja": {
|
||||||
"hashes": [
|
"hashes": [
|
||||||
"sha256:5a0e21ec490096a0375c47c701b356e2ae9d3b772094b1c773367b4e6dccabbf",
|
"sha256:3f5c17b4abc341db1bf01a487a7f039e1c6304c5d742fb3a7b7081d2abeec426",
|
||||||
"sha256:d2cabc97baa58f593e58fefc2d8f3b2bc89995d387074136fef6c67ea985c958"
|
"sha256:5562a4ee3ee63a450c7512f2aea1fbdc2413602a56824410c0301b41b76b766c"
|
||||||
],
|
],
|
||||||
"index": "pypi",
|
"index": "pypi",
|
||||||
"version": "==4.1.1"
|
"version": "==4.1.2"
|
||||||
},
|
},
|
||||||
"watchdog": {
|
"watchdog": {
|
||||||
"hashes": [
|
"hashes": [
|
||||||
|
|||||||
@ -1,71 +0,0 @@
|
|||||||
<!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>About | 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>
|
|
||||||
<h2>About</h2>
|
|
||||||
<section>
|
|
||||||
<p>I'm a web developer and designer. I make websites and web applications.
|
|
||||||
|
|
||||||
<p>I got into web development because there was a frustration with people around me wanting a simple, fast, custom site that didn't come from a run-of-the-mill template or theme.</p>
|
|
||||||
<p>I got into web application development because there was a constant frustration with spreadsheets getting out of control and requiring too much maintenance to be useful.</p>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<h5>Albums</h5>
|
|
||||||
<p>I'm also a composer for film, games, and other mediums. I created the soundtracks to the online stories the <a href="http://www.lastwebsite.io/">Last Website</a> and the <a href="https://www.novella.io/novellas/the-story-of-red">Story Of Red</a>, a small short <a href="https://www.youtube.com/watch?v=wJ1p_cZ5krc">Simple Killjoy</a>, and other projects. I received my first introduction to music production and composition in High School and have been pursuing the craft ever since.</p>
|
|
||||||
<div class="albums-list">
|
|
||||||
<iframe src="https://bandcamp.com/EmbeddedPlayer/album=1800198375/size=large/bgcol=ffffff/linkcol=00AFD7/tracklist=false/artwork=small/transparent=true/" seamless><a href="https://music.nathanjchapman.com/album/unresolved">Unresolved by Nathan Chapman</a></iframe>
|
|
||||||
<iframe src="https://bandcamp.com/EmbeddedPlayer/album=410332369/size=large/bgcol=ffffff/linkcol=00AFD7/tracklist=false/artwork=small/transparent=true/" seamless><a href="https://music.nathanjchapman.com/album/the-last-website-remastered">The Last Website (Remastered) by Nathan Chapman</a></iframe>
|
|
||||||
<iframe src="https://bandcamp.com/EmbeddedPlayer/track=1372576239/size=large/bgcol=ffffff/linkcol=00AFD7/tracklist=false/artwork=small/transparent=true/" seamless><a href="https://music.nathanjchapman.com/track/blue-notes">Blue Notes by Nathan Chapman</a></iframe>
|
|
||||||
<iframe src="https://bandcamp.com/EmbeddedPlayer/album=3163445596/size=large/bgcol=ffffff/linkcol=00AFD7/tracklist=false/artwork=small/transparent=true/" seamless><a href="https://music.nathanjchapman.com/album/senescence">Senescence by Nathan Chapman</a></iframe>
|
|
||||||
</div>
|
|
||||||
</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>
|
|
||||||
BIN
images/berthume/landing.png
Normal file
BIN
images/berthume/landing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.5 MiB |
BIN
images/jhc/landing.png
Normal file
BIN
images/jhc/landing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 MiB |
BIN
images/mom/article.png
Normal file
BIN
images/mom/article.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 MiB |
BIN
images/mom/article_alternative.png
Normal file
BIN
images/mom/article_alternative.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
images/mom/footer.png
Normal file
BIN
images/mom/footer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
images/mom/landing.png
Normal file
BIN
images/mom/landing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
images/website_bltc.png
Executable file → Normal file
BIN
images/website_bltc.png
Executable file → Normal file
Binary file not shown.
|
Before Width: | Height: | Size: 546 KiB After Width: | Height: | Size: 18 MiB |
BIN
images/website_jac.png
Executable file → Normal file
BIN
images/website_jac.png
Executable file → Normal file
Binary file not shown.
|
Before Width: | Height: | Size: 241 KiB After Width: | Height: | Size: 6.5 MiB |
BIN
images/website_jhc.png
Executable file → Normal file
BIN
images/website_jhc.png
Executable file → Normal file
Binary file not shown.
|
Before Width: | Height: | Size: 163 KiB After Width: | Height: | Size: 11 MiB |
BIN
images/website_owlsprit.png
Executable file → Normal file
BIN
images/website_owlsprit.png
Executable file → Normal file
Binary file not shown.
|
Before Width: | Height: | Size: 468 KiB After Width: | Height: | Size: 27 MiB |
BIN
images/website_ptdefense.png
Executable file → Normal file
BIN
images/website_ptdefense.png
Executable file → Normal file
Binary file not shown.
|
Before Width: | Height: | Size: 150 KiB After Width: | Height: | Size: 2.4 MiB |
297
index.html
297
index.html
@ -14,260 +14,95 @@
|
|||||||
<meta content="websites, web design, custom, simple, fast, clean, html, css, javascript, designer, writer" name="keywords">
|
<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/normalize.css" rel="stylesheet">
|
||||||
<link href="/styles/main.css?v=3" rel="stylesheet">
|
<link href="/styles/main.css?v=1" rel="stylesheet">
|
||||||
|
|
||||||
<script type="module" src="/scripts/index.js" defer></script>
|
<script type="module" src="/scripts/index.js" defer></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header class="site__header">
|
||||||
<h1>Nathan Chapman</h1>
|
<nav class="site__nav">
|
||||||
<p><em>Web designer and developer</em></p>
|
<ul>
|
||||||
<nav>
|
<li><a href="/#websites">Websites</a></li>
|
||||||
<a href="/" class="">Portfolio</a>
|
|
||||||
<a href="/about" class="">About</a>
|
</ul>
|
||||||
</nav>
|
</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>
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
|
|
||||||
<article>
|
<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">
|
<section id="websites">
|
||||||
<h3>Websites</h3>
|
<h2>WEBSITES</h2>
|
||||||
<div class="website-list">
|
<div class="project__list">
|
||||||
<a class="website-list__item" href="https://blog.monolithofminds.com/">
|
<figure class="project__item project__a">
|
||||||
<img src="/images/website_mom.png">
|
<a class="project__figure" href="https://jhcillustration.com/">
|
||||||
<strong>Monolith of Minds Blog</strong><br>
|
<img src="/images/jhc/landing.png" alt="">
|
||||||
<small>Custom Ghost blog theme <br>Handlebars, HTML5, CSS3</small>
|
</a>
|
||||||
</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>
|
||||||
<a class="website-list__item" href="https://jhcillustration.com/">
|
</figure>
|
||||||
<img src="/images/website_jhc.png">
|
<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>
|
||||||
<strong>JHC Illustration</strong><br>
|
<figure class="project__item project__b">
|
||||||
<small>Online portfolio for a graphic designer<br>HTML5, CSS3, Vue</small>
|
<a class="project__figure" href="https://blog.monolithofminds.com/">
|
||||||
</a>
|
<img src="/images/mom/article.png" alt="Monolith of Minds blog">
|
||||||
<a class="website-list__item" href="https://jjayberthumemusic.com/">
|
</a>
|
||||||
<img src="/images/website_berthume.png">
|
<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>
|
||||||
<strong>JJay Berthume Music</strong><br>
|
</figure>
|
||||||
<small>Online portfolio for a composer<br>HTML5, CSS3</small>
|
<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>
|
||||||
</a>
|
<figure class="project__item project__c">
|
||||||
<a class="website-list__item" href="http://wallyworks.net/">
|
<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>
|
||||||
<img src="/images/website_wallyworks.png">
|
<a class="project__figure" href="https://jjayberthumemusic.com/">
|
||||||
<strong>Wallyworks Construction</strong><br>
|
<img src="/images/berthume/landing.png" alt="">
|
||||||
<small>Website for construction company<br>HTML5, CSS3</small>
|
</a>
|
||||||
</a>
|
</figure>
|
||||||
<a class="website-list__item" href="https://owlsprit.nathanjchapman.com/">
|
<figure class="project__item project__d">
|
||||||
<img src="/images/website_owlsprit.png">
|
<a class="project__figure_a" href="http://jac.nathanjchapman.com/">
|
||||||
<strong>Owl Sprit Cafe</strong><br>
|
<img src="/images/website_jac.png" alt="Jefferson Associated Council">
|
||||||
<small>Website for a small restaurant<br>HTML5, CSS3, Vue</small>
|
</a>
|
||||||
</a>
|
<a class="project__figure_b" href="http://ptdefense.com/">
|
||||||
<a class="website-list__item" href="https://bltc.nathanjchapman.com/">
|
<img src="/images/website_ptdefense.png" alt="PT Defense">
|
||||||
<img src="/images/website_bltc.png">
|
</a>
|
||||||
<strong>Better Living Coffee</strong><br>
|
<figcaption class="project__description_a">04.<br>Website for Public Defenders. Built with HTML and CSS.</figcaption>
|
||||||
<small>Website for a coffee shop<br>HTML5, CSS3</small>
|
<figcaption class="project__description_b">05.<br>Website for a Lawyer. Built with HTML and CSS.</figcaption>
|
||||||
</a>
|
</figure>
|
||||||
<a class="website-list__item" href="http://ptdefense.com/">
|
<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>
|
||||||
<img src="/images/website_ptdefense.png">
|
<figure class="project__item project__e">
|
||||||
<strong>PT Defense</strong><br>
|
<a class="project__figure_a" href="https://owlsprit.nathanjchapman.com/">
|
||||||
<small>Website for a Lawyer<br>HTML5, CSS3</small>
|
<img src="/images/website_owlsprit.png" alt="Owl Sprit Cafe">
|
||||||
</a>
|
</a>
|
||||||
<a class="website-list__item" href="http://jac.nathanjchapman.com/">
|
<a class="project__figure_b" href="https://bltc.nathanjchapman.com/">
|
||||||
<img src="/images/website_jac.png">
|
<img src="/images/website_bltc.png" alt="Better Living Coffee">
|
||||||
<strong>JAC Defenders</strong><br>
|
</a>
|
||||||
<small>Website for attorneys<br>HTML5, CSS3</small>
|
<figcaption class="project__description_a">06.<br>Website for a restaurant. Built with HTML, CSS, and Vue.</figcaption>
|
||||||
</a>
|
<figcaption class="project__description_b">07.<br>Website for a coffee shop. Built with HTML and CSS.</figcaption>
|
||||||
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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>
|
</article>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<button id="to-top-button" class="button" title="Go to top">↑</button>
|
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<section id="contact">
|
<section id="contact">
|
||||||
<h5>Want to work with me?</h5>
|
<h5>Want to work with me?</h5>
|
||||||
<p><a href="mailto:contact@nathanjchapman.com">Email me</a> and let's start a conversation.</p>
|
<p><a href="mailto:contact@nathanjchapman.com">Email me</a> and let's start a conversation.</p>
|
||||||
</section>
|
</section>
|
||||||
|
<section class="site__nav footer__nav">
|
||||||
|
<ul>
|
||||||
|
<li><a href="/#websites">Websites</a></li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
<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>
|
<p><small>Copyright ©<span id="year"></span> Nathan Chapman. All rights reserved.</small></p>
|
||||||
</section>
|
</section>
|
||||||
</footer>
|
</footer>
|
||||||
|
|||||||
@ -1,110 +0,0 @@
|
|||||||
export default class Carousel {
|
|
||||||
constructor (element) {
|
|
||||||
this.element = element;
|
|
||||||
this.itemClassName = 'carousel__photo';
|
|
||||||
this.items = this.element.querySelectorAll(`.${this.itemClassName}`);
|
|
||||||
this.totalItems = this.items.length;
|
|
||||||
this.slide = 0;
|
|
||||||
this.moving = true;
|
|
||||||
|
|
||||||
this.start();
|
|
||||||
}
|
|
||||||
|
|
||||||
setInitialClasses () {
|
|
||||||
this.items[0].classList.add('active');
|
|
||||||
this.items[1].classList.add('next');
|
|
||||||
}
|
|
||||||
|
|
||||||
attachEventListeners () {
|
|
||||||
const next = this.element.querySelector('.carousel__button--next');
|
|
||||||
const prev = this.element.querySelector('.carousel__button--prev');
|
|
||||||
|
|
||||||
next.addEventListener('click', this.moveNext.bind(this));
|
|
||||||
prev.addEventListener('click', this.movePrev.bind(this));
|
|
||||||
}
|
|
||||||
|
|
||||||
moveCarouselTo (slide) {
|
|
||||||
// Check if carousel is moving, if not, allow interaction
|
|
||||||
if (!this.moving) {
|
|
||||||
// temporarily disable interactivity
|
|
||||||
this.disableInteraction();
|
|
||||||
// Update the 'old' adjacent slides with 'new' ones
|
|
||||||
let newPrevious = slide - 1,
|
|
||||||
newNext = slide + 1,
|
|
||||||
oldPrevious = slide - 2,
|
|
||||||
oldNext = slide + 2;
|
|
||||||
// Test if carousel has more than three items
|
|
||||||
if ((this.totalItems - 1) > 2) {
|
|
||||||
// Checks and updates if the new slides are out of bounds
|
|
||||||
if (newPrevious <= 0) {
|
|
||||||
oldPrevious = (this.totalItems - 1);
|
|
||||||
} else if (newNext >= (this.totalItems - 1)) {
|
|
||||||
oldNext = 0;
|
|
||||||
}
|
|
||||||
// Checks and updates if slide is at the beginning/end
|
|
||||||
if (slide === 0) {
|
|
||||||
newPrevious = (this.totalItems - 1);
|
|
||||||
oldPrevious = (this.totalItems - 2);
|
|
||||||
oldNext = (slide + 1);
|
|
||||||
} else if (slide === (this.totalItems - 1)) {
|
|
||||||
newPrevious = (slide - 1);
|
|
||||||
newNext = 0;
|
|
||||||
oldNext = 1;
|
|
||||||
}
|
|
||||||
// Now we've worked out where we are and where we're going,
|
|
||||||
// by adding/removing classes we'll trigger the transitions.
|
|
||||||
// Reset old next/prev elements to default classes
|
|
||||||
this.items[oldPrevious].className = this.itemClassName;
|
|
||||||
this.items[oldNext].className = this.itemClassName; // Add new classes
|
|
||||||
this.items[newPrevious].className = this.itemClassName + ' prev';
|
|
||||||
this.items[slide].className = this.itemClassName + ' active';
|
|
||||||
this.items[newNext].className = this.itemClassName + ' next';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
moveNext () {
|
|
||||||
// Check if moving
|
|
||||||
if (!this.moving) {
|
|
||||||
// If it's the last slide, reset to 0, else +1
|
|
||||||
if (this.slide === (this.totalItems - 1)) {
|
|
||||||
this.slide = 0;
|
|
||||||
} else {
|
|
||||||
this.slide++;
|
|
||||||
}
|
|
||||||
// Move carousel to updated slide
|
|
||||||
this.moveCarouselTo(this.slide);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
movePrev () {
|
|
||||||
// Check if moving
|
|
||||||
if (!this.moving) {
|
|
||||||
// If it's the first slide, set as the last slide, else -1
|
|
||||||
if (this.slide === 0) {
|
|
||||||
this.slide = (this.totalItems - 1);
|
|
||||||
} else {
|
|
||||||
this.slide--;
|
|
||||||
}
|
|
||||||
// Move carousel to updated slide
|
|
||||||
this.moveCarouselTo(this.slide);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
disableInteraction () {
|
|
||||||
// Set 'moving' to true for the same duration as our transition.
|
|
||||||
// (0.5s = 500ms)
|
|
||||||
this.moving = true;
|
|
||||||
// setTimeout runs its function once after the given time
|
|
||||||
setTimeout(() => {
|
|
||||||
this.moving = false
|
|
||||||
}, 500);
|
|
||||||
}
|
|
||||||
|
|
||||||
start () {
|
|
||||||
this.setInitialClasses();
|
|
||||||
this.attachEventListeners();
|
|
||||||
// Set moving to false so that the carousel becomes interactive
|
|
||||||
this.moving = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
12
scripts/index.js
Executable file → Normal file
12
scripts/index.js
Executable file → Normal file
@ -1,15 +1,3 @@
|
|||||||
import Carousel from './carousel.js';
|
|
||||||
|
|
||||||
const btechTimeTrackerEl = document.querySelector('.btech-time-tracker');
|
|
||||||
const workdeskEl = document.querySelector('.workdesk');
|
|
||||||
const cnaEl = document.querySelector('.btech-cna-charting');
|
|
||||||
const workroomEl = document.querySelector('.workroom-carousel');
|
|
||||||
|
|
||||||
new Carousel(btechTimeTrackerEl);
|
|
||||||
new Carousel(workdeskEl);
|
|
||||||
new Carousel(cnaEl);
|
|
||||||
new Carousel(workroomEl);
|
|
||||||
|
|
||||||
// Current year in footer
|
// Current year in footer
|
||||||
const currentYear = new Date().getFullYear();
|
const currentYear = new Date().getFullYear();
|
||||||
document.querySelector('#year').innerHTML = currentYear;
|
document.querySelector('#year').innerHTML = currentYear;
|
||||||
|
|||||||
766
styles/main.css
Executable file → Normal file
766
styles/main.css
Executable file → Normal file
@ -1,142 +1,173 @@
|
|||||||
/*@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');*/
|
|
||||||
@import url('/fonts/franklin-gothic/franklin-gothic.css');
|
@import url('/fonts/franklin-gothic/franklin-gothic.css');
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--fg-color: #000;
|
/* Font sizes */
|
||||||
--bg-color: #ffffff;
|
--large: 5.653rem;
|
||||||
--primary-color: #00AFD7;
|
--normal: 1rem;
|
||||||
--border-color: #b9bfbb;
|
--small: 0.707rem;
|
||||||
|
|
||||||
|
/* Colors */
|
||||||
|
--fg: #000;
|
||||||
|
--bg: #ececec;
|
||||||
|
--orange: #ff4828;
|
||||||
|
--orange-bg: #e05e47;
|
||||||
|
--blue: #00afd7;
|
||||||
|
--grey: #ececec;
|
||||||
|
--border: #bdc3c7;
|
||||||
|
|
||||||
|
/* Screen sizes */
|
||||||
|
--large-screen: 1440px;
|
||||||
|
--normal-screen: 1024px;
|
||||||
|
--tablet-screen: 900px;
|
||||||
|
--phone-screen: 600px;
|
||||||
|
--small-screen: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
|
||||||
font-size: 150%;
|
/* Reset
|
||||||
|
==============================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
html, body, div, span, applet, object, iframe,
|
||||||
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||||
|
a, abbr, acronym, address, big, cite, code,
|
||||||
|
del, dfn, img, ins, kbd, q, s, samp,
|
||||||
|
small, strike, tt, var,
|
||||||
|
b, u, i, center,
|
||||||
|
dl, dt, dd, ol, ul, li,
|
||||||
|
fieldset, form, label, legend,
|
||||||
|
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||||
|
article, aside, canvas, details, embed,
|
||||||
|
figure, figcaption, footer, header, hgroup,
|
||||||
|
menu, nav, output, ruby, section, summary,
|
||||||
|
time, mark, audio, video {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
font-size: 100%;
|
||||||
|
font: inherit;
|
||||||
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
/* HTML5 display-role reset for older browsers */
|
||||||
|
article, aside, details, figcaption, figure,
|
||||||
|
footer, header, hgroup, menu, nav, section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
ol, ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
blockquote, q {
|
||||||
|
quotes: none;
|
||||||
|
}
|
||||||
|
blockquote:before, blockquote:after,
|
||||||
|
q:before, q:after {
|
||||||
|
content: '';
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Typography
|
||||||
|
==============================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 150%; /*24px*/
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
html {
|
||||||
|
font-size: 112.5%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background-color: var(--bg-color);
|
background-color: var(--grey);
|
||||||
color: var(--fg-color);
|
|
||||||
font-family: 'Franklin Gothic', sans-serif;
|
font-family: 'Franklin Gothic', sans-serif;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 1.65;
|
line-height: 1.3;
|
||||||
|
color: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
|
||||||
max-width: 42.67rem;
|
|
||||||
margin: 0 auto 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
header h1 {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
header p {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
main {
|
|
||||||
max-width: 42.67rem;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Text Elements */
|
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin-bottom: 1.15rem;
|
margin-bottom: 1rem;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5 {
|
h1, h2, h3, h4, h5 {
|
||||||
margin: 3rem 0 1.05rem;
|
margin: 1rem 0;
|
||||||
|
font-family: 'Franklin Gothic', sans-serif;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
line-height: 1.15;
|
line-height: 1;
|
||||||
}
|
text-rendering: optimizeLegibility;
|
||||||
h1:first-child,
|
|
||||||
h2:first-child,
|
|
||||||
h3:first-child,
|
|
||||||
h4:first-child,
|
|
||||||
h5:first-child {
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 2.488rem;
|
font-size: 5.653rem;
|
||||||
|
letter-spacing: -0.083rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 2.074rem;
|
font-size: 3.998rem;
|
||||||
|
letter-spacing: -0.083rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 1.728rem;
|
font-size: 2.827rem;
|
||||||
|
line-height: 1.25;
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
font-size: 1.44rem;
|
font-size: 1.999rem;
|
||||||
}
|
|
||||||
h3 + h4 {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h5 {
|
h5 {
|
||||||
font-size: 1.2rem;
|
font-size: 1.414rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
small {
|
small {
|
||||||
font-size: 0.833rem;
|
font-size: 0.707rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
mark {
|
||||||
|
background-color: unset;
|
||||||
|
color: var(--orange);
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--primary-color);
|
color: var(--fg);
|
||||||
cursor: pointer;
|
text-rendering: optimizeLegibility;
|
||||||
text-decoration: none;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
color: var(--fg-color);
|
color: var(--blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
ol,
|
|
||||||
ul {
|
ul {
|
||||||
|
margin: 0;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
list-style-position: inside;
|
list-style-position: inside;
|
||||||
}
|
list-style-type: square;
|
||||||
|
|
||||||
dl dt {
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
dd + dt {
|
|
||||||
margin-top: 1.15rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
object-fit: cover;
|
||||||
|
|
||||||
nav {
|
|
||||||
margin: 0 0 1.05rem;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a {
|
|
||||||
color: var(--fg-color);
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
nav a:not(:last-child) {
|
|
||||||
margin-right: 2rem;
|
|
||||||
}
|
|
||||||
nav a.--active {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
section {
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
iframe {
|
iframe {
|
||||||
border: 0;
|
border: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
/*height: 24rem;*/
|
|
||||||
}
|
}
|
||||||
|
|
||||||
figure {
|
figure {
|
||||||
@ -146,52 +177,441 @@ figure {
|
|||||||
}
|
}
|
||||||
|
|
||||||
figure img {
|
figure img {
|
||||||
border: 0.0625rem solid #bdc3c7;
|
border: 0.0625rem solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
figure figcaption {
|
figure figcaption {
|
||||||
text-align: center;
|
font-size: var(--small);
|
||||||
font-style: italic;
|
text-transform: lowercase;
|
||||||
font-size: 0.833rem;
|
font-variant: small-caps;
|
||||||
|
letter-spacing: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Main Elements
|
||||||
|
==============================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
body > header {
|
||||||
|
height: 100vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
main section,
|
||||||
|
footer section,
|
||||||
|
.wrapper {
|
||||||
|
/*max-width: var(--large-screen);*/
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Site Header
|
||||||
|
==============================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
.site__header {
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto 1fr auto;
|
||||||
|
padding: 1rem;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
background-color: var(--orange-bg);
|
||||||
|
color: var(--bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site__header mark {
|
||||||
|
color: var(--fg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site__header a {
|
||||||
|
color: var(--bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site__header a:hover {
|
||||||
|
color: var(--fg);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Site Navigation
|
||||||
|
==============================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
.site__nav {
|
||||||
|
/*font-size: var(--small);*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.site__nav ul {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Banner
|
||||||
|
==============================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
.site__banner {
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.site__banner {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
.albums-list,
|
writing-mode: vertical-rl;
|
||||||
.website-list {
|
text-orientation: mixed;
|
||||||
|
direction: rtl;
|
||||||
|
}
|
||||||
|
.site__banner h1 {
|
||||||
|
margin: 0;
|
||||||
|
line-height: 1.5;
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__preamble {
|
||||||
|
font-size: 1.5rem;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: repeat(12, 1fr);
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.header__preamble {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__preamble p {
|
||||||
|
grid-column: 1/7;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.header__preamble p {
|
||||||
|
grid-column: 1/13;
|
||||||
|
grid-row: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__preamble p + p {
|
||||||
|
grid-column: 8/13;
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.header__preamble p + p {
|
||||||
|
grid-column: 1/13;
|
||||||
|
grid-row: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.preamble__arrow {
|
||||||
|
font-size: 9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Articles
|
||||||
|
==============================================================
|
||||||
|
*/
|
||||||
|
article section {
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
article section h2 {
|
||||||
|
grid-column: span 12;
|
||||||
|
}
|
||||||
|
|
||||||
|
article section p {
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project__item {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(12, 1fr);
|
||||||
|
grid-template-rows: repeat(12, 1fr);
|
||||||
|
gap: 1rem;
|
||||||
|
margin: 4rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project__description {
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* A */
|
||||||
|
.project__a .project__figure {
|
||||||
|
grid-column: 1/8;
|
||||||
|
grid-row: 1/13;
|
||||||
|
}
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.project__a .project__figure {
|
||||||
|
grid-column: 1/10;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.project__a .project__figure {
|
||||||
|
grid-column: 1/13;
|
||||||
|
grid-row: 1/10;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.project__a .project__description {
|
||||||
|
grid-column: 11/13;
|
||||||
|
grid-row: 1/3;
|
||||||
|
}
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.project__a .project__description {
|
||||||
|
grid-column: 10/13;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.project__a {
|
||||||
|
grid-template-rows: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
.project__a .project__description {
|
||||||
|
grid-column: 1/13;
|
||||||
|
grid-row: 11/13;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* B */
|
||||||
|
.project__b {
|
||||||
|
grid-template-rows: repeat(3, 1fr) auto;
|
||||||
|
}
|
||||||
|
.project__b .project__figure {
|
||||||
|
grid-column: 1/13;
|
||||||
|
grid-row: 1/4;
|
||||||
|
}
|
||||||
|
.project__b .project__description {
|
||||||
|
grid-column: 1/3;
|
||||||
|
grid-row: 4;
|
||||||
|
align-self: end;
|
||||||
|
}
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.project__b .project__description {
|
||||||
|
grid-column: 1/4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.project__b .project__description {
|
||||||
|
grid-column: 1/13;
|
||||||
|
grid-row: 4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* C */
|
||||||
|
.project__c .project__figure {
|
||||||
|
grid-column: 5/13;
|
||||||
|
grid-row: 1/13;
|
||||||
|
}
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.project__c .project__figure {
|
||||||
|
grid-column: 4/13;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.project__c {
|
||||||
|
grid-template-rows: repeat(3, 1fr) auto;
|
||||||
|
}
|
||||||
|
.project__c .project__figure {
|
||||||
|
grid-column: 1/13;
|
||||||
|
grid-row: 1/4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.project__c .project__description {
|
||||||
|
grid-column: 1/3;
|
||||||
|
grid-row: 11/13;
|
||||||
|
align-self: end;
|
||||||
|
}
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.project__c .project__description {
|
||||||
|
grid-column: 1/4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.project__c .project__description {
|
||||||
|
grid-column: 1/13;
|
||||||
|
grid-row: 4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* D */
|
||||||
|
.project__d .project__figure_a {
|
||||||
|
grid-column: 1/5;
|
||||||
|
grid-row: 1/13;
|
||||||
|
}
|
||||||
|
.project__d .project__figure_a img {
|
||||||
|
object-position: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project__d .project__figure_b {
|
||||||
|
grid-column: 5/9;
|
||||||
|
grid-row: 1/13;
|
||||||
|
|
||||||
|
}
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.project__d .project__figure_a {
|
||||||
|
}
|
||||||
|
.project__d .project__figure_b {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.project__d {
|
||||||
|
grid-template-rows: repeat(2, 1fr) auto auto;
|
||||||
|
}
|
||||||
|
.project__d .project__figure_a {
|
||||||
|
grid-column: 1/13;
|
||||||
|
grid-row: 1;
|
||||||
|
}
|
||||||
|
.project__d .project__figure_b {
|
||||||
|
grid-column: 1/13;
|
||||||
|
grid-row: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.project__d .project__description_a {
|
||||||
|
grid-column: 11/13;
|
||||||
|
grid-row: 7/10;
|
||||||
|
align-self: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project__d .project__description_b {
|
||||||
|
grid-column: 11/13;
|
||||||
|
grid-row: 10/13;
|
||||||
|
align-self: end;
|
||||||
|
}
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.project__d .project__description_a {
|
||||||
|
grid-column: 9/13;
|
||||||
|
}
|
||||||
|
.project__d .project__description_b {
|
||||||
|
grid-column: 9/13;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.project__d .project__description_a {
|
||||||
|
grid-column: 1/13;
|
||||||
|
grid-row: 3;
|
||||||
|
}
|
||||||
|
.project__d .project__description_b {
|
||||||
|
grid-column: 1/13;
|
||||||
|
grid-row: 4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* E */
|
||||||
|
.project__e .project__figure_a {
|
||||||
|
grid-column: 1/6;
|
||||||
|
grid-row: 1/7;
|
||||||
|
|
||||||
|
}
|
||||||
|
.project__e .project__figure_b {
|
||||||
|
grid-column: 1/6;
|
||||||
|
grid-row: 7/13;
|
||||||
|
|
||||||
|
}
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.project__e .project__figure_a {
|
||||||
|
grid-column: 1/10;
|
||||||
|
}
|
||||||
|
.project__e .project__figure_b {
|
||||||
|
grid-column: 1/10;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.project__e .project__figure_a {
|
||||||
|
grid-column: 1/13;
|
||||||
|
grid-row: 1/6;
|
||||||
|
}
|
||||||
|
.project__e .project__figure_b {
|
||||||
|
grid-column: 1/13;
|
||||||
|
grid-row: 6/11;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.project__e .project__description_a {
|
||||||
|
grid-column: 6/8;
|
||||||
|
grid-row: 11;
|
||||||
|
align-self: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project__e .project__description_b {
|
||||||
|
grid-column: 6/8;
|
||||||
|
grid-row: 12;
|
||||||
|
align-self: end;
|
||||||
|
}
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.project__e .project__description_a {
|
||||||
|
grid-column: 10/13;
|
||||||
|
}
|
||||||
|
.project__e .project__description_b {
|
||||||
|
grid-column: 10/13;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.project__e .project__description_a {
|
||||||
|
grid-column: 1/13;
|
||||||
|
grid-row: 11;
|
||||||
|
}
|
||||||
|
.project__e .project__description_b {
|
||||||
|
grid-column: 1/13;
|
||||||
|
grid-row: 12;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Website List
|
||||||
|
==============================================================
|
||||||
|
*/
|
||||||
|
.website-list {
|
||||||
|
grid-column: span 8;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(8, 1fr);
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.website-list__item {
|
.website-list__item {
|
||||||
|
text-decoration: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
/*max-width: 400px;*/
|
grid-column: span 3;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
/*font-weight: bold;*/
|
|
||||||
color: var(--fg-color);
|
color: var(--fg-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.website-list__item img {
|
.website-list__item img {
|
||||||
border: 0.0625rem solid var(--border-color);
|
margin-bottom: 0.25rem;
|
||||||
|
border: 0.0625rem solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 1000px) {
|
@media all and (max-width: 1000px) {
|
||||||
.website-list__item {
|
.website-list__item {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Site Footer
|
||||||
|
==============================================================
|
||||||
|
*/
|
||||||
footer {
|
footer {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: white;
|
color: var(--bg);
|
||||||
background-color: var(--fg-color);
|
background-color: var(--fg);
|
||||||
padding: 2rem 0 1rem;
|
padding: 2rem 0 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -200,145 +620,15 @@ footer section {
|
|||||||
margin: 0 auto 2rem;
|
margin: 0 auto 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
footer a {
|
||||||
|
color: var(--blue);
|
||||||
|
}
|
||||||
footer a:hover {
|
footer a:hover {
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@media all and (max-width: 600px) {
|
|
||||||
header {
|
.color__accent {
|
||||||
padding: 0 1rem;
|
color: var(--orange);
|
||||||
flex-flow: column;
|
|
||||||
justify-content: space-around;
|
|
||||||
}
|
|
||||||
main {
|
|
||||||
padding: 0 1rem;
|
|
||||||
}
|
|
||||||
.website-list {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
.website-list__item {
|
|
||||||
max-width: 100%;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.carousel-wrapper {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.carousel-wrapper * {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel {
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel__photo {
|
|
||||||
opacity: 0;
|
|
||||||
position: absolute;
|
|
||||||
top:0;
|
|
||||||
width: 100%;
|
|
||||||
margin: auto;
|
|
||||||
padding: 1rem 4rem;
|
|
||||||
z-index: 100;
|
|
||||||
transition: transform .5s, opacity .5s, z-index .5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (max-width: 600px) {
|
|
||||||
.carousel__photo {
|
|
||||||
padding: 1rem 2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel__photo.initial,
|
|
||||||
.carousel__photo.active {
|
|
||||||
opacity: 1;
|
|
||||||
position: relative;
|
|
||||||
z-index: 900;
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel__photo.prev,
|
|
||||||
.carousel__photo.next {
|
|
||||||
z-index: 800;
|
|
||||||
}.carousel__photo.prev {
|
|
||||||
transform: translateX(-100%); /* Move 'prev' item to the left */
|
|
||||||
}.carousel__photo.next {
|
|
||||||
transform: translateX(100%); /* Move 'next' item to the right */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.carousel__button--prev,
|
|
||||||
.carousel__button--next {
|
|
||||||
position: absolute;
|
|
||||||
top:50%;
|
|
||||||
width: 3rem;
|
|
||||||
height: 3rem;
|
|
||||||
background-color: #fff;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
border-radius: 50%;
|
|
||||||
cursor: pointer;
|
|
||||||
z-index: 1001; /* Sit on top of everything */
|
|
||||||
border: 1px solid black;
|
|
||||||
}.carousel__button--prev {
|
|
||||||
left:0;
|
|
||||||
}.carousel__button--next {
|
|
||||||
right:0;
|
|
||||||
}.carousel__button--prev::after,
|
|
||||||
.carousel__button--next::after {
|
|
||||||
content: " ";
|
|
||||||
position: absolute;
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
top: 50%;
|
|
||||||
left: 54%;
|
|
||||||
border-right: 2px solid black;
|
|
||||||
border-bottom: 2px solid black;
|
|
||||||
transform: translate(-50%, -50%) rotate(135deg);
|
|
||||||
}.carousel__button--next::after {
|
|
||||||
left: 47%;
|
|
||||||
transform: translate(-50%, -50%) rotate(-45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (max-width: 600px) {
|
|
||||||
.carousel__button--prev,
|
|
||||||
.carousel__button--next {
|
|
||||||
width: 1.5rem;
|
|
||||||
height: 1.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* To-top button */
|
|
||||||
/* Scroll-to-top button
|
|
||||||
========================================================================== */
|
|
||||||
#to-top-button {
|
|
||||||
display: none;
|
|
||||||
position: fixed;
|
|
||||||
bottom: 1rem;
|
|
||||||
right: 1rem;
|
|
||||||
z-index: 99;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 1rem;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
/*box-shadow: 0 0.125rem 0.75rem var(--gray);*/
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
border: 0.125rem solid var(--border-color);
|
|
||||||
background-color: white;
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 1rem;
|
|
||||||
transition: background-color 0.1s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover {
|
|
||||||
color: white;
|
|
||||||
background-color: var(--primary-color);
|
|
||||||
border-color: var(--primary-color);
|
|
||||||
}
|
}
|
||||||
0
styles/normalize.css
vendored
Executable file → Normal file
0
styles/normalize.css
vendored
Executable file → Normal file
@ -14,17 +14,18 @@
|
|||||||
<meta content="websites, web design, custom, simple, fast, clean, html, css, javascript, designer, writer" name="keywords">
|
<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/normalize.css" rel="stylesheet">
|
||||||
<link href="/styles/main.css?v=3" rel="stylesheet">
|
<link href="/styles/main.css?v=1" rel="stylesheet">
|
||||||
|
|
||||||
<script type="module" src="/scripts/index.js" defer></script>
|
<script type="module" src="/scripts/index.js" defer></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header class="site__header">
|
||||||
<h1>Nathan Chapman</h1>
|
<nav class="site__nav">
|
||||||
<p><em>Web designer and developer</em></p>
|
{% include "_partials/_nav.html" %}
|
||||||
<nav>
|
|
||||||
{% include "partials/_nav.html" %}
|
|
||||||
</nav>
|
</nav>
|
||||||
|
{% block header %}
|
||||||
|
|
||||||
|
{% endblock %}
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
@ -32,17 +33,15 @@
|
|||||||
{% endblock %}
|
{% endblock %}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<button id="to-top-button" class="button" title="Go to top">↑</button>
|
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<section id="contact">
|
<section id="contact">
|
||||||
<h5>Want to work with me?</h5>
|
<h5>Want to work with me?</h5>
|
||||||
<p><a href="mailto:contact@nathanjchapman.com">Email me</a> and let's start a conversation.</p>
|
<p><a href="mailto:contact@nathanjchapman.com">Email me</a> and let's start a conversation.</p>
|
||||||
</section>
|
</section>
|
||||||
|
<section class="site__nav footer__nav">
|
||||||
|
{% include "_partials/_nav.html" %}
|
||||||
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<p>
|
|
||||||
{% include "partials/_nav.html" %}
|
|
||||||
</p>
|
|
||||||
<p><small>Copyright ©<span id="year"></span> Nathan Chapman. All rights reserved.</small></p>
|
<p><small>Copyright ©<span id="year"></span> Nathan Chapman. All rights reserved.</small></p>
|
||||||
</section>
|
</section>
|
||||||
</footer>
|
</footer>
|
||||||
|
|||||||
4
templates/_partials/_nav.html
Normal file
4
templates/_partials/_nav.html
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<ul>
|
||||||
|
<li><a href="/#websites">Websites</a></li>
|
||||||
|
{# <li><a href="/#apps">Apps</a></li> #}
|
||||||
|
</ul>
|
||||||
@ -1,25 +0,0 @@
|
|||||||
{% extends "_base.html" %}
|
|
||||||
|
|
||||||
{% block title %}About{% endblock %}
|
|
||||||
|
|
||||||
{% block main %}
|
|
||||||
<article>
|
|
||||||
<h2>About</h2>
|
|
||||||
<section>
|
|
||||||
<p>I'm a web developer and designer. I make websites and web applications.
|
|
||||||
|
|
||||||
<p>I got into web development because there was a frustration with people around me wanting a simple, fast, custom site that didn't come from a run-of-the-mill template or theme.</p>
|
|
||||||
<p>I got into web application development because there was a constant frustration with spreadsheets getting out of control and requiring too much maintenance to be useful.</p>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<h5>Albums</h5>
|
|
||||||
<p>I'm also a composer for film, games, and other mediums. I created the soundtracks to the online stories the <a href="http://www.lastwebsite.io/">Last Website</a> and the <a href="https://www.novella.io/novellas/the-story-of-red">Story Of Red</a>, a small short <a href="https://www.youtube.com/watch?v=wJ1p_cZ5krc">Simple Killjoy</a>, and other projects. I received my first introduction to music production and composition in High School and have been pursuing the craft ever since.</p>
|
|
||||||
<div class="albums-list">
|
|
||||||
<iframe src="https://bandcamp.com/EmbeddedPlayer/album=1800198375/size=large/bgcol=ffffff/linkcol=00AFD7/tracklist=false/artwork=small/transparent=true/" seamless><a href="https://music.nathanjchapman.com/album/unresolved">Unresolved by Nathan Chapman</a></iframe>
|
|
||||||
<iframe src="https://bandcamp.com/EmbeddedPlayer/album=410332369/size=large/bgcol=ffffff/linkcol=00AFD7/tracklist=false/artwork=small/transparent=true/" seamless><a href="https://music.nathanjchapman.com/album/the-last-website-remastered">The Last Website (Remastered) by Nathan Chapman</a></iframe>
|
|
||||||
<iframe src="https://bandcamp.com/EmbeddedPlayer/track=1372576239/size=large/bgcol=ffffff/linkcol=00AFD7/tracklist=false/artwork=small/transparent=true/" seamless><a href="https://music.nathanjchapman.com/track/blue-notes">Blue Notes by Nathan Chapman</a></iframe>
|
|
||||||
<iframe src="https://bandcamp.com/EmbeddedPlayer/album=3163445596/size=large/bgcol=ffffff/linkcol=00AFD7/tracklist=false/artwork=small/transparent=true/" seamless><a href="https://music.nathanjchapman.com/album/senescence">Senescence by Nathan Chapman</a></iframe>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</article>
|
|
||||||
{% endblock %}
|
|
||||||
@ -2,228 +2,64 @@
|
|||||||
|
|
||||||
{% block title %}Portfolio{% endblock %}
|
{% 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 %}
|
{% block main %}
|
||||||
<article>
|
<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">
|
<section id="websites">
|
||||||
<h3>Websites</h3>
|
<h2>WEBSITES</h2>
|
||||||
<div class="website-list">
|
<div class="project__list">
|
||||||
<a class="website-list__item" href="https://blog.monolithofminds.com/">
|
<figure class="project__item project__a">
|
||||||
<img src="/images/website_mom.png">
|
<a class="project__figure" href="https://jhcillustration.com/">
|
||||||
<strong>Monolith of Minds Blog</strong><br>
|
<img src="/images/jhc/landing.png" alt="">
|
||||||
<small>Custom Ghost blog theme <br>Handlebars, HTML5, CSS3</small>
|
</a>
|
||||||
</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>
|
||||||
<a class="website-list__item" href="https://jhcillustration.com/">
|
</figure>
|
||||||
<img src="/images/website_jhc.png">
|
<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>
|
||||||
<strong>JHC Illustration</strong><br>
|
<figure class="project__item project__b">
|
||||||
<small>Online portfolio for a graphic designer<br>HTML5, CSS3, Vue</small>
|
<a class="project__figure" href="https://blog.monolithofminds.com/">
|
||||||
</a>
|
<img src="/images/mom/article.png" alt="Monolith of Minds blog">
|
||||||
<a class="website-list__item" href="https://jjayberthumemusic.com/">
|
</a>
|
||||||
<img src="/images/website_berthume.png">
|
<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>
|
||||||
<strong>JJay Berthume Music</strong><br>
|
</figure>
|
||||||
<small>Online portfolio for a composer<br>HTML5, CSS3</small>
|
<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>
|
||||||
</a>
|
<figure class="project__item project__c">
|
||||||
<a class="website-list__item" href="http://wallyworks.net/">
|
<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>
|
||||||
<img src="/images/website_wallyworks.png">
|
<a class="project__figure" href="https://jjayberthumemusic.com/">
|
||||||
<strong>Wallyworks Construction</strong><br>
|
<img src="/images/berthume/landing.png" alt="">
|
||||||
<small>Website for construction company<br>HTML5, CSS3</small>
|
</a>
|
||||||
</a>
|
</figure>
|
||||||
<a class="website-list__item" href="https://owlsprit.nathanjchapman.com/">
|
<figure class="project__item project__d">
|
||||||
<img src="/images/website_owlsprit.png">
|
<a class="project__figure_a" href="http://jac.nathanjchapman.com/">
|
||||||
<strong>Owl Sprit Cafe</strong><br>
|
<img src="/images/website_jac.png" alt="Jefferson Associated Council">
|
||||||
<small>Website for a small restaurant<br>HTML5, CSS3, Vue</small>
|
</a>
|
||||||
</a>
|
<a class="project__figure_b" href="http://ptdefense.com/">
|
||||||
<a class="website-list__item" href="https://bltc.nathanjchapman.com/">
|
<img src="/images/website_ptdefense.png" alt="PT Defense">
|
||||||
<img src="/images/website_bltc.png">
|
</a>
|
||||||
<strong>Better Living Coffee</strong><br>
|
<figcaption class="project__description_a">04.<br>Website for Public Defenders. Built with HTML and CSS.</figcaption>
|
||||||
<small>Website for a coffee shop<br>HTML5, CSS3</small>
|
<figcaption class="project__description_b">05.<br>Website for a Lawyer. Built with HTML and CSS.</figcaption>
|
||||||
</a>
|
</figure>
|
||||||
<a class="website-list__item" href="http://ptdefense.com/">
|
<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>
|
||||||
<img src="/images/website_ptdefense.png">
|
<figure class="project__item project__e">
|
||||||
<strong>PT Defense</strong><br>
|
<a class="project__figure_a" href="https://owlsprit.nathanjchapman.com/">
|
||||||
<small>Website for a Lawyer<br>HTML5, CSS3</small>
|
<img src="/images/website_owlsprit.png" alt="Owl Sprit Cafe">
|
||||||
</a>
|
</a>
|
||||||
<a class="website-list__item" href="http://jac.nathanjchapman.com/">
|
<a class="project__figure_b" href="https://bltc.nathanjchapman.com/">
|
||||||
<img src="/images/website_jac.png">
|
<img src="/images/website_bltc.png" alt="Better Living Coffee">
|
||||||
<strong>JAC Defenders</strong><br>
|
</a>
|
||||||
<small>Website for attorneys<br>HTML5, CSS3</small>
|
<figcaption class="project__description_a">06.<br>Website for a restaurant. Built with HTML, CSS, and Vue.</figcaption>
|
||||||
</a>
|
<figcaption class="project__description_b">07.<br>Website for a coffee shop. Built with HTML and CSS.</figcaption>
|
||||||
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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>
|
</article>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
@ -1,2 +0,0 @@
|
|||||||
<a href="/" class="{% if active_page %}--active{% endif %}">Portfolio</a>
|
|
||||||
<a href="/about" class="{% if active_page %}--active{% endif %}">About</a>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user