index - Copy.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
<link href="style/default.css" rel="stylesheet" type="text/css" media="all" />
<link href="style/fonts.css" rel="stylesheet" type="text/css" media="all" />
<link href="style/magnific-popup.css" rel="stylesheet"> 
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="lib/jquery.magnific-popup.min.js?v=0.9.9"></script>
<!--[if IE 6]><link href="default_ie6.css" rel="stylesheet" type="text/css" /><![endif]-->

<style type="text/css">
	    /* padding-bottom and top for image */
	    .mfp-no-margins img.mfp-img {
	      padding: 0;
	    }
	    /* position of shadow behind the image */
	    .mfp-no-margins .mfp-figure:after {
	      top: 0;
	      bottom: 0;
	    }
	    /* padding for main container */
	    .mfp-no-margins .mfp-container {
	      padding: 0;
	    }
</style>

</head>
<body>
<div id="header-wrapper">
	<div id="header" class="container">
		<div id="menu">
			<ul>
				<li class="current_page_item"><a href="#" accesskey="1" id="homepage">Homepage</a></li>
				<li><a href="#aboutme" accesskey="2" id="aboutmeBtn">About Me</a></li>
				<li><a href="#samplework" accesskey="3" id="sampleworkBtn">Sample Work</a></li>
				<li><a href="#getintouch" accesskey="4" title="getintouchBtn">Get in Touch</a></li>
			</ul>
		</div>
		<div id="logo">
			<h1><a href="#">Andrew Yuan</a></h1>
			<span>Hosted and published by <a href="http://www.github.com/" rel="nofollow">github.com</a></span> </div>
	</div>
</div>
<div id="wrapper1">
	<div id="aboutme" class="container">
		<div class="title">
			<h2><A NAME="aboutme">About me</A></h2>
			<span class="byline">Previous experience and education</span> </div>
		<div class="content">
			<p>Project manager and software engineer with extensive experience in a technology consulting firm in projects related to banking applications development, management information systems, processes optimization and technical architecture assessment.
			<br>Authorized to work in the United States and living in New York City.
			<p><strong>Computer Science</strong> bachelor degree by <a href="http://www5.usp.br/en" rel="nofollow">Universidade de São Paulo</a>
			<br><strong>Data Science</strong> certification by <a href="http://idse.columbia.edu/" rel="nofollow">Columbia University</a>
			<br><strong>Finance and Investments</strong> certification by <a href="http://portal.fgv.br/en" rel="nofollow">Fundação Getúlio Vargas</a>.</p>
			</div>
	</div>
</div>
<div id="wrapper3">
	<div id="portfolio" class="container">
		<div class="title">
			<h2><A NAME="samplework"></A>Sample Work</h2>
			<span class="byline">Some brief examples of work done in professional and academic experiences</span> </div>
		<div class="pbox1">
			<div class="column1">
				<div class="box"> <span class="icon icon-comments"></span>
					<h3>Vestibulum venenatis</h3>
					<p>Fermentum nibh augue praesent a lacus at urna congue rutrum.</p>
				</div>
			</div>
			<div class="column2">
				<div class="box"> <span class="icon icon-cogs"></span>
					<h3>Praesent scelerisque</h3>
					<p>Vivamus fermentum nibh in augue praesent urna congue rutrum.</p>
				</div>
			</div>
			<div class="column3">
				<div class="box"> <span class="icon icon-coffee"></span>
					<h3>Donec dictum metus</h3>
					<p>Vivamus fermentum nibh in augue praesent urna congue rutrum.</p>
				</div>
			</div>
			<div class="column4">
				<div class="box"> <span class="icon icon-cloud"></span>
					<h3>Mauris vulputate dolor</h3>
					<p>Rutrum fermentum nibh in augue praesent urna congue rutrum.</p>
				</div>
			</div>
		</div>
		<div class="pbox2">
			<div class="column1">
				<div class="box"> <span class="icon icon-asterisk"></span>
					<h3>Rhoncus volutpat</h3>
					<p>Fermentum nibh augue praesent a lacus at urna congue rutrum.</p>
				</div>
			</div>
			<div class="column2">
				<div class="box"> <span class="icon icon-headphones"></span>
					<h3>Sed odio sagittis</h3>
					<p>Vivamus fermentum nibh in augue praesent urna congue rutrum.</p>
				</div>
			</div>
			<div class="column3">
				<div class="box"> <span class="icon icon-user"></span>
					<h3>Aenean elementum</h3>
					<p>Vivamus fermentum nibh in augue praesent urna congue rutrum.</p>
				</div>
			</div>
			<div class="column4">
				<div class="box"> <span class="icon icon-signal"></span>
					<h3>Etiam posuere augue</h3>
					<p>Rutrum fermentum nibh in augue praesent urna congue rutrum.</p>
				</div>
			</div>
		</div>

	    <div class="html-code grid-of-images">
	      <a class="image-popup-vertical-fit" href="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_b.jpg" title="Caption. Can be aligned it to any side and contain any HTML.">
	        <img src="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg" width="75" height="75" />
	      </a>
	      <a class="image-popup-fit-width" href="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_b.jpg" title="This image fits only horizontally.">
	        <img src="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_s.jpg" width="75" height="75" />
	      </a>
	      <a class="image-popup-no-margins" href="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg">
	        <img src="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg" width="107" height="75" />
	      </a>
	    </div>
	    <script type="text/javascript">
	      $(document).ready(function() {
	
	        $('.image-popup-vertical-fit').magnificPopup({
	          type: 'image',
	          closeOnContentClick: true,
	          mainClass: 'mfp-img-mobile',
	          image: {
	            verticalFit: true
	          }
	          
	        });
	
	        $('.image-popup-fit-width').magnificPopup({
	          type: 'image',
	          closeOnContentClick: true,
	          image: {
	            verticalFit: false
	          }
	        });
	

	
	      });
	    </script>
	</div>
</div>

<div id="contact">
	<div class="title">
		<h2><A NAME="getintouch">Get in touch</A></h2>
		<span class="byline">I will be glad to hear from you!</span> </div>
	<ul class="contact">
		<li><a href="https://www.facebook.com/andrew.yuan.9" class="icon icon-facebook"><span></span></a></li>
		<li><a href="https://www.linkedin.com/in/andrewgky" class="icon icon-linkedin"><span>LinkedIn</span></a></li>
		<li><a href="https://plus.google.com/u/0/+AndrewYuanGK" class="icon icon-google-plus"><span>Google+</span></a></li>
		<li><a href="https://twitter.com/AndrewGKYuan" class="icon icon-twitter"><span>Twitter</span></a></li>
		<li><a href="https://github.com/andrewyuan" class="icon icon-github"><span>Github</span></a></li>
		<li><a href="mailto:andrew.gk.yuan@gmail.com" class="icon icon-envelope"><span>Gmail</span></a></li>
	</ul>
	<p>Copyright (c) 2014 Andrew Yuan. No rights reserved. | Photos by <a href="#">Me</a> | Design by <a href="http://www.freecsstemplates.org/" rel="nofollow">CSS Templates</a>.</p>
</div>
</body>
<script>
	var main = {
 
    onReady: function() {
		$(window).on('scroll', main.toggleOpacity);
		$('.image-popup-no-margins').magnificPopup({
	          type: 'image',
	          closeOnContentClick: true,
	          closeBtnInside: false,
	          fixedContentPos: true,
	          mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
	          image: {
	            verticalFit: true
	          },
	          zoom: {
	            enabled: true,
	            duration: 300 // don't foget to change the duration also in CSS
	          }
	        });
     },
 
    toggleOpacity: function(){
	    var fadeBegin = 1, fadeFinish = 700, fadingElement = $('#aboutme');
		var divPosition = { "elem1":{"name":"#aboutme", "fadeBegin":0, "fadeFinish":800},
							"elem2":{"name":"#portfolio", "fadeBegin":500, "fadeFinish":1400},
							"elem3":{"name":"#contact", "fadeBegin":1000, "fadeFinish":2000}
							};

    	var offset = $(document).scrollTop(); 
		//console.log("offset=" + offset);

		$.each(divPosition, function( i, elem ) {
			var opacity = 1;
		    fadingElement = $(elem["name"]);
		    fadeBegin = elem["fadeBegin"];
		    fadeFinish = elem["fadeFinish"];

		    //console.log(fadingElement);
		    
		    if( offset < fadeBegin ){
				//opacity = fadeBegin/(4*offset);
				opacity = 0; 
			} else if( offset >= fadeFinish ){
				//opacity = fadeFinish/(4*offset);
				opacity = 0;
			}
			//console.log(opacity)
			fadingElement.stop().animate({opacity: opacity}, 300);
		});
	}
};
 
$( document ).ready( main.onReady );
	
	
</script>
</html>