Added context to WE part

This commit is contained in:
Florian Sylvain
2022-11-03 22:31:30 +01:00
parent 69fa33b2a8
commit 5604662972
2 changed files with 451 additions and 441 deletions
+239 -234
View File
@@ -2,280 +2,285 @@
<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>
<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> <ul>
</div> <li>Conception et développement de fonctionnalités innovantes au cœur des produits WATT Earth (<b>Python</b>, <b>VueJS</b>, <b>Go</b>, <b>PhP</b>, <b>MySql</b>, <b>Warp10</b>, <b>Grafana</b>)</li>
<li>Maquettage et conception d'interfaces utilisateurs (<b>Figma</b>)</li>
<li>Réalisation de spécifications et de cahiers de recettes</li>
<li>Intégration de technologies dans la solution de l'entreprise, correspondant aux besoin client (<b>Modbus</b>, <b>LoRaWAN</b>, <b>Zigbee</b>...)</li>
</ul>
</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>
+212 -207
View File
@@ -1,253 +1,258 @@
<!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>
<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>
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>
<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> <ul>
</div> <li>Design and development of innovative features at the heart of WATT Earth products (<b>Python</b>, <b>VueJS</b>, <b>Go</b>, <b>PhP</b>, <b>MySql</b>, <b>Warp10</b>, <b>Grafana</b>)</li>
<li>Mock-up and user interface design (<b>Figma</b>)</li>
<li>Production of specifications and recipe books</li>
<li>Integration of technologies into the company's solution, corresponding to the customer's needs (<b>Modbus</b>, <b>LoRaWAN</b>, <b>Zigbee</b>...)</li>
</ul>
</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>