<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!-- Meta Tag for responsive -->
<meta name=”viewport” content=”width=1024, minimal-ui”>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Malte Spielberger</title>

<!-- Loading of stylesheet for the design -->
<link href="css/main.css" rel="stylesheet" type="text/css" />

<!-- This tells the page to watch for special styling for IE9 -->
<!--[if IE 9 ]>    <html class= "ie9"> <![endif]-->

<!-- Important external stylesheets -->
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.css">
<link rel="stylesheet" href="css/fontello.css">
<link rel="stylesheet" href="css/jquery.fancybox8cbb.css?v=2.1.5" type="text/css" media="screen" />
<link rel="stylesheet" href="css/jquery.fs.wallpaper.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/animate.css">

<!-- Finally we will load the font from Google Fonts -->
<link href='//fonts.googleapis.com/css?family=Raleway:400,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>

</head>
<body id="top">

<div id="video_element">

		<!-- Start of Main Title + Intro -->
		<div class="huge-title">

				<img src="img/headshot2.jpg" alt="Jonathan Atkinson" class="headshot wow tada" data-wow-delay="3s" data-wow-offset="80" data-wow-duration="1s">
				<h1 class="wow bounceInDown" data-wow-offset="80" data-wow-duration="3s">Malte Spielberger</h1>

				<!-- Start of Owl Testimonial Carousel -->
				<div class="testimonials owl-carousel">

						<div><!-- Start of Slide 1 -->
								<div class="button-box"><h4>Founder</h4></div>
						</div>

						<div><!-- Start of Slide 2 -->
								<div class="button-box"><h4>Programmer</h4></div>
						</div>

						<div><!-- Start of Slide 3 -->
								<div class="button-box"><h4>Hard Worker</h4></div>
						</div>

				</div><!-- End of Owl Testimonial Carousel -->

		</div><!-- End of Main Title + Intro -->

		<!-- Start of Scroll Down Message and animation -->
		<div id="godown" class="floating">

				<p><a href="#About">mehr erfahren</a></p>
				<img src="img/godown.png" alt="down"/>

		</div><!-- End of Scroll Down Message and animation -->

		<!-- Start of Shade - this is the css based gradient over the image for that cool effect -->
		<div class="shade"></div><!-- End of Shade -->

</div><!-- End of Video Element -->



<!-- Start of Wrapper - the full width container -->
<div class="wrapper">

		<!-- Start of Container -->
		<div class="container">



				<!-- AT A GLANCE SECTION -->

				<!-- Start of Content - where the content be -->
				<div class="content2">

						<!-- Start of Hero - The main top image like a phone etc -->

				</div><!-- End of Content -->



				<!-- CV / RESUME SECTION -->

				<!-- Start of White Container -->
				<div class="parallax1">

						<!-- Start of Content -->
						<div class="content" id="CV">

								<h2 class="border wow fadeInRightBig" data-wow-offset="80" data-wow-duration="2s">curriculum vitae</h2>

								<!-- Start of 1/3 Column -->
								<div class="one_third clearfix wow fadeInUp" data-wow-offset="80" data-wow-duration="2s">
										<h2>Ausbildung</h2>
								</div><!-- End of 1/3 Column -->

								<!-- Start of 2/3 Column Last -->
								<div class="two_third_last wow fadeInUpBig" data-wow-offset="80" data-wow-duration="2s">
										<h3>Bachelor of Science</h3>
										<h5>Universtät Zürich</h5>
										<p>Titles are appropriately sized and are darker giving a good visual hierachy to your page and content. With the light background and not-quite-so-dark font color it's also easy on the eyes for reading making your copy pop, and your message stand-out.</p>
								</div><!-- End of 2/3 Column Last -->

								<div class="bigspace"></div>

								<!-- Start of 1/3 Column -->
								<div class="one_third wow fadeInUp" data-wow-offset="80" data-wow-duration="2s">
										<h2>Arbeitserfahrungen</h2>
								</div><!-- End of 1/3 Column -->

								<!-- Start of 2/3 Column Last -->
								<div class="two_third_last wow fadeInUpBig" data-wow-offset="80" data-wow-duration="2s">
										<h3>Founder</h3>
										<h5>uniboard AG</h5>
										<!-- <p class="small" id="calc_uniboard"></p> -->
										<div class="date">Juni 2014 - heute</div>
										<p>Nachhaltiger studentischer Austausch über die Grenzen von Hochschulen, Studienrichtungen und Jahrgängen hinweg - kostenlos, anonym, seit 2002.</p>
								</div><!-- End of 2/3 Column Last -->

								<!-- Start of 2/3 Column Last -->
								<div class="two_third_last wow fadeInUpBig" data-wow-offset="80" data-wow-duration="2s">
										<h3>CTO</h3>
										<h5>Eyekon AG</h5>
										<!-- <p class="small">5 Jahre, 1 Monat></p> -->
										<div class="date">Februar 2010 - heute</div>
										<p>Eyekon – Agentur für integrierte und crossmediale Kommunikation.<br />Magische Momente für Menschen und Marken.</p>
								</div><!-- End of 2/3 Column Last -->

								<!-- Start of 2/3 Column Last -->
								<div class="two_third_last wow fadeInUpBig" data-wow-offset="80" data-wow-duration="2s">
										<h3>Ruby on Rails Developer</h3>
										<h5>webNwine AG</h5>
										<!-- <p class="small">2 Jahre</p> -->
										<div class="date">September 2008 - Januar 2010</div>
										<p>Ihre persönliche Weinkellerverwaltung und Informationen zu über 30’000 Weinen!</p>
										<!-- <a href="#" class="button">LinkedIn Profile</a> -->
								</div><!-- End of 2/3 Column Last -->

								<!-- Start of 2/3 Column Last -->
								<div class="two_third_last wow fadeInUpBig" data-wow-offset="80" data-wow-duration="2s">
										<h3>Junior Developer</h3>
										<h5>amazee</h5>
										<!-- <p class="small">6 Monate</p> -->
										<div class="date">März 2008 - August 2008</div>
										<p>Amazee ist eine kostenfreie Plattform, die es dir ermöglicht, weltweit anderen Menschen an einem Projekt zusammenarbeiten. Welche Ziele du auch immer anstrebst, mit Amazee kannst du sie verwirklichen.</p>
										<!-- <a href="https://www.xing.com/profile/Malte_Spielberger" class="button-reverse">Xing</a> -->
										<!-- <a href="#" class="button">LinkedIn Profile</a> -->
								</div><!-- End of 2/3 Column Last -->

						</div><!-- End of Content -->

				</div><!-- End of White Container -->



				<!-- FOOTER SECTION -->

				<!-- Start Of Footer -->
				<footer>

						<!-- Start of Content -->
						<div class="content">

								<p>
									Lochmühle 8<br>
									8427 Rorbas<br>
									<script type="text/javascript" language="javascript">
									<!--
									{ coded = "e@JRT.88"
										key = "dh01UfQt3MEVFyWRYPLHnZkrA95q4vuompxB2gKlejcG6CbJTa8DNwXIzOsiS7"
										shift=coded.length
										link=""
										for (i=0; i<coded.length; i++) {
											if (key.indexOf(coded.charAt(i))==-1) {
												ltr = coded.charAt(i)
												link += (ltr)
											}
											else {
												ltr = (key.indexOf(coded.charAt(i))-shift+key.length) % key.length
												link += (key.charAt(ltr))
											}
										}
									document.write("<a href='mailto:"+link+"'>"+link+"</a>")
									}
									//-->
									</script><noscript>Sorry, you need Javascript on to email me.</noscript>

								</p>

						</div><!-- End of Content -->

				</footer><!-- End Of Footer -->

		</div><!-- End of Container -->

</div><!-- End of Wrapper -->

<!--Loading Scripts -->
<!-- First we will load jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
	today = new Date()
	// past = new Date(2010,05,01) // remember this is equivalent to 06 01 2010
	//dates in js are counted from 0, so 05 is june
	$('#calc_uniboard').html( calcDate(today, new Date(2014, 05, 01)) )
	$('#calc_eyekon').html( calcDate(today, new Date(2009, 01, 14)) )
});

function calcDate(date1,date2) {
		var diff = Math.floor(date1.getTime() - date2.getTime());
		var day = 1000 * 60 * 60 * 24;

		var days = Math.floor(diff/day);
		var months = Math.floor(days/31);
		var years = Math.floor(months/12);

		var message = date2.toDateString();
		message += " was "
		message += days + " days "
		message += months + " months "
		message += years + " years ago \n"

		return message
		}


</script>

<!-- Now we load the JS files for the fancy things on the page -->
<script type="text/javascript" src="js/owl.carousel.js"></script>
<script type="text/javascript" src="js/jquery.fitvids.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.pack8cbb.js?v=2.1.5"></script>
<script type="text/javascript" src="js/retina.js"></script>
<script type="text/javascript" src="js/jquery.scrollToTop.min.js"></script>
<script type="text/javascript" src="js/jquery.fs.wallpaper.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.plusanchor.js"></script>
<script type="text/javascript" src="js/jquery.knob.js"></script>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/wow.min.js"></script>
<script>
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

	ga('create', 'UA-7541853-1', 'auto');
	ga('send', 'pageview');

</script>

</body>
</html>