
<!doctype html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta charset="utf-8">
	<title>Mathieu BUONOMO</title>
	<meta name="description" content="Founder at 13FACTORY">
	<meta name="author" content="Mathieu BUONOMO">
	<meta name="keywords" content="dev, developeur, lead dev, javascript, php">
	<!--[if lt IE 9]>
		<script src="js/html5shiv/html5shiv.js" type="text/javascript"></script>
		<script src="js/html5shiv/html5shiv-printshiv.js" type="text/javascript"></script>
		<style type="text/css">.site_nav { border-bottom: 1px solid #d4d4d4; }</style>
	<![endif]-->
	<link href='http://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="css/bootstrap/bootstrap.css">
	<link rel="stylesheet" href="css/bootstrap/bootstrap-responsive.css">
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div class="wrapper">
	<div class="container">
	
		<div class="upbtnwrapp"><div class="upbtn"><span class="icon-up-open-big"></span></div></div>
	
		<!-- NAVIGATION -->
		<nav class="site_nav" id="site_nav">
			<ul class="">
				<li><a href="#about_me">About me</a></li>
				<li><a href="#my_expertise">Skills</a></li>
				<li><a href="#experience">Experience</a></li>
				<li><a href="#education">Education</a></li>
				<li><a href="#portfolio">Portfolio</a></li>
			</ul>
		</nav> <!-- /site_nav -->
		<div id="aftermenuspace"></div>
		<!-- HEADER -->
		<header class="site_header centerise borderbtn">
			<div id="logoline"><h1>Mathieu BUONOMO</h1></div>
			<h2>WEB DEV</h2>
		</header> <!-- /site_header -->
		<!-- end HEADER -->
		<div class="container-fluid page">
		
			<!-- ABOUT ME -->
			<section class="row-fluid about_me" id="about_me">
				<aside class="span3 aside_el">
					<h2>About me</h2>
					<h5>professional profile<br /> and contact info</h5>
				</aside>
				<article class="span6 borderleft par_el">
					<span class="circle"><img style="float:left" src="img/profil.png" alt=""/></span>
					<p>Hello, I'm Mathieu BUONOMO founder of <a href="http://www.13factory.com" target="_blank"><strong>13FACTORY</strong></a></p>
					<p>
						<div class="soc">
							<ul>
								<li><a href="http://www.twitter.com/mbuonomo" target="_blank"><img src="img/twitter.png" alt="" /></a></li>
								<li><a href="http://www.linkedin.com/in/mathieubuonomo" target="_blank"><img src="img/linkedin.png" alt="" /></a></li>
							</ul>
						</div>

					</p>
				</article>
				<div class="span3 cont_info">
					<div class="info">
						<ul>
							<li><span class="icon-mobile-phone"></span><a>+33 6 78 54 81 20</a></li>
							<li><span class="icon-map-marker"></span><a>PARIS</a></li>
							<li><span class="icon-envelope"></span><a>mbuonomo[at]gmail.com</a></li>
						</ul>
					</div>
				</div> <!-- /cont_info -->
			</section> <!-- /about_me -->
			<!-- end ABOUT ME -->
			
			<!-- MY EXPERTISE -->
			<section class="row-fluid my_expertise" id="my_expertise">
				<aside class="span3 aside_el">
					<h2>Skills</h2>
				</aside>
				<article class="span4 borderleft par_el">
					<p>Application Developer and Project Manager in a wide variety of business applications.
Particularly interested in internet application and new usage of internet..</p>
				</article>
				<div class="span5 skill_level">
					<h4>HTML5 with CSS3</h4>
					<div class="progress progress-striped">
					  <div class="bar" style="width: 80%;"></div>
					</div>
					<h4>PHP&amp;MySQL </h4>
					<div class="progress progress-striped">
					  <div class="bar" style="width: 90%;"></div>
					</div>
					<h4>Javascript</h4>
					<div class="progress progress-striped">
					  <div class="bar" style="width: 80%;"></div>
					</div>
					<h4>IOS - ObjectiveC</h4>
					<div class="progress progress-striped">
					  <div class="bar" style="width: 65%;"></div>
					</div>
				</div> <!-- /skill_level -->
			</section> <!-- /my_expertise -->
			<!-- end MY EXPERTISE -->
			
			<!-- EXPERIENCE -->
			<section class="row-fluid experience" id="experience">
				<aside class="span3 aside_el">
					<h2>Experience</h2>
					<h5>where I worked</h5>
				</aside>
				<div class="span9">
					<div class="row-fluid">
						<article class="span12  borderleft par_el in_spacing">
							<span class="period">2013 - present</span>
							<div class="bigspacing">
								<header>
									<h2>13FACTORY <a class="nounderline" href="http://www.13factory.com" target="_blank"><i class="icon-info-sign"></i></a></h2>
									<h3>Founder</h3>
								</header>
							</div>
						</article>
					</div>
					<div class="row-fluid">
						<article class="span12  borderleft par_el in_spacing">
							<span class="period">2011 - 2013</span>
							<div class="bigspacing">
								<header>
									<h2>DEEZER.COM <a class="nounderline" href="http://www.deezer.com" target="_blank"><i class="icon-info-sign"></i></a></h2>
									<h3>Lead Dev - BackOffice</h3>
								</header>
								<p>Create and maintain the BackOffice. The BackOffice is the tool used by the Deezer team to manage the Deezer website.</p>
								<p>In charge of all the development. </p>
							</div>
						</article>
					</div>
					<div class="row-fluid">
						<article class="span12  borderleft par_el in_spacing">
							<span class="period">2009 - 2011</span>
							<div class="bigspacing">
								<header>
									<h2>SKISET.COM <a class="nounderline" href="http://www.skiset.com" target="_blank"><i class="icon-info-sign"></i></a></h2>
									<h3>Lead Dev</h3>
								</header>
							<p>Create the new version of the all the web platform from scratch.</p>
							<p>Skiset is the leader in the ski rental market. I've create a new version of the e-commerce website</p>
							</div>
						</article>
					</div>
					<div class="row-fluid">
						<article class="span12  borderleft par_el in_spacing">
							<span class="period">2008 - 2009</span>
							<div class="bigspacing">
								<header>
									<h2>ORANGE LABS - San Francisco</h2>
									<h3>Intern</h3>
								</header>
							<p>Part of the Orange Labs R&D team based in San Francisco.</p>
							</div>
						</article>
					</div>
				</div>
			</section> <!-- /experience -->
			<!-- end EXPERIENCE -->

			<!-- EDUCATION -->
			<section class="row-fluid education" id="education">
				<aside class="span3 aside_el">
					<h2>Education</h2>
				</aside>
				<div class="span9">
					<div class="row-fluid">
						<article class="span12  borderleft par_el in_spacing">
							<span class="period">2003 - 2008</span>
							<div class="bigspacing">
								<header>
									<h2>EPITECH <a class="nounderline" href="http://www.epitech.eu" target="_blank"><i class="icon-info-sign"></i></a></h2>
									<h3>Computer science</h3>
								</header>
							</div>
						</article>
					</div>
				</div>
			</section> <!-- /education -->
			<!-- end EDUCATION -->
		
			<!-- PORTFOLIO -->
			<section class="row-fluid portfolio" id="portfolio">
				<aside class="span3 aside_el">
					<h2>Portfolio</h2>
					<h5>some of my<br /> work</h5>
					<hr />
					<a href="http://lab.mbuonomo.com" target="_blank" class="btn btn-primary"><i class="icon-beaker"></i> the lab...</a>
				</aside>
				<div class="span9 borderleft">
				
					<div class="galleryContainer">	    	
						<div class="galleryItem">
							<a href="#lmapnmodal" role="button" data-toggle="modal"><img src="img/lmapn.png" alt="" /></a>
							<h3>Lamarieeauxpiedsnus</h3>
							<p>One of the most popular French wedding blogs.</p>
							<!-- Modal -->
							<div id="lmapnmodal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></button>
									<h3 id="myModalLabel">Lamarieeauxpiedsnus.com</h3>
								</div>
								<div class="modal-body">
									<div id="lmapnCarousel" class="carousel slide">
										<ol class="carousel-indicators">
											<li data-target="#lmapnCarousel" data-slide-to="0" class="active"></li>
											<li data-target="#lmapnCarousel" data-slide-to="1"></li>
											<li data-target="#lmapnCarousel" data-slide-to="2"></li>
										</ol>

									<!-- Carousel items -->
										<div class="carousel-inner">
											<div class="active item">
												<img src="img/projects/lmapn1.png">
											</div>
											<div class="item">
												<img src="img/projects/lmapn2.png">
											</div>
											<div class="item">
												<img src="img/projects/lmapn3.png">
											</div>
										</div>
										<a class="carousel-control left" href="#lmapnCarousel" data-slide="prev">&lsaquo;</a>
										<a class="carousel-control right" href="#lmapnCarousel" data-slide="next">&rsaquo;</a>
									</div>
									<h3><a href="http://www.lamarieeauxpiedsnus.com" target="_blank">Lamarieeauxpiedsnus.com</a></h3>
									<p>One of the most popular French wedding blogs.</p>
									<p>
										<dl class="dl-horizontal">
											<dt>Platform / Language</dt>
											<dd><span class="label">Wordpress</span> <span class="label">PHP</span> <span class="label">Javascript (jQuery)</span> <span class="label">HTML</span> <span class="label">CSS</span></dd>
											<dt>Work</dt>
											<dd>Custom template, custom plugins</dd>
											<dt>Story</dt>
											<dd>My wife was looking to make a blog about weddings. Our main idea was to create something helpful for every bride to be. On this project, I take care of all the technical part and my wife deals with the rest of the work.</dd>
										</dl>
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
								</div>
							</div>
						</div>
						
						<div class="galleryItem">
							<a href="#asalistemodal" role="button" data-toggle="modal"><img src="img/asaliste.png" alt="" /></a>
							<h3>asaliste.com</h3>
							<p>Create a list of what you want.</p>
							<!-- Modal -->
							<div id="asalistemodal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></button>
									<h3 id="myModalLabel">asaliste.com</h3>
								</div>
								<div class="modal-body">
									<div id="asalisteCarousel" class="carousel slide">
										<ol class="carousel-indicators">
											<li data-target="#asalisteCarousel" data-slide-to="0" class="active"></li>
											<li data-target="#asalisteCarousel" data-slide-to="1"></li>
											<li data-target="#asalisteCarousel" data-slide-to="2"></li>
										</ol>
									<!-- Carousel items -->
										<div class="carousel-inner">
											<div class="active item">
												<img src="img/projects/asaliste1.png">
											</div>
											<div class="item">
												<img src="img/projects/asaliste2.png">
											</div>
											<div class="item">
												<img src="img/projects/asaliste3.png">
											</div>
										</div>
										<a class="carousel-control left" href="#asalisteCarousel" data-slide="prev">&lsaquo;</a>
										<a class="carousel-control right" href="#asalisteCarousel" data-slide="next">&rsaquo;</a>
									</div>
									<h3><a href="http://www.asaliste.com" target="_blank">asaliste.com</a></h3>
									<p>Create a list of the things you'd like to have from any e-commerce website. Share the list with your friends, family and you'll never get a bad gift again.</p>
									<p>
										<dl class="dl-horizontal">
											<dt>Platform / Language</dt>
											<dd><span class="label">PHP (Zend)</span> <span class="label">Javascript (jQuery)</span> <span class="label">HTML</span> <span class="label">CSS</span> <span class="label">LESS</span></dd>
											<dt>Work</dt>
											<dd>From scratch</dd>
											<dt>Story</dt>
											<dd>When my daughter was born, everyone asked us what they could get her as a present. I browsed the internet for a tool to create gift lists and found nothing. The quickest way to have it was to create it.</dd>
										</dl>
									</p>

								</div>
								<div class="modal-footer">
									<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
								</div>
							</div>
						</div>
						
						<div class="galleryItem">
							<a href="#wallzrmodal" role="button" data-toggle="modal"><img src="img/wallzr.png" alt="" /></a>
							<h3>wallzr.com</h3>
							<p>Deezer API</p>
							<!-- Modal -->
							<div id="wallzrmodal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></button>
									<h3 id="myModalLabel">wallzr.com</h3>
								</div>
								<div class="modal-body">
									<div id="wallzrCarousel" class="carousel slide">
										<ol class="carousel-indicators">
											<li data-target="#wallzrCarousel" data-slide-to="0" class="active"></li>
											<li data-target="#wallzrCarousel" data-slide-to="1"></li>
											<li data-target="#wallzrCarousel" data-slide-to="2"></li>
										</ol>
									<!-- Carousel items -->
										<div class="carousel-inner">
											<div class="active item">
												<img src="img/projects/wallzr1.png">
											</div>
											<div class="item">
												<img src="img/projects/wallzr2.png">
											</div>
											<div class="item">
												<img src="img/projects/wallzr3.png">
											</div>
										</div>
										<a class="carousel-control left" href="#wallzrCarousel" data-slide="prev">&lsaquo;</a>
										<a class="carousel-control right" href="#wallzrCarousel" data-slide="next">&rsaquo;</a>
  									</div>
									<h3><a href="http://www.wallzr.com" target="_blank">wallzr.com</a></h3>
									<p>Create a wallpaper based on your favorite Deezer Playlist.</p>
									<p>
										<dl class="dl-horizontal">
											<dt>Platform / Language</dt>
											<dd><span class="label">PHP</span> <span class="label">Javascript</span> <span class="label">HTML</span> <span class="label">CSS</span> <span class="label">Deezer API</span></dd>
											<dt>Work</dt>
											<dd>From scratch</dd>
											<dt>Story</dt>
											<dd>The first version of the Deezer API was out, I just wanted to play with it.</dd>
										</dl>
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
								</div>
							</div>
						</div>


						
						<div class="galleryItem">
							<a href="#flowermodal" role="button" data-toggle="modal"><img src="img/joliefleur.png" alt="" /></a>
							<h3>JoliesFleurs</h3>
							<p>IOS application</p>
							<!-- Modal -->
							<div id="flowermodal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></button>
									<h3 id="myModalLabel">joliesfleurs.com</h3>
								</div>
								<div class="modal-body">
									<h2>Work in progress</h2>
									<div class="progress progress-striped active">
									  <div class="bar" style="width: 72%;"></div>
									</div>
									<p>
										This project is still in development.
									</p>
									<p>
										<dl class="dl-horizontal">
											<dt>Platform / Language</dt>
											<dd><span class="label">IOS</span> <span class="label">Objectiv-C</span> <span class="label">Wordpress</span> <span class="label">JSON</span></dd>
											<dt>Work</dt>
											<dd>From scratch</dd>
											<dt>Story</dt>
											<dd>Giving a new tool to all the brides to be around the world.</dd>
										</dl>
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
								</div>
							</div>

						</div>

					</div>
				</div>
			</section> <!-- /portfolio -->
			<!-- end PORTFOLIO -->

		</div> <!-- /page -->
	</div> <!-- /container -->
</div> <!-- /wrapper -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/parsley.min.js"></script>
	<script src="js/retina.js"></script>
	<script>
	var	current_width = 0;
	$(document).ready(function(){

		$('.carousel').carousel({
			interval: 4000,
			pause: "false"
		});
	})

	$(".send-button").click(function () {
		if ( $( '.comment_form' ).parsley('validate') ) {
			var form_name = $("#form_name").val(); 
			var form_email = $("#form_email").val(); 
			var form_message = $("#form_message").val(); 
			$.post("php/mailer.php", { name : form_name , email : form_email , message : form_message }, function(results){
				alert(results);
			}); 
		} 
	});
	$(window).on('load resize', function () {
		current_width = $(window).width();
		if ( current_width < 767 ) {
			$("br").hide();
		} else {
			$("br").show();
		}
	});
	
	// Cache selectors
	if ( $(window).width() > 940 ) {
		var lastId,
			topMenu = $("#site_nav")
			topMenuHeight = topMenu.outerHeight()+40,
			// All list items
			menuItems = topMenu.find("a"),
			// Anchors corresponding to menu items
			scrollItems = menuItems.map(function(){
			  var item = $($(this).attr("href"));
			  if (item.length) { return item; }
			});
	} else {
		var lastId,
			topMenu = $("#site_nav")
			topMenuHeight = topMenu.outerHeight()-140,
			// All list items
			menuItems = topMenu.find("a"),
			// Anchors corresponding to menu items
			scrollItems = menuItems.map(function(){
			  var item = $($(this).attr("href"));
			  if (item.length) { return item; }
			});
	
	}
	
	
	// Bind click handler to menu items
	// so we can get a fancy scroll animation
	menuItems.click(function(e){
	  var href = $(this).attr("href"),
		  offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
	  $('html, body').stop().animate({ 
		  scrollTop: offsetTop
	  }, 300);
	  e.preventDefault();
	});

	// Bind to scroll
	$(window).scroll(function(){
	   // Get container scroll position
	   var fromTop = $(this).scrollTop()+topMenuHeight;
	   
	   // Get id of current scroll item
	   var cur = scrollItems.map(function(){
		 if ($(this).offset().top < fromTop)
		   return this;
	   });
	   // Get the id of the current element
	   cur = cur[cur.length-1];
	   var id = cur && cur.length ? cur[0].id : "";
	   
	   if (lastId !== id) {
		   lastId = id;
		   // Set/remove active class
		   menuItems
			 .parent().removeClass("active")
			 .end().filter("[href=#"+id+"]").parent().addClass("active");
	   }                   
	});// $('.scrollup').fadeIn();
	
	$(window).scroll(function(){
		var pos = $(window).scrollTop();
		if (pos > 55 && current_width > 940) {
			$(".site_nav").css({
					"position": "fixed",
					"top":    "0",
					"width":    "940px",
					"margin-bottom":    "55px",
			});
			$("#aftermenuspace").css({
					"height":    "55px",
			});
		} else {
			$(".site_nav").css({
					"position": "relative",
					"margin-bottom":    "0",
					"width":    "100%",
			});
			$("#aftermenuspace").css({
					"height":    "0",
			});
		}
		if ( pos > 600 ) { $('.upbtn').fadeIn();} else { $('.upbtn').fadeOut(); }
	});
	
	$('.upbtn').click(function(){
		$("html, body").animate({ scrollTop: 0 }, 600);
		return false;
	});
		
	</script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-4783129-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</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-4783129-2', 'mbuonomo.com');
  ga('send', 'pageview');

</script>
</body>
</html>
