This commit is contained in:
Florian Sylvain
2023-04-11 09:30:32 +02:00
5 changed files with 446 additions and 441 deletions
+238 -232
View File
@@ -2,57 +2,57 @@
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description"
content="Portfolio de Florian Sylvain, étudiant en DUT Informatique, Apprenti développeur R&D chez WATT Earth.">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description"
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">
<noscript>
<link rel="stylesheet" type="text/css" href="stylesheet-imgs.css">
</noscript>
<link rel="stylesheet" type="text/css" href="../stylesheet-main.css">
<noscript>
<link rel="stylesheet" type="text/css" href="stylesheet-imgs.css">
</noscript>
<title>Florian Sylvain</title>
<title>Florian Sylvain</title>
</head>
<body>
<header>
<nav>
<a href="#about">À propos</a>
<a href="#education">Études</a>
<a href="#experience">Expérience</a>
<a href="#projects">Projets</a>
<a href="#hobbies">Hobbies</a>
<a href="#contact">Contact</a>
</nav>
<header>
<nav>
<a href="#about">À propos</a>
<a href="#education">Études</a>
<a href="#experience">Expérience</a>
<a href="#projects">Projets</a>
<a href="#hobbies">Hobbies</a>
<a href="#contact">Contact</a>
</nav>
<div class="hamburger" onclick="switchNavBar()">
<span></span>
<span></span>
</div>
<div class="hamburger" onclick="switchNavBar()">
<span></span>
<span></span>
</div>
</header>
</header>
<div id="landing" class="main-title">
<h1>
<a href="#about">
Florian Sylvain
</a>
</h1>
</div>
<div id="landing" class="main-title">
<h1>
<a href="#about">
Florian Sylvain
</a>
</h1>
</div>
<main id="content">
<main id="content">
<section class="to-fade" id="about">
<h2>About</h2>
<div class="block">
<img loading="lazy" class="to-grow" src="../assets/imgs/FlorianSylvain.webp" alt="Florian Sylvain">
<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.
</p>
</div>
</section>
<section class="to-fade" id="about">
<h2>About</h2>
<div class="block">
<img loading="lazy" class="to-grow" src="../assets/imgs/FlorianSylvain.webp" alt="Florian Sylvain">
<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.
</p>
</div>
</section>
<section class="to-fade" id="education">
<h2>Études</h2>
@@ -64,225 +64,231 @@
utiliser des API, intégrer des interfaces utilisateurs, mener à bien des projets de développement web.</p>
</div>
<div class="to-slide">
<h3>Université Gustave Eiffel</h3>
<p><span class="degree">DUT Informatique</span><br><span class="time-range">Sept. 2020 - Sept. 2022</span></p>
<p>
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,
é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.
</p>
</div>
<div class="to-slide">
<h3>Université Gustave Eiffel</h3>
<p><span class="degree">DUT Informatique</span><br><span class="time-range">Sept. 2020 - Sept. 2022</span></p>
<p>
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,
é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.
</p>
</div>
<div class="to-slide">
<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>
Formation à l'industrie et à l'innovation technologique en matière de préservation de l'environnement.
</p>
</div>
<div class="to-slide">
<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>
Formation à l'industrie et à l'innovation technologique en matière de préservation de l'environnement.
</p>
</div>
</section>
</section>
<section class="to-fade" id="experience">
<h2>Expérience</h2>
<section class="to-fade" id="experience">
<h2>Expérience</h2>
<div class="to-slide">
<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>Contribuer à la conception et au développement de fonctionnalités innovantes au cœur des produits WATT Earth.</p>
</div>
<div class="to-slide">
<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>
Jai 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 queux), 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 lintégration de technologies dans la olution de l'entreprise, correspondant aux
besoin client (Modbus, LoRaWAN, Zigbee...).
</p>
</div>
<div class="to-slide">
<h3>UGAP</h3>
<p><span class="degree">Support technique et informatique</span><br><span class="time-range">2016, une semaine</span></p>
<p>
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
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.
</p>
</div>
<div class="to-slide">
<h3>UGAP</h3>
<p><span class="degree">Support technique et informatique</span><br><span class="time-range">2016, une semaine</span></p>
<p>
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
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.
</p>
</div>
</section>
</section>
<section class="to-fade" id="projects">
<h2>Projets</h2>
<div class="projects-list">
<div>
<article class="pong2D to-slide">
<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>
</div>
</article>
</div>
<section class="to-fade" id="projects">
<h2>Projets</h2>
<div class="projects-list">
<div>
<article class="pong2D to-slide">
<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>
</div>
</article>
</div>
<div>
<article class="pong3D to-slide">
<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>
</div>
</article>
</div>
<div>
<article class="pong3D to-slide">
<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>
</div>
</article>
</div>
<div>
<article class="risitasBot to-slide">
<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>
</div>
</article>
</div>
<div>
<article class="risitasBot to-slide">
<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>
</div>
</article>
</div>
<div>
<article class="riverwood to-slide">
<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>
</div>
</article>
</div>
<div>
<article class="riverwood to-slide">
<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>
</div>
</article>
</div>
<div>
<article class="thesesFr to-slide">
<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>
</div>
</article>
</div>
<div>
<article class="thesesFr to-slide">
<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>
</div>
</article>
</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 ">
<img loading="lazy" src="../assets/imgs/Pong2D-video.webp" alt="Pong2D">
<h3>Pong2D</h3>
<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.
</p>
<a rel="noopener" target="_blank" href="https://github.com/Floriansylvain/Pong">
Aller vers le dépôt GitHub
</a>
<a onclick="javascript:switchArticle(null)">Fermer</a>
</div>
<div id="pong2D" class="article-content ">
<img loading="lazy" src="../assets/imgs/Pong2D-video.webp" alt="Pong2D">
<h3>Pong2D</h3>
<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.
</p>
<a rel="noopener" target="_blank" href="https://github.com/Floriansylvain/Pong">
Aller vers le dépôt GitHub
</a>
<a onclick="javascript:switchArticle(null)">Fermer</a>
</div>
<div id="pong3D" class="article-content">
<img loading="lazy" src="../assets/imgs/Pong3D-video.webp" alt="Pong3D">
<h3>Pong3D</h3>
<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.
</p>
<a rel="noopener" target="_blank" href="https://github.com/Floriansylvain/Pong3D">
Aller vers le dépôt GitHub
</a>
<a rel="noopener" target="_blank" href="https://floriansylvain.fr/Pong3D/index.html">
Jouer
</a>
<a onclick="javascript:switchArticle(null)">Fermer</a>
</div>
<div id="pong3D" class="article-content">
<img loading="lazy" src="../assets/imgs/Pong3D-video.webp" alt="Pong3D">
<h3>Pong3D</h3>
<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.
</p>
<a rel="noopener" target="_blank" href="https://github.com/Floriansylvain/Pong3D">
Aller vers le dépôt GitHub
</a>
<a rel="noopener" target="_blank" href="https://floriansylvain.fr/Pong3D/index.html">
Jouer
</a>
<a onclick="javascript:switchArticle(null)">Fermer</a>
</div>
<div id="risitasBot" class="article-content">
<img loading="lazy" src="../assets/imgs/RisitasBot-video.webp" alt="Risitas_Bot">
<h3>Risitas Bot</h3>
<p>
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
compte Osu, ainsi que sur vos dernière parties classées !
</p>
<a rel="noopener" target="_blank" href="https://github.com/Floriansylvain/Risitas_Bot">
Aller vers le dépôt GitHub
</a>
<a onclick="javascript:switchArticle(null)">Fermer</a>
</div>
<div id="risitasBot" class="article-content">
<img loading="lazy" src="../assets/imgs/RisitasBot-video.webp" alt="Risitas_Bot">
<h3>Risitas Bot</h3>
<p>
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
compte Osu, ainsi que sur vos dernière parties classées !
</p>
<a rel="noopener" target="_blank" href="https://github.com/Floriansylvain/Risitas_Bot">
Aller vers le dépôt GitHub
</a>
<a onclick="javascript:switchArticle(null)">Fermer</a>
</div>
<div id="riverwood" class="article-content">
<img loading="lazy" src="../assets/imgs/Riverwood-video.webp" alt="Riverwood">
<h3>Riverwood</h3>
<p>
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.
</p>
<a rel="noopener" target="_blank" href="https://www.youtube.com/watch?v=TGBN_lxMbSM">
Regarder sur YouTube
</a>
<a onclick="javascript:switchArticle(null)">Fermer</a>
</div>
<div id="riverwood" class="article-content">
<img loading="lazy" src="../assets/imgs/Riverwood-video.webp" alt="Riverwood">
<h3>Riverwood</h3>
<p>
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.
</p>
<a rel="noopener" target="_blank" href="https://www.youtube.com/watch?v=TGBN_lxMbSM">
Regarder sur YouTube
</a>
<a onclick="javascript:switchArticle(null)">Fermer</a>
</div>
<div id="thesesFr" class="article-content">
<img loading="lazy" src="../assets/imgs/ThesesFr-video.webp" alt="theses.fr">
<h3>thèses.fr</h3>
<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
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.
</p>
<a rel="noopener" target="_blank" href="https://projet.floriansylvain.fr/ProjetProgWeb/">
Visiter le site
</a>
<a onclick="javascript:switchArticle(null)">Fermer</a>
</div>
<div id="thesesFr" class="article-content">
<img loading="lazy" src="../assets/imgs/ThesesFr-video.webp" alt="theses.fr">
<h3>thèses.fr</h3>
<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
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.
</p>
<a rel="noopener" target="_blank" href="https://projet.floriansylvain.fr/ProjetProgWeb/">
Visiter le site
</a>
<a onclick="javascript:switchArticle(null)">Fermer</a>
</div>
<!-- --------- END Articles contents --------- -->
<!-- --------- END Articles contents --------- -->
<section class="to-fade" id="hobbies">
<h2>Hobbies</h2>
<p>🚧 Travaux en cours 🚧</p>
</section>
<section class="to-fade" id="hobbies">
<h2>Hobbies</h2>
<p>🚧 Travaux en cours 🚧</p>
</section>
<section class="to-fade" id="contact">
<h2>Contact</h2>
<p>
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="tel:0695208226">(+33) 06 95 20 82 26</a>.
</p>
</section>
<section class="to-fade" id="contact">
<h2>Contact</h2>
<p>
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="tel:0695208226">(+33) 06 95 20 82 26</a>.
</p>
</section>
</main>
</main>
<a href="#landing">
<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">
<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>
</div>
</a>
<a href="#landing">
<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">
<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>
</div>
</a>
<footer>
<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>
</a>
<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>
</a>
<p class="lang-selection">
<a href="https://floriansylvain.fr/index.html">EN</a> /
<a class="selected" href="https://floriansylvain.fr/fr/index.html">FR</a>
</p>
</footer>
<footer>
<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>
</a>
<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>
</a>
<p class="lang-selection">
<a href="https://floriansylvain.fr/index.html">EN</a> /
<a class="selected" href="https://floriansylvain.fr/fr/index.html">FR</a>
</p>
</footer>
<script type="text/javascript" src="../script.js"></script>
<script type="text/javascript" src="../script.js"></script>
</body>