-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
287 lines (274 loc) · 11.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Titre du site -->
<title>[SAE104] : Julien M.</title>
<!-- Fichiers CSS -->
<link rel="stylesheet" href="/reset.css" />
<link rel="stylesheet" href="/global.css" />
<link rel="stylesheet" href="style.css" />
<!-- Icônes Font Awesome -->
<script
src="https://kit.fontawesome.com/8598d2e3ba.js"
crossorigin="anonymous"
></script>
<!-- Favicon -->
<link rel="favicon" href="/assets/favicon.ico" type="image/x-icon" />
</head>
<body>
<nav class="white">
<p>[home@julien:/SAE104$<span class="blink">_</span>]</p>
<div class="nav-links">
<p><a href="/">/home</a></p>
<p><a href="/project">/projet</a></p>
</div>
</nav>
<video autoplay muted loop id="helloWorldVideo">
<source src="/assets/bg-final.mp4" type="video/mp4" />
</video>
<main class="content">
<section class="presentation">
<h1>Hello World!</h1>
<p>Je suis <b>Julien</b>, un étudiant en RT131...</p>
<p>...et ceci est le site que j'ai créé pour la SAE104...</p>
<p>...un site pour présenter mes aptitudes en HTML/CSS...</p>
<p>...et peut être en faire ma page publique. :)</p>
<!-- <p id="telHint">Psst... Ce site marche super bien sur téléphone 👀</p> -->
</section>
<div class="clean-space infos white">
<div class="info">
<i class="fa-solid fa-face-smile"></i>
<h2>Qui suis-je ?</h2>
<p>
Je suis Julien, un étudiant de 18 ans ayant appris la programmation
en autodidacte au fil des années et de projets programmés par
passion.
</p>
</div>
<div class="info">
<i class="fa-solid fa-user-graduate"></i>
<h2>Quelles études ?</h2>
<p>
Je suis actuellement un
<a
href="https://fr.wikipedia.org/wiki/Bachelor_universitaire_de_technologie"
>Bachelor Universitaire de Technologie</a
>
en
<a
href="https://www.onisep.fr/ressources/univers-formation/formations/Post-bac/but-reseaux-et-telecommunications-parcours-reseaux-operateurs-et-multimedia"
>Réseau et Télécommunications</a
>
à l'<a href="https://www.uha.fr/fr/">Université de Haute Alsace</a>.
</p>
</div>
<div class="info">
<i class="fa-solid fa-user-gear"></i>
<h2>Pour quoi ?</h2>
<p>
À la fin de mon BUT, je souhaite terminer avec un
<a
href="https://fr.wikipedia.org/wiki/Dipl%C3%B4me_national_de_master"
>Master</a
>, et devenir
<a
href="https://www.onisep.fr/ressources/Univers-Metier/Metiers/administrateur-administratrice-reseaux"
>administrateur réseau</a
>
par la suite.
</p>
</div>
</div>
<section class="clean-space technologies black">
<h1><i class="fa-solid fa-gears"></i> Mes technologies</h1>
<div class="clean-space tech-list">
<div class="tech">
<i class="fa-brands fa-python"></i>
<h3>Python</h3>
<p>
Mon language principal, celui que j'ai utilisé pour apprendre les
bases de la programmation et créer mes plus grands projets.
Utilisé depuis plus de 3 ans, j'ai pu apprendre les techniques
avancées du language et ses spécificités.
</p>
</div>
<div class="tech">
<i class="fa-brands fa-js"></i>
<h3>JavaScript</h3>
<p>
Le language du web. Je l'ai utilisé pour créer des pages et API
web avec <a href="https://nodejs.org/">Node.js</a> en utilisant
<a href="https://adonisjs.com/">AdonisJS</a> ou
<a href="https://fastify.io/">Fastify</a>. Je préfère
<a href="https://www.typescriptlang.org/">TypeScript</a> pour son
aide aux développeur lors de l'écritude d'un programme et ses
nouvelles syntaxes qui aide énormément.
</p>
</div>
<div class="tech">
<i class="fa-brands fa-c"></i>
<h3>C Sharp</h3>
<p>
Un language que j'ai commencé à apprendre en 2023 pendant mon
année universitaire. Je tenais à programmer comme en Python, mais
avec la même sureté de typage de TypeScript. CSharp se révèle être
le plus intéressant, en plus d'être un language compilé.
</p>
</div>
<div class="tech">
<i class="fa-brands fa-html5"></i>
<h3>HTML/CSS</h3>
<p>
Sans HTML, pas de web ! J'ai commencé mon premier site web en 2019
en souhaitant créer une page personnelle. Simple, mais efficace.
Il en découle maintenant d'une connaissance des frameworks moderne
comme <a href="https://vuejs.org/">Vue.js</a> ou
<a href="https://react.dev/">React</a> allié à
<a href="https://tailwindcss.com/">Tailwind CSS</a> ou
<a href="https://formkit.com/">FormKit</a>.
</p>
</div>
</div>
</section>
<section class="clean-space ideology white">
<h2>
<i class="fa-brands fa-mintbit"></i> Mon idéologie d'un site web
</h2>
<div>
<p>
La simplicité même d'une ressource est cruciale : Elle doit être
accessible, lisible, et peu d'éléments doivent déconcentrer les
lecteurs finaux. Au début de la technologie, les styles graphiques
ont variés dans différentes formes. On commence avec le terminal, en
charactères uniquement, pas de style, pas de joli beauté : Du texte,
pur, et dur, et on ne fait pas plus simple. Le texte est
l'information, pas le style.
</p>
<p>
L'une des choses qui m'a le plus marqué lors de l'évolution des
UI/UX est le passage par les styles
<a href="https://fr.wikipedia.org/wiki/Skeuomorphisme"
>skeuomorphisme</a
>
et
<a href="https://fr.wikipedia.org/wiki/Neumorphisme">neumorphisme</a
>, deux styles similaires. Si on pouvait leurs définitions, c'est
d'ajouter des détails visuels, non pertinents, mais qui fait que
leurs styles ressortent, on souhaite en montrer plus !
</p>
<p>
À l'inverse maintenant, dans nos styles d'aujourd'hui, nous adoptons
plutôt un style minimaliste, principalement grâce à l'aide de
<a href="https://fr.wikipedia.org/wiki/Image_vectorielle"
>vectoriels</a
>.
</p>
<p>
Toutes entitées ayant une présence sur Internet possédent
généralement un logo. Au passage des années, leurs icônes ce sont de
plus en plus simplifiés, du skeumorphisme au style vectoriel
minimaliste. Certaines personnes n'aime pas ce changement, et cela
devient même une source de blague.
</p>
<div class="image-container-with-text">
<img
src="assets/icons_evolution_meme.jpg"
alt="Une image drôle avec des texte qui se moque de l'évolution des icônes de Google."
/>
<figcaption>
android-memes, google-memes, version-memes | ProgrammerHumor.io
</figcaption>
</div>
<p>
On rajoute plus d'importance au style graphique de nos produits
plutôt que de donner les informations nécessaire de nos jours : Pour
garder la rétention d'une base d'utilisateur, il faut sortir du lot,
avoir le plus beau site, qui reste utilisable et intéressant, un
site où l'utilisateur se sent bien et peut utiliser en toute
confiance !
</p>
<p>
De ce fait, certaines informations se perdent, pas les plus
cruciale, mais celle qui étaient utiles pour certains, car on
souhaite tout rendre au plus joli possible pour garder le plus de
personnes attaché à nous.
</p>
<p>
Ce n'est pas ma vision du Web 2.0, mais nous n'avons pas besoin de
changer, peut être de redevnir plus simple.
</p>
<p>
Je n'ai pas une vision unique du web : Chacun est libre de faire ce
qu'ils souhaitent (C'est la beauté d'Internet même !), mais je
choisi personnellement de rester au plus simpliste possible en
respectant qu'une seule règle : Quand l'information est cruciale, ne
pas utiliser de style, laisser les styles de base faire leurs
travail.
</p>
</div>
</section>
<section class="clean-space career black">
<h2>
<i class="fa-solid fa-person-chalkboard"></i> Mes années scolaire...
</h2>
<div class="careers">
<div class="career-part">
<h3>
<a href="https://groupesaintetienne.fr/ecole-jeanne-darc/"
>Collège Privé Saint-Étienne (Sens)</a
>
</h3>
<p>
J'ai réalisé mon année de collègue au collège privé Saint-Étienne,
où j'ai réalisé mon premier choix d'orientation, là où j'ai de
prendre une orientation de seconde technologique.
</p>
</div>
<div class="career-part">
<h3>
<a href="https://groupesaintetienne.fr/lycee-saint-etienne/"
>Lycée Privé Saint-Étienne (Sens)</a
>
</h3>
<p>
Mon année de lycée se déroule au Lycée privé Saint-Étienne. J'y ai
réalisé mes 3 années en prenant la filière Science et Technologies
de l'Industrie et du Développement Durable (STI2D), avec la
spécialité Système d'Information et Numérique (SIN). J'y ai
réalisé mon baccalauréat que j'ai obtenu avec la mention bien.
</p>
</div>
<div class="career-part">
<h3>
<a href="https://www.uha.fr/"
>IUT de Colmar (Université de Haute-Alsace)</a
>
</h3>
<p>
Avec Parcoursup, je me suis dirigé en Alsace en suivant un
Bachelor universitaire de technologie (BUT) en Réseaux et
télécommunications (RT). J'y entame actuellement ma première année
et espère pouvoir continuer plus tard avec un niveau BAC+5.
</p>
</div>
</div>
</section>
<section class="empty">
<p>The eye watch.</p>
</section>
<footer class="black">
<p>
Copyright 2023-present Julien Mauroy. Source is publicly available at
<a href="https://github.com/madebylydia/madebylydia.github.io"
>this repository</a
>.
<a href="https://en.wikipedia.org/wiki/Free_and_open-source_software"
>Not a FOSS project.</a
>
</p>
</footer>
</main>
</body>
</html>