index.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>Andrew Yuan portfolio</title>
<meta name="keywords" content="" />
<meta name="description" content="Andrew Yuan education, sample work and contact information" />
<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. Specialization in Data Science.
			<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"> 
					<a href="EDAV-project.html">
	        		<img src="img/datavis3.png" width="150" height="75" />
	     			</a>
					<p><h3>Data Science</h3>
					<p>Predicting the 2014 Fifa World Cup result by simulating every possible competition outcome</p>
				</div>
			</div>
			<div class="column2">
				<div class="box"> 
					<a href="EDAV-assignment2.html">
	        		<img src="img/datavis2.png" width="150" height="75" />
	     			</a>
					<p><h3>Machine Learning</h3>
					<p>Modeling the outcome of an international soccer match with logistic regression</p>
				</div>
			</div>
			<div class="column3">
				<div class="box"> 
					<a href="methodology.html">
	        		<img src="img/PredictiveModeling.png" width="150" height="75" />
	     			</a>
					<p><h3>Predictive Modeling</h3>
					<p>Predictive modeling of the 2014 FIFA World Cup outcome probabilities with logistic regression and naive bayes</p>
				</div>
			</div>
			<div class="column4">
				<div class="box"> 
					<a class="image-popup-no-margins" href="img/DeepLearning.png">
	        		<img src="img/DeepLearning.png" width="150" height="75" />
	     			</a>
					<p><h3>Deep Learning</h3>
					<p>Deep learning algorithms and evolution research</p>
				</div>
			</div>
		</div>
		<div class="pbox2">
			<div class="column1">
				<div class="box"> 
					<a class="image-popup-no-margins" href="img/DataModeling.png">
	        		<img src="img/DataModeling.png" width="150" height="75" />
	     			</a>
					<p><h3>Data Modeling</h3>
					<p>Logical and physical data modeling for relational databases.</p>
				</div>
			</div>
			<div class="column2">
				<div class="box"> 
					<a class="image-popup-no-margins" href="img/BatchProcessesDesign.png">
	        		<img src="img/BatchProcessesDesign.png" width="150" height="75" />
	     			</a>
					<p><h3>Software Engineering</h3>
					<p>Software design, development, testing and deployment</p>
				</div>
			</div>
			<div class="column3">
				<div class="box"> 
					<a class="image-popup-no-margins" href="img/MIS.png">
	        		<img src="img/MIS.png" width="150" height="75" />
	     			</a>
					<p><h3>MIS</h3>
					<p>Banking Management Information System, part of the integration layer development and PMO teams.</p>
				</div>
			</div>
			<div class="column4">
				<div class="box">
					<a class="image-popup-no-margins" href="img/TechArch.png">
	        		<img src="img/TechArch.png" width="150" height="75" />
	     			</a>
					<p><h3>Technical Architecture</h3>
					<p>High level design of acquiring bank technical architecture</p>
				</div>
			</div>
		</div>
		<div class="pbox3">
			<div class="column1">
				<div class="box"> 
					<a class="image-popup-no-margins" href="img/PMO.png">
	        		<img src="img/PMO.png" width="150" height="75" />
	     			</a>
					<p><h3>Project Management</h3>
					<p>Project Management (planning, monitoring, controling) and PMO roles.</p>
				</div>
			</div>
			<div class="column2">
				<div class="box"> 
					<a class="image-popup-no-margins" href="img/ProcessDesign.png">
	        		<img src="img/ProcessDesign.png" width="150" height="75" />
	     			</a>
					<p><h3>Business Process Design</h3>
					<p>Business process design and optimization.</p>
				</div>
			</div>
			<div class="column3">

			</div>
			<div class="column4">
			</div>
		</div>

	</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() {

 		if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
			$(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: 500 // don't foget to change the duration also in CSS
	          }
	        });
		$('.simple-ajax-popup-align-top').magnificPopup({
          type: 'ajax',
          alignTop: true,
          overflowY: 'scroll' // as we know that popup content is tall we set scroll overflow by default to avoid jump
        });
     },
 
    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>

<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-50045474-1', 'andrewyuan.github.io');
  ga('send', 'pageview');

</script>

</html>