Major site update and refresh
This commit is contained in:
Nathan Chapman
parent
fff3fc7b0a
commit
6cd9620aed
53
about/index.html
Normal file
53
about/index.html
Normal file
@ -0,0 +1,53 @@
|
||||
<!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="img/favicon.ico">
|
||||
|
||||
<title>Nathan Chapman</title>
|
||||
|
||||
<meta name="author" content="Nathan Chapman">
|
||||
<meta content="Composer for film, games, and other mediums." name="description">
|
||||
<meta content="music, composer, audio, mixing, mastering, video games, film, classical, soundtrack, soundtracks, " name="keywords">
|
||||
|
||||
<link href="/styles/normalize.css" rel="stylesheet">
|
||||
<link href="/styles/main.css?v=3" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Nathan Chapman</h1>
|
||||
<nav>
|
||||
<a href="/">Portfolio</a>
|
||||
<a href="/about" class="--active">About</a>
|
||||
<a href="/school">School</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<article>
|
||||
<h2>About</h2>
|
||||
<section>
|
||||
|
||||
<p><a href="mailto:contact@nathanjchapman.com">Contact me</a></p>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Albums</h3>
|
||||
<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>
|
||||
|
||||
<footer>
|
||||
<p><small>Copyright ©2021 Nathan Chapman. All rights reserved.</small></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
35
fonts/franklin-gothic/franklin-gothic.css
Normal file
35
fonts/franklin-gothic/franklin-gothic.css
Normal file
@ -0,0 +1,35 @@
|
||||
@font-face {
|
||||
font-family: 'Franklin Gothic';
|
||||
src: url('franklingothic-demiit-webfont.woff2') format('woff2'),
|
||||
url('franklingothic-demiit-webfont.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Franklin Gothic';
|
||||
src: url('franklingothic-demi-webfont.woff2') format('woff2'),
|
||||
url('franklingothic-demi-webfont.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Franklin Gothic';
|
||||
src: url('franklingothic-bookit-webfont.woff2') format('woff2'),
|
||||
url('franklingothic-bookit-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Franklin Gothic';
|
||||
src: url('franklingothic-book-webfont.woff2') format('woff2'),
|
||||
url('franklingothic-book-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
BIN
fonts/franklin-gothic/franklingothic-book-webfont.woff
Normal file
BIN
fonts/franklin-gothic/franklingothic-book-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/franklin-gothic/franklingothic-book-webfont.woff2
Normal file
BIN
fonts/franklin-gothic/franklingothic-book-webfont.woff2
Normal file
Binary file not shown.
BIN
fonts/franklin-gothic/franklingothic-bookit-webfont.woff
Normal file
BIN
fonts/franklin-gothic/franklingothic-bookit-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/franklin-gothic/franklingothic-bookit-webfont.woff2
Normal file
BIN
fonts/franklin-gothic/franklingothic-bookit-webfont.woff2
Normal file
Binary file not shown.
BIN
fonts/franklin-gothic/franklingothic-demi-webfont.woff
Normal file
BIN
fonts/franklin-gothic/franklingothic-demi-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/franklin-gothic/franklingothic-demi-webfont.woff2
Normal file
BIN
fonts/franklin-gothic/franklingothic-demi-webfont.woff2
Normal file
Binary file not shown.
BIN
fonts/franklin-gothic/franklingothic-demiit-webfont.woff
Normal file
BIN
fonts/franklin-gothic/franklingothic-demiit-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/franklin-gothic/franklingothic-demiit-webfont.woff2
Normal file
BIN
fonts/franklin-gothic/franklingothic-demiit-webfont.woff2
Normal file
Binary file not shown.
BIN
images/charting_01.png
Normal file
BIN
images/charting_01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
images/charting_02.png
Normal file
BIN
images/charting_02.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
images/charting_03.png
Normal file
BIN
images/charting_03.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
BIN
images/charting_04.png
Normal file
BIN
images/charting_04.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
BIN
images/charting_05.png
Normal file
BIN
images/charting_05.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
241
index.html
241
index.html
@ -1,53 +1,222 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<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">
|
||||
<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="img/favicon.ico">
|
||||
<link rel="shortcut icon" href="/images/favicon.ico">
|
||||
|
||||
<title>Nathan Chapman</title>
|
||||
<title>Nathan Chapman</title>
|
||||
|
||||
<meta name="author" content="Nathan Chapman">
|
||||
<meta content="Composer for film, games, and other mediums." name="description">
|
||||
<meta content="music, composer, audio, mixing, mastering, video games, film, classical, soundtrack, soundtracks, " name="keywords">
|
||||
<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/index.css?v=2" rel="stylesheet">
|
||||
<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>
|
||||
<h4>Nathan Chapman</h4>
|
||||
<nav>
|
||||
<a href="/">Music</a> /
|
||||
<a href="/websites">Websites</a> /
|
||||
<a href="/school">School</a>
|
||||
</nav>
|
||||
<h1>Nathan Chapman</h1>
|
||||
<p><em>Web designer and developer</em></p>
|
||||
<nav>
|
||||
<a href="/" class="--active">Portfolio</a>
|
||||
<a href="/about">About</a>
|
||||
<a href="/school">School</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<article>
|
||||
<h1>Music</h1>
|
||||
<section>
|
||||
<h3>About</h3>
|
||||
<p>I'm 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. Currently working out of Utah.</p>
|
||||
<p><a href="mailto:contact@nathanjchapman.com">Contact me</a></p>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Albums</h3>
|
||||
<div class="albums-list">
|
||||
<iframe src="https://bandcamp.com/EmbeddedPlayer/album=1800198375/size=large/bgcol=ffffff/linkcol=843733/minimal=true/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=843733/minimal=true/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=843733/minimal=true/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=843733/minimal=true/transparent=true/" seamless><a href="https://music.nathanjchapman.com/album/senescence">Senescence by Nathan Chapman</a></iframe>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
<article>
|
||||
<section>
|
||||
<h5>Contents</h5>
|
||||
<ol>
|
||||
<li><a href="#website-list">Websites</a></li>
|
||||
<li><a href="#webapps-list">Web applications</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 attourneys<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>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p><small>Copyright ©2021 Nathan Chapman. All rights reserved.</small></p>
|
||||
<p><small>Copyright ©2021 Nathan Chapman. All rights reserved.</small></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -10,32 +10,27 @@
|
||||
<title>Nathan Chapman</title>
|
||||
|
||||
<meta name="author" content="Nathan Chapman">
|
||||
<meta content="Custom websites and web applications. Stand out from the croud with a costum built website, just they way you want it." name="description">
|
||||
<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/index.css?v=2" rel="stylesheet">
|
||||
<link href="/styles/main.css?v=3" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h4>Nathan Chapman</h4>
|
||||
<h1>Nathan Chapman</h1>
|
||||
<nav>
|
||||
<a href="/">Music</a> /
|
||||
<a href="/websites">Websites</a> /
|
||||
<a href="/school">School</a>
|
||||
<a href="/">Portfolio</a>
|
||||
<a href="/about">About</a>
|
||||
<a href="/school" class="--active">School</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<article>
|
||||
<h1>School</h1>
|
||||
<section>
|
||||
<h3>Collection of school assignments and projects</h3>
|
||||
<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>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Assignments and Projects</h3>
|
||||
<p>Links to the live webpages and code on github.</p>
|
||||
<dl>
|
||||
<dt>PHP Work</dt>
|
||||
<dd>
|
||||
|
||||
110
scripts/carousel.js
Normal file
110
scripts/carousel.js
Normal file
@ -0,0 +1,110 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
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');
|
||||
|
||||
let btechTimeTrackerCarousel = new Carousel(btechTimeTrackerEl);
|
||||
let workdeskCarousel = new Carousel(workdeskEl);
|
||||
let cnaCarousel = new Carousel(cnaEl);
|
||||
let workroomCarousel = new Carousel(workroomEl);
|
||||
174
styles/index.css
174
styles/index.css
@ -1,174 +0,0 @@
|
||||
@import url(https://fonts.googleapis.com/css2?family=Heebo:wght@400;700;900&display=swap);
|
||||
|
||||
html {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: 1024px;
|
||||
margin: 1rem auto;
|
||||
padding: 0 3rem;
|
||||
background-color: #c1c2c0;
|
||||
color: #323834;
|
||||
font-family: 'Heebo', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Text Elements */
|
||||
|
||||
p {
|
||||
margin-bottom: 1.15rem;
|
||||
}
|
||||
h1, h2, h3, h4, h5 {
|
||||
margin: 3rem 0 1.05rem;
|
||||
font-weight: 800;
|
||||
line-height: 1.15;
|
||||
}
|
||||
h1:first-child,
|
||||
h2:first-child,
|
||||
h3:first-child,
|
||||
h4:first-child,
|
||||
h5:first-child {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.488rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2.074rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.728rem;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.44rem;
|
||||
}
|
||||
h3 + h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
small {
|
||||
font-size: 0.833rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #843733;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
dl dt {
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dd + dt {
|
||||
margin-top: 1.15rem;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
nav {
|
||||
margin: 0 0 1.05rem;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 1em;
|
||||
background-color: #ebebea;
|
||||
border: 0.0625rem solid #bdc3c7;
|
||||
box-shadow: 0 0 0.25rem #bdc3c7;
|
||||
margin-bottom: 1.3rem;
|
||||
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
iframe {
|
||||
margin-bottom: 1rem;
|
||||
border: 0;
|
||||
height: 400px;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0 0 1rem;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
figure img {
|
||||
border: 0.0625rem solid #bdc3c7;
|
||||
}
|
||||
|
||||
figure figcaption {
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
font-size: 0.833rem;
|
||||
}
|
||||
|
||||
|
||||
.albums-list, .website-list {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.website-list__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 400px;
|
||||
margin-bottom: 2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.website-list__item img {
|
||||
border: 0.0625rem solid #c1c2c0;
|
||||
}
|
||||
|
||||
@media all and (max-width: 1000px) {
|
||||
.website-list {
|
||||
justify-content: space-around;
|
||||
}
|
||||
.website-list__item {
|
||||
max-width: 100%;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
header,
|
||||
footer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
@media all and (max-width: 600px) {
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
header {
|
||||
padding: 0 1rem;
|
||||
flex-flow: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
main h1 {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.website-list__item {
|
||||
max-width: 100%;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
297
styles/main.css
Executable file
297
styles/main.css
Executable file
@ -0,0 +1,297 @@
|
||||
/*@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');
|
||||
|
||||
:root {
|
||||
--fg-color: #000;
|
||||
--bg-color: #ffffff;
|
||||
--primary-color: #00AFD7;
|
||||
--border-color: #b9bfbb;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 150%;
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: 42.67rem;
|
||||
margin: 1rem auto;
|
||||
padding: 0 3rem;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--fg-color);
|
||||
font-family: 'Franklin Gothic', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
header p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Text Elements */
|
||||
|
||||
p {
|
||||
margin-bottom: 1.15rem;
|
||||
}
|
||||
h1, h2, h3, h4, h5 {
|
||||
margin: 3rem 0 1.05rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.15;
|
||||
}
|
||||
h1:first-child,
|
||||
h2:first-child,
|
||||
h3:first-child,
|
||||
h4:first-child,
|
||||
h5:first-child {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.488rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2.074rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.728rem;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.44rem;
|
||||
}
|
||||
h3 + h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
small {
|
||||
font-size: 0.833rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--primary-color);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--fg-color);
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
padding-left: 0;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
dl dt {
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dd + dt {
|
||||
margin-top: 1.15rem;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
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 {
|
||||
border: 0;
|
||||
width: 100%;
|
||||
/*height: 24rem;*/
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0 0 1rem;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
figure img {
|
||||
border: 0.0625rem solid #bdc3c7;
|
||||
}
|
||||
|
||||
figure figcaption {
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
font-size: 0.833rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.albums-list,
|
||||
.website-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.website-list__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/*max-width: 400px;*/
|
||||
margin-bottom: 2rem;
|
||||
/*font-weight: bold;*/
|
||||
color: var(--fg-color);
|
||||
}
|
||||
.website-list__item img {
|
||||
border: 0.0625rem solid var(--border-color);
|
||||
}
|
||||
|
||||
@media all and (max-width: 1000px) {
|
||||
.website-list__item {
|
||||
max-width: 100%;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
@media all and (max-width: 600px) {
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
header {
|
||||
padding: 0 1rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
@ -1,190 +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>Nathan Chapman</title>
|
||||
|
||||
<meta name="author" content="Nathan Chapman">
|
||||
<meta content="Custom websites and web applications. Stand out from the croud with a custom built website, just they 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/index.css?v=2" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h4>Nathan Chapman</h4>
|
||||
<nav>
|
||||
<a href="/">Music</a> /
|
||||
<a href="/websites">Websites</a> /
|
||||
<a href="/school">School</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<article>
|
||||
<h1>Websites</h1>
|
||||
<section>
|
||||
<h3>Custom websites and web applications.</h3>
|
||||
<p>Stand out from the crowd with a custom built website, just the way you want it.</p>
|
||||
<p>When WordPress, Squarespace, or Wix don't suit your needs I can work closely with you to realize your vision.</p>
|
||||
<p>Designing around good writing, typography, and visual elements (colors, shapes, and images).</p>
|
||||
<p><a href="mailto:contact@nathanjchapman.com">Contact me</a> and let's get you a working website.</p>
|
||||
<dl>
|
||||
<dt>Contents</dt>
|
||||
<dd>
|
||||
<a href="#websites">Websites</a>
|
||||
</dd>
|
||||
<dd>
|
||||
<a href="#webapps">Webapps</a>
|
||||
</dd>
|
||||
</dl>
|
||||
</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">
|
||||
Monolith of Minds Blog
|
||||
</a>
|
||||
<a class="website-list__item" href="https://jhcillustration.com/">
|
||||
<img src="/images/website_jhc.png">
|
||||
JHC Illustration
|
||||
</a>
|
||||
<a class="website-list__item" href="https://jjayberthumemusic.com/">
|
||||
<img src="/images/website_berthume.png">
|
||||
JJay Berthume Music
|
||||
</a>
|
||||
<a class="website-list__item" href="http://wallyworks.net/">
|
||||
<img src="/images/website_wallyworks.png">
|
||||
Wallyworks Construction
|
||||
</a>
|
||||
<a class="website-list__item" href="https://owlsprit.nathanjchapman.com/">
|
||||
<img src="/images/website_owlsprit.png">
|
||||
Owl Sprit Cafe
|
||||
</a>
|
||||
<a class="website-list__item" href="https://bltc.nathanjchapman.com/">
|
||||
<img src="/images/website_bltc.png">
|
||||
Better Living Coffee
|
||||
</a>
|
||||
<a class="website-list__item" href="http://ptdefense.com/">
|
||||
<img src="/images/website_ptdefense.png">
|
||||
PT Defense
|
||||
</a>
|
||||
<a class="website-list__item" href="http://jac.nathanjchapman.com/">
|
||||
<img src="/images/website_jac.png">
|
||||
JAC Defenders
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section id="webapps">
|
||||
<h3>Web Apps</h3>
|
||||
<dl>
|
||||
<dt>Contents</dt>
|
||||
<dd>
|
||||
<a href="#btech-time-tracker">BTech Time Tracker</a>
|
||||
</dd>
|
||||
<dd>
|
||||
<a href="#workdesk">Workdesk</a>
|
||||
</dd>
|
||||
<dd>
|
||||
<a href="#btech-cna-charting">BTech CNA Charting</a>
|
||||
</dd>
|
||||
<dd>
|
||||
<a href="#workroom">Workroom</a>
|
||||
</dd>
|
||||
</dl>
|
||||
<h4 id="btech-time-tracker">BTech Time Tracker</h4>
|
||||
<p>Track and manage sessions</p>
|
||||
<figure>
|
||||
<img src="/images/time_home.png">
|
||||
<figcaption>Welcome page</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="/images/time_profile.png">
|
||||
<figcaption>Student profile and recent activity</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="/images/time_log.png">
|
||||
<figcaption>Past sessions (pagination)</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="/images/time_scan.png">
|
||||
<figcaption>Scan a QR code to clock in</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="/images/time_instructor.png">
|
||||
<figcaption>Instructor home page shows activity for department</figcaption>
|
||||
</figure>
|
||||
|
||||
<h4 id="workdesk">Workdesk</h4>
|
||||
<p>Shift assignments and preferences</p>
|
||||
<figure>
|
||||
<img src="/images/wd_home.png">
|
||||
<figcaption>All shifts</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="/images/wd_filter.png">
|
||||
<figcaption>Type to filter shifts</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="/images/wd_detail.png">
|
||||
<figcaption>See employee details</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="/images/wd_sort.png">
|
||||
<figcaption>Employee can sort their shift preferences</figcaption>
|
||||
</figure>
|
||||
|
||||
<h4 id="btech-cna-charting">BTech CNA Charting</h4>
|
||||
<p>Certified Nurse Assistant Charting Application</p>
|
||||
<figure>
|
||||
<img src="/images/cna_form.png" alt="">
|
||||
<figcaption>Easily input the chart info</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="/images/cna_save.png" alt="">
|
||||
<figcaption>Data is saved automatically</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="/images/cna_detail.png" alt="">
|
||||
<figcaption>View chart details</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="/images/cna_pdf.png" alt="">
|
||||
<figcaption>Produce PDF of chart for print</figcaption>
|
||||
</figure>
|
||||
|
||||
<h4 id="workroom">Workroom</h4>
|
||||
<p>Timecards and labor tracking</p>
|
||||
<figure>
|
||||
<img src="/images/workroom_01.png">
|
||||
<figcaption>Employee timecard</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="/images/workroom_02.png">
|
||||
<figcaption>Input daily tasks</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="/images/workroom_03.png">
|
||||
<figcaption>Manage projects for consistent naming</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="/images/workroom_04.png">
|
||||
<figcaption>See and edit task details</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p><small>Copyright ©2021 Nathan Chapman. All rights reserved.</small></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user