/
index.html
267 lines (221 loc) · 13.6 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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guillaume Tarsi — Auteur-scénariste et créateur multimédia</title>
<meta name="description" content="Présentation de travaux de Guillaume Tarsi, auteur-scénariste et créateur ouaibe" />
<meta name="keywords" content="guillaume, tarsi, scénariste, writer, author" />
<meta name="author" content="Guillaume Tarsi" />
<link rel="stylesheet" type="text/css" href="css/magnific-popup.css" />
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/themes/tarsi/default.css" />
<link rel="stylesheet" type="text/css" href="css/page-home.css" />
<link rel="icon" alt="Photo de Guillaume Tarsiguel" type="image/png" href="./images/biophoto.png">
<!-- todo <link rel="icon" alt="tetocarrée, by Boulet and Zanorg" type="image/png" href="./images/icon.png">-->
<script src="js/modernizr.custom.js"></script>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>
</head>
<body class="section1-visible">
<header class="headermobile mobile col-12">
<button id="releaseMenu" ></button>
<h1><a href="#portfolio">Guillaume Tarsi</a></h1>
<nav class="menu menumobile">
<a class="target-portfolio current" href="#portfolio">Mes créations</a>
<a class="target-about" href="#about">Qui je suis</a>
<a class="target-contact" href="#contact">Me contacter</a>
</nav>
</header>
<div id="container" class="col-12">
<header class="headerstandard headerhome">
<div class="headerstandard-inner">
<!--<img class="mini-icon" src="./images/biophoto.png"" alt="Photo de Guillaume Tarsiguel, par Laura Tarsiguel"/>-->
<h1><a href="#portfolio">Guillaume Tarsi</a></h1>
<nav class="menu menustandard">
<a data-filter=".all" class="target-portfolio current" href="#portfolio">Mes créations</a>
<a class="target-about" href="#about">Qui je suis</a>
<a class="target-contact" href="#contact">Me contacter</a>
</nav>
</div>
</header>
<div class="main" id="main">
<section id="portfolio" class="portfolio">
<div class="section-content">
<nav id="filter" class="filter" data-option-key="filter">
<span class="title">Filtrer les projets :</span>
<strong>
<a data-filter=".all" class="current" >Tous les projets</a> |
<!--<a data-filter=".show">Séries</a> |-->
<a data-filter=".cronics">Chroniques</a> |
<a data-filter=".webcreation">Création web</a> |
<a data-filter=".fiction">Fiction</a> |
<a data-filter=".comic">Bande dessinée</a> |
<a data-filter=".other">Autre</a>
</strong>
</nav>
<ul id="elements" class="grid">
<li class="all cronics">
<a href="./chroniques-radio-tele/index.html">
<h3>Chroniques radio et télé</h3>
<div class="project-subheader">Chroniques humoristiques sur l'actu</div>
<img class="project-thumbnail" src="./chroniques-radio-tele/img/thumbnail.jpg">
<div class="project-cta">Voir le projet</div>
</a>
</li>
<li class="all comic cronics">
<a href="./muchpolitik/index.html">
<h3>Much Politik</h3>
<div class="project-subheader">Webcomic d'actu décalé et créations multimédia</div>
<img class="project-thumbnail" src="./muchpolitik/img/thumbnail.png">
<div class="project-cta">Voir le projet</div>
</a>
</li>
<li class="all fiction comic webcreation">
<a href="./archibald-occiput/index.html">
<h3>Archibald Occiput</h3>
<span class="project-subheader">Bande dessinée / webcomic</span>
<img class="project-thumbnail" src="./archibald-occiput/img/thumbnail.png">
<div class="project-cta">Voir le projet</div>
</a>
</li>
<li class="all webcreation cronics">
<a href="./au-sommaire-ce-soir/index.html">
<h3>Au sommaire ce soir</h3>
<div class="project-subheader">Chroniques / podcast</div>
<img class="project-thumbnail" src="./au-sommaire-ce-soir/img/thumbnail.png">
<div class="project-cta">Voir le projet</div>
</a>
</li>
<li class="all fiction">
<a href="./a-touch-of-cheese/index.html">
<h3>A touch of cheese</h3>
<div class="project-subheader">Fiction / série</div>
<img class="project-thumbnail" src="./a-touch-of-cheese/img/thumbnail.png">
<div class="project-cta">Voir le projet</div>
</a>
</li>
<li class="all webcreation fiction">
<a href="./epopee-interactive/index.html">
<h3>Rendez-vous à la manif</h3>
<div class="project-subheader">Fiction interactive</div>
<img class="project-thumbnail" src="./epopee-interactive/img/thumbnail.png">
<div class="project-cta">Voir le projet</div>
</a>
</li>
<li class="all fiction other">
<a href="./ete-indien/index.html">
<h3>Été indien</h3>
<div class="project-subheader">Clip musical</div>
<img class="project-thumbnail" src="./ete-indien/img/thumbnail.png">
<div class="project-cta">Voir le projet</div>
</a>
</li>
<li class="all fiction comic">
<a href="./leonore-et-brume/index.html">
<h3>Léonore & Brume</h3>
<span class="project-subheader">Bande dessinée jeunesse</span>
<img class="project-thumbnail" src="./leonore-et-brume/img/thumbnail.png">
<div class="project-cta">Voir le projet</div>
</a>
</li>
<!-- <li class="all webcreation other">
<a href="./candidatron/index.html">
<h3>Le candidatron</h3>
<span>Fiction / clip musical</span>
<img class="project-thumbnail" src="./candidatron/thumbnail.png">
<div class="project-cta"> Voir le projet</div>
</a>
</li> -->
<!-- <li class="all show">
<a href="./mauvaises-graines/index.html">
<h3>Mauvaises graines</h3>
<span>Fiction / série</span>
<img class="project-thumbnail" src="./mavaises-graines/thumbnail.png">
<div class="project-cta"> Voir le projet</div>
</a>
</li> -->
<!--<li class="all show">
<a href="./leonore-et-brume/index.html">
<h3>Léonore et Brume</h3>
<span>Fiction BD</span>
<img class="project-thumbnail" src="./leonore-et-brume/thumbnail.png">
<div class="project-cta"> Voir le projet</div>
</a>
</li>-->
<!--<li class="all webcreation other">
<a href="./safari/index.html">
<h3>Safari</h3>
<span>Création web artistique</span>
<img class="project-thumbnail" src="./safari/thumbnail.png">
<div class="project-cta"> Voir le projet</div>
</a>
</li>-->
</ul>
</div>
</section>
<section id="about" class="about">
<h2 class="main_section-title">Qui je suis</h2>
<div class="section-content text-content">
<section id="mini_bio">
<figure><a class="image-popup" href="./files/photo-guillaumetarsi.png"><img id="photo-guillaumetarsi" src="./files/photo-guillaumetarsi.png"></a></figure>
<p>Ingénieur de formation, je laisse enfin exploser mes pulsions de création audiovisuelle en fondant, dans mon école, un club de courts‑métrages. Puis, en 2015, je rejoins la télé associative <a class="clickable-link link-discrete" target="_blank" href="http://www.telesorbonne.com">TéléSorbonne</a>, où j'écris et je tourne des reportages et des fictions.<p>
<p>En parallèle, je lance <a class="clickable-link link-discrete" target="_blank" href="http://www.tarsi.fr/muchpolitik">Much Politik</a>, un webcomic de chroniques d'actualité à l'humour absurde, que je décline sous de nombreuses autres formes : albums papier (éditions Lapin), site web participatif, fiction interactive et même jeu vidéo.</p>
<p>J'y découvre un goût pour faire réfléchir sur des thèmes modernes, à travers un point de vue unique ou décalé. Curieux de tout, j'explore pour cela divers supports en tirant parti des spécificités de chaque média : web, radio, télé, bande dessinée, fiction interactive... et je suis toujours à l'affût de nouvelles façons de raconter des histoires, ou de nouveaux formats à explorer.</p>
<div class="resume">
►<a href="./files/CV_GuillaumeTarsi.pdf" download>📄</a> <a class="clickable-link link-showy" href="./files/CV_GuillaumeTarsi.pdf" download>Télécharger mon CV (.pdf)</a>
</div>
</section>
<section id="mini_info">
<div>
<h3>Projets réalisés :</h3>
<ul>
<li><p><strong>Créations multimédia</strong> — contenu multimédia avec <a target="_blank" class="clickable-link link-discrete" href="http://www.tarsi.fr/muchpolitik/">Much Politik</a>, fiction interactive avec <a target="_blank" class="clickable-link link-discrete" href="http://www.tarsi.fr/epopée-interactive/">Rendez-vous à la manif</a></p></li>
<li><p><strong>Bande dessinée</strong> — <a target="_blank" class="clickable-link link-discrete" href="http://www.tarsi.fr/muchpolitik/">Much Politik</a>, <a target="_blank" class="clickable-link link-discrete" href="http://www.tarsi.fr/archibald-occiput/">Archibald Occiput</a>, <a target="_blank" class="clickable-link link-discrete" href="http://www.tarsi.fr/leonore-et-brume/">Léonore et Brume</a></p></li>
<li><p><strong>Séries</strong> — <a target="_blank" class="clickable-link link-discrete" href="http://www.tarsi.fr/le-début-de-la-fin/">Le début de la fin</a>, <a target="_blank" class="clickable-link link-discrete" href="http://www.tarsi.fr/a-touch-of-cheese/">A touch of cheese</a></p></li>
<li><p><strong>Créations audiovisuelles</strong> — <a target="_blank" class="clickable-link link-discrete" href="http://www.tarsi.fr/ete-indien/">L'Été Indien</a>, <a target="_blank" class="clickable-link link-discrete" href="http://www.tarsi.fr/catch-litteraire/">reportage sur le catch littéraire</a></p> </li>
</ul>
</div>
</section>
</div>
</section>
<section id="contact" class="contact">
<h2 class="main_section-title">Me contacter</h2>
<div class="col50 left contact_info">
<div class="contact_info-main text-content">
<p alt="e-mail address">E-mail — <strong>guillaume.tarsi@gmail.com</strong></p>
<!--<p alt="phone number">Téléphone — <strong> +33 6 xx xx xx xx</strong></p>-->
<p alt="city">Basé à <strong>Paris</strong></p>
</div>
</div>
<div class="col50 right contact_info-social">
<p>Vous pouvez me suivre par ici :</p>
<a class="social_button" href=http://www.facebook.com/guillaumetarsi> <div class="button-facebook"></div><span class="social_button-name">Facebook</span></a>
<a class="social_button" href=http://www.twitter.com/guillaumetarsi><div class="button-twitter"></div><span class="social_button-name">Twitter</span></a>
<a class="social_button" href=http://www.instagram.com/guillaumetarsi><div class="button-instagram"></div><span class="social_button-name">Instagram</span></a>
<a class="social_button" href=http://www.github.com/guillaumetarsi><div class="button-github"></div><span class="social_button-name">Github</span></a>
</div>
</section>
</div>
<nav class="menu">
<a title="" href="#portfolio">
<div class="scroll"></div>
</a>
</nav>
</div>
<!-- Jquery -->
<script src="js/jquery.min.js"></script>
<!-- Classie - class helper functions by @desandro https://github.com/desandro/classie -->
<script src="js/classie.js"></script>
<!-- waypoints jQuery plugin by http://imakewebthings.com/ : http://imakewebthings.com/jquery-waypoints/ -->
<script src="js/waypoints.min.js"></script>
<!-- jquery-smartresize by @louis_remi : https://github.com/louisremi/jquery-smartresize -->
<script src="js/jquery.debouncedresize.js"></script>
<!-- Isotope : Filtering http://isotope.metafizzy.co/demos/filtering.html -->
<script src="js/jquery.isotope.min.js"></script>
<!-- MagnificPopup -->
<script src="js/jquery.magnific-popup.min.js"></script>
<!-- Gestion générale -->
<script src="js/custom.js"></script>
</body>
</html>