-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
299 lines (294 loc) · 21.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
<!DOCTYPE HTML>
<!--
Multiverse by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Tom Bonnot</title>
<link rel = "icon" href ="images/Captions/Moi_peinture.jpeg">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<h1 style="text-align: center; padding-top: 10%; color : #ffffff; "><strong>Tom Bonnot Game Artist 3D</strong></a></h1>
<h2 style=" padding-bottom: 7%; text-align: center; color: #8c8fbf; "><strong>My Portfolio </strong></h2>
<header id="header">
<h1 style="font-family: Noto Sans;">2021 Tom Bonnot </h1>
<nav>
<ul>
<li><a href="#footer" class="icon solid fa-info-circle">Contact Me</a></li>
</ul>
</nav>
</header>
<!-- Main -->
<div id="main">
<article class="thumb">
<a href="images/thumbs/pdficon.png" class="image"><img src="images/thumbs/resume.jpg" alt="" /></a>
<embed src="Tom_Bonnot_CV.pdf" width=800 height=1080 type='application/pdf' />
<h2>My resume</h2>
</article>
<article class="thumb">
<a href="images/fulls/Resized/POULPOUTOU_Full.png" class="image"><img src="images/thumbs/min/03-min.png" alt="" /></a>
<h2 style="font-family: Permanent Marker;">L'Empire Poulpoutou</h2>
<p id="in_thumb"><strong style="font-family: Permanent Marker;">Welcome to the Poulpoutou's Empire</strong><br>Start a new adventure surounded by squids and play as the Empiror's son to discover what's behind this cute and innocently scene.<br>
Poulpougrad is the main city of this nation, a huge city protected from externs threats, protecting utopia and happy lives. But, is it really like this ? Up to you to find out.<br>
In a jazzy mood, feel free to interact with everyone and lead your own path. Get in contact with a lot of personnalities we've build up for this adventure.<br>
The Emperor's Son is fed up of staying in his catle in the middle of this town, since his father doesn't want him to go outside of the castle. So he decides to leave and lead its way through the city, so his hangry father will send people to get him back.<br>
You will have none lethal weapons created to fight, no one has to be killed is your way to do things.
<br> <strong style="font-family: Permanent Marker;">Good Luck in Poulpougrad</strong>
<br><br>It was a Student project we lead with Ludovic Gibault, me as the 3D Game Artist and Scrum Master and him as Lead Developper and Project Owner.<br>
Yanis Ouglal : Concept Artist and 2D game Artist<br>
Marine Capela : 3D Animator<br>
Maxime Reninger : Scenarist<br>
Lionel Bezamanifary : Dev<br>
Hakim Loukil : Dev<br>
<a href="https://open.spotify.com/artist/0qLR78DoZropQnXvDWXaky?si=plhNwbJbT7uuTxqH4bcTYg">Etienne Blachon & Hugo Caumon aka "Brothers" : Sound Designers/Compositor <br></a>
It was on the best experience I've ever had, our project was the best among the others and we had the opportunity to present it at the FIJ (Festival Internation du Jeu à Cannes).</p>
<iframe src="https://www.youtube.com/embed/sjz0sVm3y0E" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</article>
<article class="thumb">
<a href="images/fulls/Resized/VICE_Full.png" class="image"><img src="images/thumbs/min/11.png" alt="" /></a>
<h2 style="font-family: Cinzel;">GMTK 2022 : Dice Against The Vice</h2>
<p id="in_thumb"><style="font-family: Roboto;">Don't you think you are the Dice.<br><br>
No... no, actually you are the Vice but be careful, dices are always against us. Protect your treasure from the dice's minions, they are trying to loot you off, helped by the sky falling dices. Loot their gold and their dices, to stop them from taking your reward !<br><br>
Change your class by taking a red Dice, 3 choice : Warrior, Mage and Ranger. But I mean, a true Vice would keep that beautiful sword isn't it ?<br><br>
Make the best Highscore and show who's the most evil person, take your revenge against those random dice from the other games, like, who cares about loosing some Monopoly's dice huh ?<br><br>
Show who your trully are !<br><br>
Team :<br>
Grégory Largange - Developpement and 3D Animation under Unity<br>
Louis Desirant - Developpement and UX UI Artist<br>
Tom Bonnot - 3D Artist and Level Artist<br>
Thanks to Maxime for his help and some of the props.<br>
Some 3D Props have been made before the Jam, but every one of them were made for a personnal project in the beginning of the year 2022.<br>
Such a Nice Jam, thanks Game Maker Tool Kit <br />
<a href="https://thunderchief.itch.io/dice-against-the-vice">Play it here</a></p>
<img src="images\Captions\DICE AGAINST THE VICE\01.png">
<img src="images\Captions\DICE AGAINST THE VICE\02.png">
<img src="images\Captions\DICE AGAINST THE VICE\03.png">
<img src="images\Captions\DICE AGAINST THE VICE\04.png">
</article>
<article class="thumb">
<a href="images/fulls/Resized/DUALCITY.png" class="image"><img src="images/thumbs/min/10.png" alt="" /></a>
<h2>Dualcity</h2>
<p>
Welcome into DualCity, control both characters to run and build and go as far as you can ! <br>
Collect the different crystals during you race with Sppeedy to be able to stop time and construct plateforms with WikiWiki. <br>You have to switch on the differents characters to take them through the highest distance that you can !<br>
</p>
<img src="images/Captions/DUALCITY/c8GNj9.png">
<p id="in_thumb">
And was composed by : <br>
PROGRAMMER (The GOAT) : Celthim <br>
3D GRAPHIST: Nolwenn ARMAND : CharaDesign, Integration, VFX, UI, animations <br>
2D GRAPHISTS: <br>
Audren JEREZ: Concept art, concept menu, chara design and UI,
SolarinFire : Concept art <br>
SOUND DESIGNERS : <br>
Estéban THOMAS : UI Blueprint, Sound integrator in UE4 <br>
Gaël BARBANCE/ Juun : Sound Design <br>
Benjamin Goïcoechea : Sound Design <br>
COMPOSITOR: Jules PERENNES <br>
LEVEL ARTIST: Tom BONNOT : Level Deisgn, Items modeling and integration UE4<br>
</p>
<iframe src="https://www.youtube.com/embed/Z2U8KwIi93o" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</article>
<article class="thumb">
<a href="images/fulls/Resized/SAGE_Full.png" class="image"><img src="images/thumbs/min/01-min.png" alt="SAGE"/></a>
<h2 style="font-family: 'Press Start 2P'"> SAGE </h2>
<h3 style="font-family:'Press Start 2P'">l'art de ne pas l'être</h3>
<p id="in_thumb" style="font-family: Lato">
SAGE est un jeu créé à l'occasion de la Video Games Lab Gamejam 2021 -<br>
Notre jeu rend hommage au frisson de l'arcade en mettant en scène des enfants pas très sages mais très joueurs, dans une salle d'arcade pleine de folie.<br>
Chaque gamin veut se défouler sur trois jeux différents : à vous de lui proposer les bons jeux dans le bon ordre selon ce que chacun raconte.<br>
Vous pourrez alors jouer à trois jeux : choisissez les bons jeux et vous pourrez accompagner les joueurs dans les petits jeux qui s'enchainent.<br>
Attention : la difficulté sera croissante dans toutes les sessions de jeu !<br>
Tous les personnages racontent leurs petites histoires. Parviendrez vous à les suivre jusqu'au bout ?<br>
<strong>Ecoutez les préférences des joueurs pour choisir les bons jeux.</strong><br>
<strong>Les mini jeux se jouent avec la souris et le clavier.</strong><br>
</p>
<h3 style="font-family: 'Press Start 2P'">Equipe :</h3>
<p id="in_thumb" style="font-family: Lato">
Demaxis - Ludovic Gibault : Developpeur<br>
Cortex : Graphiste 2D/UI Artist<br>
Parfione - Jules Bliaut : Game Designer/Scénariste<br>
Junn - Gaël Barbance : Sound Designer/Compositeur<br>
Routard - Tom Bonnot : Graphiste 3D/Level Designer<br>
Liam : Aide au développement<br>
./gitignore le inteur</p>
<img src="images/Captions/SAGE/screen_04.png">
</article>
<article class="thumb">
<a href="images/fulls/Resized/WISP_Full.png" class="image"><img src="images/fulls/Resized/WISP_Full.png" alt="Wisp"/></a>
<h2 style="font-family: Noto Sans;">GGJ 2021 : Wisp</h2>
<p id="in_thumb" style="font-family: Noto Sans;"><strong>Welcome to WISP!</strong><br>
Discover a luxurious casino which encloses many secrets. You’ll be accompanied by Wisp, a small and mysterious will-o’-the-wisp. He will help you solve puzzles and find your tarots cards back, guiding you through the darkness of this place.<br>
Let the gambling begin!<br>
We did this game jam in the second biggest game jam's site in Europe, Sud Piccel in Montpellier, as the last year and it was really fun as always. Challenging and proving what we're capable of once again. For me it was to create a character and an environnement and making sense with it, I had the main gameplay idea, but we worked together on how to use it clerverly and making cool Level Design, to lead the player through different mechanics.<br><br>
<strong>Gamejam's Team:</strong><br>
<italic>Yoann MAISONNEUVE: Unity Developer, Level Designer & Git Master <a href="https://yomaisonneuve.wixsite.com/website">https://yomaisonneuve.wixsite.com/website</a><br>
Anthony CUTTIVET: Unity Developer <a href="https://anthonycuttivet.com/">https://anthonycuttivet.com/</a><br>
Cyril GAJAN: Unity Developer<br>
Quentin BAUDRY: Sound Designer<br>
Hélène LITZLER: 2D Game Artist & UI/UX Designer <a href="https://www.instagram.com/_kir.art">https://www.instagram.com/_kir.art</a>/<br>
Tom BONNOT: 3D Gamed Artist <a href="https://tombonnot.github.io/">https://tombonnot.github.io</a><br></italic>
<a href="https://kiraincube.itch.io/wisp"><strong>WISP, Play it here</strong></a></p>
<iframe src="https://www.youtube.com/embed/z3Ld5b6Uasc" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</article>
<article class="thumb">
<a href="images/fulls/Resized/MELEC_Full.png" class="image"><img src="images/thumbs/min/02-min.png" alt="MELEC" /></a>
<h2 style="font-family: Exo;">Mix&Jam 2020 : MELEC</h2>
<p id="in_thumb" style="font-family: Exo;"> <strong> Rogue and Learn, Melec. </strong><br>
A Mix between education and Rogue Like, we want that learning the Periodic Table through game is easier. You are a crazy scientific synthwave boy going through a 80's futuristic world, destroying Beakers filled with bad component with a Test Tube, when defeated they'll drop some atoms that you will grab and stock into your weapon. The first atom will define your attack buff.<br>
You will have to discover all atoms of the periodic table (named MELEX here; only the ones we could have add in the game) by merging two atoms rightly.<br>
Completing the MELEX is the end of the game, but be careful, it won't be possible in one single run, even if you beat the radioactive boss.<br>
Beating the boss will give you a choice between three rare atoms, the one you pick will be your first for the next run. <br>
MELEC is the result of a combination from a Rogue Like, Shooter and Educative game, we also wanted to combined 2D and 3D graphics to dig deeper into the Jam's theme. Moreover we mixed good old Synthwave and rightful Chemistry (and that's pretty cool) !<br>
Fun Fact : MELEC comes from a frenchy French translation of Mix and Jam (MÉLange Et Confiture).<br>
<strong> Good luck AT-0M Merger ! </strong><br><br>
<italic>GameJam's Team :<br>
Yoann MAISONNEUVE : Unity Developer - Git Master<br>
Anthony CUTTIVET : Unity Developer<br>
Hélène LITZLER : 2D Game Artist, UI/UX Artist<br>
Tom BONNOT : 3D Game Artist, Level Designer</italic><br>
<a href="https://routard.itch.io/medex-rogue-and-learn"><strong>MELEC</strong></a>
</p>
<img src="images/Captions/MELEC/MELEC_01.png">
</article>
<article class="thumb">
<a href="images/fulls/Resized/IJ_SC.png" class="image"><img src="images/thumbs/IJ_SC.png" alt="IJ_Draguignan"/></a>
<h2 style="font-family: Bevan;">Service Civique : Info Jeunes Draguignan</h2>
<p>
Recréation de la communcation de la structure, tous les éléments de communicaiton, création de nouveaux éléments graphiques pour le partage sur les réseaux ou encore par flyers.
Rendre la communciaiton de la structure dynamique et attirant pour son public (12-30 ans), adapter les textes et proposer de nouvelles idées.
Ces éléments ne sont pas les formes finales et peuvent être modifiées par la structure d'accueil, je les utilise ici pour présenter ce que j'ai personnellement fait.
Je pense que j'ai réussi à transcrire une nouvelle identité intéréssante et qui saura accueillir son public, c'était un défi que de pouvoir retravailler une communcation d'une structure qui n'en avait pas changé depuis des années.
En première image c'est l'avant du flyer.
Respect des différentes chartes graphiques.
</p>
<img src="images/Captions/IJ_SC/03.png">
<img src="images/Captions/IJ_SC/06.png">
</article>
<article class="thumb">
<a href="images/fulls/Resized/LD48.png" class="image"><img src="images/thumbs/LD48.png" alt="Ludum Dare"/></a>
<h2 style="font-family: Noto Sans;">Ludum Dare 48 : Katakombs</h2>
<p>
A new social network has broken the Internet. Everyone talks about it, many teenagers join it and it becomes increasingly difficult not to hear about this site. However, it is said that to join this network, one must first succeed in finding it on the web. At the same time, many cases of disappearances were reported…
Explore the Internet of the late 90s and uncover all the mysteries surrounding the new Katakombs phenomenon.
<br><italic>Game Jam Team : </italic><br>
Dev team - Cyril Gajan/ Anthony Cuttivet/ Yoann Maisonneuv <br>
Graph team - Hélène Litzler/ Tom Bonnot <br>
Sound Designer - Tristan Villard <br>
<a href="https://wazazaaa.itch.io/katakombs"><strong> Play Katakombs here </strong></a>
</p>
</article>
<article class="thumb">
<a href="images/fulls/Resized/JUSTFIXIT_Full.png" class="image"><img src="images/thumbs/min/04-min.png" alt="" /></a>
<h2>GGJ 2020 : Just Fix it</h2>
<p id="in_thumb">Nothing much to say. Grap your tools, fix this messed up object in front of you and wait for the others.<br>
Game jam's game we did in two days for the Global game jam in 2019. <br>
Yoann Maisonneuve : Lead Dev<br>
Roche NG, Guillaume Briant : Devs<br>
Maxime Reninger, Guillaume Filiol de Raimond-Michel : Game Designers and UX/UI Designers<br>
Tom Bonnot : Game Artist 3D and Level designer<br>
<a href="https://globalgamejam.org/2020/games/just-fix-it-9"><strong>Wil you fix it or what?</strong></a>
</p>
</article>
<article class="thumb">
<a href="images/fulls/Resized/RUBIK_Full.png" class="image"><img src="images/thumbs/min/05-min.png" alt="" /></a>
<h2>GGJ 2019 : Rubik'Scare</h2>
<p id="in_thumb"><strong>Global Game Jam 2019 : What home means to you</strong><br>
Your Rubik's Cube home is all broken and you need to go and find your sister's and brother's to fix it. Choosing your own path through different level generated in function of which skills you have unlocked. A mini Rogue Like to build back your home.<br>
It was a fine challenge to create a Rogue Like and we did it. It was fun and interessant.<br>
Yoann Maisonneuve, Roche NG, Guillaume Briant : Devs<br>
Alice Chouard, Tom Bonnot : Game Artists<br>
Léo Pellegrino : Level Designer<br>
<a href="https://globalgamejam.org/2019/games/rubikscare"><strong>Let's build back your home</strong></a></p>
<img src="images/Captions/RUBIK/RUBIK_03.png">
</article>
<article class="thumb">
<a href="images/thumbs/min/06-min.png" class="image"><img src="images/thumbs/min/06-min.png" alt="" /></a>
<h2>Inktober 2020</h2>
<p id="in_thumb">Here is a few tries during the Inktober in 2020, it was fun to do.</p>
</article>
<article class="thumb">
<a href="images/fulls/Resized/07.png" class="image"><img src="images/thumbs/min/07-min.png" alt="" /></a>
<h2>Creative VR3D : Internship</h2>
<p id="in_thumb">During my internship at CreativeVR3D in Cannes, I had to make some level design and Level optimisation through their games. At firsdt it was optimistion in Darkness Roller Coaster, and then a lot of Level Design in an horror game "Bad Dream 2". It will be a VR game so I have to take this in consideration in my Level Design building because the VR is totally different from a normal gameplay. Be aware of some aspect of the VR and what is good or no for it. Worst Case Scenario, having motion sickness effect because of the game, this is the main problem about VR</p>
</article>
<article class="thumb">
<a href="images/fulls/Resized/08.png" class="image"><img src="images/thumbs/min/08-min.png" alt="" /></a>
<h2>Some first try (2018)</h2>
<p id="in_thumb">Nunc blandit nisi ligula magna sodales lectus elementum non. Integer id venenatis velit.</p>
</article>
<article class="thumb">
<a href="images/thumbs/pdficon.png" class="image"><img src="images/thumbs/Render-Blade.jpg" alt="" /></a>
<h2 style="font-family: Roboto;">Portfolio 3D</h2>
<div> <iframe class="sketchfab-embed-wrapper" title="Hammer_LP" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="autoplay; fullscreen; xr-spatial-tracking" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/fc9240072fd74f07a8b0f047982a7740/embed"> </iframe></div>
<div> <iframe class="sketchfab-embed-wrapper" title="Blade" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="autoplay; fullscreen; xr-spatial-tracking" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/c80a015129774c8a980921465bea408a/embed"> </iframe></div>
</article>
</div>
<!-- Footer -->
<footer id="footer" class="panel">
<div class="inner split">
<div>
<section>
<h2>3D Game Artist, Passionate by video games</h2>
<p>I have a master degree in Management and Creatives Innovation (MAJIC) and I tend to be a 3D Game Artist. I have developped my skills through my differents projects I've displayed here, and I'm more than ever ready to create others. I'm interessted in any new experiences and open minded, knowledge is life (as for Shrek).</p>
</section>
<section>
<h2>Follow me on ...</h2>
<ul class="icons">
<li><a href="https://twitter.com/RoutardRageux" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="https://www.facebook.com/tom.bonnot.39" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="https://github.com/RoutardRageux" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
<li><a href="https://routard.itch.io/" class="icon brands fa-itch-io"><span class="label">Itch.io</span></a></li>
<li><a href="https://www.linkedin.com/in/tom-bonnot-761387121/" class="icon brands fa-linkedin-in"><span class="label">LinkedIn</span></a></li>
</ul>
</section>
<p class="copyright">
© Unttled. Design: <a href="http://html5up.net">HTML5 UP</a>.
</p>
</div>
<div>
<section>
<h2>Get in touch</h2>
<form method="post" action="mailto:[email protected]">
<div class="fields">
<div class="field half">
<input type="text" name="name" id="name" placeholder="Name" />
</div>
<div class="field half">
<input type="text" name="email" id="email" placeholder="Email" />
</div>
<div class="field">
<textarea name="message" id="message" rows="4" placeholder="Message"></textarea>
</div>
</div>
<ul class="actions">
<li><input type="submit" value="Send" class="primary" /></li>
<li><input type="reset" value="Reset" /></li>
</ul>
</form>
</section>
</div>
</div>
</footer>
</div>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>