Circular Rotating Nav Bar

.DS_Store

bubble.svg

face.svg

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="392.211px" height="601.879px" viewBox="0 0 392.211 601.879" enable-background="new 0 0 392.211 601.879"
	 xml:space="preserve">
<g>
	<path fill="#FFFFFF" stroke="#FFFFFF" stroke-width="20" stroke-miterlimit="10" d="M354.042,114.151
		C302.007,6.538,196.276,14.396,145.464,18.177c-10.524,0.783-20.466,1.521-24.357,0.699C68.966,7.853,53.671,7.286,46.722,16.122
		c-3.049,3.875-3.499,9.055-1.205,13.852c1.588,3.32,4.055,6.846,6.575,10.312c-5.743-0.895-10.831-0.637-15.177,0.777
		c-6.263,2.037-10.863,6.418-12.954,12.332c-4.202,11.89,2.812,26.715,15.316,32.375c2.18,0.986,7.745,3.504,9.321,4.992
		c-0.098,0.764-0.579,2.853-2.892,7.205c-6.235,11.738-9.564,24.378-11.103,31.576c-11.996,4.806-18.883,8.629-19.513,8.982
		c-4.808,2.706-6.51,8.792-3.811,13.604c2.699,4.812,8.792,6.526,13.608,3.833c2.288-1.279,5.429-2.847,9.303-4.573l3.867,20.214
		c-0.543,2.583-0.077,5.373,1.536,7.721c1.939,2.821,5.067,4.337,8.25,4.337c1.373,0,2.755-0.289,4.058-0.871l0,0
		c0,0-24.423,21.354-26.423,53.604c-1.657,26.723,14.386,45.167,19.938,50.71c-3.055-2.212-7.232-2.601-10.743-0.641
		c-4.821,2.693-6.547,8.786-3.853,13.606c0.282,0.505,2.557,4.445,7.235,9.471l-0.86-0.689c0.547,0.497,0.858,0.688,0.861,0.689
		c0,0.001,0,0.001,0.001,0.001c-0.001,0.009-4.52,37.933,15.42,66.954c0.118,0.188,0.238,0.373,0.369,0.554
		c0.001,0,0.001,0.001,0.001,0.001l0,0c0.55,0.753,1.209,1.444,1.985,2.041c1.634,1.255,3.283,2.467,4.944,3.642
		c-7.879,44.286-12.985,82.462,20.587,108.797c14.67,11.508,14.879,26.695,13.026,36.371l0.001,0.001c0,0-0.003,0.013-0.004,0.016
		c-0.184,0.955-0.385,1.854-0.597,2.693c-0.966,5.529-1.74,18.075,9.446,23.64c40.519,20.232,78.311,32.438,112.429,36.285
		c7.953,0.896,15.716,1.345,23.275,1.345c20.531,0,39.558-3.303,56.785-9.876c40.911-15.611,57.351-44.237,58.029-45.448
		l0.744-1.327l0.316-1.487c0.153-0.725,15.465-73.358,23.057-160.48C388.154,255.291,380.134,168.114,354.042,114.151z"/>
	<g>
		<path d="M116.967,148.146c-5.023-2.296-10.955-0.084-13.25,4.939c-0.246,0.537-24.878,54.002-49.813,72.552
			c-10.598,7.884-12.649,17.157-12.504,23.55c0.515,22.565,29.711,42.927,33.038,45.174c1.716,1.159,3.662,1.715,5.588,1.715
			c3.21,0,6.363-1.543,8.296-4.404c3.091-4.576,1.887-10.793-2.689-13.885c-9.656-6.521-24.037-20.266-24.237-29.056
			c-0.025-1.101-0.084-3.677,4.446-7.047c29.061-21.618,54.979-77.905,56.068-80.29C124.203,156.37,121.99,150.439,116.967,148.146z
			"/>
		<circle cx="112.511" cy="258.896" r="10.304"/>
		<path d="M354.042,114.151C302.007,6.538,196.276,14.396,145.464,18.177c-10.524,0.783-20.466,1.521-24.357,0.699
			C68.966,7.853,53.671,7.286,46.722,16.122c-3.049,3.875-3.499,9.055-1.205,13.852c1.588,3.32,4.055,6.846,6.575,10.312
			c-5.743-0.895-10.831-0.637-15.177,0.777c-6.263,2.037-10.863,6.418-12.954,12.332c-4.202,11.89,2.812,26.715,15.316,32.375
			c2.18,0.986,7.745,3.504,9.321,4.992c-0.098,0.764-0.579,2.853-2.892,7.205c-6.235,11.738-9.564,24.378-11.103,31.576
			c-11.996,4.806-18.883,8.629-19.513,8.982c-4.808,2.706-6.51,8.792-3.811,13.604c2.699,4.812,8.792,6.526,13.608,3.833
			c4.364-2.44,11.805-5.921,21.593-9.583c0.263-0.085,0.52-0.181,0.772-0.287c4.149-1.537,8.706-3.1,13.623-4.629
			c-3.642,8.166-9.522,17.643-18.706,23.955c-4.551,3.129-5.704,9.354-2.576,13.905c1.939,2.821,5.067,4.337,8.25,4.337
			c1.952,0,3.925-0.571,5.655-1.761c19.556-13.442,27.791-35.571,30.834-46.668c7.743-1.716,15.977-3.212,24.59-4.337
			c20.484-2.676,41.026-3.099,61.353-1.285c1.275,4.908,3.665,11.556,8.153,19.438c11.76,20.653,32.24,40.57,60.872,59.197
			c1.685,1.096,3.574,1.619,5.444,1.619c3.27,0,6.475-1.603,8.392-4.548c3.013-4.63,1.7-10.823-2.93-13.835
			c-37.274-24.25-51.937-46.043-57.692-58.971c1.525,0.262,3.05,0.528,4.57,0.816c36.191,6.839,71.445,21.023,104.781,42.158
			c1.66,1.053,3.514,1.555,5.346,1.555c3.311,0,6.551-1.643,8.455-4.646c2.957-4.664,1.572-10.844-3.092-13.801
			c-35.661-22.607-73.465-37.758-112.358-45.027c-31.155-5.824-63.047-6.625-94.789-2.383c-18.431,2.465-34.608,6.326-47.996,10.379
			c1.484-4.533,3.428-9.49,5.936-14.211c3.44-6.475,7.031-14.953,4.248-23.112c-3.063-8.981-12.111-13.077-20.094-16.688
			c-3.491-1.581-5.098-5.895-4.75-7.346c0.781-0.403,3.744-0.977,9.694,0.572c6.013,1.564,18.524,4.822,24.455-3.902
			c5.79-8.52-0.901-17.744-7.43-26.672c9.555,0.827,25.436,3.582,47.477,8.241c6.674,1.411,16.448,0.684,29.977-0.321
			c49.969-3.713,142.978-10.631,189.089,84.735c56.479,116.804,4.306,381.809-0.443,405.102
			c-5.615,8.825-21.781,26.082-48.281,35.842c-20.551,7.567-44.272,9.832-70.504,6.732c-28.546-3.373-60.11-13.146-94.026-29.05
			c-8.764-4.512-7.841-16-7.841-16l-0.003-0.004c1.417-15.696-2.577-35.061-21.227-49.688C71.54,458.4,72.248,434.81,79.171,393.786
			c7.979,4.005,16.195,7.149,24.598,9.428c0.43,0.149,0.87,0.268,1.319,0.356c10.456,2.714,21.193,4.085,32.107,4.085
			c7.48-0.001,15.049-0.646,22.661-1.941c29.72-5.062,59.541-20.279,81.815-41.75c26.896-25.923,36.125-54.129,23.517-71.858
			c-9.863-13.868-24.934-19.262-44.793-16.03c-15.653,2.546-32.768,9.906-50.886,17.697c-19.541,8.404-39.748,17.094-57.989,19.471
			c-45.685,5.949-62.474-21.623-63.273-22.989c-2.71-4.774-8.77-6.472-13.572-3.791c-4.821,2.693-6.547,8.786-3.853,13.606
			c0.71,1.271,13.979,24.254,46.646,31.712l14.1,45.75c-8.143-3.745-16.019-8.517-23.55-14.302
			c-4.38-3.362-10.658-2.54-14.022,1.839c-3.364,4.38-2.541,10.656,1.839,14.021c1.634,1.255,3.283,2.467,4.944,3.642
			c-7.879,44.286-12.985,82.462,20.587,108.797c14.67,11.508,14.879,26.695,13.026,36.371l0.001,0.001c0,0-0.003,0.013-0.004,0.016
			c-0.184,0.955-0.385,1.854-0.597,2.693c-0.966,5.529-1.74,18.075,9.446,23.64c40.519,20.232,78.311,32.438,112.429,36.285
			c7.953,0.896,15.716,1.345,23.274,1.345c20.531,0,39.559-3.303,56.785-9.876c40.912-15.611,57.352-44.237,58.03-45.448
			l0.744-1.327l0.317-1.487c0.152-0.725,15.465-73.358,23.056-160.48C388.154,255.291,380.134,168.114,354.042,114.151z
			 M248.891,303.698c6.754,9.494-4.791,29.513-19.494,44.285l-16.273-49.644C230.014,293.332,241.792,293.719,248.891,303.698z
			 M177.412,312.146c5.984-2.572,11.603-4.947,16.874-7.062l18.635,56.846c-10.413,7.494-21.912,13.598-33.819,17.972L160.43,319.32
			C166.126,316.995,171.795,314.562,177.412,312.146z M99.111,334.094c4.716-0.013,9.706-0.329,14.994-1.019
			c9.128-1.189,18.352-3.61,27.571-6.701l18.177,58.981c-1.118,0.224-2.236,0.451-3.354,0.643
			c-14.154,2.41-28.124,2.141-41.612-0.716L99.111,334.094z"/>
	</g>
</g>
</svg>

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Circle Text</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Anonymous+Pro' rel='stylesheet' type='text/css'>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"></script>
	<script src="http://circletype.labwire.ca/js/circletype.js"></script>

	<style type="text/css">
	body{
		background-color: #212121;
		height: 100%;
		width: 100%;
		position: absolute;
		overflow: hidden;
	}

	.container{
		display: flex;
		display: -webkit-flex;
		justify-content: center;
		-webkit-justify-content: center;
		align-items: center;
		-webkit-align-items: center;
		padding: 0;
		position: relative;
		width: 100%;
		height: 100%;
	}
	h1{
		font-family: 'Roboto Slab', serif;
		color: white;
		font-size: 11.5vmin;
		font-weight: 300;
		-webkit-animation-name: turn;
		-webkit-animation-direction: reverse;
		-webkit-animation-duration: 30s;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-timing-function: linear;
		animation-name: turn;
		animation-direction: reverse;
		animation-duration: 30s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		-o-animation-name: turn;
		-o-animation-direction: reverse;
		-o-animation-duration: 30s;
		-o-animation-iteration-count: infinite;
		-o-animation-timing-function: linear;
	}

	h2{
		font-family: 'Anonymous Pro', 'Courier New', monospace;
		color: #d3d3d3;
		font-size: 5vmin;
		font-weight: 400;
		-webkit-animation-name: turn;
		-webkit-animation-duration: 60s;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-timing-function: linear;
		animation-name: turn;
		animation-duration: 60s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
	}

	@-webkit-keyframes turn{
		0%{-webkit-transform: rotate(0);}
		100%{-webkit-transform: rotate(360deg);}
	}

	@keyframes turn{
		0%{transform: rotate(0);}
		100%{transform: rotate(360deg);}
	}

	a{
		text-decoration: none;
		color: #d3d3d3;
	}
	a:hover{
		color: white;
	}
	#face{
		position: fixed;
		top: 50%;
		left: 50%;
		max-width: 25vmin;
		transform: translate(-45%, -50%);
		-webkit-transform: translate(-45%, -50%);
		-moz-transform: translate(-45%, -50%);
		-ms-transform: translate(-45%, -50%);
		-o-transform: translate(-45%, -50%);
	}
	#bubble{
		max-width: 25vmin;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-110%, -120%);
		-webkit-transform: translate(-110%, -120%);
		-moz-transform: translate(-110%, -120%);
		-ms-transform: translate(-110%, -120%);
		-o-transform: translate(-110%, -120%);
		display: none;
	}
	</style>
</head>
<body>
	<div class="container">
		<img id= "face" src="face.svg">
		<img id= "bubble" src="bubble.svg">
		<h1 id="name">Designer &bigstar; Alberto Guillermo de la Cruz &bigstar;&nbsp;</h1>
		<h2 id="links">About &mdash; Projects &mdash; R&eacute;sum&eacute; &mdash; Twitter &mdash; Github &mdash; LinkedIn &mdash;&nbsp;</h2>
	</div>

	<script type="text/javascript">
		$('h1').circleType();
		$('h2').circleType();

		// FOR ABOUT
		var aboutLink = document.createElement('a');
		aboutLink.href="http://albertogui.com";
		for(i=1; i<6; i++){
			var linkDiv=document.getElementsByTagName('h2')[0].getElementsByClassName("char"+i)[0];
			aboutLink.appendChild(linkDiv);
		};
		document.getElementById('links').appendChild(aboutLink);

		// FOR PROJECTS 
		var projectsLink = document.createElement('a');
		projectsLink.href="http://bl.ocks.org/agdelax";
		for(i=9; i<18; i++){
			var linkDiv=document.getElementsByTagName('h2')[0].getElementsByClassName("char"+i)[0];
			projectsLink.appendChild(linkDiv);
		};
		$(projectsLink).insertAfter("h2 .char8");

		// FOR RESUME 
		var resumeLink = document.createElement('a');
		resumeLink.href="http://albertogui.com/resume";
		for(i=20; i<26; i++){
			var linkDiv=document.getElementsByTagName('h2')[0].getElementsByClassName("char"+i)[0];
			resumeLink.appendChild(linkDiv);
		};
		$(resumeLink).insertAfter("h2 .char19");

		
		// FOR TWITTER
		var twitterLink = document.createElement('a');
		twitterLink.href="http://twitter.com/agdelax";
		for(i=29; i<36; i++){
			var linkDiv=document.getElementsByTagName('h2')[0].getElementsByClassName("char"+i)[0];
			twitterLink.appendChild(linkDiv);
		};
		$(twitterLink).insertAfter("h2 .char28");

		
		// FOR GITHUB
		var githubLink = document.createElement('a');
		githubLink.href="http://github.com/agdelax";
		for(i=39; i<45; i++){
			var linkDiv=document.getElementsByTagName('h2')[0].getElementsByClassName("char"+i)[0];
			githubLink.appendChild(linkDiv);
		};
		$(githubLink).insertAfter("h2 .char38");

		
		// FOR LINKEDIN
		var linkedinLink = document.createElement('a');
		linkedinLink.href="http://linkedin.com/in/agdelax";
		for(i=48; i<56; i++){
			var linkDiv=document.getElementsByTagName('h2')[0].getElementsByClassName("char"+i)[0];
			linkedinLink.appendChild(linkDiv);
		};
		$(linkedinLink).insertAfter("h2 .char47");

		$("#face").hover(function () {
			document.getElementById('bubble').style.display="block";
		}, function(){
			document.getElementById('bubble').style.display="none";
		});

	</script>
</body>
</html>