mirror of
https://github.com/Floriansylvain/portfolio.git
synced 2026-08-19 11:43:20 +02:00
Merge branch 'main' of https://github.com/Floriansylvain/Portfolio
This commit is contained in:
Florian Sylvain
Binary file not shown.
Binary file not shown.
+238
-232
@@ -2,57 +2,57 @@
|
|||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<meta name="description"
|
<meta name="description"
|
||||||
content="Portfolio de Florian Sylvain, étudiant en DUT Informatique, Apprenti développeur R&D chez WATT Earth.">
|
content="Portfolio de Florian Sylvain, étudiant en DUT Informatique, Apprenti développeur R&D chez WATT Earth.">
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="../stylesheet-main.css">
|
<link rel="stylesheet" type="text/css" href="../stylesheet-main.css">
|
||||||
<noscript>
|
<noscript>
|
||||||
<link rel="stylesheet" type="text/css" href="stylesheet-imgs.css">
|
<link rel="stylesheet" type="text/css" href="stylesheet-imgs.css">
|
||||||
</noscript>
|
</noscript>
|
||||||
|
|
||||||
<title>Florian Sylvain</title>
|
<title>Florian Sylvain</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<nav>
|
<nav>
|
||||||
<a href="#about">À propos</a>
|
<a href="#about">À propos</a>
|
||||||
<a href="#education">Études</a>
|
<a href="#education">Études</a>
|
||||||
<a href="#experience">Expérience</a>
|
<a href="#experience">Expérience</a>
|
||||||
<a href="#projects">Projets</a>
|
<a href="#projects">Projets</a>
|
||||||
<a href="#hobbies">Hobbies</a>
|
<a href="#hobbies">Hobbies</a>
|
||||||
<a href="#contact">Contact</a>
|
<a href="#contact">Contact</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div class="hamburger" onclick="switchNavBar()">
|
<div class="hamburger" onclick="switchNavBar()">
|
||||||
<span></span>
|
<span></span>
|
||||||
<span></span>
|
<span></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div id="landing" class="main-title">
|
<div id="landing" class="main-title">
|
||||||
<h1>
|
<h1>
|
||||||
<a href="#about">
|
<a href="#about">
|
||||||
Florian Sylvain
|
Florian Sylvain
|
||||||
</a>
|
</a>
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<main id="content">
|
<main id="content">
|
||||||
|
|
||||||
<section class="to-fade" id="about">
|
<section class="to-fade" id="about">
|
||||||
<h2>About</h2>
|
<h2>About</h2>
|
||||||
<div class="block">
|
<div class="block">
|
||||||
<img loading="lazy" class="to-grow" src="../assets/imgs/FlorianSylvain.webp" alt="Florian Sylvain">
|
<img loading="lazy" class="to-grow" src="../assets/imgs/FlorianSylvain.webp" alt="Florian Sylvain">
|
||||||
<p>
|
<p>
|
||||||
Étudiant en 2ème année de Bachelor Développeur Web à l'ESD Paris, auto-entrepreneur, j'ai toujours été passionné par l'informatique. Le développement web et les jeux vidéo forment à eux deux mon fer de lance en informatique: la créativité et le challenge technique.
|
Étudiant en 2ème année de Bachelor Développeur Web à l'ESD Paris, auto-entrepreneur, j'ai toujours été passionné par l'informatique. Le développement web et les jeux vidéo forment à eux deux mon fer de lance en informatique: la créativité et le challenge technique.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="to-fade" id="education">
|
<section class="to-fade" id="education">
|
||||||
<h2>Études</h2>
|
<h2>Études</h2>
|
||||||
@@ -64,225 +64,231 @@
|
|||||||
utiliser des API, intégrer des interfaces utilisateurs, mener à bien des projets de développement web.</p>
|
utiliser des API, intégrer des interfaces utilisateurs, mener à bien des projets de développement web.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="to-slide">
|
<div class="to-slide">
|
||||||
<h3>Université Gustave Eiffel</h3>
|
<h3>Université Gustave Eiffel</h3>
|
||||||
<p><span class="degree">DUT Informatique</span><br><span class="time-range">Sept. 2020 - Sept. 2022</span></p>
|
<p><span class="degree">DUT Informatique</span><br><span class="time-range">Sept. 2020 - Sept. 2022</span></p>
|
||||||
<p>
|
<p>
|
||||||
Les enseignements sont : fondamentaux, pour acquérir des connaissances, des concepts de base et des méthodes de
|
Les enseignements sont : fondamentaux, pour acquérir des connaissances, des concepts de base et des méthodes de
|
||||||
travail, appliqués, pour faciliter l'apprentissage de ces concepts et déployer des savoir-faire professionnels,
|
travail, appliqués, pour faciliter l'apprentissage de ces concepts et déployer des savoir-faire professionnels,
|
||||||
évolutifs, pour intégrer les progrès technologiques et les exigences du monde professionnel, ouverts, pour développer
|
évolutifs, pour intégrer les progrès technologiques et les exigences du monde professionnel, ouverts, pour développer
|
||||||
les facultés de communication indispensables aux informaticiens dans l'exercice de leur métier.
|
les facultés de communication indispensables aux informaticiens dans l'exercice de leur métier.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="to-slide">
|
<div class="to-slide">
|
||||||
<h3>Lycée Polyvalent René Cassin</h3>
|
<h3>Lycée Polyvalent René Cassin</h3>
|
||||||
<p><span class="degree">Baccalauréat STI2D - Mention Bien</span><br><span class="time-range">Sept. 2017 - Juil. 2020</span></p>
|
<p><span class="degree">Baccalauréat STI2D - Mention Bien</span><br><span class="time-range">Sept. 2017 - Juil. 2020</span></p>
|
||||||
<p>
|
<p>
|
||||||
Formation à l'industrie et à l'innovation technologique en matière de préservation de l'environnement.
|
Formation à l'industrie et à l'innovation technologique en matière de préservation de l'environnement.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="to-fade" id="experience">
|
<section class="to-fade" id="experience">
|
||||||
<h2>Expérience</h2>
|
<h2>Expérience</h2>
|
||||||
|
|
||||||
<div class="to-slide">
|
<div class="to-slide">
|
||||||
<h3>WATT Earth</h3>
|
<h3>WATT Earth</h3>
|
||||||
<p><span class="degree">Apprenti développeur R&D</span><br><span class="time-range">Oct. 2021 - Sept. 2022</span></p>
|
<p><span class="degree">Apprenti développeur R&D</span><br><span class="time-range">Oct. 2021 - Sept. 2022</span></p>
|
||||||
<p>Contribuer à la conception et au développement de fonctionnalités innovantes au cœur des produits WATT Earth.</p>
|
<p>
|
||||||
</div>
|
J’ai travaillé sur la conception et le développement de fonctionnalités innovantes au cœur des produits WATT Earth
|
||||||
|
(en utilisant du Typescript, Javascript, Python, VueJS, Go, PhP, MySql, Warp10, pour ne citer qu’eux), mais aussi
|
||||||
|
sur du maquettage et de la conception d'interfaces utilisateurs (Figma), de la réalisation de spécifications et de
|
||||||
|
cahiers de recettes et enfin de l’intégration de technologies dans la olution de l'entreprise, correspondant aux
|
||||||
|
besoin client (Modbus, LoRaWAN, Zigbee...).
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="to-slide">
|
<div class="to-slide">
|
||||||
<h3>UGAP</h3>
|
<h3>UGAP</h3>
|
||||||
<p><span class="degree">Support technique et informatique</span><br><span class="time-range">2016, une semaine</span></p>
|
<p><span class="degree">Support technique et informatique</span><br><span class="time-range">2016, une semaine</span></p>
|
||||||
<p>
|
<p>
|
||||||
Mes objectifs étaient de déterminer des solutions et recommandations techniques et de les communiquer aux utilisateurs,
|
Mes objectifs étaient de déterminer des solutions et recommandations techniques et de les communiquer aux utilisateurs,
|
||||||
d'analyser les problèmes techniques, d'informer les utilisateurs des problèmes techniques trouvés et des modifications
|
d'analyser les problèmes techniques, d'informer les utilisateurs des problèmes techniques trouvés et des modifications
|
||||||
et réparations à effectuer, de former les utilisateurs à un produit ou un équipement et d'effectuer le suivi technique
|
et réparations à effectuer, de former les utilisateurs à un produit ou un équipement et d'effectuer le suivi technique
|
||||||
des produits et de leur évolution auprès des utilisateurs.
|
des produits et de leur évolution auprès des utilisateurs.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="to-fade" id="projects">
|
<section class="to-fade" id="projects">
|
||||||
<h2>Projets</h2>
|
<h2>Projets</h2>
|
||||||
<div class="projects-list">
|
<div class="projects-list">
|
||||||
<div>
|
<div>
|
||||||
<article class="pong2D to-slide">
|
<article class="pong2D to-slide">
|
||||||
<div class="plus-button">
|
<div class="plus-button">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||||
<path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z" />
|
<path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<article class="pong3D to-slide">
|
<article class="pong3D to-slide">
|
||||||
<div class="plus-button">
|
<div class="plus-button">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||||
<path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z" />
|
<path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<article class="risitasBot to-slide">
|
<article class="risitasBot to-slide">
|
||||||
<div class="plus-button">
|
<div class="plus-button">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||||
<path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z" />
|
<path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<article class="riverwood to-slide">
|
<article class="riverwood to-slide">
|
||||||
<div class="plus-button">
|
<div class="plus-button">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||||
<path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z" />
|
<path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<article class="thesesFr to-slide">
|
<article class="thesesFr to-slide">
|
||||||
<div class="plus-button">
|
<div class="plus-button">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||||
<path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z" />
|
<path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<span class="background-hider bgh-off" onclick="javascript:switchArticle(null)"></span>
|
<span class="background-hider bgh-off" onclick="javascript:switchArticle(null)"></span>
|
||||||
|
|
||||||
<!-- ---------- Articles contents ---------- -->
|
<!-- ---------- Articles contents ---------- -->
|
||||||
|
|
||||||
<div id="pong2D" class="article-content ">
|
<div id="pong2D" class="article-content ">
|
||||||
<img loading="lazy" src="../assets/imgs/Pong2D-video.webp" alt="Pong2D">
|
<img loading="lazy" src="../assets/imgs/Pong2D-video.webp" alt="Pong2D">
|
||||||
<h3>Pong2D</h3>
|
<h3>Pong2D</h3>
|
||||||
<p>
|
<p>
|
||||||
Mon tout premier projet en Python (avec Pygame). Il s'agit d'un simple Pong, avec un menu principal, un menu pause et un game over.
|
Mon tout premier projet en Python (avec Pygame). Il s'agit d'un simple Pong, avec un menu principal, un menu pause et un game over.
|
||||||
</p>
|
</p>
|
||||||
<a rel="noopener" target="_blank" href="https://github.com/Floriansylvain/Pong">
|
<a rel="noopener" target="_blank" href="https://github.com/Floriansylvain/Pong">
|
||||||
Aller vers le dépôt GitHub
|
Aller vers le dépôt GitHub
|
||||||
</a>
|
</a>
|
||||||
<a onclick="javascript:switchArticle(null)">Fermer</a>
|
<a onclick="javascript:switchArticle(null)">Fermer</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="pong3D" class="article-content">
|
<div id="pong3D" class="article-content">
|
||||||
<img loading="lazy" src="../assets/imgs/Pong3D-video.webp" alt="Pong3D">
|
<img loading="lazy" src="../assets/imgs/Pong3D-video.webp" alt="Pong3D">
|
||||||
<h3>Pong3D</h3>
|
<h3>Pong3D</h3>
|
||||||
<p>
|
<p>
|
||||||
Mon tout premier projet sur Unity. Il s'agit d'un simple Pong en 3D, avec quelques effets et un atmosphère plutôt calme.
|
Mon tout premier projet sur Unity. Il s'agit d'un simple Pong en 3D, avec quelques effets et un atmosphère plutôt calme.
|
||||||
</p>
|
</p>
|
||||||
<a rel="noopener" target="_blank" href="https://github.com/Floriansylvain/Pong3D">
|
<a rel="noopener" target="_blank" href="https://github.com/Floriansylvain/Pong3D">
|
||||||
Aller vers le dépôt GitHub
|
Aller vers le dépôt GitHub
|
||||||
</a>
|
</a>
|
||||||
<a rel="noopener" target="_blank" href="https://floriansylvain.fr/Pong3D/index.html">
|
<a rel="noopener" target="_blank" href="https://floriansylvain.fr/Pong3D/index.html">
|
||||||
Jouer
|
Jouer
|
||||||
</a>
|
</a>
|
||||||
<a onclick="javascript:switchArticle(null)">Fermer</a>
|
<a onclick="javascript:switchArticle(null)">Fermer</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="risitasBot" class="article-content">
|
<div id="risitasBot" class="article-content">
|
||||||
<img loading="lazy" src="../assets/imgs/RisitasBot-video.webp" alt="Risitas_Bot">
|
<img loading="lazy" src="../assets/imgs/RisitasBot-video.webp" alt="Risitas_Bot">
|
||||||
<h3>Risitas Bot</h3>
|
<h3>Risitas Bot</h3>
|
||||||
<p>
|
<p>
|
||||||
Risitas_Bot est un robot Discord qui peut connecter votre chat Twitch à un canal Discord en temps réel. Faites rire vos
|
Risitas_Bot est un robot Discord qui peut connecter votre chat Twitch à un canal Discord en temps réel. Faites rire vos
|
||||||
amis en jouant le meme "Issou !" sur commande dans un canal vocal et obtenez quelques statistiques sur votre
|
amis en jouant le meme "Issou !" sur commande dans un canal vocal et obtenez quelques statistiques sur votre
|
||||||
compte Osu, ainsi que sur vos dernière parties classées !
|
compte Osu, ainsi que sur vos dernière parties classées !
|
||||||
</p>
|
</p>
|
||||||
<a rel="noopener" target="_blank" href="https://github.com/Floriansylvain/Risitas_Bot">
|
<a rel="noopener" target="_blank" href="https://github.com/Floriansylvain/Risitas_Bot">
|
||||||
Aller vers le dépôt GitHub
|
Aller vers le dépôt GitHub
|
||||||
</a>
|
</a>
|
||||||
<a onclick="javascript:switchArticle(null)">Fermer</a>
|
<a onclick="javascript:switchArticle(null)">Fermer</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="riverwood" class="article-content">
|
<div id="riverwood" class="article-content">
|
||||||
<img loading="lazy" src="../assets/imgs/Riverwood-video.webp" alt="Riverwood">
|
<img loading="lazy" src="../assets/imgs/Riverwood-video.webp" alt="Riverwood">
|
||||||
<h3>Riverwood</h3>
|
<h3>Riverwood</h3>
|
||||||
<p>
|
<p>
|
||||||
Travail des étudiants du DUT Info 1 (IUT de Marne-la-Vallée). Les étudiants devaient réaliser une production sonore
|
Travail des étudiants du DUT Info 1 (IUT de Marne-la-Vallée). Les étudiants devaient réaliser une production sonore
|
||||||
inspirée du court-métrage "Calls" de Timothée Hochet.
|
inspirée du court-métrage "Calls" de Timothée Hochet.
|
||||||
</p>
|
</p>
|
||||||
<a rel="noopener" target="_blank" href="https://www.youtube.com/watch?v=TGBN_lxMbSM">
|
<a rel="noopener" target="_blank" href="https://www.youtube.com/watch?v=TGBN_lxMbSM">
|
||||||
Regarder sur YouTube
|
Regarder sur YouTube
|
||||||
</a>
|
</a>
|
||||||
<a onclick="javascript:switchArticle(null)">Fermer</a>
|
<a onclick="javascript:switchArticle(null)">Fermer</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="thesesFr" class="article-content">
|
<div id="thesesFr" class="article-content">
|
||||||
<img loading="lazy" src="../assets/imgs/ThesesFr-video.webp" alt="theses.fr">
|
<img loading="lazy" src="../assets/imgs/ThesesFr-video.webp" alt="theses.fr">
|
||||||
<h3>thèses.fr</h3>
|
<h3>thèses.fr</h3>
|
||||||
<p>
|
<p>
|
||||||
Le but était de récupérer le jeu de données fourni par thèses.fr, de le normaliser, et de créer un site permettant de
|
Le but était de récupérer le jeu de données fourni par thèses.fr, de le normaliser, et de créer un site permettant de
|
||||||
consulter ces données, dans un premier temps sous forme de liste simple mais visuellement agréable, puis dans un second
|
consulter ces données, dans un premier temps sous forme de liste simple mais visuellement agréable, puis dans un second
|
||||||
temps de résumer les recherches sous forme de graphiques.
|
temps de résumer les recherches sous forme de graphiques.
|
||||||
</p>
|
</p>
|
||||||
<a rel="noopener" target="_blank" href="https://projet.floriansylvain.fr/ProjetProgWeb/">
|
<a rel="noopener" target="_blank" href="https://projet.floriansylvain.fr/ProjetProgWeb/">
|
||||||
Visiter le site
|
Visiter le site
|
||||||
</a>
|
</a>
|
||||||
<a onclick="javascript:switchArticle(null)">Fermer</a>
|
<a onclick="javascript:switchArticle(null)">Fermer</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- --------- END Articles contents --------- -->
|
<!-- --------- END Articles contents --------- -->
|
||||||
|
|
||||||
<section class="to-fade" id="hobbies">
|
<section class="to-fade" id="hobbies">
|
||||||
<h2>Hobbies</h2>
|
<h2>Hobbies</h2>
|
||||||
<p>🚧 Travaux en cours 🚧</p>
|
<p>🚧 Travaux en cours 🚧</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="to-fade" id="contact">
|
<section class="to-fade" id="contact">
|
||||||
<h2>Contact</h2>
|
<h2>Contact</h2>
|
||||||
<p>
|
<p>
|
||||||
Vous pouvez me contacter par e-mail via <a
|
Vous pouvez me contacter par e-mail via <a
|
||||||
href="mailto:floriansylvainpro@gmail.com">floriansylvainpro@gmail.com</a> ou par téléphone au <a
|
href="mailto:floriansylvainpro@gmail.com">floriansylvainpro@gmail.com</a> ou par téléphone au <a
|
||||||
href="tel:0695208226">(+33) 06 95 20 82 26</a>.
|
href="tel:0695208226">(+33) 06 95 20 82 26</a>.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<a href="#landing">
|
<a href="#landing">
|
||||||
<div id="scrollToTop" class="scroll-to-top">
|
<div id="scrollToTop" class="scroll-to-top">
|
||||||
<svg class="scroll-to-top" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
<svg class="scroll-to-top" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||||
<path class="scroll-to-top"
|
<path class="scroll-to-top"
|
||||||
d="M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z" />
|
d="M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<a rel="noopener" target="_blank" href="https://www.linkedin.com/in/florian-sylvain-0651021a9">
|
<a rel="noopener" target="_blank" href="https://www.linkedin.com/in/florian-sylvain-0651021a9">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||||
<path
|
<path
|
||||||
d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
|
d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
<a rel="noopener" target="_blank" href="https://github.com/Floriansylvain">
|
<a rel="noopener" target="_blank" href="https://github.com/Floriansylvain">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||||
<path
|
<path
|
||||||
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
<p class="lang-selection">
|
<p class="lang-selection">
|
||||||
<a href="https://floriansylvain.fr/index.html">EN</a> /
|
<a href="https://floriansylvain.fr/index.html">EN</a> /
|
||||||
<a class="selected" href="https://floriansylvain.fr/fr/index.html">FR</a>
|
<a class="selected" href="https://floriansylvain.fr/fr/index.html">FR</a>
|
||||||
</p>
|
</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<script type="text/javascript" src="../script.js"></script>
|
<script type="text/javascript" src="../script.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
+203
-198
@@ -1,37 +1,37 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<meta name="description" content="Portfolio of Florian Sylvain, student in Computer Science, R&D developer apprentice at Watt Earth.">
|
<meta name="description" content="Portfolio of Florian Sylvain, student in Computer Science, R&D developer apprentice at Watt Earth.">
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="stylesheet-main.css">
|
<link rel="stylesheet" type="text/css" href="stylesheet-main.css">
|
||||||
<noscript>
|
<noscript>
|
||||||
<link rel="stylesheet" type="text/css" href="stylesheet-imgs.css">
|
<link rel="stylesheet" type="text/css" href="stylesheet-imgs.css">
|
||||||
</noscript>
|
</noscript>
|
||||||
|
|
||||||
<title>Florian Sylvain</title>
|
<title>Florian Sylvain</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<nav>
|
<nav>
|
||||||
<a href="#about">About</a>
|
<a href="#about">About</a>
|
||||||
<a href="#education">Education</a>
|
<a href="#education">Education</a>
|
||||||
<a href="#experience">Experience</a>
|
<a href="#experience">Experience</a>
|
||||||
<a href="#projects">Projects</a>
|
<a href="#projects">Projects</a>
|
||||||
<a href="#hobbies">Hobbies</a>
|
<a href="#hobbies">Hobbies</a>
|
||||||
<a href="#contact">Contact</a>
|
<a href="#contact">Contact</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div class="hamburger" onclick="switchNavBar()">
|
<div class="hamburger" onclick="switchNavBar()">
|
||||||
<span></span>
|
<span></span>
|
||||||
<span></span>
|
<span></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div id="landing" class="main-title">
|
<div id="landing" class="main-title">
|
||||||
<h1>
|
<h1>
|
||||||
@@ -39,17 +39,17 @@
|
|||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<main id="content">
|
<main id="content">
|
||||||
|
|
||||||
<section class="to-fade" id="about">
|
<section class="to-fade" id="about">
|
||||||
<h2>About</h2>
|
<h2>About</h2>
|
||||||
<div class="block">
|
<div class="block">
|
||||||
<img loading="lazy" class="to-grow" src="assets/imgs/FlorianSylvain.webp" alt="Florian Sylvain">
|
<img loading="lazy" class="to-grow" src="assets/imgs/FlorianSylvain.webp" alt="Florian Sylvain">
|
||||||
<p>
|
<p>
|
||||||
I am a 2nd year student of the Bachelor Web Developer program at ESD Paris, and I have always been passionate about computers. Web development and video games together form my spearhead in IT: creativity and technical challenge.
|
I am a 2nd year student of the Bachelor Web Developer program at ESD Paris, and I have always been passionate about computers. Web development and video games together form my spearhead in IT: creativity and technical challenge.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="to-fade" id="education">
|
<section class="to-fade" id="education">
|
||||||
<h2>Education</h2>
|
<h2>Education</h2>
|
||||||
@@ -61,198 +61,203 @@
|
|||||||
use APIs, integrate user interfaces, carry out web development projects.</p>
|
use APIs, integrate user interfaces, carry out web development projects.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="to-slide">
|
<div class="to-slide">
|
||||||
<h3>Gustave Eiffel University</h3>
|
<h3>Gustave Eiffel University</h3>
|
||||||
<p><span class="degree">DUT Informatique</span><br><span class="time-range">Sept. 2020 - Sept. 2022</span></p>
|
<p><span class="degree">DUT Informatique</span><br><span class="time-range">Sept. 2020 - Sept. 2022</span></p>
|
||||||
<p>
|
<p>
|
||||||
Fundamental courses, to acquire knowledge, basic concepts and working methods; applied courses, to facilitate the learning of these concepts and to deploy professional know-how; evolutionary courses, to integrate technological progress and the requirements of the professional world; open courses, to develop the communication skills essential to computer scientists in the exercise of their profession.
|
Fundamental courses, to acquire knowledge, basic concepts and working methods; applied courses, to facilitate the learning of these concepts and to deploy professional know-how; evolutionary courses, to integrate technological progress and the requirements of the professional world; open courses, to develop the communication skills essential to computer scientists in the exercise of their profession.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="to-slide">
|
<div class="to-slide">
|
||||||
<h3>Lycée Polyvalent René Cassin</h3>
|
<h3>Lycée Polyvalent René Cassin</h3>
|
||||||
<p><span class="degree">Baccalauréat STI2D</span><br><span class="time-range">Sept. 2017 - July. 2020</span></p>
|
<p><span class="degree">Baccalauréat STI2D</span><br><span class="time-range">Sept. 2017 - July. 2020</span></p>
|
||||||
<p>
|
<p>
|
||||||
Training in industry and technological innovation with respect to the preservation of the environment.
|
Training in industry and technological innovation with respect to the preservation of the environment.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="to-fade" id="experience">
|
<section class="to-fade" id="experience">
|
||||||
<h2>Experience</h2>
|
<h2>Experience</h2>
|
||||||
|
|
||||||
<div class="to-slide">
|
<div class="to-slide">
|
||||||
<h3>WATT Earth</h3>
|
<h3>WATT Earth</h3>
|
||||||
<p><span class="degree">R&D Developer Apprentice</span><br><span class="time-range">Oct. 2021 - Sept. 2022</span></p>
|
<p><span class="degree">R&D Developer Apprentice</span><br><span class="time-range">Oct. 2021 - Sept. 2022</span></p>
|
||||||
<p>Contribute to the design and development of innovative features at the heart of WATT Earth products.</p>
|
<p>
|
||||||
</div>
|
I worked on the design and development of innovative features at the heart of WATT Earth products (using Typescript,
|
||||||
|
Javascript, Python, VueJS, Go, PhP, MySql, Warp10, to name a few), but also on the design of user interfaces (Figma),
|
||||||
|
the realization of specifications and recipe books and finally the integration of technologies into the company's solution,
|
||||||
|
corresponding to the customer's needs (Modbus, LoRaWAN, Zigbee...).
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="to-slide">
|
<div class="to-slide">
|
||||||
<h3>UGAP</h3>
|
<h3>UGAP</h3>
|
||||||
<p><span class="degree">Technical and computer support</span><br><span class="time-range">2016, one week</span></p>
|
<p><span class="degree">Technical and computer support</span><br><span class="time-range">2016, one week</span></p>
|
||||||
<p>
|
<p>
|
||||||
My objectives were to determine technical solutions and recommendations and to communicate them to the users, to analyze technical problems, to inform the users of the technical problems found and of the modifications and repairs to be made, to train users to a product or an equipment and to carry out the technical follow-up of the products and their evolution with the users.
|
My objectives were to determine technical solutions and recommendations and to communicate them to the users, to analyze technical problems, to inform the users of the technical problems found and of the modifications and repairs to be made, to train users to a product or an equipment and to carry out the technical follow-up of the products and their evolution with the users.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="to-fade" id="projects">
|
<section class="to-fade" id="projects">
|
||||||
<h2>Projects</h2>
|
<h2>Projects</h2>
|
||||||
<div class="projects-list">
|
<div class="projects-list">
|
||||||
<div>
|
<div>
|
||||||
<article class="pong2D to-slide">
|
<article class="pong2D to-slide">
|
||||||
<div class="plus-button">
|
<div class="plus-button">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<article class="pong3D to-slide">
|
<article class="pong3D to-slide">
|
||||||
<div class="plus-button">
|
<div class="plus-button">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<article class="risitasBot to-slide">
|
<article class="risitasBot to-slide">
|
||||||
<div class="plus-button">
|
<div class="plus-button">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<article class="riverwood to-slide">
|
<article class="riverwood to-slide">
|
||||||
<div class="plus-button">
|
<div class="plus-button">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<article class="thesesFr to-slide">
|
<article class="thesesFr to-slide">
|
||||||
<div class="plus-button">
|
<div class="plus-button">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<span class="background-hider bgh-off" onclick="javascript:switchArticle(null)"></span>
|
<span class="background-hider bgh-off" onclick="javascript:switchArticle(null)"></span>
|
||||||
|
|
||||||
<!-- ---------- Articles contents ---------- -->
|
<!-- ---------- Articles contents ---------- -->
|
||||||
|
|
||||||
<div id="pong2D" class="article-content ">
|
<div id="pong2D" class="article-content ">
|
||||||
<img loading="lazy" src="assets/imgs/Pong2D-video.webp" alt="Pong2D">
|
<img loading="lazy" src="assets/imgs/Pong2D-video.webp" alt="Pong2D">
|
||||||
<h3>Pong2D</h3>
|
<h3>Pong2D</h3>
|
||||||
<p>
|
<p>
|
||||||
My first project in Python (with Pygame). It's a simple pong, with a main menu, a pause menu and a game over.
|
My first project in Python (with Pygame). It's a simple pong, with a main menu, a pause menu and a game over.
|
||||||
</p>
|
</p>
|
||||||
<a rel="noopener" target="_blank" href="https://github.com/Floriansylvain/Pong">
|
<a rel="noopener" target="_blank" href="https://github.com/Floriansylvain/Pong">
|
||||||
Go to GitHub Project
|
Go to GitHub Project
|
||||||
</a>
|
</a>
|
||||||
<a onclick="javascript:switchArticle(null)">Close</a>
|
<a onclick="javascript:switchArticle(null)">Close</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="pong3D" class="article-content">
|
<div id="pong3D" class="article-content">
|
||||||
<img loading="lazy" src="assets/imgs/Pong3D-video.webp" alt="Pong3D">
|
<img loading="lazy" src="assets/imgs/Pong3D-video.webp" alt="Pong3D">
|
||||||
<h3>Pong3D</h3>
|
<h3>Pong3D</h3>
|
||||||
<p>
|
<p>
|
||||||
My very first project on Unity. It's a simple pong with some effects and a rather calm atmosphere.
|
My very first project on Unity. It's a simple pong with some effects and a rather calm atmosphere.
|
||||||
</p>
|
</p>
|
||||||
<a rel="noopener" target="_blank" href="https://github.com/Floriansylvain/Pong3D">
|
<a rel="noopener" target="_blank" href="https://github.com/Floriansylvain/Pong3D">
|
||||||
Go to GitHub Project
|
Go to GitHub Project
|
||||||
</a>
|
</a>
|
||||||
<a rel="noopener" target="_blank" href="https://floriansylvain.fr/Pong3D/index.html">
|
<a rel="noopener" target="_blank" href="https://floriansylvain.fr/Pong3D/index.html">
|
||||||
Play
|
Play
|
||||||
</a>
|
</a>
|
||||||
<a onclick="javascript:switchArticle(null)">Close</a>
|
<a onclick="javascript:switchArticle(null)">Close</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="risitasBot" class="article-content">
|
<div id="risitasBot" class="article-content">
|
||||||
<img loading="lazy" src="assets/imgs/RisitasBot-video.webp" alt="Risitas_Bot">
|
<img loading="lazy" src="assets/imgs/RisitasBot-video.webp" alt="Risitas_Bot">
|
||||||
<h3>Risitas Bot</h3>
|
<h3>Risitas Bot</h3>
|
||||||
<p>
|
<p>
|
||||||
Risitas_Bot is a Discord bot that can connect your Twitch chat to a Discord channel in real time, make your friends laugh by playing the meme "Issou!" on command in a voice channel and even give you some statistics about your Osu! account and last ranked games.
|
Risitas_Bot is a Discord bot that can connect your Twitch chat to a Discord channel in real time, make your friends laugh by playing the meme "Issou!" on command in a voice channel and even give you some statistics about your Osu! account and last ranked games.
|
||||||
</p>
|
</p>
|
||||||
<a rel="noopener" target="_blank" href="https://github.com/Floriansylvain/Risitas_Bot">
|
<a rel="noopener" target="_blank" href="https://github.com/Floriansylvain/Risitas_Bot">
|
||||||
Go to GitHub Project
|
Go to GitHub Project
|
||||||
</a>
|
</a>
|
||||||
<a onclick="javascript:switchArticle(null)">Close</a>
|
<a onclick="javascript:switchArticle(null)">Close</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="riverwood" class="article-content">
|
<div id="riverwood" class="article-content">
|
||||||
<img loading="lazy" src="assets/imgs/Riverwood-video.webp" alt="Riverwood">
|
<img loading="lazy" src="assets/imgs/Riverwood-video.webp" alt="Riverwood">
|
||||||
<h3>Riverwood</h3>
|
<h3>Riverwood</h3>
|
||||||
<p>
|
<p>
|
||||||
Work of students of DUT info 1 (IUT of Marne-la-Vallée). The students had to create a sound production inspired by the short film "Calls" by Timothée Hochet.
|
Work of students of DUT info 1 (IUT of Marne-la-Vallée). The students had to create a sound production inspired by the short film "Calls" by Timothée Hochet.
|
||||||
</p>
|
</p>
|
||||||
<a rel="noopener" target="_blank" href="https://www.youtube.com/watch?v=TGBN_lxMbSM">
|
<a rel="noopener" target="_blank" href="https://www.youtube.com/watch?v=TGBN_lxMbSM">
|
||||||
Watch on YouTube
|
Watch on YouTube
|
||||||
</a>
|
</a>
|
||||||
<a onclick="javascript:switchArticle(null)">Close</a>
|
<a onclick="javascript:switchArticle(null)">Close</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="thesesFr" class="article-content">
|
<div id="thesesFr" class="article-content">
|
||||||
<img loading="lazy" src="assets/imgs/ThesesFr-video.webp" alt="theses.fr">
|
<img loading="lazy" src="assets/imgs/ThesesFr-video.webp" alt="theses.fr">
|
||||||
<h3>thèses.fr</h3>
|
<h3>thèses.fr</h3>
|
||||||
<p>
|
<p>
|
||||||
The goal was to retrieve the dataset provided by theses.fr, to normalize it, and to create a site allowing to consult these data, first in the form of a simple but visually pleasant list, then in a second time to summarize the research in the form of graphics (and a map).
|
The goal was to retrieve the dataset provided by theses.fr, to normalize it, and to create a site allowing to consult these data, first in the form of a simple but visually pleasant list, then in a second time to summarize the research in the form of graphics (and a map).
|
||||||
</p>
|
</p>
|
||||||
<a rel="noopener" target="_blank" href="https://projet.floriansylvain.fr/ProjetProgWeb/">
|
<a rel="noopener" target="_blank" href="https://projet.floriansylvain.fr/ProjetProgWeb/">
|
||||||
Visit WebSite
|
Visit WebSite
|
||||||
</a>
|
</a>
|
||||||
<a onclick="javascript:switchArticle(null)">Close</a>
|
<a onclick="javascript:switchArticle(null)">Close</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- --------- END Articles contents --------- -->
|
<!-- --------- END Articles contents --------- -->
|
||||||
|
|
||||||
<section class="to-fade" id="hobbies">
|
<section class="to-fade" id="hobbies">
|
||||||
<h2>Hobbies</h2>
|
<h2>Hobbies</h2>
|
||||||
<p>🚧 Work in progress 🚧</p>
|
<p>🚧 Work in progress 🚧</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="to-fade" id="contact">
|
<section class="to-fade" id="contact">
|
||||||
<h2>Contact</h2>
|
<h2>Contact</h2>
|
||||||
<p>
|
<p>
|
||||||
You can contact me by email at <a href="mailto:floriansylvainpro@gmail.com">floriansylvainpro@gmail.com</a> or by phone at <a href="tel:0695208226">(+33) 06 95 20 82 26</a>.
|
You can contact me by email at <a href="mailto:floriansylvainpro@gmail.com">floriansylvainpro@gmail.com</a> or by phone at <a href="tel:0695208226">(+33) 06 95 20 82 26</a>.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<a href="#landing">
|
<a href="#landing">
|
||||||
<div id="scrollToTop" class="scroll-to-top">
|
<div id="scrollToTop" class="scroll-to-top">
|
||||||
|
|
||||||
<svg class="scroll-to-top" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
<svg class="scroll-to-top" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||||
<path class="scroll-to-top" d="M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z"/>
|
<path class="scroll-to-top" d="M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<a rel="noopener" target="_blank" href="https://www.linkedin.com/in/florian-sylvain-0651021a9">
|
<a rel="noopener" target="_blank" href="https://www.linkedin.com/in/florian-sylvain-0651021a9">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
|
||||||
</a>
|
</a>
|
||||||
<a rel="noopener" target="_blank" href="https://github.com/Floriansylvain">
|
<a rel="noopener" target="_blank" href="https://github.com/Floriansylvain">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
||||||
</a>
|
</a>
|
||||||
<p class="lang-selection">
|
<p class="lang-selection">
|
||||||
<a class="selected" href="https://floriansylvain.fr/index.html">EN</a> /
|
<a class="selected" href="https://floriansylvain.fr/index.html">EN</a> /
|
||||||
<a href="https://floriansylvain.fr/fr/index.html">FR</a>
|
<a href="https://floriansylvain.fr/fr/index.html">FR</a>
|
||||||
</p>
|
</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<script type="text/javascript" src="script.js"></script>
|
<script type="text/javascript" src="script.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
+5
-11
@@ -1,14 +1,4 @@
|
|||||||
@font-face {
|
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&family=Overpass+Mono:wght@400;700&display=swap');
|
||||||
font-family: 'Manrope';
|
|
||||||
src: url('assets/fonts/Manrope-VariableFont_wght.ttf') format('truetype');
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Overpass';
|
|
||||||
src: url('assets/fonts/OverpassMono-VariableFont_wght.ttf') format('truetype');
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--accent-color: #3AC414;
|
--accent-color: #3AC414;
|
||||||
@@ -557,6 +547,10 @@ a {
|
|||||||
transform: scale(1.05);
|
transform: scale(1.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
strong, b {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
/* Title fix */
|
/* Title fix */
|
||||||
@media (min-width: 522px) {
|
@media (min-width: 522px) {
|
||||||
.main-title h1 {
|
.main-title h1 {
|
||||||
|
|||||||
Reference in New Issue
Block a user