|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<link rel="icon" href="./public/images/logoHR.png" type="image/x-icon">
|
|
|
<title>Hugo Rochelle</title>
|
|
|
<link rel="stylesheet" href="style.css">
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
|
|
|
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
|
|
|
<script src="index.js" defer></script>
|
|
|
</head>
|
|
|
<body>
|
|
|
|
|
|
<nav class="navbar">
|
|
|
<div class="max-width">
|
|
|
<a href="#" class="logo-container">
|
|
|
<img src="./public/images/logoHR.png" alt="Logo">
|
|
|
<div class="logo">Hugo Rochelle</div>
|
|
|
</a>
|
|
|
<ul class="menu">
|
|
|
<li><a href="#home" class="menu-btn">Home</a></li>
|
|
|
<li><a href="#about" class="menu-btn">À propos</a></li>
|
|
|
<li><a href="#formations" class="menu-btn">Formations</a></li>
|
|
|
<!-- <li><a href="#tech-skills" class="menu-btn">Tech Skills</a></li>
|
|
|
<li><a href="#skills-hobbies" class="menu-btn">Skills and Hobbies</a></li> -->
|
|
|
<li><a href="#contact" class="menu-btn">Contact</a></li>
|
|
|
<li><a href="./public/cv/CV_Hugo_ROCHELLE.pdf" target="_blank" download class="menu-btn">Mon CV</a></li>
|
|
|
</ul>
|
|
|
<button class="menu-btn">
|
|
|
<i class="fas fa-bars"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
</nav>
|
|
|
|
|
|
<!-- home section start -->
|
|
|
<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">Hugo Rochelle</div>
|
|
|
<div class="text-3">Et je suis un <span class="typing"></span></div>
|
|
|
<a href="#about">À propos de moi</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<!-- about section start -->
|
|
|
<section class="about" id="about">
|
|
|
<div class="max-width">
|
|
|
<h2 class="title">About Me</h2>
|
|
|
<div class="about-content">
|
|
|
<div class="column left">
|
|
|
<img src="./public/images/niagara.jpg" class="avatar" alt="my-avatar">
|
|
|
</div>
|
|
|
<div class="column right">
|
|
|
<div class="text">Je m'appelle Hugo Rochelle et je suis un <span class="typing-2"></span></div>
|
|
|
<p>
|
|
|
Salut ! Je suis un développeur junior de 20 ans. Depuis mon plus jeune âge, je suis très curieux et
|
|
|
j'adore découvrir et apprendre de nouvelles choses ou concepts. Je suis passionné d'Histoire et de sport,
|
|
|
j'adore écouter de la musique quand je marche, conduit et plus généralement tout le temps !
|
|
|
Voyager est aussi une autre de mes passions, j'ai nottamment vécu au Canada pendant 7 mois à Chicoutimi (QC)
|
|
|
pour mes études (en 2ème année de BUT), et c'est pour moi une expérience de vie très importante et que je chérie
|
|
|
beaucoup ! Après mes études j'aimerais beaucoup retourner au Canada, mais cette fois pour y travailler !
|
|
|
</p>
|
|
|
<br>
|
|
|
<p style="font-style: italic;">
|
|
|
Fun Fact: Cette photo a été prise au milieu des chutes Fer-à-Cheval (Chutes du Niagara), à la frontière entre les États-Unis et la Canada, et j'étais trempé !
|
|
|
</p>
|
|
|
<br/>
|
|
|
<a href="./public/cv/CV_Hugo_ROCHELLE.pdf" target="_blank" class="btn-download">Télécharger mon CV</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<!-- Formations section start -->
|
|
|
<section class="formations" id="formations">
|
|
|
<div class="max-width">
|
|
|
<h2 class="title">Formations</h2>
|
|
|
<div class="formations-content">
|
|
|
<a href="https://www.ecole-hexagone.com/fr/fr/cursus/architecture-des-si/" class="card" target="_blank">
|
|
|
<div class="box">
|
|
|
<div class="text">
|
|
|
<img src="./public/images/logo_hexagone.png" alt="Logo École Hexagone" class="formation-logo">
|
|
|
Mastère Architecture des Systèmes d’Information
|
|
|
</div>
|
|
|
<p>École Hexagone, Clermont-Ferrand<br>2024 - 2026</p>
|
|
|
<p class="description">Je vais suivre cette formation pendant 2 ans en alternance chez Euromaster</p>
|
|
|
</div>
|
|
|
</a>
|
|
|
<a href="https://www.uqac.ca/" class="card" target="_blank">
|
|
|
<div class="box">
|
|
|
<div class="text">
|
|
|
<img src="./public/images/uqac.png" alt="Logo UQAC" class="formation-logo">
|
|
|
Échange universitaire au Canada
|
|
|
</div>
|
|
|
<p>Université du Québec À Chicoutimi (UQAC), Canada, QC<br>2022 - 2023 (7 mois)</p>
|
|
|
<p class="description">Cette expérience à l'UQAC m'a permis de découvrir de nouvelles cultures et d'améliorer mes compétences en programmation et en gestion de projet.</p>
|
|
|
</div>
|
|
|
</a>
|
|
|
<a href="https://iut.uca.fr/formations/but-informatique-clermont" class="card" target="_blank">
|
|
|
<div class="box">
|
|
|
<div class="text">
|
|
|
<img src="./public/images/uca_logo.png" alt="Logo IUT Clermont Auvergne" class="formation-logo">
|
|
|
BUT Informatique
|
|
|
</div>
|
|
|
<p>IUT Clermont Auvergne, Aubière<br>2021 - 2024</p>
|
|
|
<p class="description">Durant cette formation, j'ai acquis des bases solides en développement web, en bases de données et en algorithmique.</p>
|
|
|
</div>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
|
<section class="services" id="services">
|
|
|
<div class="max-width">
|
|
|
<h2 class="title">My Services</h2>
|
|
|
<div class="serv-content">
|
|
|
<div class="card">
|
|
|
<div class="box">
|
|
|
<i class="fas fa-tv"></i>
|
|
|
<div class="text">Web Design</div>
|
|
|
<p>HTML, CSS, SCSS, JavaScript and TypeScript</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card">
|
|
|
<div class="box">
|
|
|
<i class="fas fa-code"></i>
|
|
|
<div class="text">Software Developing</div>
|
|
|
<p>C , React and Node.JS</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card">
|
|
|
<div class="box">
|
|
|
<i class="fas fa-paint-brush"></i>
|
|
|
<div class="text">Graphic Design</div>
|
|
|
<p>Photoshop, Illustrator, InDesign and Figma</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<section class="skills" id="skills">
|
|
|
<div class="max-width">
|
|
|
<h2 class="title">Tech Skills</h2>
|
|
|
<div class="skills-content">
|
|
|
<div class="column left">
|
|
|
<div class="text">My creative skills & experiences.</div>
|
|
|
<p>What I know</p>
|
|
|
</div>
|
|
|
<div class="column right">
|
|
|
<div class="bars">
|
|
|
<div class="info">
|
|
|
<span>HTML</span>
|
|
|
<span>90%</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>50%</span>
|
|
|
</div>
|
|
|
<div class="line js"></div>
|
|
|
</div>
|
|
|
<div class="bars">
|
|
|
<div class="info">
|
|
|
<span>React</span>
|
|
|
<span>70%</span>
|
|
|
</div>
|
|
|
<div class="line react"></div>
|
|
|
</div>
|
|
|
<div class="bars">
|
|
|
<div class="info">
|
|
|
<span>TypeScript</span>
|
|
|
<span>80%</span>
|
|
|
</div>
|
|
|
<div class="line ts"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<section class="skills-hobbies" id="skills-hobbies">
|
|
|
<div class="max-width">
|
|
|
<h2 class="title">My Soft Skills and Hobbies</h2>
|
|
|
<div class="carousel owl-carousel">
|
|
|
<div class="card">
|
|
|
<div class="box">
|
|
|
<i class="fas fa-fire-alt"></i>
|
|
|
<div class="text">Creativity</div>
|
|
|
<p>Thinking outside the box and coming up with innovative solutions.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card">
|
|
|
<div class="box">
|
|
|
<i class="fas fa-people-arrows"></i>
|
|
|
<div class="text">Teamwork</div>
|
|
|
<p>Working collaboratively with others to achieve common goals.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card">
|
|
|
<div class="box">
|
|
|
<i class="fab fa-playstation"></i>
|
|
|
<div class="text">Playing J-RPG's</div>
|
|
|
<p>Immersing in rich storytelling and strategic gameplay through Japanese role-playing games.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card">
|
|
|
<div class="box">
|
|
|
<i class="fas fa-code"></i>
|
|
|
<div class="text">Coding</div>
|
|
|
<p>Developing software and solving problems through code.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card">
|
|
|
<div class="box">
|
|
|
<i class="fas fa-child"></i>
|
|
|
<div class="text">Mum</div>
|
|
|
<p>Balancing family responsibilities with personal and professional growth.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card">
|
|
|
<div class="box">
|
|
|
<i class="fas fa-palette"></i>
|
|
|
<div class="text">Art</div>
|
|
|
<p>Expressing creativity through various artistic mediums.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card">
|
|
|
<div class="box">
|
|
|
<i class="fas fa-music"></i>
|
|
|
<div class="text">Listening Music</div>
|
|
|
<p>Enjoying and discovering new music to relax and inspire creativity.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section> -->
|
|
|
|
|
|
|
|
|
<!-- contact section start -->
|
|
|
<section class="contact" id="contact">
|
|
|
<div class="max-width">
|
|
|
<h2 class="title">Contactez moi</h2>
|
|
|
<div class="contact-content">
|
|
|
<div class="column left">
|
|
|
<div class="text">Restons en contact !</div>
|
|
|
<div class="icons">
|
|
|
<div class="row">
|
|
|
<i class="fas fa-user"></i>
|
|
|
<div class="info">
|
|
|
<div class="head">Nom</div>
|
|
|
<div class="sub-title">Hugo Rochelle</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<i class="fas fa-map-marker-alt"></i>
|
|
|
<div class="info">
|
|
|
<div class="head">Situé à</div>
|
|
|
<div class="sub-title">Clermont-Ferrand</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<i class="fas fa-envelope"></i>
|
|
|
<div class="info">
|
|
|
<div class="head">Email</div>
|
|
|
<div class="sub-title"><a href="mailto:hugo.rochelle@gmail.com">hugo.rochelle@gmail.com</a></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="column right">
|
|
|
<form>
|
|
|
<div class="fields">
|
|
|
<div class="field name">
|
|
|
<input type="text" placeholder="Name" required>
|
|
|
</div>
|
|
|
<div class="field email">
|
|
|
<input type="email" placeholder="Email" required>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="field textarea">
|
|
|
<textarea placeholder="Message" required></textarea>
|
|
|
</div>
|
|
|
<div class="button-area">
|
|
|
<button type="submit">Send Message</button>
|
|
|
</div>
|
|
|
</form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<!-- Footer Section -->
|
|
|
<footer class="footer" role="contentinfo">
|
|
|
<div class="max-width">
|
|
|
<p>© 2024 Hugo Rochelle. Tous droits réservés.</p>
|
|
|
<div class="social-links">
|
|
|
<a href="https://www.linkedin.com/in/hugo-rochelle-991090178/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
|
|
|
<i class="fab fa-linkedin"></i>
|
|
|
</a>
|
|
|
<a href="https://github.com/HugoooR" target="_blank" rel="noopener noreferrer" aria-label="GitHub">
|
|
|
<i class="fab fa-github"></i>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</footer>
|
|
|
|
|
|
<script src="script.js"></script>
|
|
|
</body>
|
|
|
</html> |
