-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
384 lines (326 loc) · 18.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
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Florent Chatterji portfolio" />
<meta name="author" content="Florent Chatterji">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta charset="utf-8">
<meta id="theme-color" name="theme-color" content="#307699">
<!-- If IE use the latest rendering engine -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Florent Chatterji</title>
<!--jQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc=" crossorigin="anonymous"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Font Awesome -->
<script src="https://use.fontawesome.com/b4a6a79803.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Animated headlines CSS -->
<link rel="stylesheet" href="css/animated-headlines.css" />
<!-- Montserrat font family -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Montserrat">
<!-- Stylesheet -->
<link rel="stylesheet" href="css/style.css" />
</head>
<body data-spy="scroll" data-target=".navbar" id="bootstrap-overrides">
<!-- Jumbotron -->
<section class="jumbotron" id="jumbotron">
<!-- The container is inside the jumbotron as it makes the jumbotron full width-->
<div class="container jumbotron-content">
<div class="cd-intro jumbotron-title">
<h1 class="cd-headline letters type">
<span class="jumbotron-title-text">Florent Chatterji</span><br>
<span class="cd-words-wrapper waiting jumbotron-title-text">
<b class="is-visible">Back End Web Developer</b>
<b>5 years experience</b>
<b>Living in Santiago, Chile</b>
</span>
</h1>
</div>
</div>
</section>
<!-- Navigation -->
<section class="navigation container-fullwidth">
<!-- id is needed here for the navigation behavior-->
<nav class="navbar navbar-default" data-spy="affix" id="navigation">
<!-- 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="#myNavbar" 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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-buttons" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#jumbotron">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
</section>
<!-- About section -->
<section class="about container" id="about">
<div class="row">
<div class="col-md-12">
<div class="experience">
<h2 class="text-center experience-title">Experience</h2>
<p class="experience-summary text-center">
Results driven back-end web developer. I love teamwork, learning new things and making complex stuff look simple.
<br><br>
I started out as a financial analyst, but the thing i liked the most at the time was workingon complex Excel models and macros.
Software development was to me a logical next step, i begun with online courses, then a full fledged degree.
<br><br>
I now have 5 years of experience as a back-end web developer, and am looking for work after a recent move to South America.
</p>
</div>
</div>
<div class="col-md-6">
<div class="employment text-center">
<i class="fa fa-code"></i>
<h3 class="employment-title">Employment</h3>
<h4 class="employment-subtitle">2020 - 2022: Ecov</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-circle"></i>Audits financiers, ingénierie financière de projets, prospective budgétaire</li>
<li><i class="fa-li fa fa-circle"></i>Réalisation de maquettes financières complexes</li>
</ul>
<h4 class="employment-subtitle">2017-2020: Accenture</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-circle"></i>Audits financiers, ingénierie financière de projets, prospective budgétaire</li>
<li><i class="fa-li fa fa-circle"></i>Réalisation de maquettes financières complexes</li>
</ul>
<h4 class="employment-subtitle">Bordeaux-Métropole - Contrôleur de gestion</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-circle"></i>Audits financiers, ingénierie financière de projets, prospective budgétaire</li>
<li><i class="fa-li fa fa-circle"></i>Réalisation de maquettes financières complexes</li>
</ul>
<h4 class="employment-subtitle">SCET - Consultant financier</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-circle"></i>Missions de conseil financier pour des collectivités locales</li>
</ul>
<h4 class="employment-subtitle">Région Haute-Normandie - Responsable du service Animation et Prospective</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-circle"></i>Management d'une équipe de 4 personnes, budget de 6,6M€</li>
<li><i class="fa-li fa fa-circle"></i>Gestion de la subvention et suivi de plusieurs structures dans le domaine de la formation professionnelle</li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="education text-center">
<i class="fa fa-graduation-cap"></i>
<h3 class="education-title">Education</h3>
<h4 class="education-subtitle">CNAM - Licence d'informatique</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-circle"></i>parcours programmation web</li>
</ul>
<h4 class="education-subtitle">Udacity - Full Stack Web Developper Nanodegree</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-circle"></i>diplôme en ligne, 11 cours, 8 projets)</li>
</ul>
<h4 class="education-subtitle">Cours en ligne</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-circle"></i>Introduction to computer science and programming using python – Edx </li>
<li><i class="fa-li fa fa-circle"></i>Design of Computer Programs – Udacity</li>
<li><i class="fa-li fa fa-circle"></i>Machine Learning – Coursera</li>
</ul>
<h4 class="education-subtitle">Sciences-Po Lyon - Master II « Ingénierie des Partenariats Publics Privés »</h4>
</div>
</div>
</div>
</section>
<!-- Portfolio section -->
<section class="portfolio" id="portfolio">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2 class="portfolio-heading text-center">Portfolio</h2>
</div>
</div>
<!-- A-corp -->
<div class="row portfolio-section">
<div class="col-xs-12 col-sm-6 col-sm-offset-1 pull-right">
<img class="portfolio-image img-responsive" src="img/a-corp-800x600.png" alt="preview of a-corp website">
</div>
<div class="col-xs-12 col-sm-5">
<h3 class="portfolio-title text-left">A-Corp</h3>
<p class="portfolio-description">
Site de gestion et de réservations de salles de réunion
</p>
<ul class="portfolio-tags">
<li>possibilité de glisser-déposer et redimensionner les réservations</li>
<li>profils administrateur et client</li>
<li>utilisation de grunt pour automatiser la mise à jour du site</li>
</ul>
<p class="portfolio-technologies">
<b>Technologies utilisées</b> PHP, MySQL, JQuery, Bootstrap, Grunt
</p>
<div class="row">
<div class="col-xs-6">
<a class="btn btn-md btn-default" href="https://github.com/fchatterji/a-corp" target="_blank">Voir le code</a>
</div>
<div class="col-xs-5 col-xs-offset-1 pull-right">
<a class="btn btn-md btn-default" href="https://a-corp1.000webhostapp.com/" target="_blank">Voir le site</a>
</div>
</div>
</div>
</div>
<!-- webcosting -->
<div class="row portfolio-section">
<div class="col-xs-12 col-sm-6">
<img class="portfolio-image img-responsive" src="img/webcosting-800x600.jpg" alt="preview of webcosting website">
</div>
<div class="col-xs-12 col-sm-5 col-sm-offset-1 pull-right">
<h3 class="portfolio-title">Webcosting</h3>
<p class="portfolio-description">
Site d'estimation du nombre de lignes de code et du temps nécessaire pour réaliser un projet informatique
</p>
<ul class="portfolio-tags">
<li>utilisation de la méthode COCOMO ou de la méthode des points de fonctions</li>
<li>site responsive</li>
</ul>
<p class="portfolio-technologies">
<b>Technologies utilisées:</b> Python, Django, Bootstrap.
</p>
<div class="row">
<div class="col-xs-6">
<a class="btn btn-md btn-default" href="https://github.com/rhinoferoce/webcosting" target="_blank">Voir le code</a>
</div>
<div class="col-xs-5 col-xs-offset-1 pull-right">
<a class="btn btn-md btn-default" href="http://fchatter.pythonanywhere.com/webcosting/" target="_blank">Voir le site</a>
</div>
</div>
</div>
</div>
<!-- multi user blog -->
<div class="row portfolio-section">
<div class="col-xs-12 col-sm-6 col-sm-offset-1 pull-right">
<img class="portfolio-image img-responsive" src="img/multi-user-blog-800x600.png" alt="preview of multi user blog website">
</div>
<div class="col-xs-12 col-sm-5">
<h3 class="portfolio-title text-left">Blog multi-utilisateurs</h3>
<p class="portfolio-description">
Un blog qui permet à plusieurs utilisateurs de créer et commenter des posts.
</p>
<ul class="portfolio-tags">
<li>site responsive</li>
<li>utilisation d'un thème bootstrap</li>
</ul>
<p class="portfolio-technologies">
<b>Technologies utilisées:</b> Python, GoogleAppEngine, Webapp, jinja2, Bootstrap
</p>
<div class="row">
<div class="col-xs-6">
<a class="btn btn-md btn-default" href="https://github.com/rhinoferoce/multi-user-blog" target="_blank">Voir le code</a>
</div>
<div class="col-xs-5 col-xs-offset-1 pull-right">
<a class="btn btn-md btn-default" href="https://multi-user-blog-145719.appspot.com/" target="_blank">Voir le site</a>
</div>
</div>
</div>
</div>
<!-- item catalog -->
<div class="row portfolio-section">
<div class="col-xs-12 col-sm-6">
<img class="portfolio-image img-responsive" src="img/item-catalog-800x600.jpg" alt="preview of item catalog website">
</div>
<div class="col-xs-12 col-sm-5 col-sm-offset-1 pull-right">
<h3 class="portfolio-title">Catalogue d'items</h3>
<p class="portfolio-description">
Site permettant de gérer un catalogue d'items
</p>
<ul class="portfolio-tags">
<li>utilisation d'angular2 pour la partie frontend et de django pour la partie backend</li>
<li>architecture REST</li>
<li>connection entre frontend et backend avec Django REST Framework</li>
</ul>
<p class="portfolio-technologies">
<b>Technologies utilisées:</b> Angular2, Django, Django Rest Framework,
</p>
<div class="row">
<div class="col-xs-6">
<a class="btn btn-md btn-default" href="https://github.com/rhinoferoce/item-catalog" target="_blank">Voir le code</a>
</div>
</div>
</div>
</div>
<!-- Fresh tomatoes -->
<div class="row portfolio-section">
<div class="col-xs-12 col-sm-6 col-sm-offset-1 pull-right">
<img class="portfolio-image img-responsive" src="img/fresh_tomatoes-800x600.jpg" alt="preview of fresh tomatoes website">
</div>
<div class="col-xs-12 col-sm-5">
<h3 class="portfolio-title text-left">Fresh tomatoes</h3>
<p class="portfolio-description">
Site qui affiche des films sur la base d'une liste
</p>
<ul class="portfolio-tags">
<li>le code HTML est généré automatiquement</li>
</ul>
<p class="portfolio-technologies">
<b>Technologies utilisées:</b> Python 2.7, Bottle Framework, Google appengine, Jinja2template, Bootstrap and Javascript.
</p>
<div class="row">
<div class="col-xs-6">
<a class="btn btn-md btn-default" href="https://github.com/rhinoferoce/movie-trailer-project" target="_blank">Voir le code</a>
</div>
</div>
</div>
</div>
<!-- Roulette java -->
<div class="row portfolio-section">
<div class="col-xs-12 col-sm-6">
<img class="portfolio-image img-responsive" src="img/roulette-800x600.png" alt="preview of roulette code">
</div>
<div class="col-xs-12 col-sm-5 col-sm-offset-1 pull-right">
<h3 class="portfolio-title">Roulette en java</h3>
<p class="portfolio-description">
Un programme permettant à plusieurs joueurs de jouer à la roulette, sur la ligne de commande.
</p>
<ul class="portfolio-tags">
<li>programme utilisé sur la ligne de commande</li>
<li>prise en compte de l'ensemble des règles de la roulette</li>
</ul>
<p class="portfolio-technologies">
<b>Technologies utilisées:</b> Java
</p>
<div class="row">
<div class="col-xs-6">
<a class="btn btn-md btn-default" href="https://github.com/rhinoferoce/roulette-java" target="_blank">Voir le code</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact section -->
<section class="contact" id="contact">
<div class="container">
<div class="row contact-content">
<h2 class="contact-title">Vous voulez me contacter?</h2>
<h4 class="contact-text">Envoyer-moi un mail à [email protected]</h4>
<a class="btn btn-default contact-btn" href="mailto:[email protected]">Envoyez-moi un mail</a>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<h2 class="contact-title">Je suis également présent sur les réseaux sociaux.</h2>
<a href="https://www.linkedin.com/in/florent-chatterji/" target="_blank"><i class="fa fa-linkedin"></i></a>
<a href="https://github.com/fchatterji" target="_blank"><i class="fa fa-github"></i></a>
<a href="http://stackoverflow.com/users/5555471/florent-chatterji" target="_blank"><i class="fa fa-stack-overflow"></i></a>
</div>
</div>
</footer>
<script src="js/scripts.js"></script>
<!-- Animated headlines -->
<script src="js/animated-headlines.js"></script>
</body>
</html>