-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
134 lines (114 loc) · 8.99 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Fabien Quatravaux - développeur web</title>
<meta name="description" content="Portfolio et compétences de développeur web de Fabien Quatravaux">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/module.css">
<link rel="stylesheet" href="css/state.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<header id="header">
<div class="vcard" itemtype="http://microformats.org/profile/hcard" itemscope>
<h1 class="n" itemprop="fn"><a class="url" itemprop="url" href="http://fab1en.github.com">
<span class="given-name" itemprop="given-name">Fabien</span>
<span class="family-name" itemprop="family-name">Quatravaux</span>
</a></h1>
<a class="email" itemprop="email" href="mailto:fabien.quatravaux@gmail.com" target="_blank">
<img src="img/FabienQuatravaux.png" class="photo" itemprop="photo"/>
<span class="say icon-mail">Contactez-moi</span>
</a>
<h2 class="title" itemprop="title">Développeur Web</h2>
<ul class="contact">
<li><a class="url icon-skype" href="skype:fabien.quatravaux?chat" title="contact skype : fabien.quatravaux"></a></li>
<li><a class="url viadeo icon-viadeo" href="http://fr.viadeo.com/fr/profile/fabien.quatravaux" title="profile Viadeo"></a></li>
<li><a class="url icon-github" href="https://github.com/Fab1en" title="profil Github"></a></li>
</ul>
</div>
</header>
<div id="main" role="main">
<div class="carousel">
<div class="csel-mask">
<div class="csel-stage">
<article id="newyork3.0" class="csel-item">
<h3><a href="http://newyork.arte.tv" target="_blank">New York 3.0</a></h3>
<p>Un webdocumentaire sur New York la moderne, 10 ans après les attentats du 11 septembre.
12 personnalités présentent leur ville à travers des vidéos, des photos, des articles et des cartes
interactives. Une mise en page horizontal originale. <a href="http://newyork.arte.tv" target="_blank">newyork.arte.tv</a></p>
<img src="img/projets/newyork3.0.jpg" width="960"/>
</article>
<article id="amazonie" class="csel-item">
<h3><a href="http://amazonie.arte.tv" target="_blank">Amazonie - le souffle indien</a></h3>
<p>Un webdocumentaire sur le réchauffement climatique vu par les indiens d'Amérique. Ciro,
capitaine Matapi, nous raconte à travers 7 épisodes comment son peuple protège la forêt.
Une animation HTML5 introduit chaque épisode. <a href="http://amazonie.arte.tv" target="_blank">amazonie.arte.tv</a></p>
<img src="img/projets/amazonie.jpg" width="960"/>
</article>
<article id="dans-tes-yeux" class="csel-item">
<h3><a href="http://dans-tes-yeux.arte.tv" target="_blank">Dans tes yeux</a></h3>
<p>Une expérience interactive qui met l'internaute dans la peau d'un reporter aveugle. Il doit se laisser
guider par les sons pour découvrir sa destination. Une véritable application Javascript
qui gère sons, vidéos et animation de la carte <a href="http://dans-tes-yeux.arte.tv" target="_blank">dans-tes-yeux.arte.tv</a></p>
<img src="img/projets/danstesyeux.jpg" width="960"/>
</article>
<article id="borgen" class="csel-item">
<h3><a href="http://borgen.arte.tv" target="_blank">Borgen</a></h3>
<p>Un faux tabloïd "Skandal" pour faire la promotion de la série "Borgen, une femme au pouvoir". Une interface d'administration
souple permettant de mettre en ligne 4 types de contenus différents <a href="http://borgen.arte.tv" target="_blank">borgen.arte.tv</a></p>
<img src="img/projets/borgen.jpg" width="960"/>
</article>
<article id="sitesartistes" class="csel-item">
<h3><a href="http://www.thepuppinisisters.com/" target="_blank">Sites artistes</a></h3>
<p>Une dizaine de minisites pour des artistes du label Universal Classic&Jazz. Un trame commune avec un lecteur audio, la liste des albums,
des photos, le tout avec une navigation ajax et un graphisme très marqué. <a href="http://www.thepuppinisisters.com/" target="_blank">thepuppinisisters.com</a></p>
<img src="img/projets/sitesartistes.jpg" width="960"/>
</article>
<article id="cabouge" class="csel-item">
<h3><a href="http://cabouge.tv5monde.com" target="_blank">Ça Bouge !</a></h3>
<p>Site éducatif pour apprendre le français au fil des régions francophones. Chaque région est présentée par des articles,
des photos et des vidéos. Une carte SVG interactive permet de naviguer entre les régions. <a href="http://cabouge.tv5monde.com" target="_blank">cabouge.tv5monde.com</a></p>
<img src="img/projets/cabouge.jpg" width="960"/>
</article>
<article id="maisoncarree" class="csel-item">
<h3><a href="http://maisoncarree.eu" target="_blank">la Maison Carrée de Nîmes</a></h3>
<p>Site de ressources documentaires très fourni sur la Maison Carrée de Nîmes. Des centaines de vidéos, affiches, plans, cartes postales et autres
sont rendues accessible via un moteur de recherche. <a href="http://maisoncarree.eu" target="_blank">maisoncarree.eu</a></p>
<img src="img/projets/maisoncarree.jpg" width="960"/>
</article>
<article id="quizzapple" class="csel-item">
<h3><a href="http://www.arte.tv/fr/4320586.html" target="_blank">Quizz Apple</a></h3>
<p>Un questionnaire sur Steve Jobs et les produits Apple "Quel drogué d'Apple êtes-vous". Une mini application javascript ponctuée
de liens et de vidéos. <a href="http://www.arte.tv/fr/4320586.html" target="_blank">www.arte.tv/fr/4320586.html</a></p>
<img src="img/projets/quizzapple.jpg" width="960"/>
</article>
</div>
</div>
</div>
</div>
<footer id="footer">
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>