Updated landing page. New background, changed mono space font to Hack, added different animation of text
This commit is contained in:
parent
afe1baadec
commit
c114be87bd
|
|
@ -1,33 +1,13 @@
|
|||
/* Generated by Font Squirrel (http://www.fontsquirrel.com) */
|
||||
|
||||
/*
|
||||
* Monosans
|
||||
* Hack
|
||||
================================================================================ */
|
||||
@font-face {
|
||||
font-family: 'Space Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('../fonts/monosans/space-mono-v2-latin-regular.eot'); /* IE9 Compat Modes */
|
||||
src: local('Space Mono'), local('SpaceMono-Regular'),
|
||||
url('fonts/monosans/space-mono-v2-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('fonts/monosans/space-mono-v2-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('fonts/monosans/space-mono-v2-latin-regular.woff') format('woff'), /* Modern Browsers */
|
||||
url('fonts/monosans/space-mono-v2-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('fonts/monosans/space-mono-v2-latin-regular.svg#SpaceMono') format('svg'); /* Legacy iOS */
|
||||
}
|
||||
|
||||
/*
|
||||
* DroidSans
|
||||
================================================================================ */
|
||||
@font-face {
|
||||
font-family: 'droid_sans_monoregular';
|
||||
src: url('fonts/DroidFonts/DroidSansMono-webfont.eot');
|
||||
src: url('fonts/DroidFonts/DroidSansMono-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/DroidFonts/DroidSansMono-webfont.woff') format('woff'),
|
||||
url('fonts/DroidFonts/DroidSansMono-webfont.ttf') format('truetype'),
|
||||
url('fonts/DroidFonts/DroidSansMono-webfont.svg#droid_sans_monoregular') format('svg');
|
||||
font-family: 'hackregular';
|
||||
src: url('fonts/hack/Hack-Regular-webfont.woff2') format('woff2'),
|
||||
url('fonts/hack/Hack-Regular-webfont.woff') format('woff'),
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -24,56 +24,36 @@
|
|||
|
||||
body { background: #0f0f0f; }
|
||||
|
||||
.icon-down-circle {
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 2s ease-in;
|
||||
-moz-transition: opacity 2s ease-in;
|
||||
-ms-transition: opacity 2s ease-in;
|
||||
-o-transition: opacity 2s ease-in;
|
||||
transition: opacity 2s ease-in;
|
||||
}
|
||||
|
||||
.icon-down-circle.load {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* b. Header Styles
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
#header-hi {
|
||||
float: left;
|
||||
color: #11ABB0;
|
||||
#header-eng-div p {
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 1.5s ease-in;
|
||||
-moz-transition: opacity 1.5s ease-in;
|
||||
-ms-transition: opacity 1.5s ease-in;
|
||||
-o-transition: opacity 1.5s ease-in;
|
||||
transition: opacity 1.5s ease-in;
|
||||
}
|
||||
|
||||
#header-eng {
|
||||
float: left;
|
||||
display: none;
|
||||
color: #11ABB0;
|
||||
#header-eng-div p.load {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#header-scr {
|
||||
float: left;
|
||||
color: #11ABB0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#header-empt {
|
||||
float: left;
|
||||
color: #11ABB0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#header-hi-div {
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#header-eng-div {
|
||||
word-break: break-all;
|
||||
}
|
||||
#header-scr-div {
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
#header-eng-div {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
#header-scr-div {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
#header-empt-div {
|
||||
margin-top: 4px;
|
||||
}
|
||||
header {
|
||||
position: relative;
|
||||
height: 800px;
|
||||
|
|
@ -105,29 +85,30 @@ header .banner {
|
|||
|
||||
header .banner-text { width: 100%; }
|
||||
header .banner-text h1 {
|
||||
font: 60px/1.1em 'droid_sans_monoregular', monospace;
|
||||
color: #fff;
|
||||
font: 100px/1.1em 'hackregular', monospace;
|
||||
color: #303030;
|
||||
letter-spacing: -2px;
|
||||
margin: 0 auto 18px auto;
|
||||
text-shadow: 0px 1px 3px rgba(0, 0, 0, .8);
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
min-height: 270px;
|
||||
margin: 500px auto 50px auto;
|
||||
text-align: center;
|
||||
vertical-align: center;
|
||||
min-height: 20px;
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
}
|
||||
header .banner-text a, a:visited{ color: #FFFFFF; }
|
||||
header .banner-text a:hover{ color: #11ABB0; }
|
||||
|
||||
header .banner-text h3 {
|
||||
font: 18px/1.9em 'librebaskerville-regular', serif;
|
||||
color: #A8A8A8;
|
||||
margin: 0 auto;
|
||||
width: 70%;
|
||||
text-shadow: 0px 1px 2px rgba(0, 0, 0, .5);
|
||||
font: 40px/1.1em 'hackregular', monospace;
|
||||
color: #606060;
|
||||
margin: 0 auto 50px auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
vertical-align: center;
|
||||
}
|
||||
header .banner-text h3 span,
|
||||
header .banner-text h3 a {
|
||||
color: #fff;
|
||||
color: #606060;
|
||||
}
|
||||
header .banner-text hr {
|
||||
width: 60%;
|
||||
|
|
@ -138,17 +119,29 @@ header .banner-text hr {
|
|||
|
||||
/* header social links */
|
||||
header .social {
|
||||
opacity: 0;
|
||||
margin: 24px 0;
|
||||
padding: 0;
|
||||
font-size: 30px;
|
||||
text-shadow: 0px 1px 2px rgba(0, 0, 0, .8);
|
||||
|
||||
-webkit-transition: opacity 2s ease-in;
|
||||
-moz-transition: opacity 2s ease-in;
|
||||
-ms-transition: opacity 2s ease-in;
|
||||
-o-transition: opacity 2s ease-in;
|
||||
transition: opacity 2s ease-in;
|
||||
}
|
||||
header .social li {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin: 0 15px;
|
||||
padding: 0;
|
||||
}
|
||||
header .social li a { color: #fff; }
|
||||
|
||||
header .social.load {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
header .social li a { color: #606060; }
|
||||
header .social li a:hover { color: #11ABB0; }
|
||||
|
||||
/* scrolldown link */
|
||||
|
|
@ -157,13 +150,12 @@ header .scrolldown a {
|
|||
bottom: 30px;
|
||||
left: 50%;
|
||||
margin-left: -29px;
|
||||
color: #fff;
|
||||
color: #606060;
|
||||
display: block;
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
font-size: 42px;
|
||||
line-height: 42px;
|
||||
color: #fff;
|
||||
border-radius: 100%;
|
||||
|
||||
-webkit-transition: all .3s ease-in-out;
|
||||
|
|
@ -223,7 +215,7 @@ ul#nav li a {
|
|||
line-height: 32px;
|
||||
text-decoration: none;
|
||||
text-align: left;
|
||||
color: #fff;
|
||||
color: #606060;
|
||||
|
||||
-webkit-transition: color .2s ease-in-out;
|
||||
-moz-transition: color .2s ease-in-out;
|
||||
|
|
@ -1020,7 +1012,7 @@ call-to-action .button {
|
|||
#contact-pgp {
|
||||
float: left;
|
||||
margin-left: 7px;
|
||||
font:20px/1.1em 'droid_sans_monoregular', monospace;
|
||||
font:20px/1.1em 'hackregular', monospace;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,9 +14,15 @@
|
|||
/* header styles
|
||||
------------------------------------------------------------------ */
|
||||
header .banner-text h1 {
|
||||
font: 80px/1.1em 'DroidSansMono', monospace;
|
||||
letter-spacing: -1px;
|
||||
margin: 0 auto 12px auto;
|
||||
font: 100px/1.1em 'hackregular', monospace;
|
||||
margin: 150px auto 30px auto;
|
||||
letter-spacing: -1px;
|
||||
font-weight: bold;
|
||||
}
|
||||
header .banner-text h3 {
|
||||
font: 17px/1.9em 'hackregular', monospace;
|
||||
margin: 0 auto 30px auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -29,12 +35,15 @@
|
|||
------------------------------------------------------------------ */
|
||||
header .banner { padding-bottom: 12px; }
|
||||
header .banner-text h1 {
|
||||
font: 78px/1.1em 'DroidSansMono', monospace;
|
||||
font: 100px/1.1em 'hackregular', monospace;
|
||||
margin: 45px auto 30px auto;
|
||||
letter-spacing: -1px;
|
||||
font-weight: bold;
|
||||
}
|
||||
header .banner-text h3 {
|
||||
font: 17px/1.9em 'librebaskerville-regular', serif;
|
||||
width: 80%;
|
||||
font: 17px/1.9em 'hackregular', monospace;
|
||||
margin: 0 auto 30px auto;
|
||||
width: 100%;
|
||||
}
|
||||
header .banner-text hr {
|
||||
width: 65%;
|
||||
|
|
@ -112,7 +121,7 @@
|
|||
width: 48px;
|
||||
height: 48px;
|
||||
text-align: left;
|
||||
background-color: #11ABB0;
|
||||
background-color: #303030;
|
||||
position: relative;
|
||||
border: none;
|
||||
float: right;
|
||||
|
|
@ -191,9 +200,13 @@
|
|||
padding-bottom: 12px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
header .banner-text h1 { font: 68px/1.1em 'DroidSansMono', monospace; }
|
||||
header .banner-text h3 {
|
||||
font: 16px/1.9em 'librebaskerville-regular', serif;
|
||||
header .banner-text h1 {
|
||||
font: 68px/1.1em 'hackregular', monospace;
|
||||
margin: 0 auto 30px auto;
|
||||
}
|
||||
header .banner-text h3 {
|
||||
font: 16px/1.0em 'hackregular', monospace;
|
||||
margin: 0 auto 30px auto;
|
||||
width: 85%;
|
||||
}
|
||||
header .banner-text hr {
|
||||
|
|
@ -351,13 +364,14 @@
|
|||
-------------------------------------------------------------------- */
|
||||
header .banner { padding-top: 24px; }
|
||||
header .banner-text h1 {
|
||||
font: 25px/1.1em 'DroidSansMono', monospace;
|
||||
margin: 0 auto 24px auto;
|
||||
min-height: 230px;
|
||||
margin-top: 20px;
|
||||
font: 65px/1.1em 'hackregular', monospace;
|
||||
margin: 175px auto 30px auto;
|
||||
min-height: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
header .banner-text h3 {
|
||||
font: 14px/1.9em 'librebaskerville-regular', sans-serif;
|
||||
font: 14px/1.2em 'hackregular', monospace;
|
||||
margin: 0 auto 30px auto;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
|
|
@ -373,17 +387,3 @@
|
|||
footer .social-links li { margin-left: 14px; }
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 400px) {
|
||||
header .banner-text h1 {
|
||||
min-height: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 211 KiB After Width: | Height: | Size: 524 KiB |
|
|
@ -58,25 +58,17 @@
|
|||
|
||||
<div class="row banner">
|
||||
<div class="banner-text">
|
||||
<h1 class="responsive-headline">
|
||||
<div id="header-hi-div">
|
||||
<span id="header-hi">[~]$ </span>
|
||||
<span id="header-hi-text"></span>
|
||||
<h1 class="responsive-headline">
|
||||
<div class="header-hi-div">
|
||||
<span id="header-hi-text"></span>
|
||||
</div>
|
||||
</h1>
|
||||
|
||||
<h3 class="responsive-headline">
|
||||
<div id="header-eng-div">
|
||||
<span id="header-eng">[~]$ </span>
|
||||
<span id="header-eng-text"></span>
|
||||
<p>Electrical Engineer & Computer Scientist</p>
|
||||
</div>
|
||||
<div id="header-scr-div">
|
||||
<span id="header-scr">[~]$ </span>
|
||||
<span id="header-scr-text"></span>
|
||||
</div>
|
||||
<div id="header-empt-div">
|
||||
<span id="header-empt">[~]$
|
||||
<span style="color: #ffffff;">█</span>
|
||||
</span>
|
||||
</div>
|
||||
</h1>
|
||||
</h4>
|
||||
|
||||
|
||||
<ul class="social">
|
||||
|
|
@ -175,9 +167,7 @@
|
|||
<p class="info">Gymnasium<span>•</span>
|
||||
<em class="date">September 2005 - July 2011</em></p>
|
||||
|
||||
<p>
|
||||
Comparable to a university-preparatory school with Latin or Ancient Greek as additional language.
|
||||
</p>
|
||||
<p>Comparable to a university-preparatory school with Latin as additional language.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -619,64 +609,6 @@
|
|||
<script src="js/init.js"></script>
|
||||
<script src="js/typed.js"></script>
|
||||
|
||||
<script>
|
||||
function toggle(id) {
|
||||
document.getElementById(id).style.display = 'inline-block';
|
||||
}
|
||||
|
||||
function sleep(milliseconds) {
|
||||
var start = new Date().getTime();
|
||||
for (var i = 0; i < 1e7; i++) {
|
||||
if ((new Date().getTime() - start) > milliseconds){
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** YAKS, RECURSION **/
|
||||
var typed = new Typed('#header-hi-text', {
|
||||
strings: ["Hi, I'm Dennis"],
|
||||
typeSpeed: 45,
|
||||
startDelay: 200,
|
||||
onComplete: function(){
|
||||
$( "span" ).siblings( ".typed-cursor" ).css( "animation", "none" );
|
||||
$( "span" ).siblings( ".typed-cursor" ).css( "opacity", "0" );
|
||||
$( "span" ).siblings( ".typed-cursor" ).css( "position", "fixed" );
|
||||
|
||||
sleep(200);
|
||||
toggle('header-eng');
|
||||
|
||||
var typed = new Typed('#header-eng-text', {
|
||||
strings: ["I'm an electrical engineer and computer scientist"],
|
||||
typeSpeed: 45,
|
||||
startDelay: 500,
|
||||
onComplete: function(){
|
||||
$( "span" ).siblings( ".typed-cursor" ).css( "opacity", "0" );
|
||||
$( "span" ).siblings( ".typed-cursor" ).css( "position", "fixed" );
|
||||
$( "span" ).siblings( ".typed-cursor" ).css( "animation", "none" );
|
||||
|
||||
sleep(200);
|
||||
toggle('header-scr')
|
||||
var typed = new Typed('#header-scr-text', {
|
||||
strings: ["Scroll down and learn more"],
|
||||
typeSpeed: 45,
|
||||
startDelay: 500,
|
||||
onComplete: function(){
|
||||
$( "span" ).siblings( ".typed-cursor" ).css( "animation", "none" );
|
||||
$( "span" ).siblings( ".typed-cursor" ).css( "opacity", "0" );
|
||||
$( "span" ).siblings( ".typed-cursor" ).css( "position", "fixed" );
|
||||
|
||||
sleep(200);
|
||||
toggle('header-empt')
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
25
js/init.js
25
js/init.js
|
|
@ -6,15 +6,36 @@
|
|||
|
||||
jQuery(document).ready(function($) {
|
||||
|
||||
/*----------------------------------------------------*/
|
||||
/* Typed Header
|
||||
------------------------------------------------------ */
|
||||
|
||||
var typed = new Typed('#header-hi-text', {
|
||||
strings: ["Hi, I'm Dennis "],
|
||||
typeSpeed: 45,
|
||||
startDelay: 200,
|
||||
onComplete: function() {
|
||||
$('#header-eng-div p').addClass('load');
|
||||
setTimeout(function() {
|
||||
$('.social').addClass('load');
|
||||
}, 1000);
|
||||
setTimeout(function() {
|
||||
$('.icon-down-circle').addClass('load');
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
/*----------------------------------------------------*/
|
||||
/* FitText Settings
|
||||
------------------------------------------------------ */
|
||||
|
||||
setTimeout(function() {
|
||||
$('h1.responsive-headline').fitText(1, { minFontSize: '8px', maxFontSize: '45px' });
|
||||
$('h1.responsive-headline').fitText(1, { minFontSize: '30px', maxFontSize: '75px' });
|
||||
$('h3.responsive-headline').fitText(1, { minFontSize: '8px', maxFontSize: '20px' });
|
||||
}, 100);
|
||||
|
||||
|
||||
|
||||
/*----------------------------------------------------*/
|
||||
/* Smooth Scrolling
|
||||
|
|
|
|||
Loading…
Reference in New Issue