<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Resume Header Background</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<style>
@import url(https://fonts.googleapis.com/css?family=Share+Tech);
body {
background-color: #000;
}
h1 {
font-family: "Share Tech";
animation: pulse 0.9s infinite;
color: #00ebd4;
}
#identity-results, #resume, #loading-alpha-div, #loadingH1, #loadingMessage2, #message {
margin-top: 20px;
font-family: "Share Tech";
font-weight: 900;
font-size: 24px;
color: #00ebd4;
animation: pulse 0.9s infinite;
}
i {
font-size: 24px;
color: #00ebd4;
animation: pulse 0.9s infinite;
}
.block {
width: 50px;
height: 50px;
background-color: #000;
}
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.8;
}
100% {
opacity: 1;
}
}
.cursor:after {
content: "_";
opacity: 0;
animation: cursor 1s infinite;
}
.sign:before {
content: "> ";
}
@keyframes cursor {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#loading-alpha-div, .img-div {
display: none;
}
img {
margin: 50px 0;
animation: pulse 0.9s infinite;
}
#loadingMessage2 {
display: none;
}
.sub-item {
margin-top: 20px;
margin-left: 40px;
}
.inline {
display: inline;
margin-left: 10px;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
</head>
<body translate="no">
<div class="container">
<h1 id="loadingH1"><span><i class="fa fa-cogs"></i></span> RUNNING IDENTITY PROTOCOL<span id="loading">.</span></h1>
<div class="img-container">
<div id="identity-results">
<h1 id="greeting"></h1>
<p id="message"></p>
</div>
<h3 id="loadingMessage2">LOADING RESUME<span id="alpha-loading"></span>.</h3>
</div>
<div id="resume">
<h3 id="name"></h3>
<h3 id="alias"></h3>
<h3 id="occupation"></h3>
<br>
<i id="front-end-span"></i><h3 id="front-end" class="inline"></h3>
<h4 id="js-frameworks" class="sub-item"></h4>
<h4 id="js-libs" class="sub-item"></h4>
<h4 id="css-frameworks" class="sub-item"></h4>
<h4 id="css-pre" class="sub-item"></h4>
<h4 id="front-end-animation" class="sub-item"></h4>
<br>
<i id="cms-span"></i><h3 id="CMS-development" class="inline"></h3>
<h4 id="wordpress" class="sub-item"></h4>
<br>
<i id="design-span"></i><h3 id="design" class="inline"></h3>
<h4 id="web-design" class="sub-item"></h4>
<h4 id="branding" class="sub-item"></h4>
<h4 id="design-animation" class="sub-item"></h4>
</div>
</div>
<script src='Https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script id="rendered-js" >
var initDot = document.getElementById("loading");
var loading = setInterval(function () {
if (initDot.innerHTML.length == 5) {
initDot.innerHTML = "";
} else {
initDot.innerHTML += ".";
}
}, 350); // Dot Speed
var $loadingMessage = $('#loadingH1');
setTimeout(function () {
clearInterval(loading);
$loadingMessage.hide();
}, 1500);
var initProgram = setTimeout(function () {
var greeting = "UNIDENTIFIED ORGANIC LIFEFORM DETECTED";
var message = "RUNNING CODEPEN RESUME PROTOCAL (CRP) FOR @GOTHBURZ";
var $identityDiv = $("#identity-results");
var $name = "NAME: PETRUS REX";
var $alias = "KNOWN ALIAS: PETRUSR3X";
var $occupation = "OCCUPATION: FRONT END DEVELOPER | WORDPRESS DEVLOPER | DESIGNER";
var $frontEnd = "FRONT END DEVELOPMENT CORE: HTML5 | CSS3 | JAVASCRIPT";
var $JSFrameworks = "JAVASCRIPT FRAMEWORKS: ANGULARJS";
var $JSLibs = "JAVASCRIPT LIBRARIES: JQUERY | D3 | C3";
var $CSSFrameworks = "CSS FRAMEWORKS: BOOTSTRAP | SEMANTIC UI";
var $CSSPre = "CSS PREPROCESSORS: SASS | LESS | STYLUS";
var $frontEndAnimation = "FRONT END ANIMATION: CANVAS | HTML5 | SVG";
var $cmsDevelopment = "WORDPRESS DEVELOPMENT: WORDPRESS";
var $wordpress = "WORDPRESS: CUSTOM THEMING | PLUGINS";
var $design = "DESIGN CORE: ADOBE SUITE";
var $webDesign = "WEB DESIGN: INDESIGN CC | MUSE CC";
var $branding = "ILLUSTRATIONS & BRANDING: ILLUSTRATOR CC | PHOTOSHOP CC";
var $designAnimation = "ANIMATION DESIGN: AFTER EFFECTS CC | FLASH CC";
function initIdentityResults(i) {
$("#message").addClass("sign cursor").text(message.substring(0, i));
if (i < message.length) {
setTimeout(function () {
initIdentityResults(i + 1);
}, 35);
} else {
$('#message').removeClass("cursor");
var loadingResume = function () {
$("#loadingMessage2").show();
var dotAlpha = document.getElementById("alpha-loading");
var loadingAlpha = setInterval(function () {
if (dotAlpha.innerHTML.length == 6) {
dotAlpha.innerHTML = "";
} else {
dotAlpha.innerHTML += ".";
setTimeout(function () {
clearInterval(loadingAlpha);
$("#loadingMessage2").hide();
}, 2000);
}
}, 350); // Dot Speed
};
loadingResume();
function initName(i) {
$("#name").addClass("sign cursor").text($name.substring(0, i));
if (i < $name.length) {
setTimeout(function () {
initName(i + 1);
}, 35);
} else {
$("#name").removeClass("cursor");
setTimeout(function () {
initAlias(0);
}, 1500);
}
}
setTimeout(function () {
initName(0);
}, 2500);
}
function initAlias(i) {
$("#alias").addClass("sign cursor").text($alias.substring(0, i));
if (i < $alias.length) {
setTimeout(function () {
initAlias(i + 1);
}, 35);
} else {
$("#alias").removeClass("cursor");
setTimeout(function () {
initOccupation(0);
}, 1500);
}
}
function initOccupation(i) {
$("#occupation").addClass("sign cursor").text($occupation.substring(0, i));
if (i < $occupation.length) {
setTimeout(function () {
initOccupation(i + 1);
}, 35);
} else {
$("#occupation").removeClass("cursor");
setTimeout(function () {
initFrontEnd(0);
}, 1500);
}
}
function initFrontEnd(i) {
$('#front-end-span').addClass('fa fa-wrench');
$('#front-end').addClass("cursor").text($frontEnd.substring(0, i));
if (i < $frontEnd.length) {
setTimeout(function () {
initFrontEnd(i + 1);
}, 35);
} else {
$('#front-end').removeClass("cursor");
setTimeout(function () {
initJSFrameworks(0);
}, 1500);
}
}
function initJSFrameworks(i) {
$('#js-frameworks').addClass("sign cursor").text($JSFrameworks.substring(0, i));
if (i < $JSFrameworks.length) {
setTimeout(function () {
initJSFrameworks(i + 1);
}, 35);
} else {
$('#js-frameworks').removeClass("cursor");
setTimeout(function () {
initJSLibs(0);
}, 1500);
}
}
function initJSLibs(i) {
$('#js-libs').addClass("sign cursor").text($JSLibs.substring(0, i));
if (i < $JSLibs.length) {
setTimeout(function () {
initJSLibs(i + 1);
}, 35);
} else {
$('#js-libs').removeClass("cursor");
setTimeout(function () {
initCSSFrameworks(0);
}, 1500);
}
}
function initCSSFrameworks(i) {
$('#css-frameworks').addClass("sign cursor").text($CSSFrameworks.substring(0, i));
if (i < $CSSFrameworks.length) {
setTimeout(function () {
initCSSFrameworks(i + 1);
}, 35);
} else {
$('#css-frameworks').removeClass("cursor");
setTimeout(function () {
initCSSPre(0);
}, 1500);
}
}
function initCSSPre(i) {
$('#css-pre').addClass("sign cursor").text($CSSPre.substring(0, i));
if (i < $CSSPre.length) {
setTimeout(function () {
initCSSPre(i + 1);
}, 35);
} else {
$('#css-pre').removeClass("cursor");
setTimeout(function () {
initFrontEndAnimation(0);
}, 1500);
}
}
function initFrontEndAnimation(i) {
$('#front-end-animation').addClass("sign cursor").text($frontEndAnimation.substring(0, i));
if (i < $frontEndAnimation.length) {
setTimeout(function () {
initFrontEndAnimation(i + 1);
}, 35);
} else {
$('#front-end-animation').removeClass("cursor");
setTimeout(function () {
initCMSDevelopment(0);
}, 1500);
}
}
function initCMSDevelopment(i) {
$('#cms-span').addClass("fa fa-wordpress");
$('#CMS-development').addClass("cursor").text($cmsDevelopment.substring(0, i));
if (i < $cmsDevelopment.length) {
setTimeout(function () {
initCMSDevelopment(i + 1);
}, 35);
} else {
$('#CMS-development').removeClass("cursor");
setTimeout(function () {
initWordpress(0);
}, 1500);
}
}
function initWordpress(i) {
$('#wordpress').addClass("sign cursor").text($wordpress.substring(0, i));
if (i < $wordpress.length) {
setTimeout(function () {
initWordpress(i + 1);
}, 35);
} else {
$('#wordpress').removeClass("cursor");
setTimeout(function () {
initDesign(0);
}, 1500);
}
}
function initDesign(i) {
$('#design-span').addClass('fa fa-paint-brush');
$('#design').addClass("cursor").text($design.substring(0, i));
if (i < $design.length) {
setTimeout(function () {
initDesign(i + 1);
}, 35);
} else {
$('#design').removeClass("cursor");
setTimeout(function () {
initWebDesign(0);
}, 1500);
}
}
function initWebDesign(i) {
$('#web-design').addClass("sign cursor").text($webDesign.substring(0, i));
if (i < $webDesign.length) {
setTimeout(function () {
initWebDesign(i + 1);
}, 35);
} else {
$('#web-design').removeClass("cursor");
setTimeout(function () {
initBranding(0);
}, 1500);
}
}
function initBranding(i) {
$('#branding').addClass("sign cursor").text($branding.substring(0, i));
if (i < $branding.length) {
setTimeout(function () {
initBranding(i + 1);
}, 35);
} else {
$('#branding').removeClass("cursor");
setTimeout(function () {
initDesignAnimation(0);
}, 1500);
}
}
function initDesignAnimation(i) {
$('#design-animation').addClass("sign cursor").text($designAnimation.substring(0, i));
if (i < $designAnimation.length) {
setTimeout(function () {
initDesignAnimation(i + 1);
}, 35);
} else {
//$('#design-animation').removeClass("cursor");
}
}
}
function initProgramAlpha(i) {
$("#greeting").addClass("cursor").text(greeting.substring(0, i));
if (i < greeting.length) {
setTimeout(function () {
initProgramAlpha(i + 1);
}, 35);
} else {
$("#greeting").removeClass("cursor");
initIdentityResults(0);
}
}
initProgramAlpha(0);
}, 1500);
initProgram();
</script>
</body>
</html>
Comments
Post a Comment