calvinmorett/Portfolio Base.markdown

## index.html
<body>
  <div id="wrapper">
    <div class="svg-wrapper">
  <svg height="60" width=440 xmlns="http://www.w3.org/2000/svg">
    <rect class="shape" height="60" width="440" />
    <div class="text">
      <p class="logo">
        <a href="mailto:hello@calvinmorett.com">Calvin Morett</a></p></div>
  </svg></div>
    <div id="branding">
            <p class="motto">
        Creative Direction, Web Design &
        <BR> Development, Print & Publishing
      </p>
    </div>
    <div id="side">
      <nav class="containersocial">
        <a href="https://www.behance.net/morettc15cb" class="behance"><i class="fa fa-behance-square"></i></a>
        <a href="http://codepen.io/odisbey/" class="codepen"><i class="fa fa-codepen"></i></a>
        <a href="https://linkedin.com/in/calvinmorett" class="linkedin"><i class="fa fa-linkedin-square"></i></a>
        <a href="https://www.pinterest.com/morettc/" class="pinterest"><i class="fa fa-pinterest-square"></i></a>
        <a href="https://instagram.com/odisbey/" class="instagram"><i class="fa fa-instagram"></i></a>
      </nav>
    </div>
  </div>
  </div>
  </p><div id="spanright">
<span
     class="txt-rotate"
     data-period="2000"
     data-rotate='[ "","Hi.","I develop visuals for Print and the Web with a passion for illustration and editorial layout.","", "It has been more than a hobby for ten years now.",
"I enjoy modern + clean design & seeing work evolve.",
"A big motivator is being able to inspire a new generation of artists.",
"I am currently accepting new commissions.",
"For all inquiries regarding part or full-time job offers please send an email for further information."] '></span>
</div>

</body>

## Portfolio Base.markdown

      
    Raw
  

              Portfolio Base.markdown
            
          
    Portfolio Base

A Pen by Calvin on CodePen.
License.

  
## script.js
var TxtRotate = function(el, toRotate, period) {
  this.toRotate = toRotate;
  this.el = el;
  this.loopNum = 0;
  this.period = parseInt(period, 10) || 2220;
  this.txt = '';
  this.tick();
  this.isDeleting = false;
};

TxtRotate.prototype.tick = function() {
  var i = this.loopNum % this.toRotate.length;
  var fullTxt = this.toRotate[i];

  if (this.isDeleting) {
    this.txt = fullTxt.substring(0, this.txt.length - 1);
  } else {
    this.txt = fullTxt.substring(0, this.txt.length + 1);
  }

  this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';

  var that = this;
  var delta = 333 - Math.random() * 420;

  if (this.isDeleting) { delta /= 2.5; }

  if (!this.isDeleting && this.txt === fullTxt) {
    delta = this.period;
    this.isDeleting = true;
  } else if (this.isDeleting && this.txt === '') {
    this.isDeleting = false;
    this.loopNum++;
    delta = 500;
  }

  setTimeout(function() {
    that.tick();
  }, delta);
};

window.onload = function() {
  var elements = document.getElementsByClassName('txt-rotate');
  for (var i=0; i<elements.length; i++) {
    var toRotate = elements[i].getAttribute('data-rotate');
    var period = elements[i].getAttribute('data-period');
    if (toRotate) {
      new TxtRotate(elements[i], JSON.parse(toRotate), period);
    }
  }
  // INJECT CSS
  var css = document.createElement("style");
  css.type = "text/css";
  css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }";
  document.body.appendChild(css);
};

## style.css
@import url(https://fonts.googleapis.com/css?family=Spinnaker);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(http://fonts.googleapis.com/css?family=Arimo:400,700,400italic,700italic);

html,
body {
  margin: 0 auto;
  width:100%;
  position:relative;
  background:#000;
  color: #fff;
  font-family: 'Arimo', sans-serif;
  text-rendering: optimizeLegibility;
}
.svg-wrapper {
  text-align: center;
  padding-top: 4em;
  position: relative;
  top: 0;
  width: 500px;
  height: 60px;
}
.shape {
  stroke-dasharray: 220 635;
  stroke-dashoffset: 250;
  stroke-width: 8px;
  fill: transparent;
  transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -webkit-transition: all 1s;
  transition: all 1s;
   stroke: #E1A82C;
}
.logo a:hover {
  color: #E1A82C;
}
.text {
  font-size: .94em;
  letter-spacing: 8px;
  color: #fff;
  top: -117px;
  position: relative;
  text-transform: uppercase;
  font-family: 'Spinnaker', sans-serif;
}

.svg-wrapper:hover .shape {
  stroke-width: 3;
  stroke-dashoffset: 5;
  stroke-dasharray: 1075;
}

.logo a {
  padding: .10em;
  text-decoration: none;
  color: #fff;
  -moz-transition: all 0.35s;
  -o-transition: all 0.35s;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}


.logo {
  letter-spacing: .025em;
  text-transform: uppercase;
  width: 100%;
  font-size: 3em;
  font-family: 'Spinnaker', sans-serif;
  padding: .25em 0;
}

.motto {
  letter-spacing: -.025em;
  line-height: 1.25em;
  font-size: 1.45em;
  font-family: 'Montserrat', sans-serif;
  padding: .05em 0;
}

#wrapper {
  background: #000 repeat fixed center;
  float:left;
  clear:left;
  margin: 0 auto;
  width: 100%;
}

#branding {
  text-align: center;
  width: 500px;
  margin: 0;
  padding: .25em;
  background: transparent;
}
/* side */

#side {
  padding: 2em .25em 2em;
  background: transparent;
  width: 500px;
}

.containersocial {
  display: inline-block;
  width: 97%;
  text-align: center;
  padding: .25em .5em;
}

.containersocial a {
  padding: .25em .5em;
  font-size: 2.25em;
  float: none;
  -moz-transition: all 0.45s;
  -o-transition: all 0.45s;
  -webkit-transition: all 0.45s;
  transition: all 0.45s;
}

.pinterest i,
.linkedin i,
.codepen i,
.behance i,
.instagram i {
  color: #fff;
  text-decoration: none;
  -moz-transition: all 0.35s;
  -o-transition: all 0.35s;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}

.pinterest i:hover {
  color: #cb2027;
}

.linkedin i:hover {
  color: #007bb6;
}

.codepen i:hover {
  color: #A7AFA6;
}

.behance i:hover {
  color: #1769ff;
}

.instagram i:hover {
  color: #517fa4;
}

#spanright {
  margin:120px 500px 0;
  font-size:22px;
  font-family: 'Arimo', sans-serif;
  text-rendering: optimizeSpeed;
  letter-spacing: .05em;
  line-height: 1.5em;
  width: 43%;
  z-index: 99;
  float:left;
  padding: 1em .75em;
  color: #E1A82C;
  font-weight: 400;
  position:absolute;
}
.txt-rotate {border-right: .05em solid #eee;
      animation: blink .3s steps(5, start) infinite;
      -webkit-animation: blink 1s steps(5, start) infinite;
    }
    @keyframes blink {
      to {
        border-right:.05em solid #000;
      }
    }
    @-webkit-keyframes blink {
      to {
        border-right:.01em solid #fff;
      }
    }
	<body>
	<div id="wrapper">
	<div class="svg-wrapper">
	<svg height="60" width=440 xmlns="http://www.w3.org/2000/svg">
	<rect class="shape" height="60" width="440" />
	<div class="text">
	<p class="logo">
	<a href="mailto:hello@calvinmorett.com">Calvin Morett</a></p></div>
	</svg></div>
	<div id="branding">
	<p class="motto">
	Creative Direction, Web Design &
	<BR> Development, Print & Publishing
	</p>
	</div>
	<div id="side">
	<nav class="containersocial">
	<a href="https://www.behance.net/morettc15cb" class="behance"><i class="fa fa-behance-square"></i></a>
	<a href="http://codepen.io/odisbey/" class="codepen"><i class="fa fa-codepen"></i></a>
	<a href="https://linkedin.com/in/calvinmorett" class="linkedin"><i class="fa fa-linkedin-square"></i></a>
	<a href="https://www.pinterest.com/morettc/" class="pinterest"><i class="fa fa-pinterest-square"></i></a>
	<a href="https://instagram.com/odisbey/" class="instagram"><i class="fa fa-instagram"></i></a>
	</nav>
	</div>
	</div>
	</div>
	</p><div id="spanright">
	<span
	class="txt-rotate"
	data-period="2000"
	data-rotate='[ "","Hi.","I develop visuals for Print and the Web with a passion for illustration and editorial layout.","", "It has been more than a hobby for ten years now.",
	"I enjoy modern + clean design & seeing work evolve.",
	"A big motivator is being able to inspire a new generation of artists.",
	"I am currently accepting new commissions.",
	"For all inquiries regarding part or full-time job offers please send an email for further information."] '></span>
	</div>

	</body>
	var TxtRotate = function(el, toRotate, period) {
	this.toRotate = toRotate;
	this.el = el;
	this.loopNum = 0;
	this.period = parseInt(period, 10) \|\| 2220;
	this.txt = '';
	this.tick();
	this.isDeleting = false;
	};

	TxtRotate.prototype.tick = function() {
	var i = this.loopNum % this.toRotate.length;
	var fullTxt = this.toRotate[i];

	if (this.isDeleting) {
	this.txt = fullTxt.substring(0, this.txt.length - 1);
	} else {
	this.txt = fullTxt.substring(0, this.txt.length + 1);
	}

	this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';

	var that = this;
	var delta = 333 - Math.random() * 420;

	if (this.isDeleting) { delta /= 2.5; }

	if (!this.isDeleting && this.txt === fullTxt) {
	delta = this.period;
	this.isDeleting = true;
	} else if (this.isDeleting && this.txt === '') {
	this.isDeleting = false;
	this.loopNum++;
	delta = 500;
	}

	setTimeout(function() {
	that.tick();
	}, delta);
	};

	window.onload = function() {
	var elements = document.getElementsByClassName('txt-rotate');
	for (var i=0; i<elements.length; i++) {
	var toRotate = elements[i].getAttribute('data-rotate');
	var period = elements[i].getAttribute('data-period');
	if (toRotate) {
	new TxtRotate(elements[i], JSON.parse(toRotate), period);
	}
	}
	// INJECT CSS
	var css = document.createElement("style");
	css.type = "text/css";
	css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }";
	document.body.appendChild(css);
	};
	@import url(https://fonts.googleapis.com/css?family=Spinnaker);
	@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
	@import url(http://fonts.googleapis.com/css?family=Arimo:400,700,400italic,700italic);

	html,
	body {
	margin: 0 auto;
	width:100%;
	position:relative;
	background:#000;
	color: #fff;
	font-family: 'Arimo', sans-serif;
	text-rendering: optimizeLegibility;
	}
	.svg-wrapper {
	text-align: center;
	padding-top: 4em;
	position: relative;
	top: 0;
	width: 500px;
	height: 60px;
	}
	.shape {
	stroke-dasharray: 220 635;
	stroke-dashoffset: 250;
	stroke-width: 8px;
	fill: transparent;
	transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	-webkit-transition: all 1s;
	transition: all 1s;
	stroke: #E1A82C;
	}
	.logo a:hover {
	color: #E1A82C;
	}
	.text {
	font-size: .94em;
	letter-spacing: 8px;
	color: #fff;
	top: -117px;
	position: relative;
	text-transform: uppercase;
	font-family: 'Spinnaker', sans-serif;
	}

	.svg-wrapper:hover .shape {
	stroke-width: 3;
	stroke-dashoffset: 5;
	stroke-dasharray: 1075;
	}

	.logo a {
	padding: .10em;
	text-decoration: none;
	color: #fff;
	-moz-transition: all 0.35s;
	-o-transition: all 0.35s;
	-webkit-transition: all 0.35s;
	transition: all 0.35s;
	}



	.logo {
	letter-spacing: .025em;
	text-transform: uppercase;
	width: 100%;
	font-size: 3em;
	font-family: 'Spinnaker', sans-serif;
	padding: .25em 0;
	}

	.motto {
	letter-spacing: -.025em;
	line-height: 1.25em;
	font-size: 1.45em;
	font-family: 'Montserrat', sans-serif;
	padding: .05em 0;
	}

	#wrapper {
	background: #000 repeat fixed center;
	float:left;
	clear:left;
	margin: 0 auto;
	width: 100%;
	}

	#branding {
	text-align: center;
	width: 500px;
	margin: 0;
	padding: .25em;
	background: transparent;
	}
	/* side */

	#side {
	padding: 2em .25em 2em;
	background: transparent;
	width: 500px;
	}

	.containersocial {
	display: inline-block;
	width: 97%;
	text-align: center;
	padding: .25em .5em;
	}

	.containersocial a {
	padding: .25em .5em;
	font-size: 2.25em;
	float: none;
	-moz-transition: all 0.45s;
	-o-transition: all 0.45s;
	-webkit-transition: all 0.45s;
	transition: all 0.45s;
	}

	.pinterest i,
	.linkedin i,
	.codepen i,
	.behance i,
	.instagram i {
	color: #fff;
	text-decoration: none;
	-moz-transition: all 0.35s;
	-o-transition: all 0.35s;
	-webkit-transition: all 0.35s;
	transition: all 0.35s;
	}

	.pinterest i:hover {
	color: #cb2027;
	}

	.linkedin i:hover {
	color: #007bb6;
	}

	.codepen i:hover {
	color: #A7AFA6;
	}

	.behance i:hover {
	color: #1769ff;
	}

	.instagram i:hover {
	color: #517fa4;
	}

	#spanright {
	margin:120px 500px 0;
	font-size:22px;
	font-family: 'Arimo', sans-serif;
	text-rendering: optimizeSpeed;
	letter-spacing: .05em;
	line-height: 1.5em;
	width: 43%;
	z-index: 99;
	float:left;
	padding: 1em .75em;
	color: #E1A82C;
	font-weight: 400;
	position:absolute;
	}
	.txt-rotate {border-right: .05em solid #eee;
	animation: blink .3s steps(5, start) infinite;
	-webkit-animation: blink 1s steps(5, start) infinite;
	}
	@keyframes blink {
	to {
	border-right:.05em solid #000;
	}
	}
	@-webkit-keyframes blink {
	to {
	border-right:.01em solid #fff;
	}
	}