-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
415 lines (388 loc) · 23.3 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
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<script>document.getElementsByTagName("html")[0].className += " js";</script>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;1,300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header>
<a href="#" class="logo"> Portfolio</a>
<ul>
<li><a href="#contact">Diplômes et scolarité</a></li>
<li><a href="#propos">Formation suivie</a></li>
<li><a href="#diplome" id="">Projets</a></li>
<li><a href="#projet">Mes passions</a></li>
<li><a href="#langues">Langues</a></li>
<li><a href="#passion">Me contacter</a></li>
</ul>
</header>
<section class="back"><!---IMAGE DE BACKGROUND-->
<h1 class="titre">Thomas RAYNAUD</h1>
<hr class="style1">
</section>
<section class="container2">
<h1 class="titre">Je me présente ...</h1>
<p>Je m'appelle Thomas RAYNAUD, j'ai 19 ans. Je suis actuellement étudiant en deuxième année de Bachelor Universitaire de Technologie dans le domaine des Réseaux et Télécommunications à l'IUT de Nord Franche-Comté (Montbéliard-25).</p>
<p>Je suis passionné de cybersécurité, et souhaiterais en faire mon activité professionnelle.</p>
</section>
<!---/////////////////////////////////////////TIMELINE/////////////////////////////////////////-->
<section class="cd-h-timeline js-cd-h-timeline margin-bottom-md" id="contact">
<h1 class="titlepart1">► Diplômes et scolarité :</h1>
<div class="cd-h-timeline__container container">
<div class="cd-h-timeline__dates">
<div class="cd-h-timeline__line">
<ol>
<li><a href="#0" data-date="16/01/2014" class="cd-h-timeline__date cd-h-timeline__date--selected">Février 2019</a></li>
<li><a href="#0" data-date="28/02/2014" class="cd-h-timeline__date">2020-2021</a></li>
<li><a href="#0" data-date="20/04/2014" class="cd-h-timeline__date">2021-2022</a></li>
<li><a href="#0" data-date="20/05/2014" class="cd-h-timeline__date">2021-2024</a></li>
</ol>
<span class="cd-h-timeline__filling-line" aria-hidden="true"></span>
</div> <!-- .cd-h-timeline__line -->
</div> <!-- .cd-h-timeline__dates -->
<ul>
<li><a href="#0" class="text-replace cd-h-timeline__navigation cd-h-timeline__navigation--prev cd-h-timeline__navigation--inactive">Prev</a></li>
<li><a href="#0" class="text-replace cd-h-timeline__navigation cd-h-timeline__navigation--next">Next</a></li>
</ul>
</div> <!-- .cd-h-timeline__container -->
<div class="cd-h-timeline__events">
<ol>
<li class="cd-h-timeline__event cd-h-timeline__event--selected text-component">
<div class="cd-h-timeline__event-content container">
<h2 class="cd-h-timeline__event-title">Comité Départemental de tennis du Haut-Rhin, Alsace (68)</h2>
<em class="cd-h-timeline__event-date">Février 2019</em>
<p class="cd-h-timeline__event-description color-contrast-medium">
Diplômé d'arbitrage en tennis, de niveau A1.
</p>
</div>
</li>
<li class="cd-h-timeline__event text-component">
<div class="cd-h-timeline__event-content container">
<h2 class="cd-h-timeline__event-title">Lycée agricole de Rouffach | Lycée Camille Sée (sport-études), Alsace (68)</h2>
<em class="cd-h-timeline__event-date">2020-2021</em>
<p class="cd-h-timeline__event-description color-contrast-medium">
Baccalauréat général avec mention, spécialités Physique-chimie et Biologie.
</p>
</div>
</li>
<li class="cd-h-timeline__event text-component">
<div class="cd-h-timeline__event-content container">
<h2 class="cd-h-timeline__event-title">IUT Nord Franche-Comté, Montbéliard (25)</h2>
<em class="cd-h-timeline__event-date">2021-2022</em>
<p class="cd-h-timeline__event-description color-contrast-medium">
CCNA Cisco 1 & 2, "Introduction to Networks" et "Switching, Routing, and Wireless Essentials"
</p>
<img src="ccna.png" alt="certifications ccna">
<figcaption class="figcaption2">Figure 1 : Obtention des diplômes</figcaption>
</div>
</li>
<li class="cd-h-timeline__event text-component">
<div class="cd-h-timeline__event-content container">
<h2 class="cd-h-timeline__event-title">IUT Nord Franche-Comté, Montbéliard (25)</h2>
<em class="cd-h-timeline__event-date">2021-2024</em>
<p class="cd-h-timeline__event-description color-contrast-medium">
Bachelor Réseaux et Télécommunications.
</p>
</div>
</li>
</ol>
</div> <!-- .cd-h-timeline__events -->
</section>
<!---<hr class="style2">---->
<!---/////////////////////////////////////////MA FORMATION ACTUELLE + CCNA/////////////////////////////////////////-->
<section id="propos">
<h1 class="titlepart1">► Formation suivie :</h1>
<div class="color">
<img class="IUT" src="IUT.jpeg" alt="Image de l'IUT Réseaux et Télécommunications de Montébliard">
<figcaption class="figcaption1">Figure 2 : IUT Réseaux et Télécommunications de Montbéliard</figcaption>
</div>
<p class="paragraphe">
La formation que je poursuis en <a href="http://rt.pu-pm.univ-fcomte.fr/index.php/Accueil">Bachelor Universitaire de Technologie (BUT) à Montbéliard</a> tourne autour de trois axes majeurs que nous abordons d'un point de vue aussi bien théorique que pratique.
</p>
<p class="paragraphebis">
→ Les dominantes de ma formation sont :
</p>
<ul class="liste">
<li>• Réseaux</li>
<li>• Télécommunications</li>
<li>• Informatique</li>
<li>• Cybersécurité</li>
<li>• Culture professionnelle</li>
<li>• Anglais technique</li>
</ul>
<br>
<p class="paragraphe">En outre, cette année, j’ai opté pour l’option <b>cybersécurité</b> qui me passionne. Mon esprit d’analyse, ma patience, ma curiosité et ma motivation d’apprentissage sont des atouts qui me permettront d’aller plus loin dans le développement de mes futures compétences.</p>
<p class="paragraphe">L'obtention des certifications <b>CCNA 1 & 2</b>, alliée à ma formation m'a fait progresser dans des concepts attachés au réseau.</p>
<p class="paragraphe">→ Le Bachelor Réseaux et Télécommunications est constitué de composantes que nous devons maîtriser : (<a href="https://cache.media.enseignementsup-recherche.gouv.fr/file/SPE4-MESRI-17-6-2021/36/5/Annexe_22_RT_BUT_annee_1_1411365.pdf">voir</a> le programme national du BUT Réseaux et Télécommunications)</p>
<ul class="liste">
<li>• <b>Réseaux</b> : administrer les réseaux et l'Internet</li>
<ul class="sousClasse">
<li>- Configuration de matériel réseaux Cisco, switch de niveau 2 et 3, routeur.</li>
<li>- Mise en place de VLAN et sécurisation de ses derniers.</li>
<li>- Sécurisation de routeurs, mise en place de protocole EGP (BGP) et IGP (RIP & OSPF).</li>
</ul>
<li>• <b>Télécommunications</b> : connecter les entreprises et les usagers</li>
<ul class="sousClasse">
<li>- Analyse de signaux radio avec GNU Radio et du matériel (oscilloscope).</li>
<li>- Analyse de signaux optiques grâce à l'optique géométrique.</li>
</ul>
<li>• <b>Informatique</b> : créer des outils et applications informatiques pour les Réseaux et Télécommunications</li>
<ul class="sousClasse">
<li>- Manipulation et utilisation d'un environnement Linux (Debian et Arch Linux).</li>
<li>- Programmation en C++, Java. En orienté object et natif.</li>
<li>- Développement Web avec HTML, CSS, PHP, JavaScript et intégration base de données avec phpMyAdmin.</li>
<li>- Manipulation de bases de données à l'aide de MariaDB et MySQL</li>
</ul>
<li>• Les deux composantes spécifiques à l'option <b>cybersécurité</b> sont administrer un système d'information sécurisé et surveiller un système d'information sécurisé :
<ul class="sousClasse">
<li>- Méthodes de Pentesting.</li>
<li>- Sécurisation de matériel réseau.</li>
</ul>
</li>
</ul>
<br>
<p class="paragraphe7">→ Une partie de mes compétences énoncées sont démontrées dans la partie suivante de ce site web.</p>
</section>
<!---/////////////////////////////////////////PR2SENTATION/////////////////////////////////////////-->
<section id="diplome">
<h1 class="titlepart1">► Projets :</h1>
<p class="paragraphe">Tous les projets que j'ai réalisés ont été abordés au courant de ma formation. Ces projets aussi appelés SAé (Situation d'Apprentissage et d'évaluation) se déroulent en un temps limité et sont destinés à ressembler à des situations que nous pourrions rencontrer dans le milieu professionnel. Nous les réalisons en groupes de 2 à 8 personnes, afin de travailler, coopérer et mettre en place une gestion de projet en équipe.</p>
<p class="paragraphe">Principaux <b>projets</b> :</p>
<br>
<div class="centerDIV">
<div class="fondReseau">
<p class="netReseau">Réseaux</p>
<button class="buttonReseau" data-modal="modalOne">SAé 21 - Construire un réseau informatique pour une petite structure</button>
<p class="txt">Mise en place de machines et de services réseaux.</p>
</div>
<div id="modalOne" class="modal">
<div class="modal-content">
<div class="contact-form">
<form action="https://github.com/ThomasRAYNAUD/SAE21-Construire-un-reseau-informatique-pour-une-petite-structure">
<h2>SAé 21 - Construire un réseau informatique pour une petite structure</h2>
<p>Lors de cette SAé, j'ai réalisé le prototypage du réseau souhaité grâce à Cisco Packet Tracer, en faisant en amont un découpage du réseau :</p>
<img src="réseau1.png" alt="réseau sous packet tracer" class="img2">
<figcaption class="figcaption2">Figure 3 : Réalisation du réseau sous Cisco Packet Tracer</figcaption>
<br>
<p>Dans cette SAé, j'ai mis en place un serveur DHCP servant aussi de serveur BOOTP.</p>
<img src="dhcp.png" alt="serveur DHCP" class="img2">
<figcaption class="figcaption2">Figure 4 : Déclaration du réseau dans le fichier dhcpd.conf</figcaption>
<br>
<img src="reservation.png" alt="réservation d'adresse IP" class="img2">
<figcaption class="figcaption2">Figure 5 : Réservation d'adresse IP pour une machine spécifique</figcaption>
<br>
<p>Afin de se rendre compte des échanges et réaliser du troubleshooting, j'ai analysé les échanges entre le serveur DHCP et un client.</p>
<img src="wireshark1.png" alt="capture wireshark" class="img2">
<figcaption class="figcaption2">Figure 6 : Analyse Wireshark des messages entre client et serveur DHCP</figcaption>
<br>
<ul class="colorlist">→ <b>Compétences</b> acquises :
<li class="sousclasse3">• Réaliser un plan IP.</li>
<li class="sousclasse3">• Mettre en place d'un serveur DHCP et BOOTP sur Debian</li>
<li class="sousclasse3">• Réaliser du débuggage/troubleshooting grâce à Wireshark et d'autres fichiers de "log".</li>
</ul>
<br>
<button onclick="window.location.href='https://github.com/ThomasRAYNAUD/SAE21-Construire-un-reseau-informatique-pour-une-petite-structure';">Voir le projet sur GitHub</button>
</form>
</div>
</div>
</div>
<div class="fondTelecoms">
<p class="netTelecoms">Télécommunications</p>
<button class="buttonTelecoms" data-modal="modalTwo">SAé 22 : Mesurer et caractériser un signal ou un système</button>
<p class="txt">Mise en place et analyse d'une communication VoIP.</p>
</div>
<div id="modalTwo" class="modal">
<div class="modal-content">
<div class="contact-form">
<form action="https://github.com/ThomasRAYNAUD/SAE22-Mesurer-et-caracteriser-un-signal-ou-un-systeme">
<h2>SAé 22 : Mesurer et caractériser un signal ou un système</h2>
<p>Lors de cette SAé, j'ai mis en place une communication VoIP :</p>
<img src="voip.png" alt="firmware dd-wrt" class="img2">
<figcaption class="figcaption2">Figure 7 : Configuration du Firmware d'une borne wifi reliant notre serveur VoIP à un client</figcaption>
<br>
<p>L'intérêt de cette configuration est de comparer les signaux obtenus en sortie de communication avec et sans codec (compression) :</p>
<img src="oscilloscope.png" alt="sorties oscilloscope" class="img2">
<figcaption class="figcaption2">Figure 8 : Visualisation des signaux sur un oscilloscope (le bleu étant le signal sans compression, et le jaune étant le signal avec le codec Opus)</figcaption>
<br>
<p>Après différentes mesures et comparaisons, notre groupe pouvait alors en déduire l'utilité du codec grâce à des applications mathématiques. (<a href="https://github.com/ThomasRAYNAUD/SAE22-Mesurer-et-caracteriser-un-signal-ou-un-systeme/blob/main/Sae22_GEORGE_RAYNAUD_MIRBEY.pdf">disponible page 19</a>)</p>
<ul class="colorlist">→ <b>Compétences</b> acquises :
<li class="sousclasse3">• Mettre en place un système de transmission VoIP.</li>
<li class="sousclasse3">• Analyser et caractériser des signaux de transmission grâce à du matériel spécifique (générateur Basses Fréquences, oscilloscope).</li>
<li class="sousclasse3">• Interpréter des signaux grâce aux mesures réalisées.</li>
</ul>
<br>
<button onclick="window.location.href='https://github.com/ThomasRAYNAUD/SAE22-Mesurer-et-caracteriser-un-signal-ou-un-systeme';">Voir le projet sur GitHub</button>
</form>
</div>
</div>
</div>
<div class="fondProg">
<p class="netProg">Développement</p>
<button class="buttonProg" data-modal="modal3">SAé 23 : Mettre en place une solution informatique pour l'entreprise</button>
<p class="txt">Mise en place de machines et de services réseaux.</p>
</div>
<div id="modal3" class="modal">
<div class="modal-content">
<div class="contact-form">
<form action="https://github.com/ThomasRAYNAUD/SAE23-Mettre-en-place-une-solution-informatique-pour-l-entreprise">
<h2>SAé 23 : Mettre en place une solution informatique pour l'entreprise</h2>
<p>Lors de cette SAé, nous étions en groupe de 3, il fallait réaliser une application Web à usage interne d'une entreprise. (du covoiturage domicile-travail, domicile-loisir et travail-loisir)</p>
<p>Plusieurs concepts ont été abordés, comme la réalisation d'une base de données :</p>
<img src="BD.png" alt="base de données" class="img2">
<figcaption class="figcaption2">Figure 9 : Conceptualisation de la base de données avant sa réalisation sur phpMyAdmin</figcaption>
<br>
<p>Les connexions à la base de données et l'aspect "back end" réalisé en PHP :</p>
<img src="backend.png" alt="backend" class="img2">
<figcaption class="figcaption2">Figure 10 : Partie d'un script PHP permettant l'insertion de données d'un fichier JSON dans la base de données phpMyAdmin.</figcaption>
<br>
<p>Le visuel "front end" est réalisé en HTML, CSS et JavaScript :</p>
<img src="connexion.png" alt="page de connexion, front end" class="img2">
<figcaption class="figcaption2">Figure 11 : Page de connexion, réalisée pour l'application web</figcaption>
<br>
<p>L'utilisation de fichier JSON afin de remplir la base de données (script PHP pour l'exécution) :</p>
<img src="json.png" alt="fichier json" class="img2">
<figcaption class="figcaption2">Figure 12 : Aperçu de la structure du fichier JSON</figcaption>
<br>
<ul class="colorlist">→ <b>Compétences</b> acquises :
<li class="sousclasse3">• Manipuler une base de données sous phpMyAdmin et faire sa conceptualisation.</li>
<li class="sousclasse3">• Réaliser une application web grâce à des langages fondamentaux du développement web.</li>
<li class="sousclasse3">• Rentrer des données d'un fichier JSON dans une base de données grâce à un script exécutable.</li>
<li class="sousclasse3">• Documenter mon travail à la fois en anglais et en français.</li>
</ul>
<br>
<button onclick="window.location.href='https://github.com/ThomasRAYNAUD/SAE23-Mettre-en-place-une-solution-informatique-pour-l-entreprise';">Voir le projet sur GitHub</button>
</form>
</div>
</div>
</div>
<div class="fondCyber">
<p class="netCyber">Cybersécurité</p>
<button class="buttonCyber" data-modal="modal4">SAé 24 : Projet intégratif - Partie Cybersécurité</button>
<p class="txt"><br>Audit de sécurité d'une machine cible.</p>
</div>
<div id="modal4" class="modal">
<div class="modal-content">
<div class="contact-form">
<form action="https://github.com/ThomasRAYNAUD/SAE12-S-initier-aux-reseaux-informatiques">
<h2>SAé 24 : Projet intégratif - Partie Cybersécurité</h2>
<p>Lors de cette SAé, la mise en place d'OS était importante, j'ai réalisé les installations sur la machine cible et sur la machine attaquante (Raspberry Pi) :</p>
<img src="cible.png" alt="installation du système cible" class="img2">
<figcaption class="figcaption2">Figure 13 : Page web obtenue après la bonne installation du système cible.</figcaption>
<br>
<p>J'ai utilisé Metasploit sous Kali Linux afin d'analyser le système cible.</p>
<img src="CVE.png" alt="Analyse de CVE" class="img3">
<figcaption class="figcaption2">Figure 14 : Analyse des CVE (vulnérabilités connues) du système cible depuis Kali Linux.</figcaption>
<br>
<p>J'ai aussi réalisé une attaque Man In The Middle permettant d'intercepter des données qui ne m'étaient pas destinées :</p>
<img src="MITM.png" alt="Analyse de CVE" class="img3">
<figcaption class="figcaption2">Figure 15 : Analyse sous Wireshark de l'usurpation d'adresse MAC que j'ai réalisé</figcaption>
<br>
<ul class="colorlist">→ <b>Compétences</b> acquises :
<li class="sousclasse3">• Mettre en place des systèmes d'exploitation sur des Raspberry Pi.</li>
<li class="sousclasse3">• Utiliser Metasploit et des outils comme Nmap pour analyser un système cible et trouver des CVE.</li>
<li class="sousclasse3">• Réaliser une attaque Man In The Middle et intercepter du trafic qui ne met pas destiné.</li>
</ul>
<br>
<button onclick="window.location.href='https://github.com/ThomasRAYNAUD/SAE12-S-initier-aux-reseaux-informatiques';">Voir le projet sur GitHub</button>
</form>
</div>
</div>
</div>
</div>
<p class="paragraphe8"><br><br>→ Pour voir d'autres projets, n'hésitez pas à visiter <a href="https://github.com/ThomasRAYNAUD">mon profil GitHub</a>.</p>
</section>
<!---/////////////////////////////////////////PR2SENTATION/////////////////////////////////////////-->
<section id="projet">
<h1 class="titlepart2">► Mes passions :</h1>
<p class="paragraphe20">Je suis passionné de sport, voici une partie de ceux que je pratique !</p>
<div class="div1">
<div class="tennis" id="video">
<p><b>Le tennis :</b></p>
<ul>
<li>- 15 ans de pratique en club</li>
<li>- Des tournées de tournois en France</li>
<li>- Championnats d'Alsace</li>
</ul>
</div>
<div id="video">
<video width="320" height="240" autoplay muted loop>
<source src="GOPR0326.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="div1">
<div class="tennis" id="video">
<p><b>Le trail running / La course à pied :</b></p>
<ul>
<li>- Pratique renforcée depuis 2021</li>
<li>- Entrainements avec des amis</li>
<li>- Surpassement de soi lors de longues courses</li>
</ul>
</div>
<div id="video">
<br>
<img class="trail" src="IMG_0825.jfif" alt="Thomas lors d'une course">
</div>
</div>
</section>
<section id="langues">
<h1 class="titlepart2">► Langues :</h1>
<div class="socialN2">
<img src="france.jpg" alt="drapeau France" class="france">
<p class="phonetxt">Langue maternelle</p>
</div>
<div class="socialN2">
<img src="allemagne.jfif" alt="Drapeau allemagne" class="allemagne">
<p class="phonetxt">Niveau B1, certifié <a href="https://pedagogie.ac-strasbourg.fr/langues/examens-certifications-concours/certifications-en-langues-2nd-degre/dsd1-certification-en-allemand-de-la-kmk/">diplôme de langue allemande</a></p>
</div>
<div class="socialN2">
<img src="anglais.jpg" alt="drapeau angletterre" class="angletterre">
<p class="phonetxt">Niveau B2, pratique quotidienne</p>
</div>
</section>
<!---/////////////////////////////////////////PR2SENTATION/////////////////////////////////////////-->
<!--<section id="test">
<h4>Section_4</h4>
</section>-->
<!---/////////////////////////////////////////PR2SENTATION/////////////////////////////////////////-->
<footer id="passion">
<h1 class="contacter">► Me contacter</h1>
<div class="socialN">
<a href="https://www.linkedin.com/in/thomas-raynaud-69a6ab252/" target="_blank">
<img src="footer/linkedin.jpg" alt="LinkedIn" class="linkedin">
<p class="phonetxt">/thomas-raynaud-69a6ab252</p>
</a>
</div>
<div class="socialN">
<a href="tel:0781230626">
<img src="footer/18764668.jpg" alt="phone number" class="phone">
<p class="phonetxt">+33 (0)7-81-23-06-26</p>
</a>
</div>
<div class="socialN">
<a href="mailto:[email protected]">
<img src="footer/18764668d.jpg" alt="mail address" class="email">
<p class="phonetxt">[email protected]</p>
</a>
</div>
<div class="socialN">
<a href="Raynaud-CV.pdf" download class="phonetxt">
<img src="1-01.jpg" alt="CV icon" class="email2">
<p class="phonetxt">Mon CV</p></a>
</div>
</footer>
<!---/////////////////////////////////////////PR2SENTATION/////////////////////////////////////////-->
<script src="assets/js/util.js"></script>
<script src="assets/js/swipe-content.js"></script>
<script src="assets/js/main.js"></script>
<script src="script.js"></script>
</body>
</html>