Micheal Gleeson - Portfolio Website

by Mike Gleeson

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id="splash">
  <a href="#">
    <div class="micheal" style="display:none;">
      <span>
        M
      </span>
      <span>
        I
      </span>
      <span>
        C
      </span>
      <span>
        H
      </span>
      <span>
        E
      </span>
      <span>
        A
      </span>
      <span>
        L
      </span>
    </div>

    <div class="gleeson" style="display:none;">
      <span>
        G
      </span>
      <span>
        L
      </span>
      <span>
        E
      </span>
      <span>
        E
      </span>
      <span>
        S
      </span>
      <span>
        O
      </span>
      <span>
        N
      </span>
    </div>
  </a>
</div>


<div id="mainPage" style="display:none;">
  <h1 class="header">
    Micheal Gleeson
  </h1>
  <h2 class="header">
  Software Developer, Artist, Philosopher
  </h2>
  <div class="gradient" style="display:none;">
  <h3>
  About Me
  </h3>
  
  <img...

CSS

a
{
  text-decoration:none;
  color:#FFF;
  position: relative;
  transform: translateY(-50%);
  z-index:2;
}

.micheal, .gleeson
{
  font-family:"Calibri";
  font-size:2em;
}

.micheal
{
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}

.gleeson
{
  /* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}

a:hover
{
  color: #AFAFAF;
}

html, 
body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

.gradient
{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+0,000000+100;Black+3D+%231 */
background: #45484d; /* Old browsers */
background: -moz-linear-gradient(45deg,  #45484d 0%, #000000 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  #45484d 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  #45484d 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */


  width:100%;
  height:100%;
  position:fixed;
  z-index:1;
  font-family: 'Open Sans', sans-serif;
  color: #FFF;
  text-shadow: 1px 2px 1px #676767;
}

.header {
  font-family: 'Fjord One', serif;
  text-align:center;
  text-shadow: none;
  -webkit-animation-name: example; /* Chrome, Safari, Opera */
  -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
 ...

JavaScript

/*!
 * jQuery Color Animations v@VERSION
 * https://github.com/jquery/jquery-color
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * Date: @DATE
 */

(function( root, factory ) {
	if ( typeof define === "function" && define.amd) {

		// AMD. Register as an anonymous module.
		define( [ "jquery" ], factory);
	} else if ( typeof exports === "object" ) {
		module.exports = factory( require( "jquery" ) );
	} else {
		factory( root.jQuery );
	}
})( this, function( jQuery, undefined ) {

	var stepHooks = "backgroundColor borderBottomColor borderLeftColor borderRightColor borderTopColor color columnRuleColor outlineColor textDecorationColor textEmphasisColor",

	// plusequals test for += 100 -= 100
	rplusequals = /^([\-+])=\s*(\d+\.?\d*)/,
	// a set of RE's that can match strings and generate color tuples.
	stringParsers = [{
			re: /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,
			parse: function( execResult ) {
				return [
					execResult[ 1 ],
					execResult[ 2 ],
					execResult[ 3 ],
					execResult[ 4 ]
				];
			}
		}, {
			re: /rgba?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,
			parse: function( execResult ) {
				return [
					execResult[ 1 ] * 2.55,
					execResult[ 2 ] * 2.55,
					execResult[ 3 ] * 2.55,
					execResult[ 4 ]
				];
			}
		}, {
			// this regex ignores A-F because it's compared against an already lowercased string
			re: /#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})/,
			parse: function( execResult ) {
				return [
					parseInt( execResult[ 1 ], 16 ),
					parseInt( execResult[ 2 ], 16 ),
					parseInt( execResult[ 3 ], 16 )
				];
			}
		}, {
			// this regex ignores A-F because it's compared against an already lowercased string
			re: /#([a-f0-9])([a-f0-9])([a-f0-9])/,
			parse: function( execResult ) {
				return [
					parseInt( execResult[ 1 ] + execResult[ 1 ],...