-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
284 lines (260 loc) · 14.2 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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Use the title from a page's frontmatter if it has one -->
<title>François Belle</title>
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
<link href="/stylesheets/site.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="/javascripts/site.js"></script>
</head>
<body class="bg-light">
<!-- PROFILE -->
<div class="card shadow mx-auto col-lg-6 my-md-3">
<div class="card-body row">
<div class="col-12 col-md-4 text-center">
<img src="/images/bellef_profile.jpg" alt="François Belle" class="rounded-circle" style="width: 80%;" />
<div class="mt-3">
<h2>François <span class="color-ruby">Belle</span></h2>
<h3 class="text-secondary">RoR Developer</h3>
</div>
</div>
<div class="col-12 col-md-8 m-auto py-3">
<p>
<strong class="color-ruby">Ruby on Rails</strong> backend developer, I have experience with RESTful JSON APIs in various companies in France and Canada. I'm also a teacher at Le Wagon coding bootcamp.
</p>
<p>
I like building things, learning from people and sharing my experiences with others.
By building things I obviously mean "virtual" with programming tools like Ruby, Rails, Javascript etc. but also "IRL" things with wood, nails, glue, whatever!
</p>
<p>
My philosophy of coding is to <mark>build robust things with the team</mark>, <mark>learn from each others</mark> and <mark>move forward together</mark>.
</p>
<p>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i><strong>3 years experience</strong> with <span class="color-ruby">Ruby</span>, <span class="color-ruby">Ruby on Rails</span>, and RESTful APIs</li>
<li><i class="fa-li fa fa-check"></i><strong>2 years experience</strong> with agile methods</li>
<li><i class="fa-li fa fa-check"></i>CLI, Git, Rspec, CI</li>
<li><i class="fa-li fa fa-check"></i>Technical reviews, pair programming</li>
<li><i class="fa-li fa fa-check"></i>Strong team spirit</li>
</ul>
</p>
</div>
</div>
</div>
<div class="row mx-auto col-lg-6 py-3">
<div class="col-12 col-md-8 text-right border-right border-secondary">
<blockquote class="blockquote mb-0">
<p class="mb-0">
Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.
</p>
<footer class="blockquote-footer">
Antoine de Saint-Exupéry
</footer>
</blockquote>
</div>
<div class="col-12 col-md-4 my-auto">
<span class="display-4">Simplicity</span>
</div>
</div>
<!-- COMPANIES -->
<div class="card shadow mx-auto col-lg-6 my-md-3">
<div class="card-body">
<h4 class="card-title mb-0">They trust me</h4>
<hr>
<div class="row my-3">
<div class="col-md-2 text-center">
<a href="https://www.lewagon.com/"><img src="/images/logos/le_wagon.png" alt="Le Wagon" class="rounded mb-3 my-md-3" style="width: 6em;" /></a>
<h4><a href="https://www.lewagon.com/" class="badge badge-light">Le Wagon</a></h4>
</div>
<div class="col-md-10">
<p>At <strong>Le Wagon</strong> coding bootcamp, I can help people who want to make a big change in their lives.</p>
<p>Le Wagon is a 9 weeks intense coding bootcamp where people learn how to move from an idea to a real product by using modern tools including HTML/CSS/JS, Ruby/Rails, Git, Heroku, etc. Teaching is a good way for me to question what I've learned, become better and learn from people of different backgrounds.</p>
</div>
</div>
<hr>
<div class="row my-3">
<div class="col-md-2 text-center">
<a href="https://www.koolicar.com/"><img src="/images/logos/koolicar.png" alt="Koolicar" class="rounded mb-3 my-md-3" style="width: 6em;" /></a>
<h4><a href="https://www.koolicar.com/" class="badge badge-light">Koolicar</a></h4>
</div>
<div class="col-md-10">
<p><strong>Koolicar</strong> is a P2P car-sharing service that allows individual car owners to rent out their cars for precise slots of time.</p>
<p>At Koolicar, I'm part of the "supply team" which is responsible for the development of the owner side of the platform (the ones who rent their car). From the maintenance of the API to its evolution, the team is data and user centric.</p>
<p>We use scrum and most of the things that come with it in order to build a robust product.</p>
</div>
</div>
<hr>
<div class="row my-3">
<div class="col-md-2 text-center">
<a href="https://www.tilkee.com/"><img src="/images/logos/tilkee.png" alt="Tilkee" class="rounded mb-3 my-md-3" style="width: 6em;" /></a>
<h4><a href="https://www.tilkee.com/" class="badge badge-light">Tilkee</a></h4>
</div>
<div class="col-md-10">
<p><strong>Tilkee</strong> is an innovative Saas solution for proposals follow-up & sales process tracking. It allows you to know how, when and where your commercial bid is read.</p>
<p>As a Ruby on Rails apprentice, I've learned a lot about teamwork and working independently. I was able to see the result of my tasks everyday as soon as I had done them thanks to continuous integration.</p>
<a class="text-dark" data-toggle="collapse" href="#collapseReco" aria-expanded="false" aria-controls="collapseReco">
<u><span class="font-italic">Christophe Brun - Lead Developer @Tilkee</span> recommends me</u>
</a>
<div class="collapse text-secondary" id="collapseReco">
François has perfectly fulfilled the various missions entrusted to him: rigorous, efficient, motivated, perfectly integrated into the team, he has been able to bring his skills and evolve technically in order to increase the added value of our product.<br> All these reasons make me believe that François Belle will be a driving force of your company in which he will be integrated within work teams but also within the life of the company.
</div>
</blockquote>
</div>
</div>
</div>
</div>
<div class="row mx-auto col-lg-6 py-3">
<div class="col-12 col-md-4 my-auto text-right">
<span class="display-4">Humility</span>
</div>
<div class="col-12 col-md-8 border-left border-secondary">
<blockquote class="blockquote mb-0">
<p class="mb-0">
Adherent and advocate of <i>Jerry Weinberg</i>'s <a href="https://blog.codinghorror.com/the-ten-commandments-of-egoless-programming/" target="blank">egoless programming concepts</a>
</p>
</blockquote>
</div>
</div>
<!-- SIDE PROJECTS -->
<div class="card shadow mx-auto col-lg-6 my-md-3">
<div class="card-body">
<h4 class="card-title mb-0">Side projects</h4>
<hr>
<div class="row my-3">
<div class="col-md-6 text-center">
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<a href="https://bellef.github.io">
<img src="/images/projects/bellef_middleman_1.png" alt="Personal website slide 1" class="rounded d-block w-100" />
</a>
</div>
<div class="carousel-item ">
<a href="https://bellef.github.io">
<img src="/images/projects/bellef_middleman_2.png" alt="Personal website slide 2" class="rounded d-block w-100" />
</a>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<h4 class="mt-3">
<a href="https://bellef.github.io">This personal website</a>
</h4>
<p>When I wanted to create a new personal website, I had to find a way to create an easily managed static website. That's why I chose to build it with Middleman.</p>
<p>Middleman is a static website generator using all the modern tools you need: ERB, Saas, CoffeeScript. etc. Read more about Middleman <a href="https://github.com/middleman/middleman#why-middleman">here</a></p>
<p>Built with <strong>Middleman</strong>: <a href="https://github.com/bellef/bellef.github.io-middleman" class="badge badge-dark"><i class="fab fa-github"></i> sources</a>.</p>
</div>
</div>
<hr>
<div class="row my-3">
<div class="col-md-6 text-center">
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<a href="https://chrome.google.com/webstore/detail/bookmarks-in-google-resul/oamlmgmgmdajeceifmmhhlkkhpgbeipb">
<img src="/images/projects/bm_finder_1.png" alt="Bookmarks finder slide 1" class="rounded d-block w-100" />
</a>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<h4 class="mt-3">
<a href="https://chrome.google.com/webstore/detail/bookmarks-in-google-resul/oamlmgmgmdajeceifmmhhlkkhpgbeipb">Bookmarks Finder</a>
</h4>
<p>I've always been struggling with all my Chrome bookmarks: hundreds of them but no time to sort them so they all finish in the same "Devtools" or "Watch later" folder. I had to find an efficient way to search through my bookmarks smoothly and at the right time.</p>
<p>This extension shows the bookmarks that match your search keywords at the top of the Google results</p>
<p>Type your keywords in Google search bar and the matching bookmarks will be displayed at the top of the results.</p>
<p>Built with <strong>JS / HTML / CSS</strong>: <a href="https://github.com/bellef/bookmarks_finder" class="badge badge-dark"><i class="fab fa-github"></i> sources</a>.</p>
</div>
</div>
<hr>
<div class="row my-3">
<div class="col-md-6 text-center">
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<a href="http://gotocanada.herokuapp.com/stats?location=France">
<img src="/images/projects/gotocanada_1.png" alt="Canada visa overview slide 1" class="rounded d-block w-100" />
</a>
</div>
<div class="carousel-item ">
<a href="http://gotocanada.herokuapp.com/stats?location=France">
<img src="/images/projects/gotocanada_2.png" alt="Canada visa overview slide 2" class="rounded d-block w-100" />
</a>
</div>
<div class="carousel-item ">
<a href="http://gotocanada.herokuapp.com/stats?location=France">
<img src="/images/projects/gotocanada_3.png" alt="Canada visa overview slide 3" class="rounded d-block w-100" />
</a>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<h4 class="mt-3">
<a href="http://gotocanada.herokuapp.com/stats?location=France">Visa overview for Canada</a>
</h4>
<p>When I wanted to immigrate to Canada, I had to check immigration quotas several times a day on <a href="http://www.cic.gc.ca/francais/travailler/eic/selection.asp">this site</a>. At least 5 clicks are needed to see the information that interests me.</p>
<p>Then I coded a scraper that displays the information on the different visas in clear and simple graphics.</p>
<p>Built with <strong>Charts.js / HTML / CSS</strong>: <a href="https://github.com/bellef/goto_canada" class="badge badge-dark"><i class="fab fa-github"></i> sources</a>.</p>
</div>
</div>
</div>
</div>
<div class="row mx-auto col-lg-6 py-3">
<div class="col-12 col-md-8 text-right border-right border-secondary">
<blockquote class="blockquote mb-0">
<p class="mb-0">
Creating a life that reflects your values and satisfies your soul is a rare achievement. <small><a href="https://www.goodreads.com/quotes/808267-creating-a-life-that-reflects-your-values-and-satisfies-your" target="blank">Read more</a></small>
</p>
<footer class="blockquote-footer">
Bill Watterson
</footer>
</blockquote>
</div>
<div class="col-12 col-md-4 my-auto">
<span class="display-4">Passion</span>
</div>
</div>
<!-- SIDE PROJECTS -->
<div class="card shadow mx-auto col-lg-6 my-md-3">
<div class="card-body">
<h4 class="card-title mb-0">Personal projects</h4>
<hr>
<div class="row my-3">
<div class="col-12 text-center">
<blockquote class="imgur-embed-pub" lang="en" data-id="a/lQ6gR"><a href="//imgur.com/lQ6gR">DIY Coaster bike project</a></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>
</div>
</div>
<div class="row my-3">
<div class="col-12 text-center">
<blockquote class="imgur-embed-pub" lang="en" data-id="a/ZXn5F"><a href="//imgur.com/ZXn5F">Go board project</a></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>
</div>
</div>
<div class="row my-3">
<div class="col-12 text-center">
<blockquote class="imgur-embed-pub" lang="en" data-id="a/Mpr0y"><a href="//imgur.com/Mpr0y">DIY Boar bristle brush v0</a></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>
</div>
</div>
<div class="row my-3">
<div class="col-12 text-center">
<blockquote class="imgur-embed-pub" lang="en" data-id="a/HuISD"><a href="//imgur.com/HuISD">DIY Boar bristle brush v1</a></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>
</div>
</div>
</div>
</div>
<!-- Books / Movies -->
<!-- Hobbies -->
<!-- TODO: Add recommendations from Tilkee and other companies -->
</body>
</html>