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.
357 lines
13 KiB
357 lines
13 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
|
|
<title>Portefolio</title>
|
|
|
|
<link href="https://codefirst.iut.uca.fr/containers/dorianhodin-portfolio/assets/img/favicon.ico" rel="icon">
|
|
|
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
|
|
|
|
<link href="assets/css/bootstrap-css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="assets/css/style.css" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<header id="header">
|
|
<div class="container">
|
|
|
|
<h1><a href="index.html">Dorian HODIN</a></h1>
|
|
<h2>Developpeur en 3ème année de BUT Informatique</span></h2>
|
|
|
|
<nav id="navbar" class="navbar">
|
|
<ul>
|
|
<li><a class="nav-link active" href="#header">Accueil</a></li>
|
|
<li><a class="nav-link" href="#about">À propos de moi</a></li>
|
|
<li><a class="nav-link" href="#experience">Experiences</a></li>
|
|
<li><a class="nav-link" href="#competence">Compétences</a></li>
|
|
<li><a class="nav-link" href="#projects">Projets</a></li>
|
|
<li><a class="nav-link" href="#perso">Intérêt personnel</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="social-links">
|
|
<a href="https://www.linkedin.com/in/dorian-hodin-45881a252/" target="_blank">
|
|
<img src="https://get-picto.com/wp-content/uploads/2023/02/logo-linkedin-noir-et-blanc.webp" alt="LinkedIn" style="width: 30px; height: 30px;">
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</header>
|
|
|
|
<section id="about" class="about">
|
|
<div class="about-me container">
|
|
|
|
<div class="section-title">
|
|
<h2>À propos de moi :</h2>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-4" data-aos="fade-right">
|
|
<img src="assets/img/me.jpg" class="img-fluid" alt="pp">
|
|
</div>
|
|
<div class="col-lg-8 pt-4 pt-lg-0 content" data-aos="fade-left">
|
|
<h3>Dévelopeur Junior en alternance</h3>
|
|
<p class="fst-italic">
|
|
Actuellement en BUT Informatique en 3ème année à Clermont-Ferrand, je suis en alternance chez CGI pour le client Michelin.
|
|
Je vais continuer mon parcours scolaire à l'école d'ingénieur ISIMA après la fin de mon BUT.
|
|
</p>
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<ul>
|
|
<li><img src="https://icones.pro/wp-content/uploads/2021/06/symbole-fleche-droite-vert.png" width="10%"><strong>Date de naissance :</strong> <span>20 Juillet 2003</span></li>
|
|
<li><img src="https://icones.pro/wp-content/uploads/2021/06/symbole-fleche-droite-vert.png" width="10%"><strong>Téléphone :</strong> <span>+33783769671</span></li>
|
|
<li><img src="https://icones.pro/wp-content/uploads/2021/06/symbole-fleche-droite-vert.png" width="10%"><strong>Ville :</strong> <span>Clermont-Ferrand</span></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<ul>
|
|
<li><img src="https://icones.pro/wp-content/uploads/2021/06/symbole-fleche-droite-vert.png" width="10%""><strong>Dernier diplôme obtenu :</strong> <span>DUT Informatique</span></li>
|
|
<li><img src="https://icones.pro/wp-content/uploads/2021/06/symbole-fleche-droite-vert.png" width="10%""><strong>Mail :</strong> <span>dorian.hodin@etu.uca.fr</span></li>
|
|
<li><img src="https://icones.pro/wp-content/uploads/2021/06/symbole-fleche-droite-vert.png" width="10%""><strong>Repo :</strong> <span>https://github.com/hodindorian</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<p>
|
|
Adepte de réseau et de développement, je suis curieux de découvrir de nouvelle façon de programmer ainsi que de nouvelle technologies.<br>
|
|
J'ai réalisé plusieurs projets en Flutter, et de nombreuses API en PHP Slim. <br>
|
|
Je réalise un micro-service en Spring Boot dans le cadre de mon alternance, ce qui me permet de développer mes capacités en Java.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="counts container">
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="count-box">
|
|
<p>Heures de projets réalisées :</p>
|
|
<span data-purecounter-start="0" data-purecounter-end="270" data-purecounter-duration="1" class="purecounter"></span>
|
|
<p>heures</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6 mt-5 mt-md-0">
|
|
<div class="count-box">
|
|
<p>Plus de </p>
|
|
<span data-purecounter-start="0" data-purecounter-end="10" data-purecounter-duration="1" class="purecounter"></span>
|
|
<p>languages connus</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6 mt-5 mt-lg-0">
|
|
<div class="count-box">
|
|
<p>Commits réalisés : </p>
|
|
<span data-purecounter-start="0" data-purecounter-end="853" data-purecounter-duration="1" class="purecounter"></span>
|
|
<p>ces 12 derniers mois</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6 mt-5 mt-lg-0">
|
|
<div class="count-box">
|
|
<p>Utilisation de linux depuis</p>
|
|
<span data-purecounter-start="0" data-purecounter-end="3" data-purecounter-duration="1" class="purecounter"></span>
|
|
<p>années</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section id="experience" class="experience">
|
|
</section>
|
|
|
|
<section id="competence" class="competence">
|
|
<div class="skills container">
|
|
|
|
<div class="section-title">
|
|
<h2>Compétences :</h2>
|
|
</div>
|
|
Voici mes différentes Compétences ainsi que leur niveau de maîtrise :
|
|
|
|
<div class="row skills-content">
|
|
|
|
<div class="col-lg-6">
|
|
|
|
<div class="progress">
|
|
<span class="skill">PHP <i class="val">70%</i></span>
|
|
<div class="progress-bar-wrap">
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
|
|
|
|
<div class="progress">
|
|
<span class="skill">PHP Slim <i class="val">80%</i></span>
|
|
<div class="progress-bar-wrap">
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
|
|
|
|
<div class="progress">
|
|
<span class="skill">Java <i class="val">30%</i></span>
|
|
<div class="progress-bar-wrap">
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
|
|
|
|
<div class="progress">
|
|
<span class="skill">SpringBoot 3<i class="val">75%</i></span>
|
|
<div class="progress-bar-wrap">
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
|
|
|
|
<div class="progress">
|
|
<span class="skill">Flutter <i class="val">70%</i></span>
|
|
<div class="progress-bar-wrap">
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
|
|
|
|
<div class="progress">
|
|
<span class="skill">Dart <i class="val">60%</i></span>
|
|
<div class="progress-bar-wrap">
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
|
|
<div class="progress">
|
|
<span class="skill">Socket IO (Javascript) <i class="val">60%</i></span>
|
|
<div class="progress-bar-wrap">
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
|
|
<div class="progress">
|
|
<span class="skill">Réseau (Reverse proxy, organisation d'un serveur) <i class="val">70%</i></span>
|
|
<div class="progress-bar-wrap">
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
|
|
|
|
<div class="progress">
|
|
<span class="skill">Git <i class="val">70%</i></span>
|
|
<div class="progress-bar-wrap">
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
|
|
|
|
<div class="progress">
|
|
<span class="skill">Teams <i class="val">75%</i></span>
|
|
<div class="progress-bar-wrap">
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
|
|
|
|
<div class="progress">
|
|
<span class="skill">HTML <i class="val">55%</i></span>
|
|
<div class="progress-bar-wrap">
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
|
|
|
|
<div class="progress">
|
|
<span class="skill">CSS <i class="val">35%</i></span>
|
|
<div class="progress-bar-wrap">
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section id="projects" class="projects">
|
|
</section>
|
|
|
|
<section id="perso" class="perso">
|
|
|
|
<div class="interests container">
|
|
|
|
<div class="section-title">
|
|
<h2>Interests</h2>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-3 col-md-4">
|
|
<div class="icon-box">
|
|
<i class="ri-store-line" style="color: #ffbb2c;"></i>
|
|
<h3>Lorem Ipsum</h3>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-4 mt-4 mt-md-0">
|
|
<div class="icon-box">
|
|
<i class="ri-bar-chart-box-line" style="color: #5578ff;"></i>
|
|
<h3>Dolor Sitema</h3>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-4 mt-4 mt-md-0">
|
|
<div class="icon-box">
|
|
<i class="ri-calendar-todo-line" style="color: #e80368;"></i>
|
|
<h3>Sed perspiciatis</h3>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-4 mt-4 mt-lg-0">
|
|
<div class="icon-box">
|
|
<i class="ri-paint-brush-line" style="color: #e361ff;"></i>
|
|
<h3>Magni Dolores</h3>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-4 mt-4">
|
|
<div class="icon-box">
|
|
<i class="ri-database-2-line" style="color: #47aeff;"></i>
|
|
<h3>Nemo Enim</h3>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-4 mt-4">
|
|
<div class="icon-box">
|
|
<i class="ri-gradienter-line" style="color: #ffa76e;"></i>
|
|
<h3>Eiusmod Tempor</h3>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-4 mt-4">
|
|
<div class="icon-box">
|
|
<i class="ri-file-list-3-line" style="color: #11dbcf;"></i>
|
|
<h3>Midela Teren</h3>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-4 mt-4">
|
|
<div class="icon-box">
|
|
<i class="ri-price-tag-2-line" style="color: #4233ff;"></i>
|
|
<h3>Pira Neve</h3>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-4 mt-4">
|
|
<div class="icon-box">
|
|
<i class="ri-anchor-line" style="color: #b2904f;"></i>
|
|
<h3>Dirada Pack</h3>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-4 mt-4">
|
|
<div class="icon-box">
|
|
<i class="ri-disc-line" style="color: #b20969;"></i>
|
|
<h3>Moton Ideal</h3>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-4 mt-4">
|
|
<div class="icon-box">
|
|
<i class="ri-base-station-line" style="color: #ff5828;"></i>
|
|
<h3>Verdo Park</h3>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-4 mt-4">
|
|
<div class="icon-box">
|
|
<i class="ri-fingerprint-line" style="color: #29cc61;"></i>
|
|
<h3>Flavor Nivelanda</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<script src="assets/js/bootstrap-js/purecounter_vanilla.js"></script>
|
|
<script src="assets/js/bootstrap-js/glightbox.min.js"></script>
|
|
<script src="assets/js/bootstrap-js/swiper-bundle.min.js"></script>
|
|
<script src="assets/js/bootstrap-js/noframework.waypoints.js"></script>
|
|
<script src="assets/js/main.js"></script>
|
|
|
|
|
|
</body>
|
|
|
|
</html> |