Skip to content

Instantly share code, notes, and snippets.

@karpetz

karpetz/codepen-resume-header-background.markdown

Created March 1, 2023 10:27
Show Gist options
  • Save karpetz/db6bd3add5cd15701a9fb5881db34c44 to your computer and use it in GitHub Desktop.
Save karpetz/db6bd3add5cd15701a9fb5881db34c44 to your computer and use it in GitHub Desktop.
Download ZIP
Codepen Resume Header Background
Raw
codepen-resume-header-background.markdown

Codepen Resume Header Background

I made this header in a resume format that lists my development & design skills. The thought process was that potential clients and employers would be visiting my CodePen account so make it pop. I thought it would be nice to have a creative, organized way to display my relevant skill sets other than strictly digging through my pens. I then customized my CodePen Pro profile around this pen.

A Pen by Peter Girnus on CodePen.

License.

Raw
index.html
<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>
Raw
script.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()
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.scss
$black: #000;
$blue: #00ebd4;
@import url(https://fonts.googleapis.com/css?family=Share+Tech);
$shareTech: "Share Tech";
body{
background-color: $black;
}
h1{
font-family: $shareTech;
animation: pulse .9s infinite;
color: $blue;
}
#identity-results, #resume, #loading-alpha-div, #loadingH1, #loadingMessage2, #message{
margin-top: 20px;
font-family: $shareTech;
font-weight: 900;
font-size: 24px;
color: $blue;
animation: pulse .9s infinite;
}
i{
font-size: 24px;
color: $blue;
animation: pulse .9s infinite;
}
.block{
width: 50px;
height: 50px;
background-color: $black;
}
@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 .9s infinite;
}
#loadingMessage2{
display: none;
}
.sub-item{
margin-top: 20px;
margin-left: 40px;
}
.inline{
display: inline;
margin-left: 10px;
}
Raw
styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment