Files
portfolio/index.html
T
2022-02-08 01:35:35 +01:00

249 lines
13 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>
<header>
<nav>
<a href="#about">About</a>
<a href="#education">Education</a>
<a href="#experience">Experience</a>
<a href="#projects">Projects</a>
<a href="#hobbies">Hobbies</a>
<a href="#contact">Contact</a>
</nav>
<div class="hamburger" onclick="switchNavBar()">
<span></span>
<span></span>
</div>
</header>
<div id="landing" class="main-title">
<h1>
<a href="#about">
Florian Sylvain
</a>
</h1>
</div>
<div id="content">
<div 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>
IT student at Gustave Eiffel University and R&D Developer Apprentice at WATT Earth, I've always been passionate about computer science. Web design, video games, and algorithms are my main spearhead in computer science.
</p>
</div>
</div>
<div class="to-fade" id="education">
<h2>Education</h2>
<div class="to-slide">
<h3>Gustave Eiffel University</h3>
<p><span class="degree">DUT Informatique</span><br><span class="time-range">Sept. 2020 - Sept. 2022</span></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.
</p>
</div>
<div class="to-slide">
<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>
Training in industry and technological innovation with respect to the preservation of the environment.
</p>
</div>
</div>
<div class="to-fade" id="experience">
<h2>Experience</h2>
<div class="to-slide">
<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>Contribute to the design and development of innovative features at the heart of WATT Earth products.</p>
</div>
<div class="to-slide">
<h3>UGAP</h3>
<p><span class="degree">Technical and computer support</span><br><span class="time-range">2016, one week</span></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.
</p>
</div>
</div>
<div class="to-fade" id="projects">
<h2>Projects</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="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="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>
<span class="background-hider bgh-off" onclick="javascript:switchArticle(null)"></span>
<!-- ---------- Articles contents ---------- -->
<div id="pong2D" class="article-content ">
<img loading="lazy" src="assets/imgs/Pong2D-video.webp" alt="Pong2D">
<h3>Pong2D</h3>
<p>
My first project in Python (with Pygame). It's a simple pong, with a main menu, a pause menu and a game over.
</p>
<a rel="noopener" target="_blank" href="https://github.com/Floriansylvain/Pong">
Go to GitHub Project
</a>
<a onclick="javascript:switchArticle(null)">Close</a>
</div>
<div id="pong3D" class="article-content">
<img loading="lazy" src="assets/imgs/Pong3D-video.webp" alt="Pong3D">
<h3>Pong3D</h3>
<p>
My very first project on Unity. It's a simple pong with some effects and a rather calm atmosphere.
</p>
<a rel="noopener" target="_blank" href="https://github.com/Floriansylvain/Pong3D">
Go to GitHub Project
</a>
<a rel="noopener" target="_blank" href="https://floriansylvain.fr/Pong3D/index.html">
Play
</a>
<a onclick="javascript:switchArticle(null)">Close</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 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>
<a rel="noopener" target="_blank" href="https://github.com/Floriansylvain/Risitas_Bot">
Go to GitHub Project
</a>
<a onclick="javascript:switchArticle(null)">Close</a>
</div>
<div id="riverwood" class="article-content">
<img loading="lazy" src="assets/imgs/Riverwood-video.webp" alt="Riverwood">
<h3>Riverwood</h3>
<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.
</p>
<a rel="noopener" target="_blank" href="https://www.youtube.com/watch?v=TGBN_lxMbSM">
Watch on YouTube
</a>
<a onclick="javascript:switchArticle(null)">Close</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>
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>
<a rel="noopener" target="_blank" href="https://projet.floriansylvain.fr/ProjetProgWeb/">
Visit WebSite
</a>
<a onclick="javascript:switchArticle(null)">Close</a>
</div>
<!-- --------- END Articles contents --------- -->
<div class="to-fade" id="hobbies">
<h2>Hobbies</h2>
<p>🚧 Work in progress 🚧</p>
</div>
<div class="to-fade" id="contact">
<h2>Contact</h2>
<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>.
</p>
</div>
</div>
<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>
</footer>
<script type="text/javascript" src="script.js"></script>
</body>
</html>