Dennis/dennispotter-cv
1
0
Fork 0
Code Issues 4 Pull Requests Releases Activity

Updated landing page. New background, changed mono space font to Hack, added different animation of text

Browse Source
This commit is contained in:
Dennis Potter
2018-07-15 11:47:47 +02:00
committed by Dennis Potter
parent c2a76c5f5f
commit 6bf3f69fe6
6 changed files with 119 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
css/fonts.css
View File

@@ -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;
}
/*

114
css/layout.css Normal file → Executable file
View File

@@ -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;
}

58
css/media-queries.css
View File

@@ -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;
}
}

BIN
images/header-background.jpg Normal file → Executable file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 211 KiB

After

Width:  |  Height:  |  Size: 524 KiB

86
index.html Normal file → Executable file
View File

@@ -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">[~]$&nbsp;</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">[~]$&nbsp;</span>
<span id="header-eng-text"></span>
<p>Electrical & Computer Engineer</p>
</div>
<div id="header-scr-div">
<span id="header-scr">[~]$&nbsp;</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>&bull;</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
View File

@@ -6,15 +6,36 @@
jQuery(document).ready(function($) {
/*----------------------------------------------------*/
/* Typed Header
------------------------------------------------------ */
var typed = new Typed('#header-hi-text', {
strings: ["Hi, I'm Dennis&nbsp;"],
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