-
Notifications
You must be signed in to change notification settings - Fork 0
/
page_informations_personnelles.html
209 lines (183 loc) · 15.8 KB
/
page_informations_personnelles.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
<!DOCTYPE html>
<html>
<head>
<!-- Begin of Head -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Title -->
<title class="to_translate" data-translation="nath54 - Personal Informations">nath54 - Informations Personnelles</title>
<!-- Page Icon -->
<link rel="icon" href="res/icon_nath54.svg">
<!-- Styles -->
<link href="css/style.css" rel="stylesheet" />
<link href="css/infos_perso.css" rel="stylesheet" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap" rel="stylesheet">
<!-- Lib -->
<script src="js/lib.js" type="text/javascript"></script>
<script src="js/localization.js" type="text/javascript"></script>
<!-- End of Head -->
</head>
<body onload="translate_page();">
<!-- Header -->
<div id="header" class="row">
<!-- Div vertical center -->
<div class="row w_fill vertical_center">
<!-- Icon home -->
<div class="vertical_center ml_s1 mr_s1">
<img src="res/icon_home_b.png" id="icon_home" onclick="go_home();" />
</div>
<!-- Current path -->
<div class="row vertical_center mr_auto ml_s1">
<span>/</span>
<span class="color_on_hover cursor_pointer z11 to_translate" onclick="window.location.href='page_informations_personnelles.html'+url_language();" data-translation="Personal Informations">Informations Personnelles</span>
</div>
<!-- Change language button -->
<div class="vertical_center ml_auto mr_s1">
<button id="bt_lang" style="background-image:url(res/bt_fr_to_en.png);" onclick="switch_language();"></button>
</div>
</div>
</div>
<!-- Main Container -->
<div id="main_container" class="col p_s2">
<div class="col horizontal_center page_col_width">
<!-- TODO : Le contenu de la page est ici -->
<div class="row w_fill">
<div class="mr_s2">
<img src="res/portrait.png" id="img_portrait" />
</div>
<div>
<p class="to_translate" data-translation="Welcome !">Enchanté!</p>
<p class="to_translate" data-translation="I'm Nathan Cerisara.">Je suis Nathan Cerisara.</p>
</div>
</div>
<div class="row mt_s2 cursor_pointer color_on_hover" onclick="window.location.href='page_ip_cv.html'+url_language();">
<div class="vertical_center">
<img src="res/fleche1.png" class="fleche1" />
</div>
<div class="vertical_center">
<span class="to_translate" data-translation="See my resume">Voir mon CV</span>
</div>
</div>
<p class="to_translate" data-translation="If you want to know more about myself:">Si vous souhaitez en savoir plus sur moi:</p>
<!-- Barre Div Mes centres d'intérêts -->
<div class="row color_on_hover cursor_pointer" onclick="toggle_visibility('div_ci', 'fleche2_ci');">
<div class="mr_s1 vertical_center">
<img id="fleche2_ci" src="res/fleche2.png" class="fleche2">
</div>
<div class="vertical_center">
<h2 class="to_translate" data-translation="My hobbies">Mes centres d'intérêts</h2>
</div>
</div>
<!-- Div Mes centres d'intérêts -->
<div id="div_ci" class="col ml_s2" style="display:none">
<!-- TODO -->
<p class="to_translate" data-translation="At the tender age of a mere ten, or perhaps a few years less, the inklings of my acquaintance with the digital realm began to unfold. Thus, the gates to the realm of computer learning swung open before me, a domain that swiftly kindled my passion. A budding fondness for game coding and project crafting, entwined with the twists of my existence, found its expression there.">
À l'âge précoce de dix ans, ou peut-être même quelques années de moins, se dessinaient les prémices de ma familiarité avec l'outil informatique. Dès lors, s'ouvraient devant moi les portes de l'apprentissage de l'informatique, un domaine qui suscita rapidement
ma passion. Une inclination naissante pour la programmation de jeux et le développement de projets, en symbiose avec les vicissitudes de ma vie, s'y manifesta.
</p>
<p class="to_translate" data-translation="Yearning to simplify my daily grind with noble intent, I embarked on making automation a benevolent muse. This creative surge naturally steered me towards the vast frontiers of artificial intelligence, a captivating realm woven with unbridled creativity.">
Affectionnant le noble dessein de simplifier mon quotidien, j'ai entrepris de faire de l'automatisation une muse bienveillante. Cet élan créatif m'a tout naturellement guidé vers les vastes horizons de l'intelligence artificielle, un domaine fascinant,
pétri de créativité débridée.
</p>
<p class="to_translate" data-translation="Creativity, a precious gem, holds a cherished spot in my universe. My unwavering love for art, especially digital imagery, geometric art, 3D modeling, animation, and more, paints a diverse and rich canvas for my artistic aspirations.">
La créativité, tel un joyau précieux, occupe une place de choix dans mon univers. Mon amour indéfectible pour l'art, en particulier les formes artistiques telles que les images numériques, l'art géométrique, la modélisation 3D, l'animation, et bien d'autres,
confère une palette variée et riche à mes aspirations artistiques.
</p>
<p class="to_translate" data-translation="Amidst the notes and rhythms, music crept into the folds of my soul. My ears savor a varied palette, yet my preferences luxuriously nestle in the labyrinthine realms of metal, the timeless treasures of classical music, and the electric delights of electronic tunes. Recently, I've embarked on the enchanting journey of mastering the electric guitar, a melodious adventure resonating in the echoes of time.">
Au fil des notes et des rythmes, la musique s'est insinuée dans les replis de mon âme. Mon ouïe déguste une palette variée, mais mes préférences se nichent avec délice dans les méandres du métal, les trésors intemporels de la musique classique, et les
délices électriques de la musique électronique. Récemment, j'ai entrepris l'apprentissage envoûtant de la guitare électrique, une mélodieuse aventure qui a commencé à résonner dans les échos du temps.
</p>
</div>
<!-- Barre Div Études -->
<div class="row color_on_hover cursor_pointer" onclick="toggle_visibility('div_etudes', 'fleche2_etudes');">
<div class="mr_s1 vertical_center">
<img id="fleche2_etudes" src="res/fleche2.png" class="fleche2">
</div>
<div class="vertical_center">
<h2 class="to_translate" data-translation="School">Études</h2>
</div>
</div>
<!-- Div Études -->
<div id="div_etudes" class="col ml_s2" style="display:none">
<p class="to_translate" data-translation="In the corridors of education, my early school strides echoed in Moivrons, embedding a substantial part of my primary school journey. Then, a brief educational sojourn in Nomeny added hues to this initial chapter.">
Parcourant les allées de l'éducation, mes premiers pas scolaires résonnèrent à Moivrons, enchâssant une part substantielle de mon école primaire. Puis, une brève incursion éducative à Nomeny colora ce chapitre initial.
</p>
<p class="to_translate" data-translation="The transition to middle school beckoned me to commence my 6th grade within the educational establishment of Nomeny, concluding this cycle in Heillecourt. The end of my middle school years marked the beginning of a new phase, the era of high school.">
La transition vers le collège m'invita à entamer ma 6ème au sein de l'établissement éducatif de Nomeny, avant de conclure ce cycle à Heillecourt. Le terme de mes années collégiennes marqua le début d'une nouvelle étape, celle du lycée.
</p>
<p class="to_translate" data-translation="Under the auspices of Henry-Poincaré High School, I showcased my determination by securing a Baccalaureate with highest honors. In the first year, my inclinations leaned towards Mathematics, NSI (Computer Science and Digital Sciences), and Physics. In the final year, I dedicated my efforts to Mathematics and NSI, embellished with the erudite option of Expert Mathematics.">
Sous l'égide du lycée Henry-Poincaré, je fis montre de ma détermination en décrochant un Baccalauréat avec mention très bien. En première, mes inclinations se portèrent vers les spécialités Mathématiques, NSI et Physique, puis en terminale, je consacrai
mes efforts aux Mathématiques et à la NSI, agrémentées de l'option érudite des Mathématiques Expertes.
</p>
<p class="to_translate" data-translation="The continuation of my intellectual adventure took the form of two years in preparatory classes for prestigious schools, the eminent CPGE MP2I/MPI*, hosted by the scholarly walls of Louis-Le-Grand High School.">
La suite de mon aventure intellectuelle prit la forme de deux années au sein des classes préparatoires aux grandes écoles, l'éminente CPGE MP2I/MPI*, accueillie par les murs savants du lycée Louis-Le-Grand.
</p>
<p class="to_translate" data-translation="Today, the early steps of my engineering career take shape at Telecom Physique Strasbourg. Inclined towards the field of Computer Science and Networks, I prepare to delve into the captivating mysteries of this discipline.">
Aujourd'hui, les prémices de ma carrière d'ingénieur prennent forme à l'école Télécom Physique Strasbourg. Orienté vers la filière informatique et Réseaux, je me prépare à plonger dans les arcanes captivants de cette discipline.
</p>
</div>
<!-- Barre Div Location -->
<div class="row color_on_hover cursor_pointer" onclick="toggle_visibility('div_location', 'fleche2_location');">
<div class="mr_s1 vertical_center">
<img id="fleche2_location" src="res/fleche2.png" class="fleche2">
</div>
<div class="vertical_center">
<h2 class="to_translate" data-translation="Location">Location</h2>
</div>
</div>
<!-- Div Location -->
<div id="div_location" class="col ml_s2" style="display:none">
<p class="to_translate" data-translation="For twelve years, my life unfolded in the enchanting setting of a humble village named Sivry. There, amid the twists of daily life, I wove the threads of my existence, marked by a bucolic simplicity.">
Douze années durant, ma vie s'est inscrite dans le cadre enchanteur d'un humble village du nom de Sivry. Là, entre les méandres du quotidien, j'ai tissé les fils de mon existence, empreinte d'une simplicité bucolique.
</p>
<p class="to_translate" data-translation="Life's meanders led me to a new destination when my parents decided to set course for Heillecourt, a peaceful haven nestled on the outskirts of the city of Nancy. The transition, though marked by change, added a new dimension to my journey.">
Les méandres de la vie m'ont guidé vers une nouvelle destination lorsque mes parents décidèrent de faire route vers Heillecourt, un écrin paisible niché aux abords de la ville de Nancy. La transition, bien que marquée par le changement, ajouta une nouvelle
dimension à mon parcours.
</p>
<p class="to_translate" data-translation="The cosmopolitan breath of the City of Light drew me in for two years, during my preparatory class at the prestigious Louis-Le-Grand High School in Paris. Amidst the dust of blackboards and corridors filled with stories, this Parisian period left a unique imprint in the folds of my memory.">
Le souffle cosmopolite de la Ville Lumière m'aspira pendant deux années, celles de ma classe préparatoire au prestigieux lycée Louis-Le-Grand à Paris. Entre la poussière des tableaux noirs et les couloirs remplis d'histoires, cette période parisienne
a laissé une empreinte singulière dans les replis de ma mémoire.
</p>
<p class="to_translate" data-translation="Now, the winds of existence have guided me to the banks of Strasbourg. This city, with contours laden with history, becomes the enchanting backdrop where I shape the present and envision the future unfolding before me.">
À présent, les vents de l'existence m'ont conduit vers les rives de Strasbourg. Cette ville, aux contours chargés d'histoire, devient le cadre enchanteur où je façonne le présent et imagine l'avenir qui s'esquisse devant moi.
</p>
</div>
<!-- Barre Div Mes Réseaux -->
<div class="row color_on_hover cursor_pointer" onclick="toggle_visibility('div_reseaux', 'fleche2_reseaux');">
<div class="mr_s1 vertical_center">
<img id="fleche2_reseaux" src="res/fleche2.png" class="fleche2">
</div>
<div class="vertical_center">
<h2 class="to_translate" data-translation="My Networks">Mes réseaux</h2>
</div>
</div>
<!-- Div Mes Réseaux -->
<div id="div_reseaux" class="col ml_s2" style="display:none">
<!-- TODO -->
<ul>
<li>Github : <a href="https://github.com/nath54/" class="to_translate" data-translation="see my github page">Voir ma page github</a></li>
<li>Linkedin : <a href="https://www.linkedin.com/in/nathan-cerisara-8669331ba/" class="to_translate" data-translation="see my Linkedin page">Voir ma page Linkedin</a></li>
</ul>
</div>
<!-- Barre Div Me contacter -->
<div class="row color_on_hover cursor_pointer" onclick="toggle_visibility('div_contact', 'fleche2_contact');">
<div class="mr_s1 vertical_center">
<img src="res/fleche2.png" id="fleche2_contact" class="fleche2">
</div>
<div class="vertical_center">
<h2 class="to_translate" data-translation="Contact me">Me contacter</h2>
</div>
</div>
<!-- Div Me contacter -->
<div id="div_contact" class="col ml_s2" style="display:none">
<p><span class="to_translate" data-translation="You can contact my at the following email : ">Vous pouvez me contacter à l'adresse mail suivante : </span><code style="background-color: rgba(0, 0, 0, 0.1); padding: 4px; border-radius: 3px; font-size: smaller;">[email protected]</code>
</p>
</div>
</div>
</div>
</body>
<script src="js/infos_persos.js" type="text/javascript"></script>
</html>