@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,900,500,600,700);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Fira+Mono:400,700);
@import url(https://fonts.googleapis.com/css?family=Inconsolata:400,700);
@import url(https://fonts.googleapis.com/css?family=Sigmar+One);
@import url(https://fonts.googleapis.com/css?family=Bowlby+One+SC);
$main-c: #fff;
$accent-c: #333;
$link-c: $main-c;
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.naked {
padding: 0;
margin: 0;
}
a:hover, a:focus, a:visited {
color: $link-c;
text-decoration: none;
}
:root {
font-size: calc(1vw + 1vh + .5vmin);
}
body {
color: $main-c;
background-color: $accent-c;
-webkit-font-smoothing: antialiased;
font-family: 'Montserrat';
position: relative;
font: 1em/1.6 sans-serif;
}
// header styles
header {
background-color: $accent-c;
height: 100vh;
position: relative;
}
.titanic {
font-size: 144px;
font-weight: 700;
font-family: 'Raleway', sans-serif;
opacity: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
nav {
padding-top: 30px;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #333;
text-align: center;
transform: translateX(-100%);
& #nav {
}
}
.inner {
transform: translateX(0);
transition: transform .5s cubic-bezier(.55,.07,1,.02);
&.open {
transform: translateX(100%);
}
}
.fa-times {
position: absolute;
top: 35px;
right: 10%;
font-size: 36px;
color: #F06060;
cursor: pointer;
z-index: 9999;
}
.fa-bars {
font-size: 36px;
position: absolute;
top: 5%;
left: 5%;
cursor: pointer;
}
.fa-arrow-circle-up {
position: fixed;
bottom: 5%;
left: 4%;
cursor: pointer;
font-size: 36px;
z-index: 999;
color: #F06060;
}
.outer {
overflow: hidden;
position: relative;
}
.underline {
height: 2px;
width: 0;
margin: 0 auto;
background-color: $main-c;
}
.nav-link {
font-size: 46px;
letter-spacing: 2px;
display: block;
color: $main-c;
font-family: 'Inconsolata', ;
padding: 5px 0;
margin: 25px 0;
text-transform: uppercase;
}
// INTRODUCTION
// SECTION
main {
min-height: 100vh;
padding-top: 50px;
background-color: $main-c;
text-align: center;
font-size: 80px;
}
#intro {
width: 100%;
text-align: left;
word-break: break-word;
font-size: 9vw;
font-family: "ff-nuvo-sc-web-pro",sans-serif;
font-weight: bold;
color: $accent-c;
}
// SKILLS
// SECTION
.skills-sec {
position: relative;
background-color: #fff;
}
h2 {
color: $accent-c;
text-align: center;
margin: 100px 0;
font-size: 10vw;
font-weight: 700;
border-top: .5vw solid $accent-c;
border-bottom: .5vw solid $accent-c;
padding: 10px 0;
}
#skills {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
// transform: translateY(20px);
// transition: all 1s ease-in-out;
// transition-delay: .2s;
}
.skill {
width: 32%;
height: 19vw;
padding: 15px;
opacity: 0;
transition: all 1s ease-in-out;
&.toR {
transform: translateX(-50px);
}
&.toL {
transform: translateX(50px);
}
&:nth-child(2) {
transform: translateY(-50px);
}
&:nth-child(8) {
transform: translateY(50px);
}
}
// PORTFOLIO
// SECTION
.portfolio-sec {
background-color: $accent-c;
h2 {
color: $main-c;
border-color: $main-c;
}
}
#portfolio {
background-color: #333;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.project {
width: 32%;
padding: 5px;
opacity: 0;
text-align: center;
transform: translateX(-25px);
transition: all .5s ease-in;
img {
display: inline-block;
}
}
// FOOTER
// SECTION
footer {
color: $accent-c;
background-color: $main-c;
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
// z-index: -999;
h2 {
margin: 100px 0 50px 0;
}
#contacts {
margin-bottom: 20px;
}
.contact-link {
display: block;
border: 1px solid $accent-c;
padding: 10px 0;
text-align: center;
font-size: 150%;
color: $accent-c;
text-transform: uppercase;
transition: all .25s ease-in-out;
&:hover {
color: $main-c;
background-color: $accent-c;
}
}
}
// BUTTONS
// ANIMATIONS
.awesome {
border-color: $accent-c;
color: #fff;
background: {
image: linear-gradient(45deg,$accent-c 50%, transparent 50%);
position: 100%;
size: 400%;
}
transition: background 500ms ease-in-out;
&:hover {
background-position: 0;
}
}
// MEDIA
// QUERIES
@media screen and (max-width: 1210px) {
.contact-link {
margin: 10px auto;
}
}
@media screen and(max-width: 768px) {
.skill {
width: 50%;
height: 30vw;
}
.project {
width: 50%;
}
.contact-link {
width: 50%;
margin: 15px auto;
}
}
@media screen and(max-width: 480px) {
.skill {
width: 100%;
height: 60vw;
}
.project {
width: 100%;
}
.contact-link {
width: 70%;
margin: 15px auto;
}
}
View Compiled
$(document.body).ready(function() {
// toggle navigation
$('.nav-toggle').click(function() {
$('.inner').toggleClass('open');
});
// smooth scrolling
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
setTimeout(function() {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
}, 600);
return false;
}
}
});
});
var hi = $('.titanic'),
header = $('header'),
underline = $('.underline'),
portfolioBox = $('.portfolio-sec'),
project = $('.project'),
navLink = $('.nav-link'),
skillsBox = $('.skills-sec'),
skills = $('.skill'),
arrow = $('#arrow'),
w = $(window),
fz;
portfolioBox.css({
'marginBottom': $('footer').height()
})
TweenMax.from(hi, 5, {
y: 140,
opacity: 0,
ease: Elastic.easeOut
})
$('.nav-link').click(function() {
$('.inner').toggleClass('open');
});
$('nav li')
.mouseenter(function(e) {
var underline = $(this).find('div.underline'),
width = $(this).find('span').width();
TweenMax.to(underline, .1, {
width: width
});
})
.mouseleave(function(e) {
var underline = $(this).find('div.underline');
TweenMax.to(underline, .1, {
width: 0
});
})
w.scroll(function(e) {
var wScroll = $(this).scrollTop(),
wHeight = $(this).height();
if (wScroll >= (header.height() - hi.height()) / 2) {
// hi.css({
// 'position': 'absolute',
// 'top': '100%',
// 'transform': 'translate(-50%, -100%)'
// })
// TweenMax.to(hi, .5, {
// color: '#333'
// })
// TweenMax.to(header, .5, {
// backgroundColor: '#fff'
// })
}
if (wScroll < (header.height() - hi.height()) / 2) {
// hi.css({
// 'position': 'fixed',
// 'top': '50%',
// 'transform': 'translate(-50%, -50%)'
// })
// TweenMax.to(hi, .5, {
// color: '#fff'
// })
// TweenMax.to(header, .5, {
// backgroundColor: '#333'
// })
}
})
w.resize(function() {
portfolioBox.css({
'marginBottom': $('footer').height()
})
})
$('#portfolio').waypoint(function() {
// $('footer').css({
// 'display': 'block'
// })
TweenMax.staggerTo(project, .25, {
'opacity': 1,
x: 0
}, .25)
}, {
offset: 300
})
portfolioBox.waypoint(function() {
})
skillsBox.waypoint(function() {
skills.filter('.toR').css({
'opacity': 1,
'transform': 'translateX(0)'
});
skills.filter('.toL').css({
'opacity': 1,
'transform': 'translateX(0)'
});
skills.eq(1).css({
'opacity': 1,
'transform': 'translateY(0)'
});
skills.eq(4).css({
'opacity': 1
});
skills.eq(7).css({
'opacity': 1,
'transform': 'translateY(0)'
});
})
arrow.click(function() {
$('body').animate({
scrollTop: 0
}, 1000);
});
});
