-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
344 lines (287 loc) · 20 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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AQELIA</title>
<meta name="description" content="AQELIA est une société de conseil et développement informatique. Je prends en charge vos projets de développement Web ou mobile dans leur globalité : de l'idéation jusqu'à la mise en ligne, en passant par toutes les phases de conception, de design et de production nécessaires.">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"url": "https://www.aqelia.fr",
"logo": "https://www.aqelia.fr/assets/logo_aqelia-100.jpg"
}
</script>
<meta property="og:title" content="AQELIA"/>
<meta property="og:image" content="//www.aqelia.fr/assets/logo_aqelia-100.jpg"/>
<meta property="og:description" content="AQELIA est une société de conseil et développement informatique. Je prends en charge vos projets de développement Web ou mobile dans leur globalité : de l'idéation jusqu'à la mise en ligne, en passant par toutes les phases de conception, de design et de production nécessaires."/>
<meta property="og:url" content="//www.aqelia.fr"/>
<link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
<link rel="icon" href="assets/favicon.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/css2?family=Asap:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/pure-min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/grids-responsive-min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="main">
<header class="header-section">
<div class="container">
<div>
<img
class="header-logo"
srcset="assets/logo_aqelia_black@1x.png,
assets/logo_aqelia_black@2x.png 2x,
assets/logo_aqelia_black@3x.png 3x"
src="assets/logo_aqelia_black@1x.png"
alt="AQELIA logo"
>
</div>
<!-- desktop menu -->
<div class="header-menu pure-menu pure-menu-horizontal desktop">
<ul class="pure-menu-list">
<li class="pure-menu-item">
<a href="#about" class="pure-menu-link">À propos</a>
</li>
<li class="pure-menu-item">
<a href="#projects" class="pure-menu-link">Réalisations</a>
</li>
<li class="pure-menu-item">
<a href="#hobbies" class="pure-menu-link">Projets annexes</a>
</li>
<li class="pure-menu-item">
<a href="#contact" class="pure-menu-link">Contact</a>
</li>
</ul>
</div>
<!-- mobile icon -->
<div class="scroll-icon mobile">
<svg height="512pt" viewBox="-90 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m166.238281 430.144531-89.769531-94.898437 29.058594-27.488282 60.632812 64.097657 60.273438-64.058594 29.132812 27.410156zm165.761719-38.144531v-272c0-66.167969-53.832031-120-120-120h-92c-66.167969 0-120 53.832031-120 120v272c0 66.167969 53.832031 120 120 120h92c66.167969 0 120-53.832031 120-120zm-120-352c44.113281 0 80 35.886719 80 80v272c0 44.113281-35.886719 80-80 80h-92c-44.113281 0-80-35.886719-80-80v-272c0-44.113281 35.886719-80 80-80zm-46 41c-11.046875 0-20 8.953125-20 20s8.953125 20 20 20 20-8.953125 20-20-8.953125-20-20-20zm0 80c-11.046875 0-20 8.953125-20 20s8.953125 20 20 20 20-8.953125 20-20-8.953125-20-20-20zm0 80c-11.046875 0-20 8.953125-20 20s8.953125 20 20 20 20-8.953125 20-20-8.953125-20-20-20zm0 0"/></svg>
</div>
</header>
<!-- About -->
<div class="about-section container">
<h2 id="about" class="red">À propos</h2>
<p>Salut, moi c'est Alex !<br><br>
Après avoir débuté l'informatique au travers de la recherche fondamentale (p. ex. <a href="https://www.researchgate.net/publication/308731293_A_Versatile_Description_Framework_for_Modeling_Behaviors_in_Traffic_Simulations">A Versatile Description Framework for Modeling Behaviors in Traffic Simulations</a>), j'ai par la suite arpenté l'écosystème des startups, puis fondé une société de développement d'applications mobiles nommée <em>alex et manon</em> (avec <a href="https://atelier-jugeote.com/">Manon Verbeke</a>), pour finalement créer AQELIA en 2018.<br><br>
Fort d'un réseau de freelances talentueux et d'expériences variées (startups, grands comptes, associations ou institutions), je prends en charge vos projets de développement Web ou mobile dans leur globalité : de l'idéation jusqu'à la mise en ligne, en passant par toutes les phases de conception, de design et de production nécessaires.<br>
Curieux par nature, j'aime décortiquer les problèmatiques et comprendre vos besoins, afin d'y apporter la solution technique la plus adaptée.<br>
Promoteur de l'<a href="https://fr.wikipedia.org/wiki/Open_source">Open source</a>, j'emploie des technologies ouvertes et populaires pour vous laisser toute latitude dans le choix de vos prestations futures.<br><br>
En résumé, j'utilise des technologies modernes, au service de l'utilisateur, pour réaliser vos idées avec simplicité et élégance !
</p>
<ul class="social-links">
<li class="social-links-item">
<a href="https://www.linkedin.com/in/alexbonhomme/" class="social-links-link">LinkedIn</a>
</li>
<li class="social-links-item">
<a href="https://github.com/alexbonhomme" class="social-links-link">Github</a>
</li>
<li class="social-links-item">
<a href="https://www.malt.fr/profile/alexandrebonhomme" class="social-links-link">Malt</a>
</li>
</ul>
</div>
<!-- Projects -->
<div class="projects-section container">
<h2 id="projects" class="yellow">Quelques réalisations</h2>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<div class="project-card">
<div class="project-logo square">
<img
class="img-pure"
src="assets/projects/logo-app-bloblab.png"
alt="logo blob lab"
>
</div>
<h3>Blob Lab</h3>
<p>L'application mobile Blob Lab est un outil numérique au service de la recherche scientifique initié par l'<a href="https://www.uphf.fr/">Université Polytechnique Hauts-de-France</a>. Elle a pour but d'étudier la mobilité domicile travail parmis un panel d'entreprises variées.<br>
Résultat d'une collaboration étroite avec <a href="https://makewaves.fr/">Makewaves</a> (développement back-end et design graphique), c'est une application complète qui fait appel à différentes techniques et technologies modernes telles que la gamification et les notifications push personnalisées. La mécanique de jeu a entièrement été imaginée et conçue sur mesure pour répondre à une problèmatique client très spécifique.</p>
<a href="https://play.google.com/store/apps/details?id=fr.makewaves.bloblab">Android</a>
<a href="https://apps.apple.com/gb/app/blob-lab/id1499693039?l=fr">iOS</a>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="project-card">
<div class="project-logo">
<img
class="img-pure"
src="assets/projects/logo-decathlon-activites.svg"
alt="logo decathlon activités"
>
</div>
<h3>Decathlon Activités <small>mission en régie</small></h3>
<p>J'ai initialement commencé dans l'équipe Decathlon Activités sur le sujet de la création d'un <a href="https://en.wikipedia.org/wiki/Systems_design">design system</a> innersource. J'ai travaillé avec une DA sur la conception et la réalisation d'une dizaine de composants en <a href="https://vuejs.org/">Vue.js</a><br>
Ma mission ayant par la suite évolué, j'ai contribué activement au développement du site <a href="https://activites.decathlon.fr/">activites.decathlon.fr</a> (réalisé à l'époque en <a href="https://fr.nuxtjs.org/">Nuxt.js</a>).<br>
J'ai ensuite assumé le rôle de lead developer front-end dans l'une des deux feature team de l'équipe. Attaché à la production de code, j'ai partagé mon temps entre code review, mise en place de TU, coach de dev junior et implémentation de nouvelles fonctionnalités.<br>
J'ai finalement participé au développement de la fonctionnalité de paiement en ligne, en binôme avec <a href="http://www.pandaa.fr/">Florian Vanhecke</a> (lead developer back-end). Ensemble, nous avons mis en place trois APIs (dont une en <a href="https://nestjs.com/">NestJS</a>), afin de gérer l'ensemble des réservations du site.</p>
<a href="https://activites.decathlon.fr/">activites.decathlon.fr</a>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="project-card">
<div class="project-logo square">
<img
class="img-pure"
src="assets/projects/logo-app-creazap.png"
alt="logo crea'zap"
>
</div>
<h3>Créa'ZAP</h3>
<p>Créa'ZAP est une application mobile conçue pour accompagner les créateurs d'entreprises.<br> C'est un projet commandé en 2016 par la <a href="https://www.bge-hautsdefrance.fr/">BGE Hauts de France</a> et réalisé avec <a href="https://atelier-jugeote.com/">Manon Verbeke</a> (dans le cadre de <em>alex et manon</em>). Initialement développée en <a href="https://ionicframework.com/">Ionic</a> 1/Angular 1 pour la partie application mobile et <a href="https://symfony.com/">Symfony</a> 2.8 pour l'API, l'application est toujours maintenue par AQELIA et a récemment été mise à jour vers les dernières versions respectives de chaque framework.</p>
<a href="https://play.google.com/store/apps/details?id=fr.bgehautsdefrance.creazap&hl=fr">Android</a>
<a href="https://apps.apple.com/fr/app/cr%C3%A9azap/id1116109289?l=fr">iOS</a>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="project-card">
<div class="project-logo square">
<img
class="img-pure"
src="assets/projects/logo-app-eedf.png"
alt="logo app eedf"
>
</div>
<h3>L'Appli Éclés</h3>
<p>Cette application a vu le jour dans le cadre de la refonte totale du site principal des <a href="https://www.eedf.fr/">Éclaireuses Éclaireurs de France</a>. Elle permet aux membres de l'association de suivre l'actualité EEDF en étant informé des derniers articles publiés, grâce à un système de notifications avancées avec un filtre par catégories.<br>
C'est le fruit d'une collaboration multiple avec <a href="https://makewaves.fr/">Makewaves</a> (site Wordpress), <a href="https://atelier-jugeote.com/">Manon Verbeke</a> (design graphique) et AQELIA (application mobile).</p>
<a href="https://play.google.com/store/apps/details?id=app.eedf.fr&hl=fr">Android</a>
<a href="https://apps.apple.com/ca/app/lappli-%C3%A9cl%C3%A9s/id1388271599?l=fr">iOS</a>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="project-card">
<div class="project-logo square">
<img
class="img-pure"
src="assets/projects/logo-app-vliller.png"
alt="logo app vliller"
>
</div>
<h3>Vliller</h3>
<p>Vliller est un projet d'expérimentation impulsé en 2016 par <em>alex et manon</em> afin de proposer une expérience plus adaptée à l'usage du vélo que l'application officielle de l'époque.<br>
Directement connectée aux données <a href="https://opendata.lillemetropole.fr/explore/dataset/vlille-realtime/information/">Open Data de la Métropole européenne de Lille</a>, elle a été conçue et réalisée avec <a href="https://atelier-jugeote.com/">Manon Verbeke</a>. Elle fut le sujet de multiples réflexions, notamment en terme de performance et surtout d'<a href="https://fr.wikipedia.org/wiki/Exp%C3%A9rience_utilisateur">expérience utilisateur (UX)</a>, dont nos clients ont pu profiter par la suite.</p>
<a href="https://play.google.com/store/apps/details?id=com.alexetmanon.vliller&hl=fr">Android</a>
<a href="https://apps.apple.com/lu/app/vliller-ton-vlille-en-1-clic/id1161025016?l=fr">iOS</a>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="project-card">
<div class="project-logo">
<img
class="img-pure"
src="assets/projects/logo-oneytrust.png"
alt="logo oneytrust"
>
</div>
<h3>Oneytrust <small>mission en régie</small></h3>
<p>Ma mission au sein de l'équipe Oneytrust était d'abord essentiellement un rôle de developer fullstack. Nous avions pour mission le développement d'un outil d'analyse manuelle de transaction bancaire.<br>
J'ai œuvré sur le développement de nouvelles fonctionnalités durant plus de la moitié de ma mission avant d'évoluer vers une position de lead developer/architecte afin d'apporter une vision technique plus globale à l'équipe.<br>
Par la suite, j'ai pu mettre en place une architecture en <a href="https://fr.wikipedia.org/wiki/Microservices">micro services</a> <a href="https://symfony.com/">Symfony</a> avec une couche d'exposition <a href="https://api-platform.com/">API Platform</a> afin de faire l'interface avec le front-end <a href="https://angular.io/">Angular</a>. J'ai aussi dans le même temps travaillé à l'amélioration de la qualité du code produit par notre équipe.</p>
<a href="https://oneytrust.com">oneytrust.com</a>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="project-card">
<div class="project-logo">
<img
class="img-pure"
src="assets/projects/logo-decathlon.svg"
alt="logo decathlon"
>
</div>
<h3>Widget "Quel sport ?"</h3>
<p>Petite application <a href="https://angular.io/">Angular</a> destinée à être utilisée sous forme d'iframe sur le site <a href="https://conseilsport.decathlon.fr">conseilsport.decathlon.fr</a>. Ce widget est directement connecté aux APIs Decathlon et propose un rapide questionnaire pour trouver le sport le plus adapté à vos envies.<br>
C'est la résultante d'une collaboration étroite entre <a href="http://www.pandaa.fr/">Pandaa</a> et AQELIA.</p>
<a href="https://conseilsport.decathlon.fr/conseils/objectif-sport-quel-sport-choisir">conseilsport.decathlon.fr</a>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="project-card">
<div class="project-logo">
<img
class="img-pure"
src="assets/projects/logo-live.jpg"
alt="logo live"
>
</div>
<h3>Vos loisirs en Live <small class="blue">prototype</small></h3>
<p>Vos loisirs en Live est un prototype fonctionnel d'application mobile, réalisé dans le cadre du projet L.I.V.E piloté par <a href="https://www.junia.com/">Junia</a> et commandité par la ville de Tourcoing.<br>
C'est une expérimentation réalisée grâce aux pratiques de Design thinking piloté par <a href="https://atelier-jugeote.com/">Manon Verbeke</a>. Le prototype est ainsi issu d'ateliers d'idéation et est directement connecté aux données <a href="https://opendata.lillemetropole.fr/explore/dataset/vlille-realtime/information/">Open Data de la Métropole européenne de Lille</a>.</p>
<a href="https://www.tourcoing.fr/Je-participe/Je-donne-mon-avis/L.I.V.E-le-numerique-pour-tous/Les-experimentations/1-Vos-loisirs-en-live">tourcoing.fr</a>
</div>
</div>
</div>
</div>
<!-- Hobbies -->
<div class="hobbies-section container">
<h2 id="hobbies" class="blue">Projets annexes</h2>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<div class="project-card">
<div class="project-logo square">
<img
class="img-pure"
src="assets/hobbies/Teaching.svg"
alt="icon teaching"
>
</div>
<h3>Enseignement</h3>
<p>Savoir c'est bien. Transmettre c'est mieux !<br>
J'ai durant 3 ans été intervant professionnel à l'<a href="http://www.esaat-roubaix.com">Ecole Supérieure Arts Appliqués et Textile</a> auprès d'étudiants en première année de <a href="http://www.esaat-roubaix.com/formations/formations/dsaa-design-mention-graphisme.html">DSAA Design Graphique</a>.<br>
Cette expérience m'a permis d'affiner mes compétences pédagogiques afin de vulgariser mon métier et d'enseigner les rudiments du développement HTML et CSS.<br>
Un atout certain pour une bonne relation client !</p>
<a href="https://dsaa.alexandrebonhomme.com/">dsaa.alexandrebonhomme.com</a>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="project-card">
<div class="project-logo square">
<img
class="img-pure"
src="assets/hobbies/Tools.svg"
alt="icon tools"
>
</div>
<h3>Alex fabrique des trucs</h3>
<p>Parce qu'il n'y a pas que le monde numérique dans la vie, j'aime concevoir et fabriquer toutes sortes d'objets du quotidien. Un de mes médium favoris étant la couture j'imagine régulièrement pochettes, sacs ou accessoires colorés inspirés par les styles vitaminés de l'Afrique et l'élégance de l'Asie.</p>
<a href="https://www.instagram.com/alexfabriquedestrucs/">Instagram</a>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="project-card">
<div class="project-logo square">
<img
class="img-pure"
src="assets/hobbies/Music.svg"
alt="icons music"
>
</div>
<h3>Black Bun</h3>
<p>DJ amateur et compositeur en herbe, j'aime explorer ce vecteur de création passionnant et infini. Si vous aimez la musique électronique n'hésitez pas à écouter quelques un de mes mix. Cela nous fera un sujet de discussion supplémentaire ! :-)</p>
<a href="https://www.mixcloud.com/blackbunmusic/">Mixcloud</a>
<a href="https://soundcloud.com/blackbunmusic">Soundcloud</a>
</div>
</div>
</div>
</div>
<!-- Contact -->
<footer id="contact" class="contact-section">
<div class="container">
<h2>Me contacter</h2>
<!-- Typeform contact -->
<div class="typeform-widget" data-url="https://form.typeform.com/to/zdf67Jtg" style="width: 100%; height: 500px;"></div><script>(function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm", b="https://embed.typeform.com/"; if(!gi.call(d,id)) { js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })()</script>
</div>
</footer>
</main>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-HW7MD868SE"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-HW7MD868SE');
</script>
</body>
</html>