You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
239 lines
10 KiB
239 lines
10 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Mon portfolio</title>
|
|
|
|
<!-- Link CSS -->
|
|
<link rel="stylesheet" href="style.css">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- Button scroll -->
|
|
<div class="scroll-up-btn">
|
|
<i class="fas fa-angle-up"></i>
|
|
</div>
|
|
|
|
<!-- Header -->
|
|
<nav class="navbar">
|
|
<div class="max-width">
|
|
<div class="logo"><a href="#"><span>romain-fillot.fr</span><span></span></a></div>
|
|
<ul class="menu">
|
|
<li><a href="#home" class="menu-btn"><strong>Accueil</strong></a></li>
|
|
<li><a href="#about" class="menu-btn"><strong>A propos</strong></a></li>
|
|
<li><a href="#services" class="menu-btn"><strong>Expériences</strong></a></li>
|
|
<li><a href="#contact" class="menu-btn"><strong>Contact</strong></a></li>
|
|
</ul>
|
|
<div class="menu-btn">
|
|
<i class="fas fa-bars"></i>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Home -->
|
|
<section class="home" id="home">
|
|
<div class="max-width">
|
|
<div class="home-content">
|
|
<div class="text-1">Bonjour, Je m'appelle</div>
|
|
<div class="text-2">Fillot Romain</div>
|
|
<div class="text-3">Et je suis alternant en informatique <span class="typing"></span></div>
|
|
<a href="#about">A propos de moi</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About -->
|
|
<section class="about" id="about">
|
|
<div class="max-width">
|
|
<h2 class="title">A propos de moi</h2>
|
|
<div class="about-content">
|
|
<div class="column left">
|
|
<img src="./images/picture-profil_2.jpg" alt="Profile Image">
|
|
</div>
|
|
<div class="column right">
|
|
<div class="text">Moi c'est Romain <span class="typing-2"></span></div>
|
|
<p>
|
|
Passionné d'informatique, j'ai découvert ce domaine lors de ma première année de lycée,
|
|
en seconde. En effet, j'ai opté pour l'option ICN qui m'a permis de faire mon premier
|
|
pas dans ce monde fabuleux. J'ai pu y découvrir les bases du fonctionnement d'un ordinateur
|
|
ainsi que le langage python.
|
|
<br><br>
|
|
J'ai beaucoup apprécié cette option, qui m'est apparu dans un premier temps très
|
|
obscure et compliquée. Néanmoins, cela n'a pas suffi pour me décourager étant donné
|
|
que je suis en 3e année d'IUT informatique. Bien entendu, je ne m'arrête pas en si bon chemin. L'année
|
|
prochaine, c'est parti pour deux ans supplémentaires en
|
|
Mastère informatique à l'école Hexagone. Cette fois-ci, je me spécialise un peu en me
|
|
tournant vers la filière "Architecture des Systèmes d'information".
|
|
<br><br>
|
|
Pendant mon temps libre, je ne fais pas que de l'informatique. J'aime beaucoup le sport
|
|
(pratiquant de musculation depuis presque 6 ans), je sors souvent avec mes amis et
|
|
je m'intéresse depuis peu à deux nouveaux domaines passionnant : les
|
|
cryptomonnaies avec tout ce qui se cache derrière (NFT, blockchain, DeFi...) et les
|
|
voitures (vieilles voitures, mécanique...).
|
|
</p>
|
|
<br>
|
|
<a href="CV-RomainFillot.pdf" target="blank" download>Télécharger CV</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Services -->
|
|
<section class="services" id="services">
|
|
<div class="max-width">
|
|
<h2 class="title">Mes expériences</h2>
|
|
<div class="carousel-container">
|
|
<div class="carousel-slide active" id="slide-1">
|
|
<h2>Stage au Canada</h2>
|
|
<div class="carousel-container-img">
|
|
<div class="carousel-img">
|
|
<img src="./images/UQAC.png" style="width: 100%; border-radius: 15px;" alt="image de l'UQAC">
|
|
</div>
|
|
<div class="carousel-text">
|
|
J'ai réalisé mon premiers stage au canada
|
|
à l'UQAC d'une durée de 2 mois. Ce projet consistait en la reconnaissance de geste
|
|
de cuisine à l'aide d'un bracelet polar et d'un modèle d'apprentissage.
|
|
<br><br>
|
|
Je l'ai réalisé
|
|
avec un camarade de l'iut. J'ai énormément apprécié ce projet car j'ai été confronté à
|
|
des problèmes réels liés à la qualité des données, à leur traitement et à
|
|
leur interprétation, ce qui explique l'utilisation du langage Python ainsi que
|
|
de la bibliothèque auto_sklearn. Ce stage m'a fait découvrir une véritable passion pour
|
|
l'analyse et la gestion des données, ainsi que pour l'intelligence artificielle avec
|
|
l'apprentissage automatique.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-slide" id="slide-2">
|
|
<h2>Alternance chez Matussière Toiles</h2>
|
|
<div class="carousel-container-img">
|
|
<div class="carousel-img">
|
|
<img src="./images/store-toile.png" style="width: 100%; border-radius: 15px;"
|
|
alt="image de toile de store">
|
|
</div>
|
|
<div class="carousel-text">
|
|
Ma deuxième expérience, plus professionnalisante est ma 3 ème année d'IUT
|
|
informatique que je réalise actuellement en alternance chez Matussière-toiles. Cette
|
|
entreprise est spécialisée dans la production et la distribution de protection solaire extérieure.
|
|
Pour vendre leur produit, ils utilisent un site internet.
|
|
<br><br>
|
|
Ma mission d'alternance consiste en la refonte du site web car il n'est plus au goût du jour et ne
|
|
peut se positionner face à la concurrence. Pour mener à bien ce projet, j'utilise
|
|
les langages tels que PHP, JavaScript et HTML/CSS. Etant seul à piloter le projet,
|
|
je dois faire preuve d'autonomie et de sérieux.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-slide" id="slide-3">
|
|
<h2>Vendeur chez E.Leclerc</h2>
|
|
<div class="carousel-container-img">
|
|
<div class="carousel-img">
|
|
<img src="./images/leclerc.png" style="width: 100%; border-radius: 15px;"
|
|
alt="image d'un magasin leclerc">
|
|
</div>
|
|
<div class="carousel-text">
|
|
J'ai eu l'occasion de travailler plusieurs fois chez E. Leclerc en tant
|
|
que vendeur. Mon premier emploi remonte à 2022, où j'ai passé un mois au
|
|
rayon traiteur. Cette expérience a été extrêmement enrichissante, notamment
|
|
en termes de communication et d'autonomie. Dès la première semaine, j'ai dû
|
|
gérer le stand seul pendant plusieurs heures. Il était également nécessaire
|
|
d'être attentif aux besoins des clients pour leur offrir le meilleur service.
|
|
<br><br>
|
|
Ma deuxième expérience a eu lieu à la fin de 2023, pendant la période de Noël,
|
|
où j'ai alterné entre le rayon de la poissonnerie et celui de la saurisserie.
|
|
J'ai dû m'adapter rapidement et démontrer ma capacité
|
|
à agir de manière autonome.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-buttons">
|
|
<button onclick="showSlide(1)">1</button>
|
|
<button onclick="showSlide(2)">2</button>
|
|
<button onclick="showSlide(3)">3</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact -->
|
|
<section class="contact" id="contact">
|
|
<div class="max-width">
|
|
<h2 class="title">Me contacter</h2>
|
|
<div class="contact-content">
|
|
|
|
<!-- <div class="text">Entrer en contact</div> -->
|
|
<p>
|
|
N'hésitez pas à me contacter ! Je suis ouvert à toute discussion et ce serait avec
|
|
plaisir d'échanger avec des passionnés.
|
|
</p>
|
|
<div class="icons">
|
|
|
|
<a href="https://instagram.com/aistscience">
|
|
<div class="row">
|
|
<i class="fa-solid fa-user-large"></i>
|
|
<div class="info">
|
|
<div class="head">Nom</div>
|
|
<div class="sub-title"><a href="https://aistechx.com/" style="text-decoration: none; color: #333;">
|
|
Fillot Romain</a></div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<div class="row">
|
|
<i class="fa-solid fa-location-dot"></i>
|
|
<div class="info">
|
|
<div class="head"> Adresse</div>
|
|
<div class="sub-title"> Clermont-Ferrand</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<i class="fa-solid fa-envelope"></i>
|
|
<div class="info">
|
|
<div class="head">Email</div>
|
|
<div class="sub-title"><a href="mailto:#"
|
|
style="text-decoration: none; color: #333;">romain.fillot630@gmail.com</a></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<i class="fa-solid fa-globe"></i>
|
|
<div class="info">
|
|
<div class="head">Langue</div>
|
|
<div class="sub-title">Anglais opérationnel</div>
|
|
</div>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<!-- Social -->
|
|
<div class="social-menu">
|
|
<ul>
|
|
<li><a href="https://github.com/Destroyeur6315"><i class="fa-brands fa-github"></i></a></li>
|
|
<li><a href="https://www.linkedin.com/in/romain-fillot/"><i class="fa-brands fa-linkedin-in"></i></a></li>
|
|
<li><a href="https://www.instagram.com/romain.flt/"><i class="fa-brands fa-instagram"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<span>
|
|
Fillot Romain | <span class="far fa-copyright"></span> 2024 All Rights Reserved. Privacy Policy
|
|
</span>
|
|
</footer>
|
|
|
|
<!-- Script JS -->
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="main.js"></script>
|
|
<script src="https://kit.fontawesome.com/b29a4dce1b.js" crossorigin="anonymous"></script>
|
|
|
|
</body> |