-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.php
274 lines (269 loc) · 16 KB
/
index.php
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
<?php include 'partials/header.php' ?>
<main>
<div class="columns">
<!-- space left -->
<div class="column is-2 left-col">
<img src="img/profilepic.jpg" alt="profilepic" id="profile">
<div class="avatar">
<p class="is-size-3">Charlotte Tusset</p>
<p class="is-size-7 is-uppercase has-text-weight-semibold">Junior Web Developer</p>
<p><i class="fas fa-map-pin"></i> Amsterdam</p>
<p>FR | EN | IT | NL</p>
<hr>
<div class="social">
<ul>
<li> <a href="mailto:[email protected]?Subject=Hello" target="_top">
<span class="icon is-small">
<i class="fas fa-at"></i>
</span>
</a>
</li>
<li> <a href="https://www.linkedin.com/in/charlottetusset/" target="_blank" rel="noreferrer">
<span class="icon is-small">
<i class="fab fa-linkedin-in"></i>
</span>
</a>
</li>
<li> <a href="https://github.com/CharlotteTusset" target="_blank" rel="noreferrer">
<span class="icon is-small">
<i class="fab fa-github"></i>
</span>
</a>
</li>
<li><a href="https://open.spotify.com/user/116777375?si=Um9Oehw7TaCB65pB63vSCw" target="_blank" rel="noreferrer">
<span class="icon is-small">
<i class="fab fa-spotify"></i>
</span>
</a>
</li>
<li> <a href="https://twitter.com/C_YouKnow" target="_blank" rel="noreferrer">
<span class="icon is-small">
<i class="fab fa-twitter"></i>
</span>
</a>
</li>
<li> <a href="https://www.instagram.com/ctusset/" target="_blank" rel="noreferrer">
<span class="icon is-small">
<i class="fab fa-instagram"></i>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- centered column -->
<div class="column is-8 is-12-mobile center-col">
<div class="description">
<div class="intro" id="intro">
<h1 class="title is-1 has-text-danger">about me</h1>
<p class="has-text-weight-semibold is-size-4">Hello, I am Charlotte!<p>
<p class="is-size-5 has-text-weight-normal">I am currently Junior Web Developer Intern at <a href="https://studiostomp.nl/" target="_blank" rel="noreferrer"><b>Studio Stomp</b></a> in Amsterdam after having done a 6-month bootcamp at Be Code in Brussels.
I am initially graduated with a Bachelor's Degree in Political Sciences and a Master's Degree in European Studies and I gained experience in the european institutions and in a NGO but I didn't feel that this working environment really fulfiled me.</p>
<p class="is-size-5 has-text-weight-normal">In the next few months, I hope I will use my new superpowers to find a proper job in the digital sector and more specifically in the music industry.</p>
<p class="is-size-5 has-text-weight-normal">I am a curious mind and I have many interests. I am a music lover and could spend my free time going to gigs or digging for new finds (I have eclectic tastes, go check my spotify playlists). Besides, I am passionate about culture and arts. I am a novice photographer and I wish to become a guitar-player and a good painter. I played basketball for 17 years and now I run, swim and bike. I also enjoy long walks in nature.</p>
<hr>
</div>
</div>
<div>
<h2 class="title is-2 has-text-danger" id="skills">skills</h2>
<div class="columns container-perso">
<div class="column is-6 info">
<p><i class="fab fa-html5"></i> HTML</p>
<p><i class="fab fa-css3-alt"></i> CSS | <i class="fab fa-sass"></i> Sass</p>
<p>Frameworks: Bootstrap, Materialize, Bulma</p>
<p><i class="fab fa-js"></i> JavaScript | JQuery</p>
<p><i class="fab fa-react"></i> React | ReactNative</p>
<p><i class="fab fa-vuejs"></i> Vuejs</p>
<p><i class="fab fa-angular"></i> Angular</p>
<p><i class="fab fa-php"></i> PHP | <i class="fab fa-laravel"></i> Laravel</p>
<p><i class="fas fa-gem"></i> Ruby</p>
<p><i class="fab fa-node"></i> NodeJS</p>
<p><i class="fab fa-python"></i> Python</p>
</div>
<div class="column is-6 container-level">
<progress class="progress is-dark" value="80" max="100"></progress>
<progress class="progress is-dark" value="80" max="100"></progress>
<progress class="progress is-dark" value="80" max="100"></progress>
<progress class="progress is-dark" value="70" max="100"></progress>
<progress class="progress is-dark" value="60" max="100"></progress>
<progress class="progress is-dark" value="30" max="100"></progress>
<progress class="progress is-dark" value="30" max="100"></progress>
<progress class="progress is-dark" value="60" max="100"></progress>
<progress class="progress is-dark" value="10" max="100"></progress>
<progress class="progress is-dark" value="10" max="100"></progress>
<progress class="progress is-dark" value="10" max="100"></progress>
</div>
</div>
</div>
<hr>
<h2 class="title is-2 has-text-danger" id="experience">experience</h2>
<div class="experience">
<div class="timeline">
<header class="timeline-header">
<span class="tag is-medium is-dark">2019</span>
</header>
<div class="timeline-item is-dark">
<div class="timeline-marker is-dark"></div>
<div class="timeline-content">
<p class="heading has-text-primary has-text-primary">January - May 2019</p>
<p class="has-text-weight-bold is-size-5">Junior Web Developer Intern</p>
<p class="is-size-5 has-text-dark">Studio Stomp</p>
<div class="parent">
<button type="button" class="button is-small is-rounded is-primary is-outlined more" id="btn" data-text-swap="-" onclick="return toggleMe('collapse')">+</button>
<p class="collapse has-text-justified" id="collapse" style="display:none">Studio Stomp is a small web agency where I am learning the basic skills of a full-stack webdeveloper. Maintening and contributing to existing clients websites but also launching and realising websites for new clients.</p>
</div>
</div>
</div>
<header class="timeline-header">
<span class="tag is-dark">2018</span>
</header>
<div class="timeline-item is-dark">
<div class="timeline-marker is-dark"></div>
<div class="timeline-content">
<p class="heading has-text-primary has-text-primary">May - November 2018</p>
<p class="has-text-weight-bold is-size-5">Junior Web Developer</p>
<p class="is-size-5 has-text-dark">Be Code</p>
<div class="parent">
<button type="button" class="button is-small is-rounded is-primary is-outlined more" id="btn2" data-text-swap="-" onclick="return toggleMe('collapse2')">+</button>
<p class="collapse has-text-justified" id="collapse2" style="display:none">I started this 6-month coding bootcamp because I wanted to give new chances to my professionnal future. I am developing strong coding skills: HTML, CSS, JS, Jquery, PHP, React, SQL. But also soft skills through workshops, presentations (Algorave, Creative Commons, Vuejs, HTLM). I also attended my first Hackathon on Music Tech. Besides, I was Scrum Master for several projects and for a client project ('Emergences', website to meditate).</p>
</div>
</div>
</div>
<header class="timeline-header">
<span class="tag is-dark">2017</span>
</header>
<div class="timeline-item is-dark">
<div class="timeline-marker is-dark"></div>
<div class="timeline-content">
<p class="heading has-text-primary">September - December 2017</p>
<p class="has-text-weight-bold is-size-5">Project Assistant</p>
<p class="is-size-5 has-text-dark">MR Engineering</p>
<div class="parent">
<button type="button" class="button is-small is-rounded is-primary is-outlined more" id="btn3" data-text-swap="-" onclick="return toggleMe('collapse3')">+</button>
<p class="collapse has-text-justified" id="collapse3" style="display:none">I mainly created Excel databases for the implementation of the programme COSWIN (CMMS). I analysed data and resolved inconsistencies and I quickly adapted to a new working environment (engineering). That is where I discovered my interest for pragmatism. I started to code on Codecademy during this job.</p>
</div>
</div>
</div>
<div class="timeline-item is-dark">
<div class="timeline-marker is-dark"></div>
<div class="timeline-content">
<p class="heading has-text-primary">February - July 2017</p>
<p class="has-text-weight-bold is-size-5">Francis Vals Trainee</p>
<p class="is-size-5 has-text-dark">The progressive Alliance of the Socialists and Democrats of the European Parliament</p>
<div class="parent">
<button type="button" class="button is-small is-rounded is-primary is-outlined more" id="btn4" data-text-swap="-" onclick="return toggleMe('collapse4')">+</button>
<p class="collapse has-text-justified" id="collapse4" style="display:none">
I was part of the Culture and Education Committee for the S&D Group in the European Parliament. Interested in the subject, I was already concerned of the digitalisation of the society and the importance to gain some coding skills at school. My main tasks were drafting Committee meeting minutes and summarising them for future use. Organising two conferences with MEPs, CSO, experts and citizens. Advising the Coordinator of the Committee on ongoing reports. Doing research on specific subjects (e.g. international cultural relations, copyright, skills agenda).</p>
</div>
</div>
</div>
<header class="timeline-header">
<span class="tag is-dark">2016</span>
</header>
<div class="timeline-item is-dark">
<div class="timeline-marker is-dark"></div>
<div class="timeline-content">
<p class="heading has-text-primary">April - July 2016</p>
<p class="has-text-weight-bold is-size-5">Trainee - Parliamentary Assistant</p>
<p class="is-size-5 has-text-dark">MEP Hugues Bayet - European Parliament</p>
<div class="parent">
<button type="button" class="button is-small is-rounded is-primary is-outlined more" id="btn5" data-text-swap="-" onclick="return toggleMe('collapse5')">+</button>
<p class="collapse has-text-justified" id="collapse5" style="display:none">
Drafting votes' justifications and tabling amendments on civil liberties, justice and home affairs, and on tax evasion related issues. Writing parliamentary notes for MEP's meetings and interviews and establishing the weekly press review.</p>
</div>
</div>
</div>
<div class="timeline-item is-dark">
<div class="timeline-marker is-dark"></div>
<div class="timeline-content">
<p class="heading has-text-primary">October 2015 - March 2016</p>
<p class="has-text-weight-bold is-size-5">European Affairs and Partnerships Policy Assistant</p>
<p class="is-size-5 has-text-dark">Search for Common Ground</p>
<div class="parent">
<button type="button" class="button is-small is-rounded is-primary is-outlined more" id="btn6" data-text-swap="-" onclick="return toggleMe('collapse6')">+</button>
<p class="collapse has-text-justified" id="collapse6" style="display:none">Researches on the EU and bilateral donors. Drafting the EU weekly digest on 'peacebuilding' sent to HQ and field teams. Representing the NGO at meetings with the European institutions and CSO. Launching the Twitter account for the Brussels office and managing social media. Collecting information from the field to create the annual report.</p>
</div>
</div>
</div>
<header class="timeline-header">
<span class="tag is-dark">2015</span>
</header>
<!-- <header class="timeline-header">
<span class="tag is-medium is-primary">Studies</span>
</header> -->
<div class="timeline-item is-dark studies" id="studies">
<div class="timeline-marker is-dark"></div>
<div class="timeline-content is-dark">
<p class="heading has-text-primary">September 2013 - August 2015</p>
<p class="has-text-weight-bold is-size-5">Master's Degree in European Studies</p>
<p class="is-size-5 has-text-dark">Université Catholique de Louvain</p>
<button type="button" class="button is-small is-rounded is-primary is-outlined more" id="btn7" data-text-swap="-" onclick="return toggleMe('collapse7')">+</button>
<p class="collapse has-text-justified" id="collapse7" style="display:none">
<i>Cum Laude</i><br>
Multidisciplinar master's degree between political sciences, law, economics and philosophy.<br>Thesis: The EU migration policy facing the Mediterranean situation: a change of approach?</p>
</div>
</div>
<div class="timeline-item is-dark">
<div class="timeline-marker is-dark"></div>
<div class="timeline-content is-dark">
<p class="heading has-text-primary">September 2014 - February 2015</p>
<p class="has-text-weight-bold is-size-5">Erasmus</p>
<p class="is-size-5 has-text-dark">Università Degli Studi di Firenze</p>
<div class="parent">
<button type="button" class="button is-small is-rounded is-primary is-outlined more" id="btn8" data-text-swap="-" onclick="return toggleMe('collapse8')">+</button>
<p class="collapse has-text-justified" id="collapse8" style="display:none">6-month stay at Università Degli di Firenze, Italy. I developed my Italian language and I attended classes on Human Rights & Econometry.</p>
</div>
</div>
</div>
<header class="timeline-header is-dark">
<span class="tag is-dark">2013</span>
</header>
<div class="timeline-item is-dark">
<div class="timeline-marker is-dark"></div>
<div class="timeline-content is-dark">
<p class="heading has-text-primary">January - June 2013</p>
<p class="has-text-weight-bold is-size-5">Erasmus</p>
<p class="is-size-5 has-text-dark">University College Dublin</p>
<div class="parent">
<button type="button" class="button is-small is-rounded is-primary is-outlined more" id="btn9" data-text-swap="-" onclick="return toggleMe('collapse9')">+</button>
<p class="collapse has-text-justified" id="collapse9" style="display:none">6-month stay at University College Dublin, Ireland in the faculty of Social Sciences & Political sciences. I attended classes such as Ireland & the US, America Abroad, MENA, migration and social integration in Ireland or German philosophy.</p>
</div>
</div>
</div>
<div class="timeline-item is-dark">
<div class="timeline-marker is-dark"></div>
<div class="timeline-content is-dark">
<p class="heading has-text-primary">September 2009 - June 2013</p>
<p class="has-text-weight-bold is-size-5">Bachelor's Degree in Political Sciences</p>
<p class="is-size-5 has-text-dark">Université de Liège</p>
<div class="parent">
<button type="button" class="button is-small is-rounded is-primary is-outlined more" id="btn10" data-text-swap="-" onclick="return toggleMe('collapse10')">+</button>
<p class="collapse has-text-justified" id="collapse10" style="display:none">
<i>Cum Laude</i><br>
Part of the faculty of law, this bachelor's degree offered me a good knowledge of belgian law as well as other fields such as philosophy, sociology, international relations and economics.</p>
</div>
</div>
</div>
<div class="timeline-item is-dark">
<div class="timeline-marker is-medium is-icon is-dark"><i class="fas fa-ellipsis-v"></i></div>
</div>
</div>
</div>
<br>
</div>
<!-- space right -->
<div class="column is-2 right-col">
<aside class="menu is-right">
<p class="menu-label">Menu</p>
<ul class="menu-list">
<li><a href="#intro"><i class="fas fa-info-circle"></i> about me</a></li>
<li><a href="#skills"><i class="fas fa-code"></i> skills</a></li>
<li><a href="#experience"><i class="fas fa-rocket"></i> experience</a></li>
<li><a href="#studies"><i class="fas fa-graduation-cap"></i> studies</a></li>
</ul>
</aside>
</div>
</div>
</main>
<?php include 'partials/footer.php' ?>