<!DOCTYPE html>
<!--

  ┌─┐┬─┐┌┬┐┬ ┬┬ ┬┬─┐┬  ┌─┐┌─┐┌─┐┌─┐┌┬┐┌─┐ ┌─┐┌─┐┌┬┐
  ├─┤├┬┘ │ ├─┤│ │├┬┘│  ├─┤│  │ │└─┐ │ ├┤  │  │ ││││
  ┴ ┴┴└─ ┴ ┴ ┴└─┘┴└─┴─┘┴ ┴└─┘└─┘└─┘ ┴ └─┘o└─┘└─┘┴ ┴
                           
Salut !

De ce que je vois, toi aussi, tu aimes lire les sources ? Et bien tu vois, tu n'es pas le
seul. Moi aussi, j'aime regarder comment est construit un site.

J'espère que ça te plaira !

Bye,

Arthur

-->                                                                         
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
		<title>Arthur Lacoste - Un développeur pas comme les autres</title>
			<link rel="icon" type="image/png" href="img/arthurlacoste.png" />

			<meta name="DC.creator" content="Stratis Bakas - http://arthurlacoste.com" />
			<meta name="robots" content="index, follow" />
			<meta name="description" content="Arthur Lacoste webdesigner et développeur web à Grenoble. Création de sites internet. Design d'interfaces graphiques et ergonomiques. Voici mon portfolio où vous retrouverez tous mes projets." />
			<meta name="keywords" content="web design, responsive, web development, développeur web" />
			<meta name="viewport" content="width=device-width, initial-scale=1.0" />


			<!-- Bootstrap Core CSS -->
			<link href="css/bootstrap.min.css" rel="stylesheet">

			<!-- Custom CSS -->
			<link href="css/scrolling-nav.css" rel="stylesheet">
			<link rel="stylesheet" href="fa/css/font-awesome.min.css">
			<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Rubik:400,300,300italic,700normal,700italic,500">
			<link href="custom.css" rel="stylesheet">
   
		   <link rel="image_src" href="img/me.jpg" />
			<!--[if lt IE 9]>
			  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
			  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
			<![endif]-->
		</head>

		<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">

			<nav class="navbar navbar-default navbar-fixed-top" >
			  <div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
				 <div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-site" aria-expanded="false">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				  </button>
				  <a class="navbar-brand page-scroll" href="#page-top">
					<img alt="Brand" src="img/arthurlacoste.png" width="27px">
				  </a>
				</div>
				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="nav-collapse collapse navbar-collapse" id="menu-site">
				  <ul class="nav navbar-nav navbar-right">
                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                    <li class="hidden">
                        <a class="page-scroll" href="#page-top"></a>
                    </li>
					<li data-toggle="collapse" data-target=".nav-collapse.in" ><a class="page-scroll" href="#portfolio">Portfolio</a></li>
					<li data-toggle="collapse" data-target=".nav-collapse.in" ><a class="page-scroll" href="#cv">Curriculum vitæ</a></li>
					<li data-toggle="collapse" data-target=".nav-collapse.in" ><a class="page-scroll" href="mailto:m@arthurlacoste.com">Contact</a></li>
				  </ul>
				</div><!-- /.navbar-collapse -->
			  </div><!-- /.container-fluid -->
			</nav>

			<div class="wrapper">
	
					<div class="container">
						<div class="col-md-7 col-sm-10 col-xs-10">
							<h1>Je suis un développeur pas comme les autres.</h1>
							<p>J'aime le code beau, épuré et les interfaces ergonomiques. J'aime ce qui est efficace. Je suis un développeur full&#8209;stack.
							</p>
						</div>
					</div>
					<div id="startchange"></div>
			</div>

			<header class="sb-page-header">
				<div class="container detail-portfolio-container">
					<a class="anchor" id="portfolio"></a>
					<h1>Portfolio</h1>
					<p>Mes derniers projets</p>
				</div>
			</header>

			<a class="anchor" id="portfolio-details"></a>
			<div class="container-fluid">

				<!-- Maxybrico -->
				<div class="row portfolio-element" id="tabs-1">
					<div class="col-md-6 box portfolio-bloc">
						<h2>Détails du projet</h2>
						<p>
							Maxybrico est la vitrine d’un réparateur de téléphone portable. J’ai travaillé sur l’identité visuelle du client. Le site permet la prise en compte de devis.
						</p>
			
			
						 <div class="job clearfix projects-details">
						  <div class="col-xs-3">
							<div class="year">Client</div>
						  </div>
						  <div class="col-xs-9">
							<div class="profession">Maxybrico</div>
						  </div>
						</div>
			
					<div class="project-button">  
					<a href="http://maxybrico.fr" target="_blank"><button type="button" class="btn btn-red-call btn-lg call-to-action ">Voir le projet</button></a>
					</div>
					</div>
					<div class="col-md-6 nopadding eyes-match"><a href="http://maxybrico.fr" target="_blank"><img class="img-responsive" src="img/maxybrico-fond-3.png" alt="Maxybrico"/></a></div>
				</div>
	
				<!-- drsanti -->
				 <div class="row portfolio-element" id="tabs-2">
					<div class="col-md-6 box portfolio-bloc">
						<h2>Détails du projet</h2>

						<p>Docteur Santi est le genre de docteur qui aime bien dessiner entre deux clients. Le genre de docteur qui prend le temps de vivre à son rythme. Le genre de docteur qui aime se faire plaisir. Le projet Dr Santi est un projet de webcomics.
						</p>   
						 <div class="job clearfix projects-details">
						  <div class="col-xs-3">
							<div class="year">Client</div>
						  </div>
						  <div class="col-xs-9">
							<div class="profession">Dr Santi</div>
						  </div>
						</div>
			
								<div class=" project-button">  
					<a href="http://drsanti.fr" target="_blank"><button type="button" class="btn btn-red-call btn-lg call-to-action ">Voir le projet</button></a>
					</div>
		
					</div>
					<div class="col-md-6 nopadding eyes-match"><a href="http://drsanti.fr" target="_blank"><img class="img-responsive" src="img/drsanti.png" alt="Vie Saine"/></a></div>
				</div>
	
				<!-- irz -->
					<div class="row portfolio-element" id="tabs-3">
					<div class="col-md-6 box portfolio-bloc">
					<h2>Détails du projet</h2>

					<p>IRZ est tout simplement mon blog personnel. J'y parle surtout d'expériences personnelles, mais j’y publie aussi des tutoriels, que ce soit à propos de l’informatique ou du développement web. 
					</p>   
						 <div class="job clearfix projects-details">
						  <div class="col-xs-3">
							<div class="year">Client</div>
						  </div>
						  <div class="col-xs-9">
							<div class="profession">Moi-même</div>
						  </div>
						</div>
			
								<div class=" project-button">  
					<a href="http://irz.fr" target="_blank"><button type="button" class="btn btn-red-call btn-lg call-to-action ">Voir le projet</button></a>
					</div>
				</div>
					<div class="col-md-6 nopadding eyes-match"><a href="http://irz.fr" target="_blank"><img class="img-responsive" src="img/irz-logo-carre.png" alt="Vie Saine"/></a></div>
				</div>
	
				<!-- starfuck -->
					<div class="row portfolio-element" id="tabs-4">
						<div class="col-md-6 box portfolio-bloc">
							<h2>Détails du projet</h2>

							<p>Derrière Starfuck se cache en réalité un photographe. Voyageant à travers le monde pour prendre les plus beaux clichés, il propose aussi de nombreuses prestations.
							</p>   

							<div class="job clearfix projects-details">
								<div class="col-xs-3">
									<div class="year">Client</div>
								</div>
								<div class="col-xs-9">
									<div class="profession">Starfuck SA</div>
								</div>
							</div>
			
							<div class=" project-button">  
								<a href="http://starfuck.fr" target="_blank"><button type="button" class="btn btn-red-call btn-lg call-to-action ">Voir le projet</button></a>
							</div>
						</div>
								
						<div class="col-md-6 nopadding eyes-match">
							<a href="http://starfuck.fr" target="_blank"><img class="img-responsive" src="img/starfuck-carre.png" alt="Vie Saine"/></a>
						</div>
					</div>   
	
				<!-- viesaine -->    
				<div class="row portfolio-element" id="tabs-5">
					<div class="col-md-6 box portfolio-bloc">
					<h2>Détails du projet</h2>

					<p>Viesaine.fr propose des articles autour de la thématique de la santé, du sport, de l’écologie, et de la décroissance.
					</p>   
						 <div class="job clearfix projects-details">
						  <div class="col-xs-3">
							<div class="year">Client</div>
						  </div>
						  <div class="col-xs-9">
							<div class="profession">Moi-même</div>
						  </div>
						</div>
								<div class="project-button">  
					<a href="http://viesaine.fr" target="_blank"><button type="button" class="btn btn-red-call btn-lg call-to-action ">Voir le projet</button></a>
					</div>
					</div>
					<div class="col-md-6 nopadding eyes-match"><a href="http://viesaine.fr" target="_blank"><img class="img-responsive" src="img/viesaine.png" alt="Vie Saine"/></a></div>
				</div>
	
			   <!-- arthurlacoste --> 
				<div class="row portfolio-element" id="tabs-6">
					<div class="col-md-6 box portfolio-bloc">
					<h2>Détails du projet</h2>

					<p>
					 Regarde le logo tout en haut à gauche. Maintenant regarde le visuel à droite. Tu vois une similitude ? Oui, tout simplement car c’est la page sur laquelle tu es.
					</p>   
						 <div class="job clearfix projects-details">
						  <div class="col-xs-3">
							<div class="year">Client</div>
						  </div>
						  <div class="col-xs-9">
							<div class="profession">Moi-même</div>
						  </div>
						</div>
					</div>
					<div class="col-md-6 nopadding"><img class="img-responsive" src="img/arthurlacoste.png" alt="Vie Saine"/></div>
				</div>
			</div>


			<div class="container-fluid">
				<div class="row voir-aussi no-gutter">
		
						<div class="col-xs-4 thumb-portfolio">
							<a href="#portfolio-details" id="tabs-1-img" class="page-scroll"><img class="img-responsive thumb" src="img/maxybrico-fond-3.png" alt="Maxybrico"/></a>
						</div>
		
						<div class="col-xs-4 thumb-portfolio">
							<a href="#portfolio-details"  id="tabs-2-img" class="page-scroll"><img class="img-responsive thumb" src="img/drsanti.png" alt="Dr Santi"/></a>
						</div>
						<div class="col-xs-4 thumb-portfolio">
							<a href="#portfolio-details" id="tabs-3-img" class="page-scroll"><img class="img-responsive thumb" src="img/irz-logo-carre.png" alt="IRZ"/></a>
						</div>
		
						<div class="col-xs-4 thumb-portfolio">
							<a  href="#portfolio-details" id="tabs-4-img" class="page-scroll"><img class="img-responsive thumb" src="img/starfuck-carre.png" alt="Maxybrico"/></a>
						</div>
		
	
						<div class="col-xs-4 thumb-portfolio">
							<a  href="#portfolio-details" id="tabs-5-img" class="page-scroll"><img class="img-responsive thumb" src="img/viesaine.png" alt="Maxybrico"/></a>
						</div>
						<div class="col-xs-4 thumb-portfolio">
							<a  href="#portfolio-details" id="tabs-6-img" class="page-scroll"><img class="img-responsive thumb" src="img/arthurlacoste.png" alt="Maxybrico"/></a>
						</div>    		
			
			
		
				</div>
			</div>



			<header class="sb-page-cv">
				<div class="container">
					<a class="anchor" id="cv"></a>
					<h1>Curriculum vitæ</h1>
					<p>Développeur & formateur</p>
				</div>
			</header>


			<div class="container">
				<div class="row">
		
		
					<!-- DL LINK haut -->
					<div class="text-center button-center">
						<a href="pdf/arthur-lacoste-cv.pdf" target="_blank"><button type="button" class="btn btn-red-call btn-lg call-to-action"><i class="fa fa-download" aria-hidden="true"></i>  Télécharger au format PDF</button></a>
					</div>
		
					<div class="col-xs-12 col-sm-7">

					  <!-- EXPERIENCES -->
					  <div class="box">
						<h2>Expériences</h2>
						<div class="job clearfix">
						  <div class="col-xs-3">
							<div class="where">AWS</div>
							<div class="year">2012 - 2016</div>
						  </div>
						  <div class="col-xs-9">
							<div class="profession">Consultant formateur</div>
							<div class="description">
								Formation & Support, tests logiciels & création de vidéos de formations (du script au montage)
							</div>
						  </div>
						</div>
						<div class="job clearfix">
						  <div class="col-xs-3">
							<div class="where">Freelance</div>
							<div class="year">2011 - 2012</div>
						  </div>
						  <div class="col-xs-9">
							<div class="profession">Développeur web</div>
							<div class="description">Installation wordpress, développements e-commerce, plugins Wordpress, référencement</div>
						  </div>
						</div>
							<div class="job clearfix">
						  <div class="col-xs-3">
							<div class="where">Éducation nationale</div>
							<div class="year">2009 - 2010</div>
						  </div>
						  <div class="col-xs-9">
							<div class="profession">Administrateur réseaux</div>
							<div class="description">Formation du B2i, création et mise en place du site internet, maintenance du réseau informatique du lycée</div>
						  </div>
						</div>
					  </div>
		  
					  <!-- EDUCATION -->
					  <div class="box">
						<h2>Éducation</h2>
						<ul id="education" class="clearfix">
						  <li>
							<div class="year pull-left">2009</div>
							<div class="description pull-right">
							  <h3>BTS IG - Développeur d'Applications</h3>
							  <p>Apprentissage du développement d'applications de gestion</p>
							  <p>SQL, PHP, Gestion de projets, C#, VB</p>
							</div>
						  </li>
						  <li>
							<div class="year pull-left">2007</div>
							<div class="description pull-right">
							  <h3>Bac STG Comptabilité et Finance des Entreprises</h3>
							  <p>Gestion d'entreprise, comptabilité, communication, management</p>
							  <p>Option Art Plastiques</p>
							</div>
						  </li>
						  <li>
							<div class="year pull-left">1988</div>
							<div class="description pull-right">
							  <h3>Cette année-là, je suis né !</h3>
							  <p>C'est ainsi que tout a commencé</p>
							</div>
						  </li>


						</ul>
					  </div>

					</div>
					<div class="col-xs-12 col-sm-5">
		
					<!-- DL LINK droite-->
					<div class="clearfix">
						<div class="center-if">
							<a href="pdf/arthur-lacoste-cv.pdf"><button type="button" class="btn btn-red-call btn-lg call-to-action pull-right"><i class="fa fa-download" aria-hidden="true"></i>  Télécharger au format PDF</button></a>
						</div>
					</div>
		
		
					  <!-- CONTACT -->
					  <div class="box clearfix">
						<h2>Contact</h2>
						<div class="contact-item">
			
						  <div class="skill contact-icons">
						  <ul class="fa-ul">
						  	<li class="icon-sign-blank">
								<a href="https://github.com/arthurlacoste"><i class="fa fa-github fa-li" aria-hidden="true"></i> GitHub</a> 
							</li>
							<li class="icon-sign-blank">   <i class="fa fa-phone fa-li" aria-hidden="true"></i> 06 31 19 56 70
							</li>
							<li class="contact">
								<a href="mailto:m@arthurlacoste.com"><i class="fa fa-envelope fa-li" aria-hidden="true"></i> m@arthurlacoste.com</a>
							</li>

						  </ul>

						</div>
					  </div>
					  <!-- SKILLS -->
					  <div class="box">
						<h2>Compétences</h2>
						<div class="skills">
						<div id="language-skills">
						  <div class="skillou">Développement : HTML/CSS, PHP, MySql, C/C++, VB .NET, C#, Python, Shell 
						  </div>
						  <div class="skillou">Graphisme : Photoshop, Illustrator, Sketch, Figma, Flash 
						  </div>
						  <div class="skillou">Vidéo : Vegas Pro, Adobe Première, After Effects, iMovie, ScreenFlow
						  </div>
			  
					</div>
						</div>
					  </div>
					  <!-- LANGUAGES -->
					  <div class="box">
						<h2>Langues</h2>
						<div id="language-skills">
						  <div class="skill">Français 
			  
							<div class="icons pull-right">
								<p>
									<span class="glyphicon glyphicon-star"></span>
									<span class="glyphicon glyphicon-star"></span>
									<span class="glyphicon glyphicon-star"></span>
									<span class="glyphicon glyphicon-star"></span>
									<span class="glyphicon glyphicon-star"></span>
								</p>
							</div>
				
						  </div>
			  
						  <div class="skill">Anglais <div class="icons pull-right">
			  
						  <p>
						  <span class="glyphicon glyphicon-star"></span>
						  <span class="glyphicon glyphicon-star"></span>
						  <span class="glyphicon glyphicon-star"></span>
						  <span class="glyphicon glyphicon-star"></span>
						  <span class="glyphicon glyphicon-star-empty"></span>
						  </p>
			  
						  </div></div>
						</div>
					  </div>
					  <!-- HOBBIES -->
					  <div class="box">
						<h2>Loisirs</h2>
						<div class="hobby">&nbsp; Escalade</div>
						<div class="hobby">&nbsp; Randonnée</div>
						<div class="hobby">&nbsp; Ecriture</div>
						<div class="hobby">&nbsp; Vélo</div>
						<div class="hobby">&nbsp; Cerf-volant</div>
					  </div>
					</div>
				  </div>
				</div>
			</div>

			<header class="sb-page-footer">
				<div class="container">
					<h1>Je vous intéresse ?</h1>
					<p>Ça tombe bien, mon cœur est à prendre.</p>
					<a href="mailto:m@arthurlacoste.com"><button type="button" class="btn btn-red-call btn-lg call-to-action">Me contacter</button></a>
				</div>
			</header>



			<nav class="Footer-nav" data-content-field="navigation" id="yui_3_17_2_1_1464000344085_401">

				<div class="Footer-nav-group" id="yui_3_17_2_1_1464000344085_400">
					<a href="#cv" class="Footer-nav-item page-scroll">Curriculum vitæ</a>
					<a href="#portfolio" class="Footer-nav-item page-scroll">Portfolio</a>
					<a href="mailto:m@arthurlacoste.com" class="Footer-nav-item">Contact</a>
				</div>

			</nav>
  
			<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
			<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
			<!-- Include all compiled plugins (below), or include individual files as needed -->
			<script src="js/bootstrap.min.js"></script>
	

			<!-- Scrolling Nav JavaScript -->
			<script src="js/jquery.easing.min.js"></script>
			<script src="js/scrolling-nav.js"></script>
			<script src="js/hover.zoom.js"></script>

			<script>
	
			$(document).ready(function(e) {
					
				var scroll_start = 0;
				var startchange = $('#startchange');
				var offset = startchange.offset();
				if (startchange.length){
					$(document).scroll(function() { 
						scroll_start = $(this).scrollTop();
						if(scroll_start > offset.top) {
							$(".navbar-default").css('background-color', '#fff');
							$(".navbar-default .navbar-nav>li>a").css('color', '#777');
						
						} else {
							if($(window).width()>=768) {
								$(".navbar-default").css('background-color', 'transparent');
								$(".navbar-default .navbar-nav>li>a").css('color', '#f5f5f5');
							}
						}
					});
				}

				// change la couleur de la barre si on passe de desktop à mobile
				var width = $(window).width();
				$(window).resize(function(){
					if($(this).width() != width){
						width = $(this).width();
						if(width<768) {
							$(".navbar-default").css('background-color', '#fff');
							$(".navbar-default .navbar-nav>li>a").css('color', '#777');
						}
					}
				});
				
				$("#tabs-6").fadeOut(0);
				$("#tabs-5").fadeOut(0);
				$("#tabs-4").fadeOut(0);
				$("#tabs-3").fadeOut(0);
				$("#tabs-2").fadeOut(0);
				$("#tabs-1").fadeOut(0);
	
				$("#tabs-1-img").on('click', function() {
					$("#tabs-6").fadeOut(0);
					$("#tabs-5").fadeOut(0);
					$("#tabs-4").fadeOut(0);
					$("#tabs-3").fadeOut(0);
					$("#tabs-2").fadeOut(0);
					$("#tabs-1").fadeIn(1000);
				});
				$("#tabs-2-img").on('click', function() {
					$("#tabs-1").fadeOut(0);
					$("#tabs-2").fadeIn(1000);
					$("#tabs-5").fadeOut(0);
					$("#tabs-4").fadeOut(0);
					$("#tabs-3").fadeOut(0);
					$("#tabs-6").fadeOut(0);
				});
				$("#tabs-3-img").on('click', function() {
					$("#tabs-1").fadeOut(0);
					$("#tabs-2").fadeOut(0);
					$("#tabs-5").fadeOut(0);
					$("#tabs-4").fadeOut(0);
					$("#tabs-3").fadeIn(1000);
					$("#tabs-6").fadeOut(0);
				});
				$("#tabs-4-img").on('click', function() {
					$("#tabs-1").fadeOut(0);
					$("#tabs-2").fadeOut(0);
					$("#tabs-5").fadeOut(0);
					$("#tabs-4").fadeIn(1000);
					$("#tabs-3").fadeOut(0);
					$("#tabs-6").fadeOut(0);
				});
				$("#tabs-5-img").on('click', function() {
					$("#tabs-1").fadeOut(0);
					$("#tabs-2").fadeOut(0);
					$("#tabs-5").fadeIn(1000);
					$("#tabs-4").fadeOut(0);
					$("#tabs-3").fadeOut(0);
					$("#tabs-6").fadeOut(0);
				});
				$("#tabs-6-img").on('click', function() {
					$("#tabs-1").fadeOut(0);
					$("#tabs-2").fadeOut(0);
					$("#tabs-5").fadeOut(0);
					$("#tabs-4").fadeOut(0);
					$("#tabs-3").fadeOut(0);
					$("#tabs-6").fadeIn(1000);
				});
			});
	
			</script>
	 
			 <script type="text/javascript">
		var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
		document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
		</script>
		<script type="text/javascript">
		try {
		var pageTracker = _gat._getTracker("UA-5025145-3");
		pageTracker._trackPageview();
		} catch(err) {}</script>
  </body>
</html>