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 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>New York City based Data Scientist with extensive experience in Analytics and Technology Consulting in the Financial Services Industry with projects related to banking, finance and risk. Expertise in machine learning, natural language processing, systems integration, management information systems, processes optimization, technical architecture and project management.
			<br>
			<p><strong>Computer Science</strong> bachelor degree from <a href="http://www5.usp.br/en" rel="nofollow">Universidade de São Paulo</a>
			<br><strong>Data Science</strong> certification from <a href="http://datascience.columbia.edu/" rel="nofollow">Columbia University</a>
			<br><strong>Finance and Investments</strong> certification from <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="FWC2018_prediction.html">
	        		<img src="img/FWC2018.png" width="150" height="75" />
	     			</a>
					<p><h3>2018 FWC prediction</h3>
					<p>Predicting the 2018 Fifa World Cup Russia results by applying Machine Learning models and World Cup simulations.</p>
				</div>
			</div>
			<div class="column2">
				<div class="box"> 
					<a href="EDAV-project.html">
	        		<img src="img/datavis3.png" width="150" height="75" />
	     			</a>
					<p><h3>2014 FWC prediction</h3>
					<p>Predicting the 2014 Fifa World Cup results by simulating every possible competition outcome. Published by <a href='http://www.economist.com/blogs/graphicdetail/2014/06/daily-chart?fsrc=scn%2Ftw_ec%2Fhow_to_win_the_world_cup'>The Economist</a>.</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 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>
		<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 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>Evolution of deep learning research.</p>
				</div>
			</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 | 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>