diff --git a/about/index.html b/about/index.html new file mode 100644 index 0000000..8a890c3 --- /dev/null +++ b/about/index.html @@ -0,0 +1,53 @@ + + + + + + + + + + Nathan Chapman + + + + + + + + + +
+

Nathan Chapman

+ +
+ +
+
+

About

+
+ +

Contact me

+
+
+

Albums

+

I'm also a composer for film, games, and other mediums. I created the soundtracks to the online stories the Last Website and the Story Of Red, a small short Simple Killjoy, and other projects. I received my first introduction to music production and composition in High School and have been pursuing the craft ever since.

+
+ + + + +
+
+
+
+ + + + diff --git a/fonts/franklin-gothic/franklin-gothic.css b/fonts/franklin-gothic/franklin-gothic.css new file mode 100644 index 0000000..a6d9570 --- /dev/null +++ b/fonts/franklin-gothic/franklin-gothic.css @@ -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; + +} \ No newline at end of file diff --git a/fonts/franklin-gothic/franklingothic-book-webfont.woff b/fonts/franklin-gothic/franklingothic-book-webfont.woff new file mode 100644 index 0000000..fbec659 Binary files /dev/null and b/fonts/franklin-gothic/franklingothic-book-webfont.woff differ diff --git a/fonts/franklin-gothic/franklingothic-book-webfont.woff2 b/fonts/franklin-gothic/franklingothic-book-webfont.woff2 new file mode 100644 index 0000000..0cf2695 Binary files /dev/null and b/fonts/franklin-gothic/franklingothic-book-webfont.woff2 differ diff --git a/fonts/franklin-gothic/franklingothic-bookit-webfont.woff b/fonts/franklin-gothic/franklingothic-bookit-webfont.woff new file mode 100644 index 0000000..14bd017 Binary files /dev/null and b/fonts/franklin-gothic/franklingothic-bookit-webfont.woff differ diff --git a/fonts/franklin-gothic/franklingothic-bookit-webfont.woff2 b/fonts/franklin-gothic/franklingothic-bookit-webfont.woff2 new file mode 100644 index 0000000..35c5cc6 Binary files /dev/null and b/fonts/franklin-gothic/franklingothic-bookit-webfont.woff2 differ diff --git a/fonts/franklin-gothic/franklingothic-demi-webfont.woff b/fonts/franklin-gothic/franklingothic-demi-webfont.woff new file mode 100644 index 0000000..94e7a83 Binary files /dev/null and b/fonts/franklin-gothic/franklingothic-demi-webfont.woff differ diff --git a/fonts/franklin-gothic/franklingothic-demi-webfont.woff2 b/fonts/franklin-gothic/franklingothic-demi-webfont.woff2 new file mode 100644 index 0000000..f264f43 Binary files /dev/null and b/fonts/franklin-gothic/franklingothic-demi-webfont.woff2 differ diff --git a/fonts/franklin-gothic/franklingothic-demiit-webfont.woff b/fonts/franklin-gothic/franklingothic-demiit-webfont.woff new file mode 100644 index 0000000..b803578 Binary files /dev/null and b/fonts/franklin-gothic/franklingothic-demiit-webfont.woff differ diff --git a/fonts/franklin-gothic/franklingothic-demiit-webfont.woff2 b/fonts/franklin-gothic/franklingothic-demiit-webfont.woff2 new file mode 100644 index 0000000..8d33812 Binary files /dev/null and b/fonts/franklin-gothic/franklingothic-demiit-webfont.woff2 differ diff --git a/images/charting_01.png b/images/charting_01.png new file mode 100644 index 0000000..7f04001 Binary files /dev/null and b/images/charting_01.png differ diff --git a/images/charting_02.png b/images/charting_02.png new file mode 100644 index 0000000..61cc2b1 Binary files /dev/null and b/images/charting_02.png differ diff --git a/images/charting_03.png b/images/charting_03.png new file mode 100644 index 0000000..348d9f9 Binary files /dev/null and b/images/charting_03.png differ diff --git a/images/charting_04.png b/images/charting_04.png new file mode 100644 index 0000000..7e1c225 Binary files /dev/null and b/images/charting_04.png differ diff --git a/images/charting_05.png b/images/charting_05.png new file mode 100644 index 0000000..999c215 Binary files /dev/null and b/images/charting_05.png differ diff --git a/index.html b/index.html index ddf6407..2967c9f 100755 --- a/index.html +++ b/index.html @@ -1,53 +1,222 @@ - - - - - + + + + + - + - Nathan Chapman + Nathan Chapman - - - + + + - - + + + +
-

Nathan Chapman

- +

Nathan Chapman

+

Web designer and developer

+
-
-

Music

-
-

About

-

I'm a composer for film, games, and other mediums. I created the soundtracks to the online stories the Last Website and the Story Of Red, a small short Simple Killjoy, 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.

-

Contact me

-
-
-

Albums

-
- - - - -
-
-
+
+
+
Contents
+
    +
  1. Websites
    2. +
  2. Web applications
    3. +
+
+
+

Websites

+
+ + + Monolith of Minds Blog
+ Custom Ghost blog theme
Handlebars, HTML5, CSS3 + + + + JHC Illustration
+ Online portfolio for a graphic designer
HTML5, CSS3, Vue + + + + JJay Berthume Music
+ Online portfolio for a composer
HTML5, CSS3 + + + + Wallyworks Construction
+ Website for construction company
HTML5, CSS3 + + + + Owl Sprit Cafe
+ Website for a small restaurant
HTML5, CSS3, Vue + + + + Better Living Coffee
+ Website for a coffee shop
HTML5, CSS3 + + + + PT Defense
+ Website for a Lawyer
HTML5, CSS3 + + + + JAC Defenders
+ Website for attourneys
HTML5, CSS3 + +
+
+
+

Web Applications

+
Contents
+
    +
  1. + BTech Time Tracker +
    2. +
  2. + Workdesk +
    3. +
  3. + BTech CNA Charting +
    4. +
  4. + Workroom +
    5. +
+

BTech Time Tracker

+

Track and manage sessions
Django, HTML5, SCSS

+
+
+
+ +
Welcome page
+
+
+ +
Student profile and recent activity
+
+
+ +
Past sessions (pagination)
+
+
+ +
Scan a QR code to clock in
+
+
+ +
Instructor home page shows activity for department
+
+ +
+
+
+
+ +

Workdesk

+

Shift assignments and preferences
Django, Stimulusjs, HTML5, CSS3

+
+
+
+ +
All shifts
+
+
+ +
Type to filter shifts
+
+
+ +
See employee details
+
+
+ +
Employee can sort their shift preferences
+
+ +
+
+
+
+ +

BTech CNA Charting

+

Certified Nurse Assistant Charting Application
Django, Stimulusjs, HTML5, CSS3

+
+
+
+ +
Track charting information
+
+
+ +
Create a new chart
+
+
+ +
Add a new entry
+
+
+ +
Input patient vitals
+
+
+ +
Review information recorded, automatically sorted by time
+
+ +
+
+
+
+ +

Workroom

+

Timecards and labor tracking
Django, HTML5, CSS3

+
+
+
+ +
Employee timecard
+
+
+ +
Input daily tasks
+
+
+ +
Manage projects for consistent naming
+
+
+ +
See and edit task details
+
+ +
+
+
+
+
+
diff --git a/school/index.html b/school/index.html index bd2a7cb..88c2b08 100755 --- a/school/index.html +++ b/school/index.html @@ -10,32 +10,27 @@ Nathan Chapman - + - +
-

Nathan Chapman

+

Nathan Chapman

-

School

-

Collection of school assignments and projects

+

Assignments and projects

I'm currently attending Bridgerland Technical College and this page is a collection of links to projects and assignments I've made. A portfolio from school.

-
-
-

Assignments and Projects

-

Links to the live webpages and code on github.

PHP Work
diff --git a/scripts/carousel.js b/scripts/carousel.js new file mode 100644 index 0000000..9797479 --- /dev/null +++ b/scripts/carousel.js @@ -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; + } +} diff --git a/scripts/index.js b/scripts/index.js index e69de29..0b10e77 100755 --- a/scripts/index.js +++ b/scripts/index.js @@ -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); diff --git a/styles/index.css b/styles/index.css deleted file mode 100755 index ddf66e6..0000000 --- a/styles/index.css +++ /dev/null @@ -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; - } -} diff --git a/styles/main.css b/styles/main.css new file mode 100755 index 0000000..0d05c8e --- /dev/null +++ b/styles/main.css @@ -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; + } +} \ No newline at end of file diff --git a/websites/index.html b/websites/index.html deleted file mode 100755 index d967dce..0000000 --- a/websites/index.html +++ /dev/null @@ -1,190 +0,0 @@ - - - - - - - - - - Nathan Chapman - - - - - - - - - -
-

Nathan Chapman

- -
- -
-
-

Websites

-
-

Custom websites and web applications.

-

Stand out from the crowd with a custom built website, just the way you want it.

-

When WordPress, Squarespace, or Wix don't suit your needs I can work closely with you to realize your vision.

-

Designing around good writing, typography, and visual elements (colors, shapes, and images).

-

Contact me and let's get you a working website.

-
-
Contents
-
- Websites -
-
- Webapps -
-
-
-
-

Websites

-
- - - Monolith of Minds Blog - - - - JHC Illustration - - - - JJay Berthume Music - - - - Wallyworks Construction - - - - Owl Sprit Cafe - - - - Better Living Coffee - - - - PT Defense - - - - JAC Defenders - -
-
-
-

Web Apps

-
-
Contents
-
- BTech Time Tracker -
-
- Workdesk -
-
- BTech CNA Charting -
-
- Workroom -
-
-

BTech Time Tracker

-

Track and manage sessions

-
- -
Welcome page
-
-
- -
Student profile and recent activity
-
-
- -
Past sessions (pagination)
-
-
- -
Scan a QR code to clock in
-
-
- -
Instructor home page shows activity for department
-
- -

Workdesk

-

Shift assignments and preferences

-
- -
All shifts
-
-
- -
Type to filter shifts
-
-
- -
See employee details
-
-
- -
Employee can sort their shift preferences
-
- -

BTech CNA Charting

-

Certified Nurse Assistant Charting Application

-
- -
Easily input the chart info
-
-
- -
Data is saved automatically
-
-
- -
View chart details
-
-
- -
Produce PDF of chart for print
-
- -

Workroom

-

Timecards and labor tracking

-
- -
Employee timecard
-
-
- -
Input daily tasks
-
-
- -
Manage projects for consistent naming
-
-
- -
See and edit task details
-
- -
-
-
- - - -