romain.fillot
/
romain-fillot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '61bf6c9288'
${ noResults }
romain-fillot/index.html

388 lines
17 KiB
Raw Blame History

<!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 rel="stylesheet" href="style.css">
</head>
<body>
<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 626x626">
</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 apparue 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 ami(e)s et
je m'intéresse depuis peu à deux nouveaux domaines qui me passionnent : 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="serv-content"> -->
<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;">
</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;">
</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;">
</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>
<!-- Skills -->
<!-- <section class="skills" id="skills">
<div class="max-width">
<h2 class="title">My Skills</h2>
<div class="skills-content">
<div class="column left">
<div class="text">INTERNSHIP</div>
<p>
<li class="intern">contentstack</li>
<li class="intern">Pensil- as a test analyst</li>
<li class="intern"></li>
</p>
<br>
<div class="text">PROJECT</div>
<p>
<li class="project">Portfolio (HTML, CSS, js, Bootstraps)</li>
<li class="project">eCommerce Website (Shopify liquid-code, HTML, CSS)</li>
<li class="project">QuickShop - eCommerce Website (Like Amazon, Flipkart etc.)</li>
<li class="project">Fully Responsive Design Email Subscribe form</li>
<li class="project">Blog (HTML, CSS, Bootstraps)</li>
<li class="project">Currently Working on a Messaging App (Like WhatsApp)</li>
</p>
<br>
<div class="text">DEVELOPMENT SKILLS</div>
<p>
I'm familiar & work on a daily basis with HTML, CSS, JavaScript, Bootstrap, React js and other modern frameworks.
</p>
<a href="https://aistechx.com/" target="blank">Get Educate...</a>
</div>
<div class="column right">
<div class="bars">
<div class="info">
<span>Python</span>
<span>90%</span>
</div>
<div class="line python"></div>
</div>
<div class="bars">
<div class="info">
<span>HTML</span>
<span>80%</span>
</div>
<div class="line html"></div>
</div>
<div class="bars">
<div class="info">
<span>CSS</span>
<span>60%</span>
</div>
<div class="line css"></div>
</div>
<div class="bars">
<div class="info">
<span>JavaScript</span>
<span>40%</span>
</div>
<div class="line js"></div>
</div>
<div class="bars">
<div class="info">
<span>Bootstraps</span>
<span>60%</span>
</div>
<div class="line bootstraps"></div>
</div>
<div class="bars">
<div class="info">
<span>Django</span>
<span>70%</span>
</div>
<div class="line django"></div>
</div>
</div>
</div>
</div>
</section> -->
<!-- Projects -->
<!-- <section class="projects" id="projects">
<div class="max-width">
<h2 class="title">My Projects</h2>
<div class="carousel owl-carousel">
<div class="card">
<div class="box">
<img src="https://source.unsplash.com/720x600/?shopping" alt="">
<div class="text">Ecommerce</div>
<p>#Project Details:- Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="https://source.unsplash.com/720x600/?portfolio" alt="">
<div class="text">Portfolio</div>
<p>#Project Details:- Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="https://source.unsplash.com/720x600/?blog" alt="">
<div class="text">Blog</div>
<p>#Project Details:- Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="https://source.unsplash.com/720x600/?messanger" alt="">
<div class="text">Messaging App</div>
<p>#Project Details:- Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="https://source.unsplash.com/720x600/?app-clone" alt="">
<div class="text">Clone</div>
<p>#Project Details:- Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="https://source.unsplash.com/720x600/?code,demo" alt="">
<div class="text">Demo</div>
<p>#Project Details:- Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</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="column left">
<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">&nbsp;Adresse</div>
<div class="sub-title">&nbsp;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>
<!-- <li><a href="https://twitter.com/___kaaashx___/"><i class="fa-brands fa-twitter"></i></a></li> -->
<!-- <li><a href="https://aistechx.com/" title="Get Educate with Us"><i class="fa-solid fa-graduation-cap"></i></a></li> -->
</ul>
</div>
</div>
</div>
<!-- Reach -->
<div class="column right reach">
<div class="text">Formulaire </div>
<form action="#">
<div class="fields">
<div class="field name">
<input type="text" placeholder="Votre nom" required>
</div>
<div class="field email">
<input type="email" placeholder="Votre email" required>
</div>
</div>
<div class="field">
<input type="text" placeholder="Sujet" required>
</div>
<div class="field textarea">
<textarea cols="30" rows="10" placeholder="Message.." required></textarea>
</div>
<div class="button-area">
<button type="submit">Envoyer</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<span>
<a href="https://www.linkedin.com/in/paithankarvarad">
Fillot Romain</a> | <span class="far fa-copyright"></span> 2024 All Rights Reserved. Privacy Policy
</span>
</footer>
<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>
Reference in new issue View Git Blame Copy Permalink