diff --git a/.gitignore b/.gitignore index e1f16db..1e569d4 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ _site .idea -node_modules \ No newline at end of file +node_modules +.DS_Store diff --git a/css/main.css b/css/main.css index 7be7c8d..3abe706 100644 --- a/css/main.css +++ b/css/main.css @@ -1,1947 +1 @@ -@font-face { - font-family: 'Chronicle Display Bold'; - src: url("../fonts/chronicle-display/ChronicleDisplay-Bold.eot"); - src: url("../fonts/chronicle-display/ChronicleDisplay-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/chronicle-display/ChronicleDisplay-Bold.woff2") format("woff2"), url("../fonts/chronicle-display/ChronicleDisplay-Bold.woff") format("woff"), url("../fonts/chronicle-display/ChronicleDisplay-Bold.ttf") format("truetype"), url("../fonts/chronicle-display/ChronicleDisplay-Bold.svg#ChronicleDisplay-Bold") format("svg"); - font-weight: bold; - font-style: normal; } - -/* ===== WHITNEY ===== */ -/* - Book 400 -** - Book Italic 400 -** - Medium 500 -** - Medium Italic 500 -** - Bold 700 -*/ -@font-face { - font-family: 'Whitney'; - src: url("../fonts/whitney/whitney-book.woff2") format("woff2"), url("../fonts/whitney/whitney-book.woff") format("woff"), url("../fonts/whitney/whitney-book.ttf") format("truetype"); - font-weight: normal; - font-style: normal; } - -@font-face { - font-family: 'Whitney'; - src: url("../fonts/whitney/whitney-bookitalic.woff2") format("woff2"), url("../fonts/whitney/whitney-bookitalic.woff") format("woff"), url("../fonts/whitney/whitney-bookitalic.ttf") format("truetype"); - font-weight: normal; - font-style: italic; } - -@font-face { - font-family: 'Whitney'; - src: url("../fonts/whitney/whitney-medium.woff2") format("woff2"), url("../fonts/whitney/whitney-medium.woff") format("woff"), url("../fonts/whitney/whitney-medium.ttf") format("truetype"); - font-weight: 500; - font-style: normal; } - -@font-face { - font-family: 'Whitney'; - src: url("../fonts/whitney/whitney-mediumitalic.woff2") format("woff2"), url("../fonts/whitney/whitney-mediumitalic.woff") format("woff"), url("../fonts/whitney/whitney-mediumitalic.ttf") format("truetype"); - font-weight: 500; - font-style: italic; } - -@font-face { - font-family: 'Whitney'; - src: url("../fonts/whitney/whitney-bold.woff2") format("woff2"), url("../fonts/whitney/whitney-bold.woff") format("woff"), url("../fonts/whitney/whitney-bold.ttf") format("truetype"); - font-weight: 700; - font-style: normal; } - -/* ===== GOTHAM ===== */ -/* - Book 400 -** - Medium 500 -** - Bold 700 -*/ -@font-face { - font-family: 'Gotham'; - src: url("../fonts/gotham/Gotham-Book.eot"); - src: url("../fonts/gotham/Gotham-Book.eot?#iefix") format("embedded-opentype"), url("../fonts/gotham/Gotham-Book.woff2") format("woff2"), url("../fonts/gotham/Gotham-Book.woff") format("woff"), url("../fonts/gotham/Gotham-Book.ttf") format("truetype"), url("../fonts/gotham/Gotham-Book.svg#Gotham-Book") format("svg"); - font-weight: normal; - font-style: normal; } - -@font-face { - font-family: 'Gotham'; - src: url("../fonts/gotham/Gotham-Medium.eot"); - src: url("../fonts/gotham/Gotham-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/gotham/Gotham-Medium.woff2") format("woff2"), url("../fonts/gotham/Gotham-Medium.woff") format("woff"), url("../fonts/gotham/Gotham-Medium.ttf") format("truetype"), url("../fonts/gotham/Gotham-Medium.svg#Gotham-Medium") format("svg"); - font-weight: 500; - font-style: normal; } - -@font-face { - font-family: 'Gotham'; - src: url("../fonts/gotham/Gotham-Bold.eot"); - src: url("../fonts/gotham/Gotham-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/gotham/Gotham-Bold.woff2") format("woff2"), url("../fonts/gotham/Gotham-Bold.woff") format("woff"), url("../fonts/gotham/Gotham-Bold.ttf") format("truetype"), url("../fonts/gotham/Gotham-Bold.svg#Gotham-Bold") format("svg"); - font-weight: bold; - font-style: normal; } - -#dot-nav { - position: fixed; - right: 34px; - top: 50%; - bottom: auto; - -webkit-transform: translateY(-50%); - -ms-transform: translateY(-50%); - transform: translateY(-50%); - z-index: 1; - display: none; } - @media only screen and (max-width: 768px) { - #dot-nav { - display: none; } } - #dot-nav .dot-container { - text-align: right; } - #dot-nav a { - display: inline-block; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; } - #dot-nav a::after { - clear: both; - content: ""; - display: table; } - #dot-nav a span { - float: right; - display: inline-block; - -webkit-transform: scale(0.6); - -ms-transform: scale(0.6); - transform: scale(0.6); } - #dot-nav a:hover span { - -webkit-transform: scale(0.75); - -ms-transform: scale(0.75); - transform: scale(0.75); } - #dot-nav a:hover .dot-label { - opacity: 1; } - #dot-nav a.is-selected .dot { - background-color: #00b7c7; } - #dot-nav .dot { - position: relative; - top: 7px; - height: 20px; - width: 20px; - -webkit-border-radius: 50%; - border-radius: 50%; - background-color: rgba(255, 255, 255, 0.25); - -webkit-transition: background-color 0.5s, -webkit-transform 0.2s; - transition: background-color 0.5s, -webkit-transform 0.2s; - transition: transform 0.2s, background-color 0.5s; - transition: transform 0.2s, background-color 0.5s, -webkit-transform 0.2s; - -webkit-transform-origin: 50% 50%; - -ms-transform-origin: 50% 50%; - transform-origin: 50% 50%; } - #dot-nav .dot-label { - position: relative; - top: 3px; - padding: 0.4em .5em; - color: #f2f2f2; - font-family: "Gotham", Helvetica, Arial, sans-serif; - font-size: 1em; - font-weight: 500; - text-transform: uppercase; - opacity: 0; - -webkit-transition: opacity 0.2s, -webkit-transform 0.2s; - transition: opacity 0.2s, -webkit-transform 0.2s; - transition: transform 0.2s, opacity 0.2s; - transition: transform 0.2s, opacity 0.2s, -webkit-transform 0.2s; - -webkit-transform-origin: 100% 50%; - -ms-transform-origin: 100% 50%; - transform-origin: 100% 50%; } - -#toggle { - position: fixed; - top: 25px; - right: 25px; - height: 27px; - width: 30px; - cursor: pointer; - z-index: 100; - display: none; - -webkit-transition: opacity 0.25s ease; - transition: opacity 0.25s ease; } - @media only screen and (max-width: 768px) { - #toggle { - display: block; } } - #toggle:hover { - opacity: 0.7; } - #toggle.active .line { - background: #f2f2f2; } - #toggle.active .top { - -webkit-transform: translateY(10px) translateX(0) rotate(45deg); - -ms-transform: translateY(10px) translateX(0) rotate(45deg); - transform: translateY(10px) translateX(0) rotate(45deg); } - #toggle.active .middle { - opacity: 0; } - #toggle.active .bottom { - -webkit-transform: translateY(-10px) translateX(0) rotate(-45deg); - -ms-transform: translateY(-10px) translateX(0) rotate(-45deg); - transform: translateY(-10px) translateX(0) rotate(-45deg); } - #toggle .line { - background: #f2f2f2; - border: none; - -webkit-border-radius: 30px; - border-radius: 30px; - cursor: pointer; - width: 100%; - height: 3px; - position: absolute; - top: 0; - left: 0; - -webkit-transition: all 0.35s ease; - transition: all 0.35s ease; } - #toggle .line.middle { - top: 10px; } - #toggle .line.bottom { - top: 20px; } - -.overlay { - position: fixed; - background: rgba(0, 183, 199, 0.95); - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 0; - visibility: hidden; - overflow: hidden; - z-index: 10; - -webkit-transition: 0.3s; - transition: 0.3s; } - .overlay.open { - height: 100%; - z-index: 10; - opacity: 1; - visibility: visible; - overflow: hidden; } - .overlay.open .menu-item { - -webkit-animation: fadeInTop 0.5s ease forwards; - animation: fadeInTop 0.5s ease forwards; - -webkit-animation-delay: 0.35s; - animation-delay: 0.35s; } - .overlay.open .menu-item:nth-of-type(2) { - -webkit-animation-delay: 0.4s; - animation-delay: 0.4s; } - .overlay.open .menu-item:nth-of-type(3) { - -webkit-animation-delay: 0.45s; - animation-delay: 0.45s; } - .overlay.open .menu-item:nth-of-type(4) { - -webkit-animation-delay: 0.5s; - animation-delay: 0.5s; } - .overlay.open .menu-item:nth-of-type(5) { - -webkit-animation-delay: 0.55s; - animation-delay: 0.55s; } - .overlay.open .menu-item:nth-of-type(6) { - -webkit-animation-delay: 0.6s; - animation-delay: 0.6s; } - .overlay.open .menu-item:nth-of-type(7) { - -webkit-animation-delay: 0.65s; - animation-delay: 0.65s; } - .overlay .logo { - color: #f2f2f2; - font-family: "Chronicle Display Bold", Georgia, serif; - font-size: 30px; - margin: 14px 20px; } - @media only screen and (max-width: 400px) { - .overlay .logo { - font-size: 24px; - margin: 17px 20px; } } - .overlay .logo .logo-img { - width: 35px; - margin-right: 10px; - position: relative; - top: 5px; } - @media only screen and (max-width: 400px) { - .overlay .logo .logo-img { - width: 30px; - top: 5px; } } - .overlay .overlay-menu { - position: relative; - height: 70%; - -webkit-transform: translateY(-50%); - -ms-transform: translateY(-50%); - transform: translateY(-50%); - top: 45%; - font-size: 1.5em; - font-family: "Gotham", Helvetica, Arial, sans-serif; - font-weight: 700; - text-align: center; } - .overlay .overlay-menu .menu-container { - list-style: none; - padding: 0; - margin: 0 auto; - display: inline-block; - position: relative; - height: 100%; } - .overlay .overlay-menu .menu-container .menu-item { - display: block; - height: 14.25%; - height: -webkit-calc(100% / 7); - height: calc(100% / 7); - min-height: 50px; - position: relative; - opacity: 0; } - .overlay .overlay-menu .menu-container .menu-item a { - position: relative; - color: #f2f2f2; - text-decoration: none; - text-transform: uppercase; - overflow: hidden; } - .overlay .overlay-menu .menu-container .menu-item a:before, .overlay .overlay-menu .menu-container .menu-item a:after { - content: ''; - position: absolute; - width: 0%; - height: 2px; - top: 50%; - background: #f2f2f2; - margin-top: -2px; - left: -3px; } - .overlay .overlay-menu .menu-container .menu-item a:after { - -webkit-transition: width 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); - transition: width 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); } - .overlay .overlay-menu .menu-container .menu-item a:hover:before, .overlay .overlay-menu .menu-container .menu-item a:hover:after { - width: 105%; } - .overlay .overlay-menu .menu-container .menu-item a:hover:before { - -webkit-transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); - transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); } - .overlay .overlay-menu .menu-container .menu-item a:hover:after { - background: transparent; - -webkit-transition: 0s; - transition: 0s; } - -@-webkit-keyframes fadeInTop { - 0% { - opacity: 0; - bottom: 20%; } - 100% { - opacity: 1; - bottom: 0; } } - -@keyframes fadeInTop { - 0% { - opacity: 0; - bottom: 20%; } - 100% { - opacity: 1; - bottom: 0; } } - -.block-btn { - display: block; - width: 100%; - min-height: 100px; - overflow: hidden; - color: #f2f2f2; - position: relative; - background: #00909c; - font-family: "Gotham", Helvetica, Arial, sans-serif; - font-size: 1em; - font-weight: 700; - text-transform: uppercase; - text-align: center; - letter-spacing: 1px; - overflow: hidden; - -webkit-transition: background-color 0.5s linear; - transition: background-color 0.5s linear; } - .block-btn:hover { - background: #00b7c7; - -webkit-transition: all 0.3s ease; - transition: all 0.3s ease; } - .block-btn:hover .resume-text { - opacity: 0; - visibility: hidden; - -webkit-transform: translate3D(0, 4em, 0) scale(0.25); - -ms-transform: translate3D(0, 4em, 0) scale(0.25); - transform: translate3D(0, 4em, 0) scale(0.25); } - .block-btn:hover .resume-img { - opacity: 1; - visibility: visible; - -webkit-transform: translate3D(0, 0, 0) scale(1); - -ms-transform: translate3D(0, 0, 0) scale(1); - transform: translate3D(0, 0, 0) scale(1); } - .block-btn .resume-text, - .block-btn .resume-img { - position: absolute; - top: 0; - left: 0; - right: 0; - text-align: center; } - .block-btn .resume-text { - margin: 40px auto; - opacity: 1; - visibility: visible; - transition: transform 0.4s cubic-bezier(0.425, -0.195, 0.005, 1.215), opacity 0.13333s linear, -webkit-transform 0.4s cubic-bezier(0.425, -0.195, 0.005, 1.215); - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); } - .block-btn .resume-img { - width: 50px; - margin: 25px auto; - opacity: 0; - visibility: hidden; - transition: transform 0.4s cubic-bezier(0.425, -0.195, 0.005, 1.215), opacity 0.4s linear, -webkit-transform 0.4s cubic-bezier(0.425, -0.195, 0.005, 1.215); - -webkit-transform: translate3D(0, -4em, 0) scale(0); - -ms-transform: translate3D(0, -4em, 0) scale(0); - transform: translate3D(0, -4em, 0) scale(0); } - -#intro-section .intro-wrapper { - padding: 0; - padding-bottom: 20px; } - #intro-section .intro-wrapper .intro-body { - width: 100%; - height: 101vh; - overflow: hidden; - position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; } - -@-webkit-keyframes reveal-up { - 0% { - opacity: 1; - -webkit-transform: translateY(100%); - transform: translateY(100%); } - 100% { - opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); } } - -@keyframes reveal-up { - 0% { - opacity: 1; - -webkit-transform: translateY(100%); - transform: translateY(100%); } - 100% { - opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); } } - -@-webkit-keyframes reveal-down { - 0% { - opacity: 1; - -webkit-transform: translateY(-100%); - transform: translateY(-100%); } - 100% { - opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); } } - -@keyframes reveal-down { - 0% { - opacity: 1; - -webkit-transform: translateY(-100%); - transform: translateY(-100%); } - 100% { - opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); } } - -@-webkit-keyframes loading-mask { - 0%, - 100% { - -webkit-transform: scaleX(0); - transform: scaleX(0); } - 40%, - 60% { - -webkit-transform: scaleX(1); - transform: scaleX(1); } } - -@keyframes loading-mask { - 0%, - 100% { - -webkit-transform: scaleX(0); - transform: scaleX(0); } - 40%, - 60% { - -webkit-transform: scaleX(1); - transform: scaleX(1); } } - #intro-section .intro-wrapper .intro-body .intro-content { - text-align: center; - padding: 0 5%; - width: 100%; - position: relative; - top: -5%; } - #intro-section .intro-wrapper .intro-body .intro-content .heading, - #intro-section .intro-wrapper .intro-body .intro-content .heading .name, - #intro-section .intro-wrapper .intro-body .intro-content .subtext, - #intro-section .intro-wrapper .intro-body .intro-content .btn { - opacity: 0; - -webkit-animation-duration: 0.8s; - animation-duration: 0.8s; - -webkit-animation-delay: 0.3s; - animation-delay: 0.3s; - -webkit-animation-fill-mode: forwards; - animation-fill-mode: forwards; } - .no-cssanimations #intro-section .intro-wrapper .intro-body .intro-content .heading, .no-cssanimations - #intro-section .intro-wrapper .intro-body .intro-content .heading .name, .no-cssanimations - #intro-section .intro-wrapper .intro-body .intro-content .subtext, .no-cssanimations - #intro-section .intro-wrapper .intro-body .intro-content .btn { - opacity: 1; } - #intro-section .intro-wrapper .intro-body .intro-content .heading { - font-size: 4.5em; - font-weight: 700; - position: relative; - padding-bottom: 10px; - color: transparent; - overflow: hidden; - opacity: 1; } - @media only screen and (max-width: 768px) { - #intro-section .intro-wrapper .intro-body .intro-content .heading .name:before { - top: -webkit-calc(100% + 18px); - top: calc(100% + 18px); } } - @media only screen and (max-width: 480px) { - #intro-section .intro-wrapper .intro-body .intro-content .heading { - font-size: 4em; } } - #intro-section .intro-wrapper .intro-body .intro-content .heading:after { - content: attr(data-content); - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - color: #f2f2f2; - -webkit-animation-name: reveal-up; - animation-name: reveal-up; - -webkit-animation-fill-mode: backwards; - animation-fill-mode: backwards; - -webkit-animation-duration: 0.4s; - animation-duration: 0.4s; - -webkit-animation-delay: 0.7s; - animation-delay: 0.7s; } - #intro-section .intro-wrapper .intro-body .intro-content .heading .name { - position: relative; - display: inline-block; - opacity: 1; } - #intro-section .intro-wrapper .intro-body .intro-content .heading .name:before { - /* this is the line */ - content: ''; - position: absolute; - top: -webkit-calc(100% + 8px); - top: calc(100% + 8px); - left: -1em; - height: 2px; - width: -webkit-calc(100% + 2em); - width: calc(100% + 2em); - background-color: #f2f2f2; - -webkit-animation: loading-mask 1s .3s both; - animation: loading-mask 1s .3s both; } - #intro-section .intro-wrapper .intro-body .intro-content .action-wrapper { - overflow: hidden; } - #intro-section .intro-wrapper .intro-body .intro-content .action-wrapper .subtext { - position: relative; - margin: 0; - padding: 0; - -webkit-animation-name: reveal-down; - animation-name: reveal-down; - -webkit-animation-duration: 0.4s; - animation-duration: 0.4s; - -webkit-animation-delay: 0.7s; - animation-delay: 0.7s; } - #intro-section .intro-wrapper .intro-body .intro-content .action-wrapper .subtext .btn { - display: inline-block; - padding: 1.2em 0; - font-size: 1.3rem; - font-weight: 500; - line-height: 1.5; - color: #f2f2f2; - text-transform: uppercase; - font-family: "Gotham", Helvetica, Arial, sans-serif; - opacity: 1; - margin: 0; } - @media only screen and (max-width: 480px) { - #intro-section .intro-wrapper .intro-body .intro-content .action-wrapper .subtext .btn { - font-size: 1.1em; } } - #intro-section .intro-wrapper .intro-body .scroll-down-wrapper { - position: absolute; - bottom: 50px; - left: 0; - right: 0; - margin: 0 auto; - text-align: center; - color: #f2f2f2; } - #intro-section .intro-wrapper .intro-body .scroll-down-wrapper .scroll-down { - display: block; - width: 70px; - margin: 0 auto; - -webkit-transition: all 0.3s ease; - transition: all 0.3s ease; } - #intro-section .intro-wrapper .intro-body .scroll-down-wrapper .scroll-down:hover { - -webkit-transition: all 0.3s ease; - transition: all 0.3s ease; } - #intro-section .intro-wrapper .intro-body .scroll-down-wrapper .scroll-down:hover .logo { - opacity: 0; } - #intro-section .intro-wrapper .intro-body .scroll-down-wrapper .scroll-down:hover .scroll-down-text { - opacity: 1; - visibility: visible; } - #intro-section .intro-wrapper .intro-body .scroll-down-wrapper .scroll-down .logo { - width: 35px; - -webkit-transition: opacity 0.5s ease, visibility 0.5s; - transition: opacity 0.5s ease, visibility 0.5s; } - #intro-section .intro-wrapper .intro-body .scroll-down-wrapper .scroll-down .scroll-down-text { - color: #f2f2f2; - font-family: "Gotham", Helvetica, Arial, sans-serif; - text-transform: uppercase; - font-size: 12px; - font-weight: 700; - text-align: center; - height: 100%; - opacity: 0; - padding-top: 0.5em; - position: absolute; - top: 0; - left: 0; - right: 0; - -webkit-transition: opacity 0.5s ease, visibility 0.5s; - transition: opacity 0.5s ease, visibility 0.5s; - visibility: hidden; - width: 100%; } - #intro-section .intro-wrapper .intro-body .scroll-down-wrapper .scroll-down .scroll-down-text .chevron { - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); - height: 20px; - display: block; - margin: 10px auto; } - -#about-section .section-subheading { - width: 60%; - font-size: 1.2em; - font-weight: 500; - line-height: 1.5; - margin-top: 1em; } - @media only screen and (max-width: 1000px) { - #about-section .section-subheading { - width: 100%; } } - -#about-section .about-wrapper { - padding-right: 20px; } - @media only screen and (max-width: 900px) { - #about-section .about-wrapper { - padding: 0; } } - #about-section .about-wrapper .about-text-wrapper { - display: inline-block; - width: 60%; - vertical-align: top; } - @media only screen and (max-width: 900px) { - #about-section .about-wrapper .about-text-wrapper { - width: 100%; } } - #about-section .about-wrapper .about-text-wrapper .about-text { - margin-bottom: 10px; - font-size: 1.15em; } - #about-section .about-wrapper .headshot { - display: inline-block; - width: 35%; - height: auto; - -webkit-border-radius: 50%; - border-radius: 50%; - margin-top: -100px; - float: right; - max-width: 450px; } - @media only screen and (max-width: 1000px) { - #about-section .about-wrapper .headshot { - margin-top: 0px; } } - @media only screen and (max-width: 900px) { - #about-section .about-wrapper .headshot { - float: none; - margin: 10px 0 40px 0; - width: 300px; } } - @media only screen and (max-width: 400px) { - #about-section .about-wrapper .headshot { - width: 250px; } } - -#services-section a { - display: inline-block; - position: relative; } - #services-section a:after { - content: ''; - width: 100%; - position: absolute; - left: 0; - bottom: 2px; - border-width: 0 0 .5px; - border-style: solid; - border-color: #cbcbcb; } - -#services-section .services-wrapper { - width: 100%; - margin: 0 auto; - padding: 20px; } - @media only screen and (max-width: 1000px) { - #services-section .services-wrapper { - padding: 0; } } - -#services-section .service-row { - width: 100%; - height: 50%; } - @media only screen and (max-width: 660px) { - #services-section .service-row { - height: auto; } } - #services-section .service-row:nth-of-type(odd) { - border-bottom: 1px solid rgba(242, 242, 242, 0.3); } - @media only screen and (max-width: 660px) { - #services-section .service-row:nth-of-type(odd) { - border: none; } } - #services-section .service-row:nth-of-type(even) .service-column { - padding-top: 40px; } - @media only screen and (max-width: 660px) { - #services-section .service-row:nth-of-type(even) .service-column { - padding-top: 20px; } } - #services-section .service-row .service-column { - display: inline-block; - vertical-align: top; - width: 49%; - height: 100%; - padding: 20px; - overflow: hidden; - white-space: nowrap; } - @media only screen and (max-width: 660px) { - #services-section .service-row .service-column { - display: block; - width: 100%; - border: none; } } - @media only screen and (max-width: 480px) { - #services-section .service-row .service-column { - padding: 20px 0; } } - #services-section .service-row .service-column:nth-of-type(odd) { - border-right: 1px solid rgba(242, 242, 242, 0.3); } - @media only screen and (max-width: 660px) { - #services-section .service-row .service-column:nth-of-type(odd) { - border: none; } } - #services-section .service-row .service-column .service-img { - width: 40px; - margin-right: 15px; - display: inline-block; - vertical-align: middle; - position: relative; - top: -5px; } - #services-section .service-row .service-column .sprite { - width: 40px; - height: 40px; - margin-right: 15px; - display: inline-block; - vertical-align: middle; - position: relative; - top: -3px; - background-repeat: no-repeat; - background-position: center center; - background-size: 100%; } - @media only screen and (max-width: 400px) { - #services-section .service-row .service-column .sprite { - width: 35px; - height: 35px; } } - #services-section .service-row .service-column .sprite.webdev { - background-image: url("../img/icons/html.png"); } - #services-section .service-row .service-column .sprite.ui { - background-image: url("../img/icons/pencil.png"); - background-size: 90%; } - #services-section .service-row .service-column .sprite.xd { - background-image: url("../img/icons/ux-design.png"); } - #services-section .service-row .service-column .sprite.wit { - background-image: url("../img/icons/internet.png"); - background-size: 90%; } - #services-section .service-row .service-column .service-heading { - font-family: "Gotham", Helvetica, Arial, sans-serif; - text-transform: uppercase; - margin: 0 0 30px; - font-size: 20px; - display: inline-block; } - @media only screen and (max-width: 1170px) { - #services-section .service-row .service-column .service-heading { - font-size: 2vw; } } - @media only screen and (max-width: 660px) { - #services-section .service-row .service-column .service-heading { - font-size: 4vw; } } - @media only screen and (max-width: 440px) { - #services-section .service-row .service-column .service-heading { - font-size: 16px; } } - #services-section .service-row .service-column .service-text { - font-size: 1.1em; - margin-bottom: 20px; - white-space: initial; } - -#skills-section .skills-flex-wrapper, -#skills-section .flex-item, -#skills-section .check-wrapper { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; } - -#skills-section .skills-flex-wrapper { - font: 100 30px 'Whitney'; - height: 17em; - -webkit-flex-flow: column wrap; - -ms-flex-flow: column wrap; - flex-flow: column wrap; } - @media only screen and (max-width: 768px) { - #skills-section .skills-flex-wrapper { - display: block; - height: auto; } } - #skills-section .skills-flex-wrapper .skills-heading { - font-family: "Gotham", Helvetica, Arial, sans-serif; - text-transform: uppercase; - font-weight: 700; - font-size: 1.5vw; } - @media only screen and (max-width: 768px) { - #skills-section .skills-flex-wrapper .skills-heading { - font-size: 18px; } } - #skills-section .skills-flex-wrapper .skills-heading .sprite { - width: 35px; - height: 35px; - margin-right: 10px; - position: relative; - top: 7px; - display: inline-block; - vertical-align: text-bottom; - background-repeat: no-repeat; - background-position: center center; - background-size: 100%; } - #skills-section .skills-flex-wrapper .skills-heading .sprite.dev { - background-image: url("../img/icons/settings.png"); } - #skills-section .skills-flex-wrapper .skills-heading .sprite.design { - background-image: url("../img/icons/design.png"); - background-size: 90%; } - #skills-section .skills-flex-wrapper .skills-heading .sprite.tools { - background-image: url("../img/icons/repair-tools.png"); - background-size: 90%; } - #skills-section .skills-flex-wrapper .skills-heading .sprite.knowledge { - background-image: url("../img/icons/light-bulb.png"); } - #skills-section .skills-flex-wrapper .flex-item { - -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - min-height: 200px; - background: transparent; - padding: 15px; } - @media only screen and (max-width: 1170px) { - #skills-section .skills-flex-wrapper .flex-item { - padding-right: 0; } } - @media only screen and (max-width: 480px) { - #skills-section .skills-flex-wrapper .flex-item { - padding: 0; } } - @media only screen and (max-width: 440px) { - #skills-section .skills-flex-wrapper .flex-item { - display: block; } } - #skills-section .skills-flex-wrapper .flex-item:nth-child(1) { - width: 40%; - max-width: 400px; - min-height: 450px; } - @media only screen and (max-width: 1170px) { - #skills-section .skills-flex-wrapper .flex-item:nth-child(1) { - width: 37%; } } - @media only screen and (max-width: 1000px) { - #skills-section .skills-flex-wrapper .flex-item:nth-child(1) { - width: 45%; } } - @media only screen and (max-width: 768px) { - #skills-section .skills-flex-wrapper .flex-item:nth-child(1) { - width: 100%; - min-height: 50px; } } - #skills-section .skills-flex-wrapper .flex-item:nth-child(2) { - width: 60%; - min-height: 151px; } - @media only screen and (max-width: 1000px) { - #skills-section .skills-flex-wrapper .flex-item:nth-child(2) { - width: 55%; } } - @media only screen and (max-width: 768px) { - #skills-section .skills-flex-wrapper .flex-item:nth-child(2) { - width: 100%; } } - #skills-section .skills-flex-wrapper .flex-item:nth-child(3) { - min-height: 299px; - width: 60%; } - @media only screen and (max-width: 1000px) { - #skills-section .skills-flex-wrapper .flex-item:nth-child(3) { - width: 55%; } } - @media only screen and (max-width: 768px) { - #skills-section .skills-flex-wrapper .flex-item:nth-child(3) { - width: 100%; } } - #skills-section .skills-flex-wrapper .dev-wrapper { - display: block; } - #skills-section .skills-flex-wrapper .dev-wrapper .dev-item { - display: inline-block; - border: 2px solid rgba(57, 57, 57, 0.5); - -webkit-border-radius: 50%; - border-radius: 50%; - text-align: center; - margin: 10px 10px 10px 0; - padding: 0px; - width: 100px; - height: 100px; - line-height: 7; - font-size: 14px; } - @media only screen and (max-width: 1170px) { - #skills-section .skills-flex-wrapper .dev-wrapper .dev-item { - width: 80px; - height: 80px; - font-size: 14px; - line-height: 5.5; - margin: 5px 5px 5px 0; } } - @media only screen and (max-width: 768px) { - #skills-section .skills-flex-wrapper .dev-wrapper .dev-item { - width: 100px; - height: 100px; - line-height: 7; - margin: 1%; } } - @media only screen and (max-width: 480px) { - #skills-section .skills-flex-wrapper .dev-wrapper .dev-item { - width: 80px; - height: 80px; - line-height: 5.5; } } - #skills-section .skills-flex-wrapper .design-wrapper { - display: block; } - #skills-section .skills-flex-wrapper .design-wrapper .design-item { - display: inline-block; - margin: 10px; } - @media only screen and (max-width: 1170px) { - #skills-section .skills-flex-wrapper .design-wrapper .design-item { - margin: 10px 5px; } } - #skills-section .skills-flex-wrapper .design-wrapper .design-item .item-img { - height: 40px; - -webkit-filter: grayscale(100%); - filter: grayscale(100%); } - -#skills-section .check-wrapper .tools-wrapper, -#skills-section .check-wrapper .knowledge-wrapper { - width: 50%; - display: inline-block; - vertical-align: top; - overflow: hidden; - white-space: nowrap; } - @media only screen and (max-width: 440px) { - #skills-section .check-wrapper .tools-wrapper, - #skills-section .check-wrapper .knowledge-wrapper { - display: block; - width: 100%; } } - #skills-section .check-wrapper .tools-wrapper .list, - #skills-section .check-wrapper .knowledge-wrapper .list { - margin-top: 30px; - margin-left: 20px; } - #skills-section .check-wrapper .tools-wrapper .list .list-item, - #skills-section .check-wrapper .knowledge-wrapper .list .list-item { - margin: 10px 0; - font-size: 16px; } - #skills-section .check-wrapper .tools-wrapper .list .list-item .item-svg, - #skills-section .check-wrapper .knowledge-wrapper .list .list-item .item-svg { - margin-right: 10px; - width: 12px; - height: 12px; - color: #fff; - fill: #fff; } - -#experience-section .experience-description { - padding: 0 100px; - font-size: 1.2em; } - @media only screen and (max-width: 1170px) { - #experience-section .experience-description { - padding: 0; } } - #experience-section .experience-description a { - display: inline-block; - position: relative; - font-weight: 500; - -webkit-transition: all 0.3s ease; - transition: all 0.3s ease; } - #experience-section .experience-description a:after { - content: ''; - width: 100%; - position: absolute; - left: 0; - bottom: 2px; - border-width: 0 0 .5px; - border-style: solid; - border-color: #f2f2f2; - -webkit-transition: all 0.3s ease; - transition: all 0.3s ease; } - -#experience-section .experience-wrapper { - padding: 30px; } - @media only screen and (max-width: 1000px) { - #experience-section .experience-wrapper { - padding-left: 0; } } - @media only screen and (max-width: 600px) { - #experience-section .experience-wrapper { - padding: 30px 0; } } - #experience-section .experience-wrapper #timeline { - position: relative; - padding: 2em 0; - margin: 0 auto; - width: 100%; - max-width: 1170px; - margin: 0 auto; } - #experience-section .experience-wrapper #timeline:before { - content: ''; - position: absolute; - top: 0; - left: -webkit-calc(50% - 1px); - left: calc(50% - 1px); - height: 100%; - width: 2px; - background: #00b7c7; } - @media only screen and (max-width: 1000px) { - #experience-section .experience-wrapper #timeline:before { - left: 20px; - margin-left: 0px; } } - @media only screen and (max-width: 480px) { - #experience-section .experience-wrapper #timeline:before { - left: 10px; } } - #experience-section .experience-wrapper #timeline:after { - content: ''; - display: table; - clear: both; } - #experience-section .experience-wrapper #timeline .timeline-block { - position: relative; - -webkit-transition: all 0.3s ease; - transition: all 0.3s ease; - margin: 1em 0; } - #experience-section .experience-wrapper #timeline .timeline-block:after { - content: ""; - display: table; - clear: both; } - #experience-section .experience-wrapper #timeline .timeline-block:first-child { - margin-top: 0; } - #experience-section .experience-wrapper #timeline .timeline-block:last-child { - margin-bottom: 0; } - @media only screen and (max-width: 1170px) { - #experience-section .experience-wrapper #timeline .timeline-block:nth-child(odd) { - margin-top: 0; - margin-bottom: 2em; } } - #experience-section .experience-wrapper #timeline .timeline-block:nth-child(odd) .timeline-content { - float: left; } - @media only screen and (max-width: 1170px) { - #experience-section .experience-wrapper #timeline .timeline-block:nth-child(odd) .timeline-content { - right: 10px; } } - @media only screen and (max-width: 1000px) { - #experience-section .experience-wrapper #timeline .timeline-block:nth-child(odd) .timeline-content { - right: auto; } } - #experience-section .experience-wrapper #timeline .timeline-block:nth-child(odd) .timeline-content:before { - top: 24px; - left: 100%; - border-color: transparent; - border-left-color: #1b1b1b; } - @media only screen and (max-width: 1000px) { - #experience-section .experience-wrapper #timeline .timeline-block:nth-child(odd) .timeline-content:before { - top: 16px; - left: auto; - border-color: transparent; - border-right-color: #1b1b1b; } } - #experience-section .experience-wrapper #timeline .timeline-block:nth-child(odd) .timeline-content .date { - left: auto; - text-align: right; - right: -33%; } - #experience-section .experience-wrapper #timeline .timeline-block:nth-child(even) .date { - text-align: right; - left: auto; - right: 55%; } - @media only screen and (max-width: 1000px) { - #experience-section .experience-wrapper #timeline .timeline-block:nth-child(even) .date { - text-align: left; - font-size: 14px; - color: #777777; - position: relative; - top: -40px; - left: 95px; - right: auto; } } - @media only screen and (max-width: 480px) { - #experience-section .experience-wrapper #timeline .timeline-block:nth-child(even) .date { - left: 66px; } } - #experience-section .experience-wrapper #timeline .timeline-block .timeline-img { - position: absolute; - width: 50px; - height: 50px; - top: 15px; - left: 50%; - margin-left: -25px; - -webkit-border-radius: 50%; - border-radius: 50%; - background: #212121; - -webkit-transform: translateZ(0); - transform: translateZ(0); - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - -webkit-transition: all 0.3s ease; - transition: all 0.3s ease; } - @media only screen and (max-width: 1000px) { - #experience-section .experience-wrapper #timeline .timeline-block .timeline-img { - top: 5px; - left: 20px; } } - @media only screen and (max-width: 480px) { - #experience-section .experience-wrapper #timeline .timeline-block .timeline-img { - width: 40px; - height: 40px; - top: 10px; - left: 15px; } } - #experience-section .experience-wrapper #timeline .timeline-block .timeline-img .sprite { - display: block; - width: 24px; - height: 24px; - position: relative; - left: 50%; - top: 50%; - margin-left: -12px; - margin-top: -12px; - background-repeat: no-repeat; - background-size: 100%; } - @media only screen and (max-width: 480px) { - #experience-section .experience-wrapper #timeline .timeline-block .timeline-img .sprite { - width: 20px; - height: 20px; - margin-left: -10px; - margin-top: -10px; } } - #experience-section .experience-wrapper #timeline .timeline-block .timeline-img .sprite.university { - background-image: url("../img/icons/graduate-cap.png"); } - #experience-section .experience-wrapper #timeline .timeline-block .timeline-img .sprite.research { - background-image: url("../img/icons/search.png"); } - #experience-section .experience-wrapper #timeline .timeline-block .timeline-img .sprite.industry { - background-image: url("../img/icons/briefcase.png"); } - #experience-section .experience-wrapper #timeline .timeline-block .timeline-img .sprite.academic { - background-image: url("../img/icons/notebook.png"); } - #experience-section .experience-wrapper #timeline .timeline-block .timeline-content { - float: right; - position: relative; - background: #1b1b1b; - -webkit-border-radius: 3px; - border-radius: 3px; - margin-left: 0; - padding: 1.5em; - width: 45%; - opacity: 0.85; - -webkit-transition: all 0.3s ease; - transition: all 0.3s ease; } - @media only screen and (max-width: 1170px) { - #experience-section .experience-wrapper #timeline .timeline-block .timeline-content { - left: 0px; - padding-bottom: 2.5em; } } - @media only screen and (max-width: 1000px) { - #experience-section .experience-wrapper #timeline .timeline-block .timeline-content { - margin-left: 70px; - right: auto; - width: auto; } } - @media only screen and (max-width: 480px) { - #experience-section .experience-wrapper #timeline .timeline-block .timeline-content { - margin-left: 50px; - padding: 1.5em 1em 2.5em; } } - #experience-section .experience-wrapper #timeline .timeline-block .timeline-content:hover { - opacity: 1; } - #experience-section .experience-wrapper #timeline .timeline-block .timeline-content:hover + .timeline-img { - background: #00b7c7; } - #experience-section .experience-wrapper #timeline .timeline-block .timeline-content:before { - content: ''; - position: absolute; - top: 24px; - right: 100%; - height: 0; - width: 0; - border: 15px solid transparent; - border-color: transparent; - border-right-color: #1b1b1b; } - @media only screen and (max-width: 1000px) { - #experience-section .experience-wrapper #timeline .timeline-block .timeline-content:before { - top: 16px; - right: 100%; - left: auto; - border: 15px solid transparent; - border-right: 15px solid #1b1b1b; } } - #experience-section .experience-wrapper #timeline .timeline-block .timeline-content:after { - content: ""; - display: table; - clear: both; } - #experience-section .experience-wrapper #timeline .timeline-block .timeline-content .position { - color: #f2f2f2; - margin: 5px 0 10px; - font-size: 18px; - display: inline-block; - text-transform: uppercase; - font-family: "Gotham", Helvetica, Arial, sans-serif; } - #experience-section .experience-wrapper #timeline .timeline-block .timeline-content .company { - margin: 0 0 10px 0; - font-size: 15px; - font-weight: 500; } - #experience-section .experience-wrapper #timeline .timeline-block .timeline-content .company a { - color: #00b7c7; - display: inline; - -webkit-transition: all 0.3s ease; - transition: all 0.3s ease; } - #experience-section .experience-wrapper #timeline .timeline-block .timeline-content .company a:hover { - color: #00dded; } - #experience-section .experience-wrapper #timeline .timeline-block .timeline-content .job-desc { - margin: 1em 0; - font-size: 1em; - line-height: 1.5; } - @media only screen and (max-width: 480px) { - #experience-section .experience-wrapper #timeline .timeline-block .timeline-content .job-desc { - font-size: 1em; - line-height: 1.5; } } - #experience-section .experience-wrapper #timeline .timeline-block .date { - font-size: 1em; - font-weight: 500; - display: inline-block; - color: #f2f2f2; - font-family: "Gotham", Helvetica, Arial, sans-serif; - text-transform: uppercase; - position: absolute; - width: 100%; - left: 55%; - top: 30px; } - @media only screen and (max-width: 1000px) { - #experience-section .experience-wrapper #timeline .timeline-block .date { - font-size: 14px; - color: #777777; - position: absolute; - top: auto; - bottom: 20px; - left: 95px; } } - @media only screen and (max-width: 480px) { - #experience-section .experience-wrapper #timeline .timeline-block .date { - left: 66px; } } - -#experience-section .down-arrow { - display: block; - margin: 0 auto; - border-color: transparent; - border-top-color: #00b7c7; - border-style: solid; - border-width: 15px 7px 0; - width: 0; - height: 0; - position: relative; - line-height: 0; } - @media only screen and (max-width: 1000px) { - #experience-section .down-arrow { - margin-left: 13.5px; } } - @media only screen and (max-width: 480px) { - #experience-section .down-arrow { - margin-left: 3.5px; } } - -#portfolio-section .section-wrapper { - padding-bottom: 50px; } - -#portfolio-section a { - display: inline-block; } - -#portfolio-section .portfolio-item-wrapper .divider:last-of-type { - display: none; } - -#portfolio-section .portfolio-row { - margin: 0; - padding-top: 50px; - display: block; } - #portfolio-section .portfolio-row .screenshots { - position: relative; - overflow: hidden; - display: block; - width: 95%; } - #portfolio-section .portfolio-row .screenshots:before, #portfolio-section .portfolio-row .screenshots:after { - -webkit-box-sizing: inherit; - box-sizing: inherit; - padding: 0; - margin: 0; } - #portfolio-section .portfolio-row .screenshots:after { - display: block; - padding-top: 45.5%; - content: ""; } - #portfolio-section .portfolio-row .screenshots.screentime:after { - display: block; - padding-top: 5.5%; - content: ""; } - @media only screen and (max-width: 900px) { - #portfolio-section .portfolio-row .screenshots.screentime:after { - padding-top: 7.5%; } } - @media only screen and (max-width: 660px) { - #portfolio-section .portfolio-row .screenshots.screentime:after { - padding-top: 10%; } } - @media only screen and (max-width: 480px) { - #portfolio-section .portfolio-row .screenshots.screentime:after { - padding-top: 15%; } } - #portfolio-section .portfolio-row .screenshots .img-lg, - #portfolio-section .portfolio-row .screenshots .img-md, - #portfolio-section .portfolio-row .screenshots .img-sm { - border: 0; - position: absolute; - right: 0; - bottom: 0; - -webkit-border-radius: 2px; - border-radius: 2px; - -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.75); - box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.75); } - #portfolio-section .portfolio-row .screenshots .img-lg:after, - #portfolio-section .portfolio-row .screenshots .img-md:after, - #portfolio-section .portfolio-row .screenshots .img-sm:after { - content: ""; - display: block; } - #portfolio-section .portfolio-row .screenshots .img-lg { - width: 70%; - left: 0; - z-index: 1; } - #portfolio-section .portfolio-row .screenshots .img-lg:after { - padding-top: 65%; } - #portfolio-section .portfolio-row .screenshots .img-md { - width: 27%; - right: 14%; - z-index: 2; } - #portfolio-section .portfolio-row .screenshots .img-md:after { - padding-top: 110%; } - #portfolio-section .portfolio-row .screenshots .img-sm { - width: 15%; - right: 1rem; - z-index: 3; - -webkit-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.75); - box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.75); } - #portfolio-section .portfolio-row .screenshots .img-sm:after { - padding-top: 145%; } - #portfolio-section .portfolio-row .screenshots .img-screentime { - position: relative; - top: 0px; - border: 0; - -webkit-border-radius: 2px; - border-radius: 2px; - -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.75); - box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.75); - width: 26%; - margin-right: -20px; } - @media only screen and (max-width: 768px) { - #portfolio-section .portfolio-row .screenshots .img-screentime { - width: 27%; } } - @media only screen and (max-width: 480px) { - #portfolio-section .portfolio-row .screenshots .img-screentime { - width: 25%; - margin-right: -10px; } } - #portfolio-section .portfolio-row .screenshots .img-screentime:nth-of-type(2) { - top: 15px; } - @media only screen and (max-width: 600px) { - #portfolio-section .portfolio-row .screenshots .img-screentime:nth-of-type(2) { - top: 10px; } } - #portfolio-section .portfolio-row .screenshots .img-screentime:nth-of-type(3) { - top: 30px; } - @media only screen and (max-width: 600px) { - #portfolio-section .portfolio-row .screenshots .img-screentime:nth-of-type(3) { - top: 20px; } } - #portfolio-section .portfolio-row .screenshots .img-screentime:nth-of-type(4) { - top: 45px; } - @media only screen and (max-width: 600px) { - #portfolio-section .portfolio-row .screenshots .img-screentime:nth-of-type(4) { - top: 30px; } } - #portfolio-section .portfolio-row .screenshots .img-screentime:after { - content: ""; - display: block; } - #portfolio-section .portfolio-row .description-title-container { - position: relative; - width: 90%; - margin-top: 30px; - margin-left: 1em; - -webkit-box-align: baseline; - -webkit-align-items: baseline; - -ms-flex-align: baseline; - align-items: baseline; - display: -webkit-flex; - -webkit-flex-wrap: nowrap; - -webkit-flex-direction: row; - -webkit-justify-content: flex-end; - -webkit-align-content: stretch; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; - -ms-flex-line-pack: stretch; - align-content: stretch; } - @media only screen and (max-width: 768px) { - #portfolio-section .portfolio-row .description-title-container { - width: 95%; } } - @media only screen and (max-width: 660px) { - #portfolio-section .portfolio-row .description-title-container { - width: 100%; - margin-left: 0; } } - @media only screen and (max-width: 600px) { - #portfolio-section .portfolio-row .description-title-container { - display: block; } } - #portfolio-section .portfolio-row .description-title-container .description-title { - -webkit-box-flex: 1; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - margin-bottom: 20px; - font-family: "Gotham", Helvetica, Arial, sans-serif; - text-transform: uppercase; } - #portfolio-section .portfolio-row .description-title-container .description-buttons a { - padding: 10px 15px; - background: transparent; - border: 2px solid #00b7c7; - -webkit-border-radius: 3px; - border-radius: 3px; - margin: 0 5px; - color: #00b7c7; - font-family: "Gotham", Helvetica, Arial, sans-serif; - font-weight: 500; - text-transform: uppercase; - -webkit-transition: all 0.3s ease; - transition: all 0.3s ease; } - @media only screen and (max-width: 660px) { - #portfolio-section .portfolio-row .description-title-container .description-buttons a { - font-size: 14px; - padding: 7px 10px; } } - @media only screen and (max-width: 600px) { - #portfolio-section .portfolio-row .description-title-container .description-buttons a { - margin: 0 10px 30px 0; } } - #portfolio-section .portfolio-row .description-title-container .description-buttons a:hover { - background: #00b7c7; - color: #f2f2f2; } - #portfolio-section .portfolio-row .portfolio-description { - display: block; - width: 90%; - margin-top: 15px; - margin-left: 1rem; - margin-bottom: 25px; - font-size: 1.1em; - color: #cbcbcb; } - @media only screen and (max-width: 660px) { - #portfolio-section .portfolio-row .portfolio-description { - width: 100%; - margin-left: 0; - margin-top: 10px; } } - @media only screen and (max-width: 480px) { - #portfolio-section .portfolio-row .portfolio-description { - font-size: 1em; } } - #portfolio-section .portfolio-row .portfolio-description a { - position: relative; - font-weight: 500; - color: #cbcbcb; } - #portfolio-section .portfolio-row .portfolio-description a:after { - content: ''; - width: 100%; - position: absolute; - left: 0; - bottom: 2px; - border-width: 0 0 .5px; - border-style: solid; - border-color: #cbcbcb; } - #portfolio-section .portfolio-row .used { - display: block; - width: 90%; - font-family: "Gotham", Helvetica, Arial, sans-serif; - margin-bottom: 100px; } - @media only screen and (max-width: 768px) { - #portfolio-section .portfolio-row .used { - margin-bottom: 70px; } } - @media only screen and (max-width: 400px) { - #portfolio-section .portfolio-row .used { - margin-bottom: 50px; } } - #portfolio-section .portfolio-row .used .used-items { - margin-left: 1em; } - @media only screen and (max-width: 660px) { - #portfolio-section .portfolio-row .used .used-items { - margin-left: 0; } } - #portfolio-section .portfolio-row .used .used-items .used-item { - display: inline-block; - padding: 7px 7px 5px; - margin-right: 5px; - margin-bottom: 10px; - color: #777777; - background: #333; - -webkit-border-radius: 3px; - border-radius: 3px; - text-transform: uppercase; - font-size: 10px; - font-weight: 500; - letter-spacing: .5px; } - -#contact-section .contact-description { - margin: 0 auto; - max-width: 440px; - font-size: 1.2em; } - @media only screen and (max-width: 1170px) { - #contact-section .contact-description { - padding: 0; } } - -#contact-section .form-wrapper { - width: 500px; - margin: 20px auto; - padding: 0; } - @media only screen and (max-width: 600px) { - #contact-section .form-wrapper { - width: 90%; } } - @media only screen and (max-width: 400px) { - #contact-section .form-wrapper { - width: 95%; } } - #contact-section .form-wrapper .input-wrapper { - padding: 0; - margin-bottom: 10px; - position: relative; - -webkit-transition: all 0.5s ease; - transition: all 0.5s ease; } - @media only screen and (max-width: 768px) { - #contact-section .form-wrapper .input-wrapper { - margin-bottom: 10px; } } - @media only screen and (max-width: 480px) { - #contact-section .form-wrapper .input-wrapper { - margin-bottom: 5px; } } - #contact-section .form-wrapper .input-wrapper:before { - content: ""; - position: absolute; - display: block; - width: 100%; - height: 2px; - background-color: #707070; - bottom: 0; - left: 0; - -webkit-transition: all 0.5s ease; - transition: all 0.5s ease; } - #contact-section .form-wrapper .input-wrapper:after { - background-color: #00b7c7; - content: ""; - position: absolute; - display: block; - width: 0px; - height: 2px; - bottom: 0; - left: 0; - -webkit-transition: all 0.5s ease; - transition: all 0.5s ease; } - #contact-section .form-wrapper .input-wrapper .input-label { - display: block; - padding-left: 4px; - font-size: 1.15em; - font-weight: 500; - -webkit-transform: translateY(25px); - -ms-transform: translateY(25px); - transform: translateY(25px); - color: #f2f2f2; - -webkit-transition: all 0.5s ease; - transition: all 0.5s ease; } - #contact-section .form-wrapper .input-wrapper .contact-input { - position: relative; - background: transparent; - width: 100%; - border: none; - padding: 20px 0 10px; - margin-bottom: -10px; - font-size: 1em; - line-height: 1.3; - color: #f2f2f2; - font-family: "Whitney", Helvetica, Arial, sans-serif; - resize: none; - display: block; - overflow: hidden; - -webkit-box-sizing: padding-box; - box-sizing: padding-box; - -webkit-transition: all 0.5s ease; - transition: all 0.5s ease; } - #contact-section .form-wrapper .input-wrapper .contact-input:focus { - outline: 0; - color: #f2f2f2; } - #contact-section .form-wrapper .is-active, - #contact-section .form-wrapper .is-completed { - padding: 15px 0 0 0; } - #contact-section .form-wrapper .is-active:after { - width: 100%; } - #contact-section .form-wrapper .is-active .input-label { - color: #00b7c7; } - #contact-section .form-wrapper .is-completed .input-label { - font-size: 14px; - font-weight: 700; - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); - padding: 0; } - #contact-section .form-wrapper .is-completed .contact-input { - padding-top: 10px; } - #contact-section .form-wrapper .message-btn { - display: block; - text-align: center; - cursor: pointer; - text-transform: uppercase; - font-weight: 700; - font-size: 14px; - font-family: "Gotham", Helvetica, Arial, sans-serif; - line-height: 1.5; - padding: 12px 20px 10px; - margin: 70px auto 0; - color: #00b7c7; - background: transparent; - border: 2px solid #00b7c7; - -webkit-border-radius: 3px; - border-radius: 3px; - position: relative; - overflow: hidden; - -webkit-transition: all 0.3s ease; - transition: all 0.3s ease; } - #contact-section .form-wrapper .message-btn:hover { - color: #f2f2f2; - background: #00b7c7; } - #contact-section .form-wrapper #message-label { - margin-bottom: 10px; } - -#footer { - background: -webkit-linear-gradient(45deg, #00b7c7 0%, #4d0ce8 100%); - background: linear-gradient(45deg, #00b7c7 0%, #4d0ce8 100%); - height: 200px; - min-height: 100px; - color: #f2f2f2; } - @media only screen and (max-width: 480px) { - #footer { - height: 200px; } } - #footer .section-wrapper { - padding: 30px 0px 40px; } - @media only screen and (max-width: 660px) { - #footer .section-wrapper { - padding: 30px 0; } } - #footer .soc { - display: block; - font-size: 0; - list-style: none; - margin: 0 auto; - padding: 0; - text-align: center; } - #footer .soc .soc-item { - display: inline-block; - margin: 1rem 0.5rem; } - @media only screen and (max-width: 400px) { - #footer .soc .soc-item { - margin: 1rem 0.3rem; } } - #footer .soc .soc-item a { - display: block; - position: relative; - color: #fff; - width: 2.5rem; - height: 2.5rem; - position: relative; } - @media only screen and (max-width: 330px) { - #footer .soc .soc-item a { - width: 2.2rem; - height: 2.2rem; } } - #footer .soc .soc-item a.icon { - color: #f2f2f2; - fill: #f2f2f2; } - #footer .soc .soc-item a.icon:hover { - color: #fff; - fill: #fff; - -webkit-transition: all 0.3s ease; - transition: all 0.3s ease; - -webkit-transform: scale(1.1) translateY(-5px); - -ms-transform: scale(1.1) translateY(-5px); - transform: scale(1.1) translateY(-5px); } - #footer .soc .soc-item a.instagram, #footer .soc .soc-item a.github { - width: 2.3rem; - height: 2.3rem; - position: relative; - top: -1px; } - @media only screen and (max-width: 330px) { - #footer .soc .soc-item a.instagram, #footer .soc .soc-item a.github { - width: 2rem; - height: 2rem; } } - #footer .soc .soc-item a em { - font-size: 14px; - line-height: 1.5; - margin-top: -0.75em; - position: absolute; - text-align: center; - top: 50%; - right: 0; - bottom: 0; - left: 0; } - #footer .footer-logo { - width: 30px; - margin: 0 auto; } - #footer .copyright-wrapper { - margin-top: 25px; - font-size: 13px; - color: #f2f2f2; - font-weight: 500; } - #footer .copyright-wrapper p { - margin: 0; - color: #f2f2f2; } - #footer .copyright-wrapper .please { - font-size: 12px; } - -.four-oh-four { - font-family: "Gotham", Helvetica, Arial, sans-serif; } - .four-oh-four canvas { - display: block; - vertical-align: bottom; } - .four-oh-four #particles-js { - position: fixed; - width: 100%; - height: 100%; - top: 0; - left: 0; - z-index: 1; - -webkit-animation: appear 1.4s ease 0s normal forwards 1 running; - animation: appear 1.4s ease 0s normal forwards 1 running; - background-color: #070525; - background-repeat: no-repeat; - background-size: cover; - background-position: center; - background-image: url("http://brittanychiang.com/img/404-bg.jpg"); } - .four-oh-four #particles-js:before { - content: ''; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: #141E30; - background: -webkit-linear-gradient(to bottom, #141E30, #243B55); - background: -webkit-gradient(linear, left top, left bottom, from(#141E30), to(#243B55)); - background: -webkit-linear-gradient(top, #141E30, #243B55); - background: linear-gradient(to bottom, #141E30, #243B55); - opacity: 0.7; } - .four-oh-four .count-particles { - background: #000022; - position: absolute; - top: 48px; - left: 0; - width: 80px; - color: #13E8E9; - font-size: .8em; - text-align: left; - text-indent: 4px; - line-height: 14px; - padding-bottom: 2px; - font-family: Helvetica, Arial, sans-serif; - font-weight: bold; - display: none; } - .four-oh-four .js-count-particles { - font-size: 1.1em; } - .four-oh-four #stats, - .four-oh-four .count-particles { - -webkit-user-select: none; - margin-top: 5px; - margin-left: 5px; } - .four-oh-four #stats { - -webkit-border-radius: 3px 3px 0 0; - border-radius: 3px 3px 0 0; - overflow: hidden; } - .four-oh-four .count-particles { - -webkit-border-radius: 0 0 3px 3px; - border-radius: 0 0 3px 3px; } - .four-oh-four .text-container { - text-align: center; - cursor: default; - position: relative; - top: 25vh; } - .four-oh-four .text-container .text { - display: inline-block; - color: #fff; - font-weight: 500; - line-height: 1; - text-transform: uppercase; - z-index: 2; - position: relative; } - .four-oh-four .text-container .text h1 { - font-family: "Gotham", Helvetica, Arial, sans-serif; - font-size: 10em; - font-weight: 500; - margin: 0 auto; - text-shadow: 0 5px 5px rgba(0, 0, 0, 0.5); } - .four-oh-four .text-container .text h3 { - font-size: 1em; - font-weight: 700; - margin: 15px 0 75px; - text-shadow: 0 3px 5px rgba(0, 0, 0, 0.5); } - .four-oh-four .text-container .text a { - display: block; - width: 200px; - margin: 0 auto; - color: #f2f2f2; - background: #ab473c; - font-size: 0.95em; - text-decoration: none; - padding: 15px; - -webkit-border-radius: 30px; - border-radius: 30px; - -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25); - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25); } - .four-oh-four .text-container .text a:hover { - background: #c74739; } - -*, -*:after, -*:before { - -webkit-box-sizing: border-box; - box-sizing: border-box; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; } - -html, -body { - margin: 0; - padding: 0; - font-family: "Whitney", Helvetica, Arial, sans-serif; - height: 100%; - color: #f2f2f2; - background-color: #1b1b1b; } - -h1 { - font-family: "Chronicle Display Bold", Georgia, serif; - margin: 0; } - -h2, h3 { - font-family: "Gotham", Helvetica, Arial, sans-serif; - margin: 10px 0; } - -p { - margin: 0; - margin-bottom: 10px; - font-family: "Whitney", Helvetica, Arial, sans-serif; } - -a { - text-decoration: none; - color: #f2f2f2; } - -ul { - list-style: none; - padding: 0; } - -.noScroll { - overflow: hidden; - height: 100%; } - -.center { - text-align: center; - margin-left: auto; - margin-right: auto; } - -.section { - width: 100%; - height: auto; - min-height: 700px; - padding: 0; - overflow: hidden; - color: #f2f2f2; - position: relative; } - .section:first-of-type { - background-color: #0054c7; } - .section:nth-of-type(odd) { - background-color: #5b5b5b; } - .section:nth-of-type(even) { - background-color: #1b1b1b; } - .section a { - display: block; } - .section .overlay-wrapper, - .section .section-wrapper { - padding: 100px; } - @media only screen and (max-width: 900px) { - .section .overlay-wrapper, - .section .section-wrapper { - padding: 100px 50px; } } - @media only screen and (max-width: 400px) { - .section .overlay-wrapper, - .section .section-wrapper { - padding: 100px 25px; } } - .section .overlay-wrapper h1, - .section .section-wrapper h1 { - font-size: 3em; } - .section .overlay-wrapper p, - .section .section-wrapper p { - font-size: 1.3em; - line-height: 1.5em; } - @media only screen and (max-width: 480px) { - .section .overlay-wrapper p, - .section .section-wrapper p { - font-size: 1em; } } - .section .overlay-wrapper .divider, - .section .section-wrapper .divider { - display: block; - margin: 30px 0px; - width: 100px; - height: 2px; - background-color: #00b7c7; } - .section .overlay-wrapper .center, - .section .section-wrapper .center { - margin-right: auto; - margin-left: auto; - text-align: center; } - .section .overlay-wrapper { - background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.61)), color-stop(rgba(0, 0, 0, 0.61)), color-stop(rgba(0, 0, 0, 0.61)), color-stop(rgba(0, 0, 0, 0.61)), to(rgba(0, 0, 0, 0.61))); - background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.61), rgba(0, 0, 0, 0.61), rgba(0, 0, 0, 0.61), rgba(0, 0, 0, 0.61), rgba(0, 0, 0, 0.61)); - background: linear-gradient(to bottom, rgba(0, 0, 0, 0.61), rgba(0, 0, 0, 0.61), rgba(0, 0, 0, 0.61), rgba(0, 0, 0, 0.61), rgba(0, 0, 0, 0.61)); - width: 100%; - height: 100%; } - -.skrollr-desktop body { - height: 100% !important; } - -#skrollr-body { - height: 100%; - overflow: visible; - position: relative; } - -.gap, -.skrollr .gap { - background: transparent !important; } - -.bg { - width: 100%; - height: 100%; - min-height: 100%; - background-position: center center; - background-repeat: no-repeat; - background-size: cover; - position: absolute; - z-index: -1; - overflow: hidden; } - -#intro-section .bg { - z-index: 0; - background-image: url("../img/bg-intro/intro-xl.jpg"); } - @media only screen and (max-width: 1170px) { - #intro-section .bg { - background-image: url("../img/bg-intro/intro-lg.jpg"); } } - @media only screen and (max-width: 900px) { - #intro-section .bg { - background-image: url("../img/bg-intro/intro-md.jpg"); } } - @media only screen and (max-width: 660px) { - #intro-section .bg { - background-image: url("../img/bg-intro/intro-sm.jpg"); } } - @media only screen and (max-width: 480px) { - #intro-section .bg { - background-image: url("../img/bg-intro/intro-xs.jpg"); } } - -#services-section .bg { - background-image: url("../img/bg-services/services-xl.jpg"); } - @media only screen and (max-width: 1170px) { - #services-section .bg { - background-image: url("../img/bg-services/services-lg.jpg"); } } - @media only screen and (max-width: 900px) { - #services-section .bg { - background-image: url("../img/bg-services/services-md.jpg"); } } - @media only screen and (max-width: 660px) { - #services-section .bg { - background-image: url("../img/bg-services/services-sm.jpg"); } } - @media only screen and (max-width: 480px) { - #services-section .bg { - background-image: url("../img/bg-services/services-xs.jpg"); } } - -#experience-section .bg { - background-image: url("../img/bg-experience/experience-xl.jpg"); } - @media only screen and (max-width: 1170px) { - #experience-section .bg { - background-image: url("../img/bg-experience/experience-lg.jpg"); } } - @media only screen and (max-width: 900px) { - #experience-section .bg { - background-image: url("../img/bg-experience/experience-md.jpg"); } } - @media only screen and (max-width: 660px) { - #experience-section .bg { - background-image: url("../img/bg-experience/experience-sm.jpg"); } } - @media only screen and (max-width: 480px) { - #experience-section .bg { - background-image: url("../img/bg-experience/experience-xs.jpg"); } } - -#contact-section .bg { - background-image: url("../img/bg-contact/contact-xl.jpg"); } - @media only screen and (max-width: 1170px) { - #contact-section .bg { - background-image: url("../img/bg-contact/contact-lg.jpg"); } } - @media only screen and (max-width: 900px) { - #contact-section .bg { - background-image: url("../img/bg-contact/contact-md.jpg"); } } - @media only screen and (max-width: 660px) { - #contact-section .bg { - background-image: url("../img/bg-contact/contact-sm.jpg"); } } - @media only screen and (max-width: 480px) { - #contact-section .bg { - background-image: url("../img/bg-contact/contact-xs.jpg"); } } +@font-face{font-family:Chronicle Display Bold;src:url(../fonts/chronicle-display/ChronicleDisplay-Bold.eot);src:url(../fonts/chronicle-display/ChronicleDisplay-Bold.eot?#iefix) format("embedded-opentype"),url(../fonts/chronicle-display/ChronicleDisplay-Bold.woff2) format("woff2"),url(../fonts/chronicle-display/ChronicleDisplay-Bold.woff) format("woff"),url(../fonts/chronicle-display/ChronicleDisplay-Bold.ttf) format("truetype"),url(../fonts/chronicle-display/ChronicleDisplay-Bold.svg#ChronicleDisplay-Bold) format("svg");font-weight:700;font-style:normal}@font-face{font-family:Whitney;src:url(../fonts/whitney/whitney-book.woff2) format("woff2"),url(../fonts/whitney/whitney-book.woff) format("woff"),url(../fonts/whitney/whitney-book.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:Whitney;src:url(../fonts/whitney/whitney-bookitalic.woff2) format("woff2"),url(../fonts/whitney/whitney-bookitalic.woff) format("woff"),url(../fonts/whitney/whitney-bookitalic.ttf) format("truetype");font-weight:400;font-style:italic}@font-face{font-family:Whitney;src:url(../fonts/whitney/whitney-medium.woff2) format("woff2"),url(../fonts/whitney/whitney-medium.woff) format("woff"),url(../fonts/whitney/whitney-medium.ttf) format("truetype");font-weight:500;font-style:normal}@font-face{font-family:Whitney;src:url(../fonts/whitney/whitney-mediumitalic.woff2) format("woff2"),url(../fonts/whitney/whitney-mediumitalic.woff) format("woff"),url(../fonts/whitney/whitney-mediumitalic.ttf) format("truetype");font-weight:500;font-style:italic}@font-face{font-family:Whitney;src:url(../fonts/whitney/whitney-bold.woff2) format("woff2"),url(../fonts/whitney/whitney-bold.woff) format("woff"),url(../fonts/whitney/whitney-bold.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:Gotham;src:url(../fonts/gotham/Gotham-Book.eot);src:url(../fonts/gotham/Gotham-Book.eot?#iefix) format("embedded-opentype"),url(../fonts/gotham/Gotham-Book.woff2) format("woff2"),url(../fonts/gotham/Gotham-Book.woff) format("woff"),url(../fonts/gotham/Gotham-Book.ttf) format("truetype"),url(../fonts/gotham/Gotham-Book.svg#Gotham-Book) format("svg");font-weight:400;font-style:normal}@font-face{font-family:Gotham;src:url(../fonts/gotham/Gotham-Medium.eot);src:url(../fonts/gotham/Gotham-Medium.eot?#iefix) format("embedded-opentype"),url(../fonts/gotham/Gotham-Medium.woff2) format("woff2"),url(../fonts/gotham/Gotham-Medium.woff) format("woff"),url(../fonts/gotham/Gotham-Medium.ttf) format("truetype"),url(../fonts/gotham/Gotham-Medium.svg#Gotham-Medium) format("svg");font-weight:500;font-style:normal}@font-face{font-family:Gotham;src:url(../fonts/gotham/Gotham-Bold.eot);src:url(../fonts/gotham/Gotham-Bold.eot?#iefix) format("embedded-opentype"),url(../fonts/gotham/Gotham-Bold.woff2) format("woff2"),url(../fonts/gotham/Gotham-Bold.woff) format("woff"),url(../fonts/gotham/Gotham-Bold.ttf) format("truetype"),url(../fonts/gotham/Gotham-Bold.svg#Gotham-Bold) format("svg");font-weight:700;font-style:normal}#dot-nav{position:fixed;right:34px;top:50%;bottom:auto;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:1;display:none}@media only screen and (max-width:768px){#dot-nav{display:none}}#dot-nav .dot-container{text-align:right}#dot-nav a{display:inline-block;-webkit-backface-visibility:hidden;backface-visibility:hidden}#dot-nav a:after{clear:both;content:"";display:table}#dot-nav a span{float:right;display:inline-block;-webkit-transform:scale(.6);transform:scale(.6)}#dot-nav a:hover span{-webkit-transform:scale(.75);transform:scale(.75)}#dot-nav a:hover .dot-label{opacity:1}#dot-nav a.is-selected .dot{background-color:#00b7c7}#dot-nav .dot{position:relative;top:7px;height:20px;width:20px;border-radius:50%;background-color:hsla(0,0%,100%,.25);-webkit-transition:background-color .5s,-webkit-transform .2s;transition:background-color .5s,-webkit-transform .2s;transition:transform .2s,background-color .5s;transition:transform .2s,background-color .5s,-webkit-transform .2s;-webkit-transform-origin:50% 50%;transform-origin:50% 50%}#dot-nav .dot-label{position:relative;top:3px;padding:.4em .5em;color:#f2f2f2;font-family:Gotham,Helvetica,Arial,sans-serif;font-size:1em;font-weight:500;text-transform:uppercase;opacity:0;-webkit-transition:opacity .2s,-webkit-transform .2s;transition:opacity .2s,-webkit-transform .2s;transition:transform .2s,opacity .2s;transition:transform .2s,opacity .2s,-webkit-transform .2s;-webkit-transform-origin:100% 50%;transform-origin:100% 50%}#toggle{position:fixed;top:25px;right:25px;height:27px;width:30px;cursor:pointer;z-index:100;display:none;-webkit-transition:opacity .25s ease;transition:opacity .25s ease}@media only screen and (max-width:768px){#toggle{display:block}}#toggle:hover{opacity:.7}#toggle.active .line{background:#f2f2f2}#toggle.active .top{-webkit-transform:translateY(10px) translateX(0) rotate(45deg);transform:translateY(10px) translateX(0) rotate(45deg)}#toggle.active .middle{opacity:0}#toggle.active .bottom{-webkit-transform:translateY(-10px) translateX(0) rotate(-45deg);transform:translateY(-10px) translateX(0) rotate(-45deg)}#toggle .line{background:#f2f2f2;border:none;border-radius:30px;cursor:pointer;width:100%;height:3px;position:absolute;top:0;left:0;-webkit-transition:all .35s ease;transition:all .35s ease}#toggle .line.middle{top:10px}#toggle .line.bottom{top:20px}.overlay{position:fixed;background:rgba(0,183,199,.95);top:0;left:0;width:100%;opacity:0;visibility:hidden;-webkit-transition:.3s;transition:.3s}.overlay,.overlay.open{height:100%;overflow:hidden;z-index:10}.overlay.open{opacity:1;visibility:visible}.overlay.open .menu-item{-webkit-animation:a .5s ease forwards;animation:a .5s ease forwards;-webkit-animation-delay:.35s;animation-delay:.35s}.overlay.open .menu-item:nth-of-type(2){-webkit-animation-delay:.4s;animation-delay:.4s}.overlay.open .menu-item:nth-of-type(3){-webkit-animation-delay:.45s;animation-delay:.45s}.overlay.open .menu-item:nth-of-type(4){-webkit-animation-delay:.5s;animation-delay:.5s}.overlay.open .menu-item:nth-of-type(5){-webkit-animation-delay:.55s;animation-delay:.55s}.overlay.open .menu-item:nth-of-type(6){-webkit-animation-delay:.6s;animation-delay:.6s}.overlay.open .menu-item:nth-of-type(7){-webkit-animation-delay:.65s;animation-delay:.65s}.overlay .logo{color:#f2f2f2;font-family:Chronicle Display Bold,Georgia,serif;font-size:30px;margin:14px 20px}@media only screen and (max-width:400px){.overlay .logo{font-size:24px;margin:17px 20px}}.overlay .logo .logo-img{width:35px;margin-right:10px;position:relative;top:5px}@media only screen and (max-width:400px){.overlay .logo .logo-img{width:30px;top:5px}}.overlay .overlay-menu{position:relative;height:70%;-webkit-transform:translateY(-50%);transform:translateY(-50%);top:45%;font-size:1.5em;font-family:Gotham,Helvetica,Arial,sans-serif;font-weight:700;text-align:center}.overlay .overlay-menu .menu-container{list-style:none;padding:0;margin:0 auto;display:inline-block;position:relative;height:100%}.overlay .overlay-menu .menu-container .menu-item{display:block;height:14.25%;height:14.28571%;min-height:50px;position:relative;opacity:0}.overlay .overlay-menu .menu-container .menu-item a{position:relative;color:#f2f2f2;text-decoration:none;text-transform:uppercase;overflow:hidden}.overlay .overlay-menu .menu-container .menu-item a:after,.overlay .overlay-menu .menu-container .menu-item a:before{content:'';position:absolute;width:0;height:2px;top:50%;background:#f2f2f2;margin-top:-2px;left:-3px}.overlay .overlay-menu .menu-container .menu-item a:after{-webkit-transition:width .7s cubic-bezier(.22,.61,.36,1);transition:width .7s cubic-bezier(.22,.61,.36,1)}.overlay .overlay-menu .menu-container .menu-item a:hover:after,.overlay .overlay-menu .menu-container .menu-item a:hover:before{width:105%}.overlay .overlay-menu .menu-container .menu-item a:hover:before{-webkit-transition:width .5s cubic-bezier(.22,.61,.36,1);transition:width .5s cubic-bezier(.22,.61,.36,1)}.overlay .overlay-menu .menu-container .menu-item a:hover:after{background:transparent;-webkit-transition:0s;transition:0s}@-webkit-keyframes a{0%{opacity:0;bottom:20%}to{opacity:1;bottom:0}}@keyframes a{0%{opacity:0;bottom:20%}to{opacity:1;bottom:0}}.block-btn{display:block;width:100%;min-height:100px;color:#f2f2f2;position:relative;background:#00909c;font-family:Gotham,Helvetica,Arial,sans-serif;font-size:1em;font-weight:700;text-transform:uppercase;text-align:center;letter-spacing:1px;overflow:hidden;-webkit-transition:background-color .5s linear;transition:background-color .5s linear}.block-btn:hover{background:#00b7c7;-webkit-transition:all .3s ease;transition:all .3s ease}.block-btn:hover .resume-text{opacity:0;visibility:hidden;-webkit-transform:translate3D(0,4em,0) scale(.25);transform:translate3D(0,4em,0) scale(.25)}.block-btn:hover .resume-img{opacity:1;visibility:visible;-webkit-transform:translate3D(0,0,0) scale(1);transform:translate3D(0,0,0) scale(1)}.block-btn .resume-img,.block-btn .resume-text{position:absolute;top:0;left:0;right:0;text-align:center}.block-btn .resume-text{margin:40px auto;opacity:1;visibility:visible;transition:transform .4s cubic-bezier(.425,-.195,.005,1.215),opacity .13333s linear,-webkit-transform .4s cubic-bezier(.425,-.195,.005,1.215);-webkit-transform:scale(1);transform:scale(1)}.block-btn .resume-img{width:50px;margin:25px auto;opacity:0;visibility:hidden;transition:transform .4s cubic-bezier(.425,-.195,.005,1.215),opacity .4s linear,-webkit-transform .4s cubic-bezier(.425,-.195,.005,1.215);-webkit-transform:translate3D(0,-4em,0) scale(0);transform:translate3D(0,-4em,0) scale(0)}#intro-section .intro-wrapper{padding:0;padding-bottom:20px}#intro-section .intro-wrapper .intro-body{width:100%;height:101vh;overflow:hidden;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@-webkit-keyframes b{0%{opacity:1;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes b{0%{opacity:1;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes c{0%{opacity:1;-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes c{0%{opacity:1;-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes d{0%,to{-webkit-transform:scaleX(0);transform:scaleX(0)}40%,60%{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes d{0%,to{-webkit-transform:scaleX(0);transform:scaleX(0)}40%,60%{-webkit-transform:scaleX(1);transform:scaleX(1)}}#intro-section .intro-wrapper .intro-body .intro-content{text-align:center;padding:0 5%;width:100%;position:relative;top:-5%}#intro-section .intro-wrapper .intro-body .intro-content .btn,#intro-section .intro-wrapper .intro-body .intro-content .heading,#intro-section .intro-wrapper .intro-body .intro-content .heading .name,#intro-section .intro-wrapper .intro-body .intro-content .subtext{opacity:0;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.no-cssanimations #intro-section .intro-wrapper .intro-body .intro-content .btn,.no-cssanimations #intro-section .intro-wrapper .intro-body .intro-content .heading,.no-cssanimations #intro-section .intro-wrapper .intro-body .intro-content .heading .name,.no-cssanimations #intro-section .intro-wrapper .intro-body .intro-content .subtext{opacity:1}#intro-section .intro-wrapper .intro-body .intro-content .heading{font-size:4.5em;font-weight:700;position:relative;padding-bottom:10px;color:transparent;overflow:hidden;opacity:1}@media only screen and (max-width:768px){#intro-section .intro-wrapper .intro-body .intro-content .heading .name:before{top:calc(100% + 18px)}}@media only screen and (max-width:480px){#intro-section .intro-wrapper .intro-body .intro-content .heading{font-size:4em}}#intro-section .intro-wrapper .intro-body .intro-content .heading:after{content:attr(data-content);position:absolute;top:0;left:0;height:100%;width:100%;color:#f2f2f2;-webkit-animation-name:b;animation-name:b;-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-delay:.7s;animation-delay:.7s}#intro-section .intro-wrapper .intro-body .intro-content .heading .name{position:relative;display:inline-block;opacity:1}#intro-section .intro-wrapper .intro-body .intro-content .heading .name:before{content:'';position:absolute;top:calc(100% + 8px);left:-1em;height:2px;width:calc(100% + 2em);background-color:#f2f2f2;-webkit-animation:d 1s .3s both;animation:d 1s .3s both}#intro-section .intro-wrapper .intro-body .intro-content .action-wrapper{overflow:hidden}#intro-section .intro-wrapper .intro-body .intro-content .action-wrapper .subtext{position:relative;margin:0;padding:0;-webkit-animation-name:c;animation-name:c;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-delay:.7s;animation-delay:.7s}#intro-section .intro-wrapper .intro-body .intro-content .action-wrapper .subtext .btn{display:inline-block;padding:1.2em 0;font-size:1.3rem;font-weight:500;line-height:1.5;color:#f2f2f2;text-transform:uppercase;font-family:Gotham,Helvetica,Arial,sans-serif;opacity:1;margin:0}@media only screen and (max-width:480px){#intro-section .intro-wrapper .intro-body .intro-content .action-wrapper .subtext .btn{font-size:1.1em}}#intro-section .intro-wrapper .intro-body .scroll-down-wrapper{position:absolute;bottom:50px;left:0;right:0;margin:0 auto;text-align:center;color:#f2f2f2}#intro-section .intro-wrapper .intro-body .scroll-down-wrapper .scroll-down{display:block;width:70px;margin:0 auto;-webkit-transition:all .3s ease;transition:all .3s ease}#intro-section .intro-wrapper .intro-body .scroll-down-wrapper .scroll-down:hover{-webkit-transition:all .3s ease;transition:all .3s ease}#intro-section .intro-wrapper .intro-body .scroll-down-wrapper .scroll-down:hover .logo{opacity:0}#intro-section .intro-wrapper .intro-body .scroll-down-wrapper .scroll-down:hover .scroll-down-text{opacity:1;visibility:visible}#intro-section .intro-wrapper .intro-body .scroll-down-wrapper .scroll-down .logo{width:35px;-webkit-transition:opacity .5s ease,visibility .5s;transition:opacity .5s ease,visibility .5s}#intro-section .intro-wrapper .intro-body .scroll-down-wrapper .scroll-down .scroll-down-text{color:#f2f2f2;font-family:Gotham,Helvetica,Arial,sans-serif;text-transform:uppercase;font-size:12px;font-weight:700;text-align:center;height:100%;opacity:0;padding-top:.5em;position:absolute;top:0;left:0;right:0;-webkit-transition:opacity .5s ease,visibility .5s;transition:opacity .5s ease,visibility .5s;visibility:hidden;width:100%}#intro-section .intro-wrapper .intro-body .scroll-down-wrapper .scroll-down .scroll-down-text .chevron{-webkit-transform:rotate(90deg);transform:rotate(90deg);height:20px;display:block;margin:10px auto}#about-section .section-subheading{width:60%;font-size:1.2em;font-weight:500;line-height:1.5;margin-top:1em}@media only screen and (max-width:1000px){#about-section .section-subheading{width:100%}}#about-section .about-wrapper{padding-right:20px}@media only screen and (max-width:900px){#about-section .about-wrapper{padding:0}}#about-section .about-wrapper .about-text-wrapper{display:inline-block;width:60%;vertical-align:top}@media only screen and (max-width:900px){#about-section .about-wrapper .about-text-wrapper{width:100%}}#about-section .about-wrapper .about-text-wrapper .about-text{margin-bottom:10px;font-size:1.15em}#about-section .about-wrapper .headshot{display:inline-block;width:35%;height:auto;border-radius:50%;margin-top:-100px;float:right;max-width:450px}@media only screen and (max-width:1000px){#about-section .about-wrapper .headshot{margin-top:0}}@media only screen and (max-width:900px){#about-section .about-wrapper .headshot{float:none;margin:10px 0 40px;width:300px}}@media only screen and (max-width:400px){#about-section .about-wrapper .headshot{width:250px}}#services-section a{display:inline-block;position:relative}#services-section a:after{content:'';width:100%;position:absolute;left:0;bottom:2px;border-width:0 0 .5px;border-style:solid;border-color:#cbcbcb}#services-section .services-wrapper{width:100%;margin:0 auto;padding:20px}@media only screen and (max-width:1000px){#services-section .services-wrapper{padding:0}}#services-section .service-row{width:100%;height:50%}@media only screen and (max-width:660px){#services-section .service-row{height:auto}}#services-section .service-row:nth-of-type(odd){border-bottom:1px solid hsla(0,0%,95%,.3)}@media only screen and (max-width:660px){#services-section .service-row:nth-of-type(odd){border:none}}#services-section .service-row:nth-of-type(even) .service-column{padding-top:40px}@media only screen and (max-width:660px){#services-section .service-row:nth-of-type(even) .service-column{padding-top:20px}}#services-section .service-row .service-column{display:inline-block;vertical-align:top;width:49%;height:100%;padding:20px;overflow:hidden;white-space:nowrap}@media only screen and (max-width:660px){#services-section .service-row .service-column{display:block;width:100%;border:none}}@media only screen and (max-width:480px){#services-section .service-row .service-column{padding:20px 0}}#services-section .service-row .service-column:nth-of-type(odd){border-right:1px solid hsla(0,0%,95%,.3)}@media only screen and (max-width:660px){#services-section .service-row .service-column:nth-of-type(odd){border:none}}#services-section .service-row .service-column .service-img{width:40px;margin-right:15px;display:inline-block;vertical-align:middle;position:relative;top:-5px}#services-section .service-row .service-column .sprite{width:40px;height:40px;margin-right:15px;display:inline-block;vertical-align:middle;position:relative;top:-3px;background-repeat:no-repeat;background-position:50%;background-size:100%}@media only screen and (max-width:400px){#services-section .service-row .service-column .sprite{width:35px;height:35px}}#services-section .service-row .service-column .sprite.webdev{background-image:url(../img/icons/html.png)}#services-section .service-row .service-column .sprite.ui{background-image:url(../img/icons/pencil.png);background-size:90%}#services-section .service-row .service-column .sprite.xd{background-image:url(../img/icons/ux-design.png)}#services-section .service-row .service-column .sprite.wit{background-image:url(../img/icons/internet.png);background-size:90%}#services-section .service-row .service-column .service-heading{font-family:Gotham,Helvetica,Arial,sans-serif;text-transform:uppercase;margin:0 0 30px;font-size:20px;display:inline-block}@media only screen and (max-width:1170px){#services-section .service-row .service-column .service-heading{font-size:2vw}}@media only screen and (max-width:660px){#services-section .service-row .service-column .service-heading{font-size:4vw}}@media only screen and (max-width:440px){#services-section .service-row .service-column .service-heading{font-size:16px}}#services-section .service-row .service-column .service-text{font-size:1.1em;margin-bottom:20px;white-space:normal}#skills-section .check-wrapper,#skills-section .flex-item,#skills-section .skills-flex-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}#skills-section .skills-flex-wrapper{font:100 30px Whitney;height:17em;-ms-flex-flow:column wrap;flex-flow:column wrap}@media only screen and (max-width:768px){#skills-section .skills-flex-wrapper{display:block;height:auto}}#skills-section .skills-flex-wrapper .skills-heading{font-family:Gotham,Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight:700;font-size:1.5vw}@media only screen and (max-width:768px){#skills-section .skills-flex-wrapper .skills-heading{font-size:18px}}#skills-section .skills-flex-wrapper .skills-heading .sprite{width:35px;height:35px;margin-right:10px;position:relative;top:7px;display:inline-block;vertical-align:text-bottom;background-repeat:no-repeat;background-position:50%;background-size:100%}#skills-section .skills-flex-wrapper .skills-heading .sprite.dev{background-image:url(../img/icons/settings.png)}#skills-section .skills-flex-wrapper .skills-heading .sprite.design{background-image:url(../img/icons/design.png);background-size:90%}#skills-section .skills-flex-wrapper .skills-heading .sprite.tools{background-image:url(../img/icons/repair-tools.png);background-size:90%}#skills-section .skills-flex-wrapper .skills-heading .sprite.knowledge{background-image:url(../img/icons/light-bulb.png)}#skills-section .skills-flex-wrapper .flex-item{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;min-height:200px;background:transparent;padding:15px}@media only screen and (max-width:1170px){#skills-section .skills-flex-wrapper .flex-item{padding-right:0}}@media only screen and (max-width:480px){#skills-section .skills-flex-wrapper .flex-item{padding:0}}@media only screen and (max-width:440px){#skills-section .skills-flex-wrapper .flex-item{display:block}}#skills-section .skills-flex-wrapper .flex-item:nth-child(1){width:40%;max-width:400px;min-height:450px}@media only screen and (max-width:1170px){#skills-section .skills-flex-wrapper .flex-item:nth-child(1){width:37%}}@media only screen and (max-width:1000px){#skills-section .skills-flex-wrapper .flex-item:nth-child(1){width:45%}}@media only screen and (max-width:768px){#skills-section .skills-flex-wrapper .flex-item:nth-child(1){width:100%;min-height:50px}}#skills-section .skills-flex-wrapper .flex-item:nth-child(2){width:60%;min-height:151px}@media only screen and (max-width:1000px){#skills-section .skills-flex-wrapper .flex-item:nth-child(2){width:55%}}@media only screen and (max-width:768px){#skills-section .skills-flex-wrapper .flex-item:nth-child(2){width:100%}}#skills-section .skills-flex-wrapper .flex-item:nth-child(3){min-height:299px;width:60%}@media only screen and (max-width:1000px){#skills-section .skills-flex-wrapper .flex-item:nth-child(3){width:55%}}@media only screen and (max-width:768px){#skills-section .skills-flex-wrapper .flex-item:nth-child(3){width:100%}}#skills-section .skills-flex-wrapper .dev-wrapper{display:block}#skills-section .skills-flex-wrapper .dev-wrapper .dev-item{display:inline-block;border:2px solid rgba(57,57,57,.5);border-radius:50%;text-align:center;margin:10px 10px 10px 0;padding:0;width:100px;height:100px;line-height:7;font-size:14px}@media only screen and (max-width:1170px){#skills-section .skills-flex-wrapper .dev-wrapper .dev-item{width:80px;height:80px;font-size:14px;line-height:5.5;margin:5px 5px 5px 0}}@media only screen and (max-width:768px){#skills-section .skills-flex-wrapper .dev-wrapper .dev-item{width:100px;height:100px;line-height:7;margin:1%}}@media only screen and (max-width:480px){#skills-section .skills-flex-wrapper .dev-wrapper .dev-item{width:80px;height:80px;line-height:5.5}}#skills-section .skills-flex-wrapper .design-wrapper{display:block}#skills-section .skills-flex-wrapper .design-wrapper .design-item{display:inline-block;margin:10px}@media only screen and (max-width:1170px){#skills-section .skills-flex-wrapper .design-wrapper .design-item{margin:10px 5px}}#skills-section .skills-flex-wrapper .design-wrapper .design-item .item-img{height:40px;-webkit-filter:grayscale(100%);filter:grayscale(100%)}#skills-section .check-wrapper .knowledge-wrapper,#skills-section .check-wrapper .tools-wrapper{width:50%;display:inline-block;vertical-align:top;overflow:hidden;white-space:nowrap}@media only screen and (max-width:440px){#skills-section .check-wrapper .knowledge-wrapper,#skills-section .check-wrapper .tools-wrapper{display:block;width:100%}}#skills-section .check-wrapper .knowledge-wrapper .list,#skills-section .check-wrapper .tools-wrapper .list{margin-top:30px;margin-left:20px}#skills-section .check-wrapper .knowledge-wrapper .list .list-item,#skills-section .check-wrapper .tools-wrapper .list .list-item{margin:10px 0;font-size:16px}#skills-section .check-wrapper .knowledge-wrapper .list .list-item .item-svg,#skills-section .check-wrapper .tools-wrapper .list .list-item .item-svg{margin-right:10px;width:12px;height:12px;color:#fff;fill:#fff}#experience-section .experience-description{padding:0 100px;font-size:1.2em}@media only screen and (max-width:1170px){#experience-section .experience-description{padding:0}}#experience-section .experience-description a{display:inline-block;position:relative;font-weight:500;-webkit-transition:all .3s ease;transition:all .3s ease}#experience-section .experience-description a:after{content:'';width:100%;position:absolute;left:0;bottom:2px;border-width:0 0 .5px;border-style:solid;border-color:#f2f2f2;-webkit-transition:all .3s ease;transition:all .3s ease}#experience-section .experience-wrapper{padding:30px}@media only screen and (max-width:1000px){#experience-section .experience-wrapper{padding-left:0}}@media only screen and (max-width:600px){#experience-section .experience-wrapper{padding:30px 0}}#experience-section .experience-wrapper #timeline{position:relative;padding:2em 0;width:100%;max-width:1170px;margin:0 auto}#experience-section .experience-wrapper #timeline:before{content:'';position:absolute;top:0;left:calc(50% - 1px);height:100%;width:2px;background:#00b7c7}@media only screen and (max-width:1000px){#experience-section .experience-wrapper #timeline:before{left:20px;margin-left:0}}@media only screen and (max-width:480px){#experience-section .experience-wrapper #timeline:before{left:10px}}#experience-section .experience-wrapper #timeline:after{content:'';display:table;clear:both}#experience-section .experience-wrapper #timeline .timeline-block{position:relative;-webkit-transition:all .3s ease;transition:all .3s ease;margin:1em 0}#experience-section .experience-wrapper #timeline .timeline-block:after{content:"";display:table;clear:both}#experience-section .experience-wrapper #timeline .timeline-block:first-child{margin-top:0}#experience-section .experience-wrapper #timeline .timeline-block:last-child{margin-bottom:0}@media only screen and (max-width:1170px){#experience-section .experience-wrapper #timeline .timeline-block:nth-child(odd){margin-top:0;margin-bottom:2em}}#experience-section .experience-wrapper #timeline .timeline-block:nth-child(odd) .timeline-content{float:left}@media only screen and (max-width:1170px){#experience-section .experience-wrapper #timeline .timeline-block:nth-child(odd) .timeline-content{right:10px}}@media only screen and (max-width:1000px){#experience-section .experience-wrapper #timeline .timeline-block:nth-child(odd) .timeline-content{right:auto}}#experience-section .experience-wrapper #timeline .timeline-block:nth-child(odd) .timeline-content:before{top:24px;left:100%;border-color:transparent;border-left-color:#1b1b1b}@media only screen and (max-width:1000px){#experience-section .experience-wrapper #timeline .timeline-block:nth-child(odd) .timeline-content:before{top:16px;left:auto;border-color:transparent;border-right-color:#1b1b1b}}#experience-section .experience-wrapper #timeline .timeline-block:nth-child(odd) .timeline-content .date{left:auto;text-align:right;right:-33%}#experience-section .experience-wrapper #timeline .timeline-block:nth-child(even) .date{text-align:right;left:auto;right:55%}@media only screen and (max-width:1000px){#experience-section .experience-wrapper #timeline .timeline-block:nth-child(even) .date{text-align:left;font-size:14px;color:#777;position:relative;top:-40px;left:95px;right:auto}}@media only screen and (max-width:480px){#experience-section .experience-wrapper #timeline .timeline-block:nth-child(even) .date{left:66px}}#experience-section .experience-wrapper #timeline .timeline-block .timeline-img{position:absolute;width:50px;height:50px;top:15px;left:50%;margin-left:-25px;border-radius:50%;background:#212121;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:all .3s ease;transition:all .3s ease}@media only screen and (max-width:1000px){#experience-section .experience-wrapper #timeline .timeline-block .timeline-img{top:5px;left:20px}}@media only screen and (max-width:480px){#experience-section .experience-wrapper #timeline .timeline-block .timeline-img{width:40px;height:40px;top:10px;left:15px}}#experience-section .experience-wrapper #timeline .timeline-block .timeline-img .sprite{display:block;width:24px;height:24px;position:relative;left:50%;top:50%;margin-left:-12px;margin-top:-12px;background-repeat:no-repeat;background-size:100%}@media only screen and (max-width:480px){#experience-section .experience-wrapper #timeline .timeline-block .timeline-img .sprite{width:20px;height:20px;margin-left:-10px;margin-top:-10px}}#experience-section .experience-wrapper #timeline .timeline-block .timeline-img .sprite.university{background-image:url(../img/icons/graduate-cap.png)}#experience-section .experience-wrapper #timeline .timeline-block .timeline-img .sprite.research{background-image:url(../img/icons/search.png)}#experience-section .experience-wrapper #timeline .timeline-block .timeline-img .sprite.industry{background-image:url(../img/icons/briefcase.png)}#experience-section .experience-wrapper #timeline .timeline-block .timeline-img .sprite.academic{background-image:url(../img/icons/notebook.png)}#experience-section .experience-wrapper #timeline .timeline-block .timeline-content{float:right;position:relative;background:#1b1b1b;border-radius:3px;margin-left:0;padding:1.5em;width:45%;opacity:.85;-webkit-transition:all .3s ease;transition:all .3s ease}@media only screen and (max-width:1170px){#experience-section .experience-wrapper #timeline .timeline-block .timeline-content{left:0;padding-bottom:2.5em}}@media only screen and (max-width:1000px){#experience-section .experience-wrapper #timeline .timeline-block .timeline-content{margin-left:70px;right:auto;width:auto}}@media only screen and (max-width:480px){#experience-section .experience-wrapper #timeline .timeline-block .timeline-content{margin-left:50px;padding:1.5em 1em 2.5em}}#experience-section .experience-wrapper #timeline .timeline-block .timeline-content:hover{opacity:1}#experience-section .experience-wrapper #timeline .timeline-block .timeline-content:hover+.timeline-img{background:#00b7c7}#experience-section .experience-wrapper #timeline .timeline-block .timeline-content:before{content:'';position:absolute;top:24px;right:100%;height:0;width:0;border:15px solid transparent;border-color:transparent;border-right-color:#1b1b1b}@media only screen and (max-width:1000px){#experience-section .experience-wrapper #timeline .timeline-block .timeline-content:before{top:16px;right:100%;left:auto;border:15px solid transparent;border-right:15px solid #1b1b1b}}#experience-section .experience-wrapper #timeline .timeline-block .timeline-content:after{content:"";display:table;clear:both}#experience-section .experience-wrapper #timeline .timeline-block .timeline-content .position{color:#f2f2f2;margin:5px 0 10px;font-size:18px;display:inline-block;text-transform:uppercase;font-family:Gotham,Helvetica,Arial,sans-serif}#experience-section .experience-wrapper #timeline .timeline-block .timeline-content .company{margin:0 0 10px;font-size:15px;font-weight:500}#experience-section .experience-wrapper #timeline .timeline-block .timeline-content .company a{color:#00b7c7;display:inline;-webkit-transition:all .3s ease;transition:all .3s ease}#experience-section .experience-wrapper #timeline .timeline-block .timeline-content .company a:hover{color:#00dded}#experience-section .experience-wrapper #timeline .timeline-block .timeline-content .job-desc{margin:1em 0;font-size:1em;line-height:1.5}@media only screen and (max-width:480px){#experience-section .experience-wrapper #timeline .timeline-block .timeline-content .job-desc{font-size:1em;line-height:1.5}}#experience-section .experience-wrapper #timeline .timeline-block .date{font-size:1em;font-weight:500;display:inline-block;color:#f2f2f2;font-family:Gotham,Helvetica,Arial,sans-serif;text-transform:uppercase;position:absolute;width:100%;left:55%;top:30px}@media only screen and (max-width:1000px){#experience-section .experience-wrapper #timeline .timeline-block .date{font-size:14px;color:#777;position:absolute;top:auto;bottom:20px;left:95px}}@media only screen and (max-width:480px){#experience-section .experience-wrapper #timeline .timeline-block .date{left:66px}}#experience-section .down-arrow{display:block;margin:0 auto;border-color:transparent;border-top-color:#00b7c7;border-style:solid;border-width:15px 7px 0;width:0;height:0;position:relative;line-height:0}@media only screen and (max-width:1000px){#experience-section .down-arrow{margin-left:13.5px}}@media only screen and (max-width:480px){#experience-section .down-arrow{margin-left:3.5px}}#portfolio-section .section-wrapper{padding-bottom:50px}#portfolio-section a{display:inline-block}#portfolio-section .portfolio-item-wrapper .divider:last-of-type{display:none}#portfolio-section .portfolio-row{margin:0;padding-top:50px;display:block}#portfolio-section .portfolio-row .screenshots{position:relative;overflow:hidden;display:block;width:95%}#portfolio-section .portfolio-row .screenshots:after,#portfolio-section .portfolio-row .screenshots:before{box-sizing:inherit;padding:0;margin:0}#portfolio-section .portfolio-row .screenshots:after{display:block;padding-top:45.5%;content:""}#portfolio-section .portfolio-row .screenshots.screentime:after{display:block;padding-top:5.5%;content:""}@media only screen and (max-width:900px){#portfolio-section .portfolio-row .screenshots.screentime:after{padding-top:7.5%}}@media only screen and (max-width:660px){#portfolio-section .portfolio-row .screenshots.screentime:after{padding-top:10%}}@media only screen and (max-width:480px){#portfolio-section .portfolio-row .screenshots.screentime:after{padding-top:15%}}#portfolio-section .portfolio-row .screenshots .img-lg,#portfolio-section .portfolio-row .screenshots .img-md,#portfolio-section .portfolio-row .screenshots .img-sm{border:0;position:absolute;right:0;bottom:0;border-radius:2px;box-shadow:0 5px 10px 0 rgba(0,0,0,.75)}#portfolio-section .portfolio-row .screenshots .img-lg:after,#portfolio-section .portfolio-row .screenshots .img-md:after,#portfolio-section .portfolio-row .screenshots .img-sm:after{content:"";display:block}#portfolio-section .portfolio-row .screenshots .img-lg{width:70%;left:0;z-index:1}#portfolio-section .portfolio-row .screenshots .img-lg:after{padding-top:65%}#portfolio-section .portfolio-row .screenshots .img-md{width:27%;right:14%;z-index:2}#portfolio-section .portfolio-row .screenshots .img-md:after{padding-top:110%}#portfolio-section .portfolio-row .screenshots .img-sm{width:15%;right:1rem;z-index:3;box-shadow:0 5px 5px 0 rgba(0,0,0,.75)}#portfolio-section .portfolio-row .screenshots .img-sm:after{padding-top:145%}#portfolio-section .portfolio-row .screenshots .img-screentime{position:relative;top:0;border:0;border-radius:2px;box-shadow:0 5px 10px 0 rgba(0,0,0,.75);width:26%;margin-right:-20px}@media only screen and (max-width:768px){#portfolio-section .portfolio-row .screenshots .img-screentime{width:27%}}@media only screen and (max-width:480px){#portfolio-section .portfolio-row .screenshots .img-screentime{width:25%;margin-right:-10px}}#portfolio-section .portfolio-row .screenshots .img-screentime:nth-of-type(2){top:15px}@media only screen and (max-width:600px){#portfolio-section .portfolio-row .screenshots .img-screentime:nth-of-type(2){top:10px}}#portfolio-section .portfolio-row .screenshots .img-screentime:nth-of-type(3){top:30px}@media only screen and (max-width:600px){#portfolio-section .portfolio-row .screenshots .img-screentime:nth-of-type(3){top:20px}}#portfolio-section .portfolio-row .screenshots .img-screentime:nth-of-type(4){top:45px}@media only screen and (max-width:600px){#portfolio-section .portfolio-row .screenshots .img-screentime:nth-of-type(4){top:30px}}#portfolio-section .portfolio-row .screenshots .img-screentime:after{content:"";display:block}#portfolio-section .portfolio-row .description-title-container{position:relative;width:90%;margin-top:30px;margin-left:1em;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;display:-webkit-flex;-webkit-flex-wrap:nowrap;-webkit-flex-direction:row;-webkit-justify-content:flex-end;-webkit-align-content:stretch;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-line-pack:stretch;align-content:stretch}@media only screen and (max-width:768px){#portfolio-section .portfolio-row .description-title-container{width:95%}}@media only screen and (max-width:660px){#portfolio-section .portfolio-row .description-title-container{width:100%;margin-left:0}}@media only screen and (max-width:600px){#portfolio-section .portfolio-row .description-title-container{display:block}}#portfolio-section .portfolio-row .description-title-container .description-title{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-bottom:20px;font-family:Gotham,Helvetica,Arial,sans-serif;text-transform:uppercase}#portfolio-section .portfolio-row .description-title-container .description-buttons a{padding:10px 15px;background:transparent;border:2px solid #00b7c7;border-radius:3px;margin:0 5px;color:#00b7c7;font-family:Gotham,Helvetica,Arial,sans-serif;font-weight:500;text-transform:uppercase;-webkit-transition:all .3s ease;transition:all .3s ease}@media only screen and (max-width:660px){#portfolio-section .portfolio-row .description-title-container .description-buttons a{font-size:14px;padding:7px 10px}}@media only screen and (max-width:600px){#portfolio-section .portfolio-row .description-title-container .description-buttons a{margin:0 10px 30px 0}}#portfolio-section .portfolio-row .description-title-container .description-buttons a:hover{background:#00b7c7;color:#f2f2f2}#portfolio-section .portfolio-row .portfolio-description{display:block;width:90%;margin-top:15px;margin-left:1rem;margin-bottom:25px;font-size:1.1em;color:#cbcbcb}@media only screen and (max-width:660px){#portfolio-section .portfolio-row .portfolio-description{width:100%;margin-left:0;margin-top:10px}}@media only screen and (max-width:480px){#portfolio-section .portfolio-row .portfolio-description{font-size:1em}}#portfolio-section .portfolio-row .portfolio-description a{position:relative;font-weight:500;color:#cbcbcb}#portfolio-section .portfolio-row .portfolio-description a:after{content:'';width:100%;position:absolute;left:0;bottom:2px;border-width:0 0 .5px;border-style:solid;border-color:#cbcbcb}#portfolio-section .portfolio-row .used{display:block;width:90%;font-family:Gotham,Helvetica,Arial,sans-serif;margin-bottom:100px}@media only screen and (max-width:768px){#portfolio-section .portfolio-row .used{margin-bottom:70px}}@media only screen and (max-width:400px){#portfolio-section .portfolio-row .used{margin-bottom:50px}}#portfolio-section .portfolio-row .used .used-items{margin-left:1em}@media only screen and (max-width:660px){#portfolio-section .portfolio-row .used .used-items{margin-left:0}}#portfolio-section .portfolio-row .used .used-items .used-item{display:inline-block;padding:7px 7px 5px;margin-right:5px;margin-bottom:10px;color:#777;background:#333;border-radius:3px;text-transform:uppercase;font-size:10px;font-weight:500;letter-spacing:.5px}#contact-section .contact-description{margin:0 auto;max-width:440px;font-size:1.2em}@media only screen and (max-width:1170px){#contact-section .contact-description{padding:0}}#contact-section .form-wrapper{width:500px;margin:20px auto;padding:0}@media only screen and (max-width:600px){#contact-section .form-wrapper{width:90%}}@media only screen and (max-width:400px){#contact-section .form-wrapper{width:95%}}#contact-section .form-wrapper .input-wrapper{padding:0;margin-bottom:10px;position:relative;-webkit-transition:all .5s ease;transition:all .5s ease}@media only screen and (max-width:768px){#contact-section .form-wrapper .input-wrapper{margin-bottom:10px}}@media only screen and (max-width:480px){#contact-section .form-wrapper .input-wrapper{margin-bottom:5px}}#contact-section .form-wrapper .input-wrapper:before{width:100%;background-color:#707070}#contact-section .form-wrapper .input-wrapper:after,#contact-section .form-wrapper .input-wrapper:before{content:"";position:absolute;display:block;height:2px;bottom:0;left:0;-webkit-transition:all .5s ease;transition:all .5s ease}#contact-section .form-wrapper .input-wrapper:after{background-color:#00b7c7;width:0}#contact-section .form-wrapper .input-wrapper .input-label{display:block;padding-left:4px;font-size:1.15em;font-weight:500;-webkit-transform:translateY(25px);transform:translateY(25px);color:#f2f2f2;-webkit-transition:all .5s ease;transition:all .5s ease}#contact-section .form-wrapper .input-wrapper .contact-input{position:relative;background:transparent;width:100%;border:none;padding:20px 0 10px;margin-bottom:-10px;font-size:1em;line-height:1.3;color:#f2f2f2;font-family:Whitney,Helvetica,Arial,sans-serif;resize:none;display:block;overflow:hidden;box-sizing:padding-box;-webkit-transition:all .5s ease;transition:all .5s ease}#contact-section .form-wrapper .input-wrapper .contact-input:focus{outline:0;color:#f2f2f2}#contact-section .form-wrapper .is-active,#contact-section .form-wrapper .is-completed{padding:15px 0 0}#contact-section .form-wrapper .is-active:after{width:100%}#contact-section .form-wrapper .is-active .input-label{color:#00b7c7}#contact-section .form-wrapper .is-completed .input-label{font-size:14px;font-weight:700;-webkit-transform:translateY(0);transform:translateY(0);padding:0}#contact-section .form-wrapper .is-completed .contact-input{padding-top:10px}#contact-section .form-wrapper .message-btn{display:block;text-align:center;cursor:pointer;text-transform:uppercase;font-weight:700;font-size:14px;font-family:Gotham,Helvetica,Arial,sans-serif;line-height:1.5;padding:12px 20px 10px;margin:70px auto 0;color:#00b7c7;background:transparent;border:2px solid #00b7c7;border-radius:3px;position:relative;overflow:hidden;-webkit-transition:all .3s ease;transition:all .3s ease}#contact-section .form-wrapper .message-btn:hover{color:#f2f2f2;background:#00b7c7}#contact-section .form-wrapper #message-label{margin-bottom:10px}#footer{background:-webkit-linear-gradient(45deg,#00b7c7,#4d0ce8);background:linear-gradient(45deg,#00b7c7,#4d0ce8);height:200px;min-height:100px;color:#f2f2f2}@media only screen and (max-width:480px){#footer{height:200px}}#footer .section-wrapper{padding:30px 0 40px}@media only screen and (max-width:660px){#footer .section-wrapper{padding:30px 0}}#footer .soc{display:block;font-size:0;list-style:none;margin:0 auto;padding:0;text-align:center}#footer .soc .soc-item{display:inline-block;margin:1rem .5rem}@media only screen and (max-width:400px){#footer .soc .soc-item{margin:1rem .3rem}}#footer .soc .soc-item a{display:block;color:#fff;width:2.5rem;height:2.5rem;position:relative}@media only screen and (max-width:330px){#footer .soc .soc-item a{width:2.2rem;height:2.2rem}}#footer .soc .soc-item a.icon{color:#f2f2f2;fill:#f2f2f2}#footer .soc .soc-item a.icon:hover{color:#fff;fill:#fff;-webkit-transition:all .3s ease;transition:all .3s ease;-webkit-transform:scale(1.1) translateY(-5px);transform:scale(1.1) translateY(-5px)}#footer .soc .soc-item a.github,#footer .soc .soc-item a.instagram{width:2.3rem;height:2.3rem;position:relative;top:-1px}@media only screen and (max-width:330px){#footer .soc .soc-item a.github,#footer .soc .soc-item a.instagram{width:2rem;height:2rem}}#footer .soc .soc-item a em{font-size:14px;line-height:1.5;margin-top:-.75em;position:absolute;text-align:center;top:50%;right:0;bottom:0;left:0}#footer .footer-logo{width:30px;margin:0 auto}#footer .copyright-wrapper{margin-top:25px;font-size:13px;color:#f2f2f2;font-weight:500}#footer .copyright-wrapper p{margin:0;color:#f2f2f2}#footer .copyright-wrapper .please{font-size:12px}.four-oh-four{font-family:Gotham,Helvetica,Arial,sans-serif}.four-oh-four canvas{display:block;vertical-align:bottom}.four-oh-four #particles-js{position:fixed;width:100%;height:100%;top:0;left:0;z-index:1;-webkit-animation:appear 1.4s ease 0s normal forwards 1 running;animation:appear 1.4s ease 0s normal forwards 1 running;background-color:#070525;background-repeat:no-repeat;background-size:cover;background-position:50%;background-image:url(http://brittanychiang.com/img/404-bg.jpg)}.four-oh-four #particles-js:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:#141e30;background:-webkit-linear-gradient(180deg,#141e30,#243b55);background:-webkit-gradient(linear,left top,left bottom,from(#141e30),to(#243b55));background:-webkit-linear-gradient(top,#141e30,#243b55);background:linear-gradient(180deg,#141e30,#243b55);opacity:.7}.four-oh-four .count-particles{background:#002;position:absolute;top:48px;left:0;width:80px;color:#13e8e9;font-size:.8em;text-align:left;text-indent:4px;line-height:14px;padding-bottom:2px;font-family:Helvetica,Arial,sans-serif;font-weight:700;display:none}.four-oh-four .js-count-particles{font-size:1.1em}.four-oh-four #stats,.four-oh-four .count-particles{-webkit-user-select:none;margin-top:5px;margin-left:5px}.four-oh-four #stats{border-radius:3px 3px 0 0;overflow:hidden}.four-oh-four .count-particles{border-radius:0 0 3px 3px}.four-oh-four .text-container{text-align:center;cursor:default;position:relative;top:25vh}.four-oh-four .text-container .text{display:inline-block;color:#fff;font-weight:500;line-height:1;text-transform:uppercase;z-index:2;position:relative}.four-oh-four .text-container .text h1{font-family:Gotham,Helvetica,Arial,sans-serif;font-size:10em;font-weight:500;margin:0 auto;text-shadow:0 5px 5px rgba(0,0,0,.5)}.four-oh-four .text-container .text h3{font-size:1em;font-weight:700;margin:15px 0 75px;text-shadow:0 3px 5px rgba(0,0,0,.5)}.four-oh-four .text-container .text a{display:block;width:200px;margin:0 auto;color:#f2f2f2;background:#ab473c;font-size:.95em;text-decoration:none;padding:15px;border-radius:30px;-webkit-transition:all .3s cubic-bezier(.4,0,.2,1);transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 5px 0 rgba(0,0,0,.25)}.four-oh-four .text-container .text a:hover{background:#c74739}*,:after,:before{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body,html{margin:0;padding:0;font-family:Whitney,Helvetica,Arial,sans-serif;height:100%;color:#f2f2f2;background-color:#1b1b1b}h1{font-family:Chronicle Display Bold,Georgia,serif;margin:0}h2,h3{font-family:Gotham,Helvetica,Arial,sans-serif;margin:10px 0}p{margin:0;margin-bottom:10px;font-family:Whitney,Helvetica,Arial,sans-serif}a{text-decoration:none;color:#f2f2f2}ul{list-style:none;padding:0}.noScroll{overflow:hidden;height:100%}.center{text-align:center;margin-left:auto;margin-right:auto}.section{width:100%;height:auto;min-height:700px;padding:0;overflow:hidden;color:#f2f2f2;position:relative}.section:first-of-type{background-color:#0054c7}.section:nth-of-type(odd){background-color:#5b5b5b}.section:nth-of-type(even){background-color:#1b1b1b}.section a{display:block}.section .overlay-wrapper,.section .section-wrapper{padding:100px}@media only screen and (max-width:900px){.section .overlay-wrapper,.section .section-wrapper{padding:100px 50px}}@media only screen and (max-width:400px){.section .overlay-wrapper,.section .section-wrapper{padding:100px 25px}}.section .overlay-wrapper h1,.section .section-wrapper h1{font-size:3em}.section .overlay-wrapper p,.section .section-wrapper p{font-size:1.3em;line-height:1.5em}@media only screen and (max-width:480px){.section .overlay-wrapper p,.section .section-wrapper p{font-size:1em}}.section .overlay-wrapper .divider,.section .section-wrapper .divider{display:block;margin:30px 0;width:100px;height:2px;background-color:#00b7c7}.section .overlay-wrapper .center,.section .section-wrapper .center{margin-right:auto;margin-left:auto;text-align:center}.section .overlay-wrapper{background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.61)),color-stop(rgba(0,0,0,.61)),color-stop(rgba(0,0,0,.61)),color-stop(rgba(0,0,0,.61)),to(rgba(0,0,0,.61)));background:-webkit-linear-gradient(top,rgba(0,0,0,.61),rgba(0,0,0,.61),rgba(0,0,0,.61),rgba(0,0,0,.61),rgba(0,0,0,.61));background:linear-gradient(180deg,rgba(0,0,0,.61),rgba(0,0,0,.61),rgba(0,0,0,.61),rgba(0,0,0,.61),rgba(0,0,0,.61));width:100%;height:100%}.skrollr-desktop body{height:100%!important}#skrollr-body{height:100%;overflow:visible;position:relative}.gap,.skrollr .gap{background:transparent!important}.bg{width:100%;height:100%;min-height:100%;background-position:50%;background-repeat:no-repeat;background-size:cover;position:absolute;z-index:-1;overflow:hidden}#intro-section .bg{z-index:0;background-image:url(../img/bg-intro/intro-xl.jpg)}@media only screen and (max-width:1170px){#intro-section .bg{background-image:url(../img/bg-intro/intro-lg.jpg)}}@media only screen and (max-width:900px){#intro-section .bg{background-image:url(../img/bg-intro/intro-md.jpg)}}@media only screen and (max-width:660px){#intro-section .bg{background-image:url(../img/bg-intro/intro-sm.jpg)}}@media only screen and (max-width:480px){#intro-section .bg{background-image:url(../img/bg-intro/intro-xs.jpg)}}#services-section .bg{background-image:url(../img/bg-services/services-xl.jpg)}@media only screen and (max-width:1170px){#services-section .bg{background-image:url(../img/bg-services/services-lg.jpg)}}@media only screen and (max-width:900px){#services-section .bg{background-image:url(../img/bg-services/services-md.jpg)}}@media only screen and (max-width:660px){#services-section .bg{background-image:url(../img/bg-services/services-sm.jpg)}}@media only screen and (max-width:480px){#services-section .bg{background-image:url(../img/bg-services/services-xs.jpg)}}#experience-section .bg{background-image:url(../img/bg-experience/experience-xl.jpg)}@media only screen and (max-width:1170px){#experience-section .bg{background-image:url(../img/bg-experience/experience-lg.jpg)}}@media only screen and (max-width:900px){#experience-section .bg{background-image:url(../img/bg-experience/experience-md.jpg)}}@media only screen and (max-width:660px){#experience-section .bg{background-image:url(../img/bg-experience/experience-sm.jpg)}}@media only screen and (max-width:480px){#experience-section .bg{background-image:url(../img/bg-experience/experience-xs.jpg)}}#contact-section .bg{background-image:url(../img/bg-contact/contact-xl.jpg)}@media only screen and (max-width:1170px){#contact-section .bg{background-image:url(../img/bg-contact/contact-lg.jpg)}}@media only screen and (max-width:900px){#contact-section .bg{background-image:url(../img/bg-contact/contact-md.jpg)}}@media only screen and (max-width:660px){#contact-section .bg{background-image:url(../img/bg-contact/contact-sm.jpg)}}@media only screen and (max-width:480px){#contact-section .bg{background-image:url(../img/bg-contact/contact-xs.jpg)}} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 2b9a781..e4b8705 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -3,13 +3,13 @@ var browserSync = require('browser-sync'); var cp = require('child_process'); var htmlmin = require('gulp-htmlmin'); var sass = require('gulp-sass'); +var cssnano = require('gulp-cssnano'); var cleanCSS = require('gulp-clean-css'); var prefix = require('gulp-autoprefixer'); var jshint = require('gulp-jshint'); var babel = require('gulp-babel'); var uglify = require('gulp-uglify'); var imagemin = require('gulp-imagemin'); -var deploy = require('gulp-gh-pages'); var jekyll = process.platform === 'win32' ? 'jekyll.bat' : 'jekyll'; var messages = { @@ -46,19 +46,20 @@ gulp.task('htmlmin', function() { // Compile files from _scss into both _site/css (for live injecting) and site (for future jekyll builds) gulp.task('styles', function() { - return gulp.src('_scss/main.scss') + return gulp.src('_scss/*.scss') .pipe(sass({ includePaths: ['scss'], onError: browserSync.notify }) ) .pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], {cascade: true})) + .pipe(cssnano()) .pipe(gulp.dest('_site/css')) .pipe(browserSync.reload({stream:true})) .pipe(gulp.dest('css')); }); - +// Compile files from js folder into both _site/js folder (for live injecting) gulp.task('scripts', function() { return gulp.src('js/*.js') .pipe(jshint()) @@ -74,7 +75,7 @@ gulp.task('scripts', function() { gulp.task('watch', function () { gulp.watch(['_scss/**/*.scss','_scss/*.scss'], ['styles']); gulp.watch(['js/*.js'], ['scripts']); - gulp.watch(['index.html', '404.html', '_layouts/*.html', '_posts/*', '_includes/*.html', '_drafts/*', '**/*.html'], ['htmlmin', 'jekyll-rebuild']); + gulp.watch(['index.html', '404.html', '_layouts/*.html', '_posts/*', '_includes/*.html', '_drafts/*', '**/*.html'], ['jekyll-rebuild']); }); // Build the Jekyll Site in production mode @@ -86,13 +87,13 @@ gulp.task('jekyll-prod', function (done) { // Identical Sass compilation task to development mode, with an additional minification step thrown in using clean-css gulp.task('styles-prod', function () { - return gulp.src('_sass/styles.scss') + return gulp.src('_scss/*.scss') .pipe(sass({ includePaths: ['scss'], onError: browserSync.notify })) .pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true })) - .pipe(cleanCSS({compatibility: 'ie8'})) + .pipe(cssnano()) .pipe(gulp.dest('_site/css')) .pipe(gulp.dest('css')); }); @@ -120,9 +121,3 @@ gulp.task('default', ['browser-sync', 'watch']); // Build task, run using gulp build to compile Sass and Javascript ready for deployment. gulp.task('build', ['fonts', 'images', 'styles-prod', 'scripts-prod', 'jekyll-prod']); - -// deploy to github pages -gulp.task('deploy', ["jekyll-build"], function () { - return gulp.src("./_site/**/*") - .pipe(deploy()); - }); diff --git a/package.json b/package.json index f14302d..835a1fb 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "Brittany Chiang", + "name": "v2", "author": "Brittany Chiang", "version": "0.0.0", "description": "Personal website of Brittany Chiang", @@ -11,8 +11,7 @@ "gulp-autoprefixer": "3.1.1", "gulp-babel": "^6.1.2", "gulp-clean-css": "^2.1.1", - "gulp-concat": "^2.6.1", - "gulp-gh-pages": "^0.5.4", + "gulp-cssnano": "^2.1.2", "gulp-htmlmin": "^3.0.0", "gulp-imagemin": "^3.1.1", "gulp-jshint": "^2.0.4", @@ -32,6 +31,5 @@ "gulp", "sass", "browsersync" - ], - "homepage": "https://github.com/shakyShane/jekyll-gulp-sass-browser-sync" + ] }