Circular Rotating Nav Bar

.DS_Store

bubble.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="450.781px" height="390.037px" viewBox="0 0 450.781 390.037" enable-background="new 0 0 450.781 390.037"
	 xml:space="preserve">
<g>
	<path fill="#FFFFFF" stroke="#FFFFFF" stroke-width="20" stroke-miterlimit="10" d="M10,151.866
		c0,32.241,15.787,62.546,45.654,87.641c24.275,20.398,57.195,36.184,94.008,45.266c9.178,2.465,14.018,8.816,18.792,16.412
		c6.459,10.275,12.755,20.712,20.567,30.04c14.193,16.944,32.603,29.309,52.97,37.666c17.376,7.129,36.507,11.147,55.341,11.147
		c10.426,0,19.872-1.256,27.328-3.631c12.782-4.071,16.273-10.613,16.951-15.383c0.889-6.261-1.743-14.793-19.33-19.896
		c-27.41-7.952-39.918-25.403-45.629-39.382c-4.417-11.221,5.074-12.872,5.074-12.872c93.227-16.42,159.057-72.158,159.057-137.01
		c0-38.746-22.997-74.848-64.755-101.658C335.643,24.279,282.146,10,225.392,10c-56.753,0-110.25,14.279-150.634,40.207
		C32.999,77.017,10.002,113.119,10,151.866z"/>
	<path fill="#FFFFFF" d="M167.762,278.601v0.002c51.117,129.371,207.883,88.63,151.006,72.13
		c-56.875-16.5-57.633-69.072-57.633-69.072l0,0c96.037-11.052,168.92-64.957,168.92-129.795C430.055,79.037,338.1,20,224.665,20
		C111.231,20,19.274,79.037,19.274,151.865C19.274,212.021,82.01,262.76,167.762,278.601z"/>
	<path d="M10.001,151.865c0,32.241,15.787,62.546,45.654,87.641c24.276,20.399,57.194,36.185,94.008,45.267
		c0.003,0,0.005,0.002,0.009,0.002c11.389,3.059,16.035,12.098,16.035,12.098v-0.002c30.596,60.98,86.916,83.168,131.625,83.168
		c0.003,0,0.003,0,0.006,0c10.42,0,19.866-1.256,27.322-3.631c12.782-4.071,16.273-10.613,16.951-15.383
		c0.889-6.261-1.743-14.793-19.33-19.896c-27.41-7.952-39.918-25.403-45.629-39.382c-4.417-11.221,5.074-12.872,5.074-12.872
		l-0.002-0.002c93.229-16.418,159.059-72.156,159.059-137.008c0-38.746-22.997-74.848-64.755-101.658
		C335.643,24.279,282.146,10,225.392,10c-56.753,0-110.25,14.279-150.634,40.207C32.999,77.017,10.002,113.119,10.001,151.865z
		 M31.139,159.427c-0.39-2.421-1.138-5.111-1.138-7.562c0-31.699,19.732-61.825,55.562-84.828C122.764,43.152,172.422,30,225.392,30
		c52.971,0,102.629,13.152,139.831,37.037c35.83,23.003,55.561,53.129,55.561,84.828c0,27.924-15.802,55.307-44.495,77.106
		c-27.767,21.094-65.813,35.791-107.81,41.754c-0.543,0.123-1.194,0.217-1.98,0.277c-0.082,0.006-0.156,0.02-0.236,0.025
		c-0.604,0.082-1.205,0.164-1.809,0.24c-13.088,2.315-12.123,16.088-12.123,16.088c0.758,5.957,2.752,16.033,8.008,26.979
		c7.178,14.957,21.935,34.465,51.74,44.547c-3.926,0.674-8.85,1.154-14.738,1.154c-12.533,0-37.404-2.244-63.26-17.273
		c-5.261-3.058-10.326-6.83-15.145-10.536c-8.879-6.83-16.643-14.874-23.103-24.029c-3.313-4.695-6.294-9.615-9.082-14.637
		c-2.067-3.727-3.911-7.539-5.771-11.371c-1.318-2.717-3.374-5.483-5.573-7.547c-4.546-4.264-10.373-6.549-16.36-8.318
		c-3.715-1.098-7.492-1.996-11.061-3.047c-10.262-3.019-20.463-6.243-30.396-10.229c-12.793-5.132-25.147-11.392-36.565-19.134
		c-10.193-6.912-19.718-14.962-27.759-24.315c-7.106-8.265-12.905-17.6-16.665-27.853c-1.766-4.814-3.083-9.777-4.108-14.797
		C31.982,164.453,31.542,161.943,31.139,159.427z"/>
	<g>
		<path d="M133.517,137.891c-0.607,0-1.224-0.057-1.842-0.172c-5.43-1.012-9.011-6.232-8-11.662
			c0.387-2.225,0.894-9.623-1.894-13.591c-3.175-4.519-2.086-10.757,2.433-13.932c4.52-3.175,10.757-2.085,13.932,2.433
			c8.104,11.532,5.514,27.023,5.192,28.752C142.441,134.529,138.239,137.891,133.517,137.891z"/>
	</g>
	<path d="M247.039,134.99c0,0-5.122-5.156-12.872-2.281s-3.467,13.816-3.467,13.816s-0.058-0.072-0.146-0.215
		c0.055,0.088,1.325,2.176,0.709,4.55c-0.51,1.97-2.272,4.077-5.048,6.111c-4.379,2.964-5.259-2.933-5.259-2.933l0,0
		c-0.309-3.876-0.238-8.796,0.417-13.613c0.751-5.467-3.068-10.51-8.535-11.266c-5.476-0.763-10.521,3.062-11.277,8.533
		c-0.039,0.281-0.951,6.971-0.723,14.49c0.379,12.521,3.641,20.715,9.972,25.046c1.969,1.347,5.216,2.922,9.64,2.922
		c3.353-0.001,7.381-0.905,12.037-3.499c10.197-5.684,16.359-12.92,18.316-21.508C253.283,144.252,247.686,135.906,247.039,134.99z"
		/>
	<path d="M181.192,145.02c-1.69-0.867-3.46-1.529-5.301-1.995c-1.264-0.319-2.538-0.494-3.838-0.573
		c-0.577-0.034-1.367,0.057-1.838-0.354c-0.441-0.384-0.246-1.015,0.119-1.386c0.471-0.48,1.095-0.764,1.66-1.111
		c0.606-0.373,1.21-0.743,1.839-1.078c1.303-0.695,2.656-1.293,4.024-1.847c0.629-0.255,1.265-0.493,1.909-0.708
		c5.236-1.732,8.083-7.378,6.359-12.619c-1.726-5.246-7.379-8.1-12.624-6.375c-13.438,4.42-28,14.695-24.811,29.104
		c0.546,2.467,1.487,5.075,2.849,7.212c1.136,1.781,2.658,3.306,4.336,4.579c1.444,1.097,3.025,1.938,4.726,2.562
		c1.479,0.543,3.017,1.008,4.575,1.258c1.767,0.285,3.538,0.51,5.301,0.826c0.881,0.158,1.925,0.426,2.208,1.403
		c0.266,0.915-0.417,1.798-1.13,2.298c-1.082,0.758-2.379,1.236-3.597,1.729c-2.411,0.978-4.832,1.899-7.283,2.771
		c-1.758,0.627-3.548,1.179-5.333,1.724c-5.282,1.612-8.256,7.202-6.644,12.484c1.316,4.31,5.277,7.083,9.561,7.082
		c0.967,0,1.951-0.142,2.924-0.438c23.784-7.262,34.346-15.002,35.315-25.877C197.225,157.561,192.075,150.606,181.192,145.02z"/>
	<path d="M309.626,129.621c-4.267-4-11.38-5.363-21.146-4.055c-3.77,0.506-13.237,2.204-19.715,7.033
		c-7.658,5.71-7.699,13.314-5.377,18.211c1.771,5.568,0.971,33.42-0.902,56.146c-0.453,5.504,3.642,10.334,9.146,10.788
		c0.28,0.022,0.558,0.034,0.833,0.034c5.15,0,9.523-3.954,9.955-9.18c0.045-0.545,1.107-13.516,1.65-27.788
		c0.003-0.058,0.004-0.111,0.007-0.169c0-0.007,0.001-0.011,0.001-0.018c0-0.013,0.001-0.023,0-0.036
		c0.009-0.233,0.016-0.452,0.023-0.683c0.186-1.871,1.396-2.526,2.094-2.748c0.149-0.033,0.291-0.07,0.438-0.104
		c0.031-0.005,0.054-0.007,0.054-0.007v-0.006c20.16-4.689,26.463-16.141,28.429-22.781
		C317.775,145.275,315.518,135.144,309.626,129.621z M286.146,156.436c-2.088,0.461-2.104-2.143-2.299-3.521
		c-0.113-0.792-0.234-1.586-0.312-2.383c-0.102-1.025-0.186-2.178,0.506-3.031c0.77-0.95,2.094-1.129,3.209-1.394
		c1.451-0.345,2.923-0.615,4.402-0.806c1.613-0.209,4.22-0.678,4.395,1.67c0.046,0.623-0.008,1.506-0.242,2.088
		c-1.201,2.99-4.003,4.914-6.813,6.232C288.104,155.707,287.105,156.223,286.146,156.436z"/>
</g>
</svg>

face.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>