þÿ<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <link rel="apple-touch-icon" href="logo_iphone.png" /> <html> <head> <title>Stéphan Barbé, freier Entwickler in Stuttgart</title> <meta name="Keywords" content="Webdesign, Webdesigner, Stuttgart,free lance, HTML, PHP, MySQL, Flash, XCode,iPhone,iPod"> <meta name="Description" content="Stéphan Barbé, freier Webdesigner in Stuttgart"> <meta name="verify-v1" content="KQKwakS39Ddl8iKVPNUhHCgY/IV4jSJU+8PwlSgvbkk=" > <meta name = "viewport" content = "width = 480, user-scalable=yes, initial-scale=0.5, maximum-scale=5, minimum-scale=0.25"> <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script> <style> @font-face { font-family: 'LeagueGothicRegular'; src: url('http://static.tumblr.com/usaykzx/xyTky45d1/league_gothic.eot'); src: local('League Gothic Regular'), local('LeagueGothic'), url('http://static.tumblr.com/usaykzx/pheky45df/league_gothic.ttf') format('truetype'); } a {color:#000000 ; text-decoration : none;} a:hover {color: #3FA9F5; text-decoration : underline;} .cadre { position: relative; font-family: Georgia; font-size: 11pt; line-height:18px; padding: 150px 20px 20px 20px; color: #000000; background-color:#ffffff; margin: 0 auto; -moz-box-shadow: 0px 0px 10px #999; -webkit-box-shadow: 0px 0px 10px #999; box-shadow: 0px 0px 10px rgba(0,0,0,0.5); -moz-border-radius: 3px; border-radius: 3px; margin-top: 100 px; width: 280 px; } #bgRayures { position: absolute; top: 0px; left: 0px; background-color:#ccc; background-image:url(rayures.png); background-position: 0px 0px; width: 100%; height: 100%; margin: 0 auto; opacity: 0; } #claim { position: absolute; top: 30px; left: 20px; background-color:#fff; width: 280 px; margin: 0 auto; } #claimLayer { position: absolute; top: 30px; left: 20px; background-color:#fff; opacity: 0; width: 280 px; margin: 0 auto; } .txt { font-family: Georgia; font-size: 11pt; color: #666; font-style:italic; } #console { position: absolute; top:0px; left: 0px; margin: 5px; font-family: Monaco, monospace; font-size: 12px; color: #fff; } .note { font-family: Georgia; font-size: 9pt; color: #999; font-style:italic letter-spacing: .95em; } .headline{ letter-spacing: .05em; font-size: 13pt; color: #999; font-family: "LeagueGothicRegular", "HelveticaNeue-CondensedBold", "Franklin Gothic Demi Cond", "Franklin Gothic Medium Cond", "Impact", sans-serif; } body { padding: 0px 0px 0px 0px; padding-bottom:200px; background-color:#eee; } </style> <script> var h = 0; var intervalRayure; var intervalConsole; var intervalColor; var consoleString = ""; var myTxts = new Array("HTML5","CSS","JAVASCRIPT","PHP","MYSQL","ACTIONSCRIPT","UNITY 3D","C#","XCODE","OBJ-C"); var txtCounter = 0; var myColors = new Array("#3FA9F5","#99CC00","#FCEE21","#FF931E","#D4145A","#8E2FED"); var colorCounter = 0; var thisLink; $("document").ready(function() { $("#bgRayures").css({"height" : $(document).height()+"px"}); $(".cadre").css({"width" : "280px", "margin-top": "100px"}); $("#claimLayer").mouseover(function(e){ stopConsole(); clearInterval(intervalRayure); intervalRayure = setInterval(moveRayures, 50); $("#bgRayures").stop().animate({ opacity: 1}, 500); $("#claimLayer").stop().animate({ opacity: 1}, 500); }); $("#claimLayer").mouseout(function(e){ $("#bgRayures").stop().animate({ opacity: 0}, 500,function() { clearInterval(intervalRayure); }); $("#claimLayer").stop().animate({ opacity: 0}, 500); }); $("#startConsole").mouseover(function(e){ setColor(2); clearInterval(intervalConsole); intervalConsole = setInterval(writeConsole, 50); }); $("p").mouseover(function(e){ setColor($(this).attr("colorIndex")); if ($(this).attr("id")!="startConsole") stopConsole(); }); $("p").click(function(e){ setColor($(this).attr("colorIndex")); if ($(this).attr("id")!="startConsole") stopConsole(); }); $("a").mouseover(function(e){ //$(this).css({ color: myColors[colorCounter] }); $(this).stop().animate({ color: myColors[colorCounter]}, 100); thisLink = $(this); clearInterval(intervalColor); intervalColor = setInterval(linkColor, 500); }); $("a").mouseout(function(e){ clearInterval(intervalColor); $(this).stop().animate({ color: "#000"}, 3000); }); }); var posX = 0; function moveRayures() { posX ++; if (posX==50) posX = 0; $("#bgRayures").css({"background-position" : posX+"px "+posX+"px"}); } function writeConsole() { opacity = Math.floor(Math.random()*5)/10+0.5; consoleString += "<span style='opacity:"+opacity+"'>"+myTxts[txtCounter]+" </span>"; $("#console").html(consoleString); txtCounter++; if (txtCounter>=myTxts.length) { txtCounter=0; myTxts.shuffle(); } if ($("#console").height()>($("#main").height()+500)){ consoleString = ""; } } function stopConsole() { if (consoleString != "") { $("#console").stop().animate({ opacity: 0}, 250,function() { clearInterval(intervalConsole); consoleString = ""; $("#console").html(consoleString); $("#console").css({"opacity" : "1"}); }) } } function setColor(h){ //var RGB = hsl2rgb(h,s,l); //var RGBCode = RGB.r+","+RGB.g+","+RGB.b; $('body').stop().animate({ backgroundColor: myColors[h]}, 500); } function linkColor(){ colorCounter++; if (colorCounter>=myColors.length) colorCounter = 0; thisLink.stop().animate({ color: myColors[colorCounter]}, 500); } </script> </head> <body> <div id="bgRayures"></div> <div id="console"></div> <div class="cadre" id="main"> <div id="claim"><img src="icodeyourideas.png"></div> <div id="claimLayer"><img src="icodeyourideas-over.png"></div> <p colorIndex="2"><b>Stéphan Barbé</b> <br/>freier Entwickler <br/>für Web & iOS Apps <br/>&nbsp; <br/>Römerstrasse 70 <br/>D-70180 Stuttgart <br/>&nbsp; <br/><a href="mailto:sb@stephanbarbe.de">sb@stephanbarbe.de</a> <br/>0171 124 1324 </p> <hr style="border:dashed #666666; border-width:1px 0 0 0; height:0;line-height:0px;font-size:0;margin:0;padding:0;"> <p class="txt" id="startConsole" colorIndex="1"> Hauptberuflich entwickle ich seit 1998 in Stuttgart Websites, und seit 2009 Applikationen für iPhone und iPad. <br/>&nbsp; <br/>Ich bin regelmässig tätig für Agenturen, und habe so in den letzten Jahren an Projekten für internationale Marken wie Hugo Boss, Daimler, Sony-Ericsson, u.a. gearbeitet. </p> <hr style="border:dashed #666666; border-width:1px 0 0 0; height:0;line-height:0px;font-size:0;margin:0;padding:0;"> <p colorIndex="0" ><span class="headline">HOMEPAGES<br/></span> <img src="gif.gif" height="6" width="280"> <br/><a href="http://www.anishkapoor.com" target="_blank">anishkapoor.com</a><span class="note">*</span> <br/><a href="http://www.kbnk.de" target="_blank">kbnk.de</a><span class="note">*</span> <br/><a href="http://www.bolles-wilson.com" target="_blank">bolles-wilson.com</a><span class="note">*</span> <br/><a href="http://www.jbeardsall.com" target="_blank">jbeardsall.com</a><span class="note">*</span> <br/><a href="http://www.brightenthecorners.com" target="_blank">brightenthecorners.com</a><span class="note">*</span> <br/><a href="http://www.pippikakka.de" target="_blank">pippikakka.de</a> <!-- <br/><a href="http://www.mehrwerk-ag.de" target="_blank">mehrwerk-ag.de</a> --> <br/>&nbsp; <br/><span class="note">* in Zusammenarbeit mit Brighten the Corners</span> </p> <hr style="border:dashed #666666; border-width:1px 0 0 0; height:0;line-height:0px;font-size:0;margin:0;padding:0;"> <p colorIndex="4"><span class="headline">APPS</span> <img src="gif.gif" height="6" width="280"> <br/><a href="http://itunes.apple.com/de/app/calculus-doodlus/id465916328#" target="_blank">Calculus doodlus</a> <br/><span class="txt">Ein einfacher Taschenrechner mit einer interaktiven Papierrolle. <br/>Calculus doodlus war im Oktober App der Woche!</span> <br/>&nbsp; <br/><a href="http://itunes.apple.com/de/app/lese-jagd/id442714752#" target="_blank">Lese Jagd</a> <br/><span class="txt">Ein Spiel für Grundschulkinder um Lesen zu üben, im Auftrag der <a href="http://www.kinderbriefe.de" target="_blank" style="color:#666666;">Kinderbriefe GmbH</a> </span> </p> </div> </body> <script> function hsl2rgb(h, s, l) { var m1, m2, hue; var r, g, b s /=100; l /= 100; if (s == 0) r = g = b = (l * 255); else { if (l <= 0.5) m2 = l * (s + 1); else m2 = l + s - l * s; m1 = l * 2 - m2; hue = h / 360; r = HueToRgb(m1, m2, hue + 1/3); g = HueToRgb(m1, m2, hue); b = HueToRgb(m1, m2, hue - 1/3); } return {r: r, g: g, b: b}; } function HueToRgb(m1, m2, hue) { var v; if (hue < 0) hue += 1; else if (hue > 1) hue -= 1; if (6 * hue < 1) v = m1 + (m2 - m1) * hue * 6; else if (2 * hue < 1) v = m2; else if (3 * hue < 2) v = m1 + (m2 - m1) * (2/3 - hue) * 6; else v = m1; return Math.round(255 * v); } Array.prototype.shuffle = function() { var s = []; while (this.length) s.push(this.splice(Math.random() * this.length, 1)[0]); while (s.length) this.push(s.pop()); return this; } </script> </html>