gulpfile.js

@@ -19,7 +19,7 @@ gulp.task("minifyHTML", () =>
 
 gulp.task("minifyCSS", () =>
 {
-	return gulp.src("src/css/*.css")
+	return gulp.src("src/css/main.css")
 		.pipe(cssMin({compatibility: "ie8"}))
 		.pipe(gulp.dest("dist/css"));
 });

src/css/cv.css

@@ -0,0 +1,98 @@
+/****** CV Styles *******/
+
+section#curriculumvitae{
+    background-color: var(--primaryDefault);
+    color: #FFFFFF;
+    padding: 2em 0;
+}
+
+section#curriculumvitae .cvGrid {
+    display: flex;
+    flex-direction: row;
+    padding: 0 1.5rem;
+    flex-wrap: wrap;
+}
+
+section#curriculumvitae .cvGrid > div {
+    width: 45%;
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+}
+
+section#curriculumvitae .cvGrid h2 {
+    text-align: center;
+}
+
+section#curriculumvitae .timeline {
+    position: relative;
+    max-width: 30em;
+    gap: 1em;
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    height: 100%;
+}
+
+section#curriculumvitae #work {
+    margin: 0 auto 0 8rem;
+}
+
+section#curriculumvitae .timeline:before {
+    content: "";
+    position: absolute;
+    height: 100%;
+    border: 4px var(--timelineItemBrdr) solid;
+    /*border-bottom: 4;*/
+    right: 194px;
+    top: 0;
+}
+
+section#curriculumvitae .timeline:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+section#curriculumvitae .timelineItem {
+    border: 2px solid var(--timelineItemBrdr);
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    border-radius: 10px;
+    padding: 0 1rem;
+    width: 50%;
+    position: relative;
+    background-color: var(--primaryHover);
+}
+
+section#curriculumvitae .timelineItem:before, .timelineItem:after {
+    content: '';
+    position: absolute;
+}
+
+section#curriculumvitae .timelineItem:before{
+    content: '';
+    right: -20px;
+    top: calc(50% - 5px);
+    border-style: solid;
+    border-color: var(--timelineItemBrdr) var(--timelineItemBrdr) transparent transparent;
+    border-width: 20px;
+    transform: rotate(45deg);
+}
+section#curriculumvitae .timelineItem:nth-child(2n) {
+    margin-left: 21em;
+}
+
+section#curriculumvitae .timelineItem:nth-child(2n):before {
+    right: auto;
+    left: -20px;
+    border-color: transparent transparent var(--timelineItemBrdr) var(--timelineItemBrdr);
+}
+
+section#curriculumvitae .timelineItem h3 {
+    font-weight: normal;
+}
+
+section#curriculumvitae .timelineItem span {
+    color: hsl(0, 0%, 90%);
+}

src/css/main.css

@@ -1,6 +1,10 @@
 /******** Imports *******/
 @import "/node_modules/normalize.css/normalize.css";
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Share+Tech+Mono&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap");
+/*local imports*/
+@import "nav.css";
+@import "about.css";
+
 
 /****** Root Style ******/
 :root {
@@ -104,486 +108,3 @@ a.btn:active, form input[type="submit"]:active {
 section#about, section#curriculumvitae h1 {
     padding: 0 5rem;
 }
-
-/*** Navigation Styles **/
-
-header {
-    background: #6A6A6A url("../imgs/hero.jpg") no-repeat bottom;
-    background-size: cover;
-    height: 40%;
-    color:  #FFFFFF;
-    backdrop-filter: grayscale(100%);
-    position: relative;
-}
-
-nav {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    padding: 0.25em;
-    position: fixed;
-    top: 0;
-    width: 100%;
-    transition: background-color 0.4s ease-in;
-}
-
-nav.scrolled {
-    background-color: var(--navBack);
-    z-index: 1;
-}
-
-nav #nav-check {
-    display: none;
-}
-
-nav .nav-btn {
-    display: none;
-}
-
-nav h1 {
-    margin: 0;
-}
-
-nav a {
-    text-decoration: none;
-    color: #FFFFFF;
-}
-
-nav ul {
-    display: flex;
-    flex-direction: row;
-    gap: 1em;
-    margin: 0;
-    justify-content: flex-end;
-    align-items: flex-end;
-}
-
-nav ul li {
-    list-style: none;
-}
-
-nav ul li span {
-    visibility: hidden;
-}
-
-nav ul li a:hover span, nav ul li .active span {
-    visibility: visible;
-}
-
-header div {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding-top: 10em;
-}
-
-header div .btn {
-    margin: 2em 0;
-}
-
-header div button {
-    background: none;
-    border: none;
-    display: inline-block;
-    text-align: center;
-    text-decoration: none;
-    font-size: 2rem;
-    cursor: pointer;
-}
-
-i.fa-chevron-down {
-    color: var(--mutedGrey);
-    font-size: 3.75em;
-    margin: 1.5rem 0;
-}
-
-div h1 span {
-    visibility: visible;
-    animation: caret 1s steps(1) infinite;
-}
-
-@keyframes caret {
-    50% {
-        visibility: hidden;
-    }
-}
-
-/***** About Styles *****/
-
-section#about {
-    margin-bottom: 5rem;
-}
-
-section#about div {
-    padding: 0.1em 5em;
-}
-
-/****** CV Styles *******/
-
-section#curriculumvitae{
-    background-color: var(--primaryDefault);
-    color: #FFFFFF;
-    padding: 2em 0;
-}
-
-section#curriculumvitae .cvGrid {
-    display: flex;
-    flex-direction: row;
-    padding: 0 1.5rem;
-    flex-wrap: wrap;
-}
-
-section#curriculumvitae .cvGrid > div {
-    width: 45%;
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
-}
-
-section#curriculumvitae .cvGrid h2 {
-    text-align: center;
-}
-
-section#curriculumvitae .timeline {
-    position: relative;
-    max-width: 30em;
-    gap: 1em;
-    display: flex;
-    flex-direction: column;
-    margin: 0 auto;
-    height: 100%;
-}
-
-section#curriculumvitae #work {
-    margin: 0 auto 0 8rem;
-}
-
-section#curriculumvitae .timeline:before {
-    content: "";
-    position: absolute;
-    height: 100%;
-    border: 4px var(--timelineItemBrdr) solid;
-    /*border-bottom: 4;*/
-    right: 194px;
-    top: 0;
-}
-
-section#curriculumvitae .timeline:after {
-    content: "";
-    display: table;
-    clear: both;
-}
-
-section#curriculumvitae .timelineItem {
-    border: 2px solid var(--timelineItemBrdr);
-    -webkit-border-radius: 10px;
-    -moz-border-radius: 10px;
-    border-radius: 10px;
-    padding: 0 1rem;
-    width: 50%;
-    position: relative;
-    background-color: var(--primaryHover);
-}
-
-section#curriculumvitae .timelineItem:before, .timelineItem:after {
-    content: '';
-    position: absolute;
-}
-
-section#curriculumvitae .timelineItem:before{
-    content: '';
-    right: -20px;
-    top: calc(50% - 5px);
-    border-style: solid;
-    border-color: var(--timelineItemBrdr) var(--timelineItemBrdr) transparent transparent;
-    border-width: 20px;
-    transform: rotate(45deg);
-}
-section#curriculumvitae .timelineItem:nth-child(2n) {
-    margin-left: 21em;
-}
-
-section#curriculumvitae .timelineItem:nth-child(2n):before {
-    right: auto;
-    left: -20px;
-    border-color: transparent transparent var(--timelineItemBrdr) var(--timelineItemBrdr);
-}
-
-section#curriculumvitae .timelineItem h3 {
-    font-weight: normal;
-}
-
-section#curriculumvitae .timelineItem span {
-    color: hsl(0, 0%, 90%);
-}
-
-/**** Media Queries *****/
-
-@media screen and (max-width: 90em) {
-
-    /****** CV Styles *******/
-
-    section#curriculumvitae .cvGrid {
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-    }
-
-    section#curriculumvitae .cvGrid > div {
-        width: 100%;
-    }
-
-    section#curriculumvitae .cvGrid > div:first-child {
-        padding-bottom: 2.5em;
-        margin-bottom: 2.5em;
-        border-bottom: 5px #FFFFFF solid;
-    }
-
-    section#curriculumvitae .cvGrid h2 {
-        margin-left: 5em;
-    }
-
-    section#curriculumvitae .cvGrid .timeline {
-        margin: 0 auto;
-    }
-
-}
-
-@media screen and (max-width: 75em) {
-
-    /*** Template Styles ****/
-
-    section#about, section#curriculumvitae h1  {
-        padding: 0 1em;
-    }
-
-    /*** Navigation Styles **/
-
-    /** Default Nav Styles **/
-
-    nav {
-        display: block;
-        height: 50px;
-        width: 100%;
-        background-color: var(--navBack);
-        position: fixed;
-        top: 0;
-        padding: 0;
-    }
-
-    nav a h1{
-        margin-left: 1ch;
-    }
-
-    nav  .nav-btn {
-        display: inline-block;
-        position: absolute;
-        right: 75px;
-        top: -360px;
-    }
-
-    nav ul {
-        position: fixed;
-        display: block;
-        width: 100%;
-        background-color: #333;
-        transition: all 0.4s ease-in;
-        overflow-y: hidden;
-        padding-left: 0;
-        margin-top: 7px;
-    }
-
-    nav ul li a {
-        display: block;
-        width: 100%;
-        transform: translateX(-30px);
-        transition: all 0.4s ease-in;
-        opacity: 0;
-    }
-
-    .nav-btn label {
-        display: inline-block;
-        cursor: pointer;
-        width: 60px;
-        height: 50px;
-        position: fixed;
-        -webkit-transform: rotate(0deg);
-        -moz-transform: rotate(0deg);
-        -o-transform: rotate(0deg);
-        transform: rotate(0deg);
-        -webkit-transition: .5s ease-in;
-        -moz-transition: .5s ease-in;
-        -o-transition: .5s ease-in;
-        transition: .5s ease-in;
-    }
-
-    .nav-btn label span {
-        display: block;
-        position: absolute;
-        height: 5px;
-        width: 100%;
-        background-color: #FFFFFF;
-        opacity: 1;
-        right: 0;
-        top: 20px;
-        -webkit-transform: rotate(0deg);
-        -moz-transform: rotate(0deg);
-        -o-transform: rotate(0deg);
-        transform: rotate(0deg);
-        -webkit-transition: .25s ease-in;
-        -moz-transition: .25s ease-in;
-        -o-transition: .25s ease-in;
-        transition: .25s ease-in;
-    }
-
-    /** Burger Not Clicked **/
-
-    nav  #nav-check:not(:checked) ~ ul{
-        height: auto;
-        max-height: 0;
-    }
-
-    nav #nav-check:not(:checked) ~ .nav-btn label span:nth-child(1) {
-        top: 8px;
-        -webkit-transform-origin: left center;
-        -moz-transform-origin: left center;
-        -o-transform-origin: left center;
-        transform-origin: left center;
-    }
-
-    nav #nav-check:not(:checked) ~ .nav-btn label span:nth-child(2) {
-        top: 23px;
-        -webkit-transform-origin: left center;
-        -moz-transform-origin: left center;
-        -o-transform-origin: left center;
-        transform-origin: left center;
-    }
-
-    nav #nav-check:not(:checked) ~ .nav-btn label span:nth-child(3) {
-        top: 38px;
-        -webkit-transform-origin: left center;
-        -moz-transform-origin: left center;
-        -o-transform-origin: left center;
-        transform-origin: left center;
-    }
-
-    nav .nav-btn label:hover, nav  #nav-check:checked ~ .nav-btn  label {
-        background-color: rgba(-1, 0, 0, 0.3);
-    }
-
-    /**** Burger Clicked ****/
-
-    nav #nav-check:checked ~ ul{
-        max-height: 50vh;
-        overflow-y: hidden;
-    }
-
-    nav #nav-check:checked ~ ul li a {
-        opacity: 1;
-        transform: translateX(0px);
-    }
-
-    nav #nav-check:checked ~ ul li:nth-child(1) a {
-        transition-delay: 0.15s;
-    }
-
-    nav #nav-check:checked ~ ul li:nth-child(2) a {
-        transition-delay: 0.25s;
-    }
-
-    nav #nav-check:checked ~ ul li:nth-child(3) a {
-        transition-delay: 0.35s;
-    }
-
-    nav #nav-check:checked ~ ul li:nth-child(4) a {
-        transition-delay: 0.45s;
-    }
-
-    nav #nav-check:checked ~ ul li:nth-child(5) a {
-        transition-delay: 0.55s;
-    }
-
-    nav #nav-check:checked ~ .nav-btn label span:first-child {
-        -webkit-transform: rotate(45deg);
-        -moz-transform: rotate(45deg);
-        -o-transform: rotate(45deg);
-        transform: rotate(45deg);
-    }
-
-    nav #nav-check:checked ~ .nav-btn label span:nth-child(2){
-        width: 0;
-        opacity: 0;
-    }
-
-    nav #nav-check:checked ~ .nav-btn label span:last-child {
-        -webkit-transform: rotate(-45deg);
-        -moz-transform: rotate(-45deg);
-        -o-transform: rotate(-45deg);
-        transform: rotate(-45deg);
-    }
-
-    /***** About Styles *****/
-
-    section#about div {
-        padding: 0.1em 2.5em;
-    }
-
-    /****** CV Styles *******/
-
-    section#curriculumvitae .cvGrid {
-        padding: 0;
-    }
-}
-
-@media screen and (max-width: 55em) {
-
-    /****** CV Styles *******/
-
-    section#curriculumvitae .cvGrid .timeline {
-        margin: 0 1em;
-        max-width: 100%;
-    }
-
-    section#curriculumvitae .timeline:before {
-        border: none;
-    }
-
-    section#curriculumvitae .timelineItem{
-        width: 95%;
-    }
-
-    section#curriculumvitae .timelineItem:nth-child(2n) {
-        margin-left: 0;
-    }
-
-    section#curriculumvitae .timelineItem:before {
-        right: unset;
-        left: unset;
-        border:none
-    }
-
-}
-
-@media screen and (max-width: 31em) {
-
-    /*** Template Styles ****/
-
-    section#about, section#curriculumvitae h1 {
-        padding: 0 1em;
-    }
-
-    /*** Navigation Styles **/
-
-    header div h1 {
-        text-align: center;
-        height: 5.125rem;
-    }
-
-    /***** About Styles *****/
-
-    section#about div {
-        padding: 0.1em 1em;
-    }
-
-}

src/css/mediaQueries.css

@@ -0,0 +1,269 @@
+/**** Media Queries *****/
+
+@media screen and (max-width: 90em) {
+
+    /****** CV Styles *******/
+
+    section#curriculumvitae .cvGrid {
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    section#curriculumvitae .cvGrid > div {
+        width: 100%;
+    }
+
+    section#curriculumvitae .cvGrid > div:first-child {
+        padding-bottom: 2.5em;
+        margin-bottom: 2.5em;
+        border-bottom: 5px #FFFFFF solid;
+    }
+
+    section#curriculumvitae .cvGrid h2 {
+        margin-left: 5em;
+    }
+
+    section#curriculumvitae .cvGrid .timeline {
+        margin: 0 auto;
+    }
+
+}
+
+@media screen and (max-width: 75em) {
+
+    /*** Template Styles ****/
+
+    section#about, section#curriculumvitae h1  {
+        padding: 0 1em;
+    }
+
+    /*** Navigation Styles **/
+
+    /** Default Nav Styles **/
+
+    nav {
+        display: block;
+        height: 50px;
+        width: 100%;
+        background-color: var(--navBack);
+        position: fixed;
+        top: 0;
+        padding: 0;
+    }
+
+    nav a h1{
+        margin-left: 1ch;
+    }
+
+    nav  .nav-btn {
+        display: inline-block;
+        position: absolute;
+        right: 75px;
+        top: -360px;
+    }
+
+    nav ul {
+        position: fixed;
+        display: block;
+        width: 100%;
+        background-color: #333;
+        transition: all 0.4s ease-in;
+        overflow-y: hidden;
+        padding-left: 0;
+        margin-top: 7px;
+    }
+
+    nav ul li a {
+        display: block;
+        width: 100%;
+        transform: translateX(-30px);
+        transition: all 0.4s ease-in;
+        opacity: 0;
+    }
+
+    .nav-btn label {
+        display: inline-block;
+        cursor: pointer;
+        width: 60px;
+        height: 50px;
+        position: fixed;
+        -webkit-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+        -webkit-transition: .5s ease-in;
+        -moz-transition: .5s ease-in;
+        -o-transition: .5s ease-in;
+        transition: .5s ease-in;
+    }
+
+    .nav-btn label span {
+        display: block;
+        position: absolute;
+        height: 5px;
+        width: 100%;
+        background-color: #FFFFFF;
+        opacity: 1;
+        right: 0;
+        top: 20px;
+        -webkit-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+        -webkit-transition: .25s ease-in;
+        -moz-transition: .25s ease-in;
+        -o-transition: .25s ease-in;
+        transition: .25s ease-in;
+    }
+
+    /** Burger Not Clicked **/
+
+    nav  #nav-check:not(:checked) ~ ul{
+        height: auto;
+        max-height: 0;
+    }
+
+    nav #nav-check:not(:checked) ~ .nav-btn label span:nth-child(1) {
+        top: 8px;
+        -webkit-transform-origin: left center;
+        -moz-transform-origin: left center;
+        -o-transform-origin: left center;
+        transform-origin: left center;
+    }
+
+    nav #nav-check:not(:checked) ~ .nav-btn label span:nth-child(2) {
+        top: 23px;
+        -webkit-transform-origin: left center;
+        -moz-transform-origin: left center;
+        -o-transform-origin: left center;
+        transform-origin: left center;
+    }
+
+    nav #nav-check:not(:checked) ~ .nav-btn label span:nth-child(3) {
+        top: 38px;
+        -webkit-transform-origin: left center;
+        -moz-transform-origin: left center;
+        -o-transform-origin: left center;
+        transform-origin: left center;
+    }
+
+    nav .nav-btn label:hover, nav  #nav-check:checked ~ .nav-btn  label {
+        background-color: rgba(-1, 0, 0, 0.3);
+    }
+
+    /**** Burger Clicked ****/
+
+    nav #nav-check:checked ~ ul{
+        max-height: 50vh;
+        overflow-y: hidden;
+    }
+
+    nav #nav-check:checked ~ ul li a {
+        opacity: 1;
+        transform: translateX(0px);
+    }
+
+    nav #nav-check:checked ~ ul li:nth-child(1) a {
+        transition-delay: 0.15s;
+    }
+
+    nav #nav-check:checked ~ ul li:nth-child(2) a {
+        transition-delay: 0.25s;
+    }
+
+    nav #nav-check:checked ~ ul li:nth-child(3) a {
+        transition-delay: 0.35s;
+    }
+
+    nav #nav-check:checked ~ ul li:nth-child(4) a {
+        transition-delay: 0.45s;
+    }
+
+    nav #nav-check:checked ~ ul li:nth-child(5) a {
+        transition-delay: 0.55s;
+    }
+
+    nav #nav-check:checked ~ .nav-btn label span:first-child {
+        -webkit-transform: rotate(45deg);
+        -moz-transform: rotate(45deg);
+        -o-transform: rotate(45deg);
+        transform: rotate(45deg);
+    }
+
+    nav #nav-check:checked ~ .nav-btn label span:nth-child(2){
+        width: 0;
+        opacity: 0;
+    }
+
+    nav #nav-check:checked ~ .nav-btn label span:last-child {
+        -webkit-transform: rotate(-45deg);
+        -moz-transform: rotate(-45deg);
+        -o-transform: rotate(-45deg);
+        transform: rotate(-45deg);
+    }
+
+    /***** About Styles *****/
+
+    section#about div {
+        padding: 0.1em 2.5em;
+    }
+
+    /****** CV Styles *******/
+
+    section#curriculumvitae .cvGrid {
+        padding: 0;
+    }
+}
+
+@media screen and (max-width: 55em) {
+
+    /****** CV Styles *******/
+
+    section#curriculumvitae .cvGrid .timeline {
+        margin: 0 1em;
+        max-width: 100%;
+    }
+
+    section#curriculumvitae .timeline:before {
+        border: none;
+    }
+
+    section#curriculumvitae .timelineItem{
+        width: 95%;
+    }
+
+    section#curriculumvitae .timelineItem:nth-child(2n) {
+        margin-left: 0;
+    }
+
+    section#curriculumvitae .timelineItem:before {
+        right: unset;
+        left: unset;
+        border:none
+    }
+
+}
+
+@media screen and (max-width: 31em) {
+
+    /*** Template Styles ****/
+
+    section#about, section#curriculumvitae h1 {
+        padding: 0 1em;
+    }
+
+    /*** Navigation Styles **/
+
+    header div h1 {
+        text-align: center;
+        height: 5.125rem;
+    }
+
+    /***** About Styles *****/
+
+    section#about div {
+        padding: 0.1em 1em;
+    }
+
+}

src/css/nav.css

@@ -0,0 +1,103 @@
+/*** Navigation Styles **/
+
+header {
+    background: #6A6A6A url("../imgs/hero.jpg") no-repeat bottom;
+    background-size: cover;
+    height: 40%;
+    color:  #FFFFFF;
+    backdrop-filter: grayscale(100%);
+    position: relative;
+}
+
+nav {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 0.25em;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    transition: background-color 0.4s ease-in;
+}
+
+nav.scrolled {
+    background-color: var(--navBack);
+    z-index: 1;
+}
+
+nav #nav-check {
+    display: none;
+}
+
+nav .nav-btn {
+    display: none;
+}
+
+nav h1 {
+    margin: 0;
+}
+
+nav a {
+    text-decoration: none;
+    color: #FFFFFF;
+}
+
+nav ul {
+    display: flex;
+    flex-direction: row;
+    gap: 1em;
+    margin: 0;
+    justify-content: flex-end;
+    align-items: flex-end;
+}
+
+nav ul li {
+    list-style: none;
+}
+
+nav ul li span {
+    visibility: hidden;
+}
+
+nav ul li a:hover span, nav ul li .active span {
+    visibility: visible;
+}
+
+header div {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding-top: 10em;
+}
+
+header div .btn {
+    margin: 2em 0;
+}
+
+header div button {
+    background: none;
+    border: none;
+    display: inline-block;
+    text-align: center;
+    text-decoration: none;
+    font-size: 2rem;
+    cursor: pointer;
+}
+
+i.fa-chevron-down {
+    color: var(--mutedGrey);
+    font-size: 3.75em;
+    margin: 1.5rem 0;
+}
+
+div h1 span {
+    visibility: visible;
+    animation: caret 1s steps(1) infinite;
+}
+
+@keyframes caret {
+    50% {
+        visibility: hidden;
+    }
+}