|
|
<!DOCTYPE html>
|
|
|
<html lang="fr">
|
|
|
<head>
|
|
|
<meta charset="UTF-8" />
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
<title>PortFolio - Accueil</title>
|
|
|
<link rel="stylesheet" href="css/style.css" />
|
|
|
<link rel="stylesheet" href="css/skins/color-1.css" />
|
|
|
<link
|
|
|
rel="stylesheet"
|
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
|
|
|
/>
|
|
|
<link
|
|
|
rel="stylesheet"
|
|
|
href="css/skins/color-1.css"
|
|
|
class="alternate-style"
|
|
|
title="color-1"
|
|
|
disabled
|
|
|
/>
|
|
|
<link
|
|
|
rel="stylesheet"
|
|
|
href="css/skins/color-2.css"
|
|
|
class="alternate-style"
|
|
|
title="color-2"
|
|
|
disabled
|
|
|
/>
|
|
|
<link
|
|
|
rel="stylesheet"
|
|
|
href="css/skins/color-3.css"
|
|
|
class="alternate-style"
|
|
|
title="color-3"
|
|
|
disabled
|
|
|
/>
|
|
|
<link
|
|
|
rel="stylesheet"
|
|
|
href="css/skins/color-4.css"
|
|
|
class="alternate-style"
|
|
|
title="color-4"
|
|
|
disabled
|
|
|
/>
|
|
|
<link
|
|
|
rel="stylesheet"
|
|
|
href="css/skins/color-5.css"
|
|
|
class="alternate-style"
|
|
|
title="color-5"
|
|
|
disabled
|
|
|
/>
|
|
|
<link rel="stylesheet" href="css/style-switcher.css" />
|
|
|
<link rel="icon" href="./images/pages-fill.png" />
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="main-container">
|
|
|
<div class="aside">
|
|
|
<div class="logo">
|
|
|
<a href="#"><span>H</span>ugo</a>
|
|
|
</div>
|
|
|
<div class="nav-toggler">
|
|
|
<span></span>
|
|
|
</div>
|
|
|
<ul class="nav">
|
|
|
<li id="texthomeenrouge">
|
|
|
<a href="#home" class="active"
|
|
|
><em class="fa fa-home"></em>Accueil</a
|
|
|
>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a href="#about"><em class="fa fa-user"></em>Mon Experience</a>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a href="#competences"><em class="fa fa-list"></em>Compétences</a>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a href="#qualites"><em class="fa fa-star"></em>Qualités</a>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a href="#portfolio"
|
|
|
><em class="fa fa-briefcase"></em>Mes Projets</a
|
|
|
>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a href="#interet">
|
|
|
<em class="fa fa-bicycle"></em>Centres d'Interêt
|
|
|
</a>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a href="#contact"><em class="fa fa-comments"></em>Contact</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="main-content">
|
|
|
<section class="home active section" id="home">
|
|
|
<div class="container">
|
|
|
<div class="row">
|
|
|
<div class="home-info padd-15">
|
|
|
<h3 class="hello">
|
|
|
Bonjour, je m'appelle <span class="name">Hugo Creneau</span>
|
|
|
</h3>
|
|
|
<h3 class="my-profession">
|
|
|
Je suis <span class="typing">Developpeur</span>
|
|
|
</h3>
|
|
|
<p>
|
|
|
Étudiant en
|
|
|
<strong>2ᵉ année de BUT Informatique en alternance</strong>
|
|
|
chez
|
|
|
<strong
|
|
|
><a href="https://www.ipa-software.pro/" id="lienIPA"
|
|
|
>IPA - Innovation Performance Analytics</a
|
|
|
></strong
|
|
|
>, je me spécialise en développement web et maîtrise
|
|
|
<strong>HTML, CSS, JavaScript et PHP</strong> pour créer des
|
|
|
applications performantes. Mon
|
|
|
<strong>adaptabilité</strong> et ma
|
|
|
<strong>rigueur</strong> assurent des réalisations fiables et
|
|
|
soignées. Expérimenté en frameworks comme
|
|
|
<strong>Vue, Angular</strong> et <strong>React</strong>, je
|
|
|
transforme les concepts en applications efficaces.
|
|
|
</p>
|
|
|
<p>
|
|
|
Je vous invite à télécharger mon CV ci-dessous et à consulter
|
|
|
mon LinkedIn.
|
|
|
</p>
|
|
|
<a
|
|
|
href="./images/CVHugoCRENEAU.pdf"
|
|
|
download="./images/CVHugoCRENEAU.pdf"
|
|
|
class="btn"
|
|
|
id="boutonCV"
|
|
|
>Mon CV</a
|
|
|
>
|
|
|
<a
|
|
|
href="https://www.linkedin.com/in/hugo-creneau-53a7402a8/"
|
|
|
class="btn"
|
|
|
id="boutonLI"
|
|
|
>Mon LinkedIn</a
|
|
|
>
|
|
|
</div>
|
|
|
<div class="home-img padd-15">
|
|
|
<img
|
|
|
src="images/moi.png"
|
|
|
alt="Photo de moi"
|
|
|
width="auto"
|
|
|
height="auto"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
<section class="about section" id="about">
|
|
|
<div class="container">
|
|
|
<div class="row">
|
|
|
<div class="section-title padd-15">
|
|
|
<h2>Mon Expérience</h2>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="about-content padd-15">
|
|
|
<div class="row">
|
|
|
<div class="education padd-15">
|
|
|
<h3 class="title">Mon Parcours</h3>
|
|
|
<div class="row">
|
|
|
<div class="timeline-box padd-15">
|
|
|
<div class="timeline shadow-dark">
|
|
|
<div class="timeline-item">
|
|
|
<div class="circle-dot"></div>
|
|
|
<h3 class="timeline-date">
|
|
|
<em class="fa fa-calendar"></em> 2024 - 2026
|
|
|
</h3>
|
|
|
<h4 class="timeline-title">
|
|
|
Alternance chez IPA - Innovation Performance
|
|
|
Analytics
|
|
|
</h4>
|
|
|
<p class="timeline-text">
|
|
|
Actuellement en alternance chez
|
|
|
<strong
|
|
|
>IPA - Innovation Performance Analytics</strong
|
|
|
>, j'applique mes connaissances pour développer
|
|
|
des solutions pratiques et performantes en
|
|
|
entreprise, renforçant ainsi mon savoir-faire en
|
|
|
<strong>développement web</strong> et en
|
|
|
<strong>gestion de projet</strong>.
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="timeline-item">
|
|
|
<div class="circle-dot"></div>
|
|
|
<h3 class="timeline-date">
|
|
|
<em class="fa fa-calendar"></em> 2024 - 2025
|
|
|
</h3>
|
|
|
<h4 class="timeline-title">
|
|
|
2ᵉ année BUT Informatique
|
|
|
</h4>
|
|
|
<p class="timeline-text">
|
|
|
Cette deuxième année du
|
|
|
<strong>BUT Informatique</strong> approfondit mes
|
|
|
compétences en
|
|
|
<strong>développement web</strong> et
|
|
|
<strong>programmation</strong>, me préparant
|
|
|
encore mieux aux exigences du monde professionnel.
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="timeline-item">
|
|
|
<div class="circle-dot"></div>
|
|
|
<h3 class="timeline-date">
|
|
|
<em class="fa fa-calendar"></em> 2023 - 2024
|
|
|
</h3>
|
|
|
<h4 class="timeline-title">
|
|
|
1ère année BUT Informatique
|
|
|
</h4>
|
|
|
<p class="timeline-text">
|
|
|
Le <strong>BUT Informatique</strong> me plonge
|
|
|
dans le développement, un monde d'opportunités
|
|
|
pour l'innovation. Durant cette année, j'ai abordé
|
|
|
de nombreux sujets tels que le
|
|
|
<strong>développement web</strong> avec les
|
|
|
langages HTML et CSS, mais également le
|
|
|
<strong>développement objet</strong> en C#, C++ et
|
|
|
Python ainsi que l'<strong
|
|
|
>administration de bases de données</strong
|
|
|
>
|
|
|
en PostgreSQL.
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="timeline-item">
|
|
|
<div class="circle-dot"></div>
|
|
|
<h3 class="timeline-date">
|
|
|
<em class="fa fa-calendar"></em> 2021 - 2023
|
|
|
</h3>
|
|
|
<h4 class="timeline-title">
|
|
|
Obtention du diplôme du Baccalauréat
|
|
|
</h4>
|
|
|
<p class="timeline-text">
|
|
|
Durant ces années au lycée Jean-Zay à Thiers (63),
|
|
|
j'ai obtenu le diplôme du
|
|
|
<strong>Baccalauréat</strong> avec
|
|
|
<strong>mention</strong> en étudiant les
|
|
|
spécialités Mathématiques, Physique-Chimie, et
|
|
|
Numérique et sciences de l'informatique (NSI).
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="experience padd-15">
|
|
|
<h3 class="title">Expérience de bénévolat</h3>
|
|
|
<div class="row">
|
|
|
<div class="timeline-box padd-15">
|
|
|
<div class="timeline shadow-dark">
|
|
|
<div class="timeline-item">
|
|
|
<div class="circle-dot"></div>
|
|
|
<h3 class="timeline-date">
|
|
|
<em class="fa fa-calendar"></em> 22-23 mai 2022 -
|
|
|
3-4 juin 2023
|
|
|
</h3>
|
|
|
<h4 class="timeline-title">
|
|
|
Bénévolat durant l'évenement enduforez
|
|
|
</h4>
|
|
|
<p class="timeline-text">
|
|
|
En mai 2022 et en juin 2023, je faisais partie des
|
|
|
responsables de l’<strong>organisation</strong>
|
|
|
d’un événement de VTT nommé EnduForez accueillant
|
|
|
plus de 700 participants. J’ai donc dû participer
|
|
|
a la <strong>gestion</strong> du logement des
|
|
|
personnes, de leur <strong>restauration</strong> ,
|
|
|
du <strong>stockage</strong> de leurs véhicules,
|
|
|
de l’<strong>acheminement</strong> des
|
|
|
participants par navettes sur le lieu de départ de
|
|
|
l’événement, ainsi que leur
|
|
|
<strong>ravitaillement</strong> lors du parcours.
|
|
|
Cette expérience m’a donc permis de prendre mes
|
|
|
<strong>responsabilités</strong> lors de
|
|
|
l’organisation d’un événement sportif accueillant
|
|
|
de nombreuses personnes ainsi que d’apprendre à
|
|
|
<strong>réagir</strong> vite face à des situations
|
|
|
pouvant s’avérer problématiques telles que, lors
|
|
|
de cet événement, des prises de
|
|
|
<strong>retard</strong> liées aux navettes.
|
|
|
</p>
|
|
|
<img
|
|
|
src="images/end2.png"
|
|
|
id="end1"
|
|
|
alt="Tracte Enduforez"
|
|
|
width="auto"
|
|
|
height="auto"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
<section class="competences section" id="competences">
|
|
|
<div class="container">
|
|
|
<div class="row">
|
|
|
<div class="section-title padd-15">
|
|
|
<h2>Compétences</h2>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="competences-item padd-15">
|
|
|
<div class="competences-item-inner">
|
|
|
<div class="icon">
|
|
|
<em class="fa fa-pencil-alt"></em>
|
|
|
</div>
|
|
|
<h4>Web Design</h4>
|
|
|
<p>
|
|
|
Le <strong>web design</strong> consiste à concevoir des
|
|
|
interfaces web attrayantes et fonctionnelles. J’allie
|
|
|
<strong>esthétique</strong> et <strong>utilité</strong> pour
|
|
|
offrir une expérience utilisateur optimale, comme illustré
|
|
|
par ce <strong>portfolio</strong>.
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="competences-item padd-15">
|
|
|
<div class="competences-item-inner">
|
|
|
<div class="icon">
|
|
|
<em class="fa fa-laptop-code"></em>
|
|
|
</div>
|
|
|
<h4>Développement Front-End</h4>
|
|
|
<p>
|
|
|
Le <strong>développement front-end</strong> inclut la
|
|
|
création d'interfaces interactives avec
|
|
|
<strong>HTML</strong>, <strong>CSS</strong>,
|
|
|
<strong>Tailwind</strong>, et <strong>JavaScript</strong>,
|
|
|
ainsi que des frameworks comme <strong>Angular</strong>,
|
|
|
<strong>React</strong>, et <strong>Vue</strong>. J’utilise
|
|
|
ces technologies pour construire des applications dynamiques
|
|
|
et esthétiques.
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="competences-item padd-15">
|
|
|
<div class="competences-item-inner">
|
|
|
<div class="icon">
|
|
|
<em class="fa fa-server"></em>
|
|
|
</div>
|
|
|
<h4>Développement Back-End</h4>
|
|
|
<p>
|
|
|
Le <strong>développement back-end</strong> se concentre sur
|
|
|
la création et la gestion de serveurs et d'API. J’utilise
|
|
|
des langages et frameworks comme <strong>PHP</strong>,
|
|
|
<strong>JavaScript</strong>, <strong>TypeScript</strong>, et
|
|
|
<strong>Express</strong> pour gérer la logique applicative
|
|
|
côté serveur et les bases de données.
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="competences-item padd-15">
|
|
|
<div class="competences-item-inner">
|
|
|
<div class="icon">
|
|
|
<em class="fa fa-mobile-alt"></em>
|
|
|
</div>
|
|
|
<h4>Développement Mobile</h4>
|
|
|
<p>
|
|
|
En <strong>développement mobile</strong>, j’utilise des
|
|
|
technologies comme <strong>.NET</strong>,
|
|
|
<strong>Kotlin</strong>, <strong>Swift</strong>, et
|
|
|
<strong>Java</strong> pour créer des applications natives et
|
|
|
performantes, optimisées pour diverses plateformes.
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="competences-item padd-15">
|
|
|
<div class="competences-item-inner">
|
|
|
<div class="icon">
|
|
|
<em class="fa fa-cube"></em>
|
|
|
</div>
|
|
|
<h4>Développement Orienté Objet</h4>
|
|
|
<p>
|
|
|
Le <strong>développement orienté objet</strong> (OOP) repose
|
|
|
sur la création d’objets avec des
|
|
|
<strong>propriétés</strong> et
|
|
|
<strong>comportements</strong> spécifiques. J'utilise des
|
|
|
langages comme <strong>C++</strong>, <strong>C#</strong>, et
|
|
|
<strong>JavaScript</strong>
|
|
|
pour concevoir des architectures logicielles solides et
|
|
|
évolutives.
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="competences-item padd-15">
|
|
|
<div class="competences-item-inner">
|
|
|
<div class="icon">
|
|
|
<em class="fa fa-paint-brush"></em>
|
|
|
</div>
|
|
|
<h4>Creative Development</h4>
|
|
|
<p>
|
|
|
Le <strong>creative development</strong> englobe l'usage de
|
|
|
technologies comme <strong>three.js</strong> pour créer des
|
|
|
expériences visuelles 3D interactives, permettant de
|
|
|
concevoir des interfaces immersives et engageantes.
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
<section class="qualites section" id="qualites">
|
|
|
<div class="container">
|
|
|
<div class="row">
|
|
|
<div class="section-title padd-15">
|
|
|
<h2>Qualités</h2>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="qualites-item padd-15">
|
|
|
<div class="qualites-item-inner">
|
|
|
<div class="icon">
|
|
|
<em class="fa fa-paint-brush"></em>
|
|
|
</div>
|
|
|
<h4>Créativité</h4>
|
|
|
<p>
|
|
|
La <strong>créativité</strong> est une qualité essentielle
|
|
|
dans le domaine du design et du développement, permettant de
|
|
|
générer des idées <strong>innovantes</strong>
|
|
|
, de résoudre des problèmes de manière
|
|
|
<strong>originale</strong> et d'apporter une touche unique à
|
|
|
chaque projet. Elle se manifeste par la capacité à
|
|
|
<strong>penser différemment</strong>, à explorer de
|
|
|
nouvelles voies et à repousser les
|
|
|
<strong>limites</strong> de la conception et de la
|
|
|
programmation. Le développement de ce PortFolio ainsi que de
|
|
|
mes différents projets m'ont permis d'entrainer cette
|
|
|
<strong>qualité</strong> et de l'éxercer avec brio.
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="qualites-item padd-15">
|
|
|
<div class="qualites-item-inner">
|
|
|
<div class="icon">
|
|
|
<em class="fa fa-puzzle-piece"></em>
|
|
|
</div>
|
|
|
<h4>Adaptibilité</h4>
|
|
|
<p>
|
|
|
L'<strong>adaptabilité</strong> est une qualité clé qui me
|
|
|
caractérise. Elle se manifeste par ma capacité à m'ajuster
|
|
|
facilement aux <strong>changements</strong> , à m'adapter à
|
|
|
de nouvelles situations et à trouver des solutions
|
|
|
<strong>créatives</strong> face à des défis imprévus. Cette
|
|
|
qualité me permet de rester <strong>efficace</strong> et
|
|
|
<strong>productif</strong>
|
|
|
dans des environnements dynamiques et en
|
|
|
<strong>constante</strong> évolution. Je m'adapte en continu
|
|
|
dans le développement car, pour de nombreux projets, il est
|
|
|
necessaire de changer de langage et donc de s'adapter
|
|
|
<strong>constamment</strong>.
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="qualites-item padd-15">
|
|
|
<div class="qualites-item-inner">
|
|
|
<div class="icon">
|
|
|
<em class="fa fa-ruler"></em>
|
|
|
</div>
|
|
|
<h4>Rigueur</h4>
|
|
|
<p>
|
|
|
La <strong>rigueur</strong> est l'une de mes qualités
|
|
|
fondamentales. Elle se manifeste dans mon approche
|
|
|
méthodique du travail, ma capacité à suivre des processus
|
|
|
avec <strong>précision</strong> et à maintenir des normes
|
|
|
élevées de qualité dans tout ce que j'entreprends. Cela se
|
|
|
traduit également par mon souci du
|
|
|
<strong>détail</strong> et ma
|
|
|
<strong>persévérance</strong> à atteindre les objectifs
|
|
|
fixés, même dans les situations les plus
|
|
|
<strong>exigeantes</strong>. Dans le développement, on doit
|
|
|
absolument, pour créer un code
|
|
|
<strong>fonctionnel</strong> créant une bonne expérience
|
|
|
pour l'utilisateur, obtenir un code fonctionnel dans bug, il
|
|
|
faut être <strong>rigoureux</strong> pour cela.
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
<section class="portfolio section" id="portfolio">
|
|
|
<div class="container">
|
|
|
<div class="row">
|
|
|
<div class="section-title padd-15">
|
|
|
<h2>Mes Projets</h2>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="portfolio-heading padd-15">
|
|
|
<h2>Mes Projets</h2>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="portfolio-item padd-15">
|
|
|
<div class="portfolio-item-inner shadow-dark">
|
|
|
<div
|
|
|
class="portfolio-img"
|
|
|
onclick="toggleDescription('portfolio-1')"
|
|
|
onKeyPress="handleKeyPress(event)"
|
|
|
tabindex="0"
|
|
|
>
|
|
|
<img
|
|
|
src="images/Capture d'écran 2024-05-26 204304.png"
|
|
|
alt="Image Service d'envoi massif d'email"
|
|
|
width="auto"
|
|
|
height="auto"
|
|
|
/>
|
|
|
</div>
|
|
|
<div
|
|
|
class="portfolio-description-img1 pdesc hidden padd-15"
|
|
|
id="portfolio-1"
|
|
|
>
|
|
|
<h3>Service d'envoi massif d'email</h3>
|
|
|
<h4>Contexte :</h4>
|
|
|
<p>
|
|
|
Une entreprise peut avoir besoin d'envoyer nombre d'Emails
|
|
|
à ses clients. C'est pour cela que j'ai entrepris la
|
|
|
création de ce SAAS
|
|
|
</p>
|
|
|
<h4>Objectif :</h4>
|
|
|
<p>
|
|
|
L'objectif est de réaliser avec différents outils tels que
|
|
|
React, Tailwind CSS, Node JS ainsi que PostgreSQL. Un
|
|
|
service d'envoi massif d'emails marketing.
|
|
|
</p>
|
|
|
<h4>Travail Réalisé :</h4>
|
|
|
<p>
|
|
|
- J'ai premièrement choisi ma <strong>stack</strong> pour
|
|
|
le développement de ce projet, j'ai choisi le framework
|
|
|
JavaScript <strong>React JS</strong> pour deux raisons, le
|
|
|
fait que c'est le framework que je
|
|
|
<strong>maitrise</strong> le plus ainsi que le fait que ce
|
|
|
frameword permette un design moderne.
|
|
|
</p>
|
|
|
<p>
|
|
|
- J'ai ensuite pensé la <strong>structure</strong> du
|
|
|
projet afin d'avoir une vision d'ensemble pour la suite.
|
|
|
</p>
|
|
|
<p>
|
|
|
- J'ai développé l'<strong>interface</strong> de la page
|
|
|
d'accueil en utilisant l'outil <strong>shadcn UI</strong>.
|
|
|
</p>
|
|
|
<p>
|
|
|
- J'ai entrepris la création d'un système de compte en
|
|
|
utilisant <strong>PostgreSQL</strong> , un langage de base
|
|
|
de données que je maitrise grâce à mes
|
|
|
<strong>études</strong>. Il faut que chaque utilisateur
|
|
|
puisse créer un compte avec une
|
|
|
<strong>adresse mail</strong> ou un compte
|
|
|
<strong>Google</strong> , et qu'il renseigne un mot de
|
|
|
passe qui sera stocké après avoir été
|
|
|
<strong>hashé</strong>.
|
|
|
</p>
|
|
|
<h4>Resultat :</h4>
|
|
|
<p>
|
|
|
Pour le moment, je possède une
|
|
|
<strong>interface</strong> d'accueil moderne ainsi qu'une
|
|
|
base de données pouvant stocker des utilisateurs. La
|
|
|
prochaine étape est de <strong>lier</strong> la base de
|
|
|
données et le projet.
|
|
|
</p>
|
|
|
<a href="https://github.com/hugocrne/marketmailtmp"
|
|
|
>Cliquez ici pour consulter le code source</a
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="portfolio-item padd-15">
|
|
|
<div class="portfolio-item-inner shadow-dark">
|
|
|
<div
|
|
|
class="portfolio-img"
|
|
|
onclick="toggleDescription('portfolio-2')"
|
|
|
onKeyPress="handleKeyPress(event)"
|
|
|
tabindex="0"
|
|
|
>
|
|
|
<img
|
|
|
src="images/PacManJS.png"
|
|
|
alt="Image Implémentation du jeu PacMan en JavaScript"
|
|
|
width="auto"
|
|
|
height="auto"
|
|
|
/>
|
|
|
</div>
|
|
|
<div
|
|
|
class="portfolio-description-img2 pdesc hidden padd-15"
|
|
|
id="portfolio-2"
|
|
|
>
|
|
|
<h3>Implémentation du jeu PacMan en JavaScript</h3>
|
|
|
<h4>Contexte :</h4>
|
|
|
<p>
|
|
|
Je suis passionné de jeu vidéo et j'ai toujours voulu en
|
|
|
créer un, également passionné par le développement web,
|
|
|
j'ai eu envie d'apprendre le JavaScript, j'ai donc voulu
|
|
|
conjuguer ces deux envies.
|
|
|
</p>
|
|
|
<h4>Objectif :</h4>
|
|
|
<p>
|
|
|
L'objectif est de créer une implémentation du jeu PacMan
|
|
|
en JavaScript
|
|
|
</p>
|
|
|
<h4>Travail Réalisé :</h4>
|
|
|
<p>
|
|
|
- J'ai premièrement choisi la
|
|
|
<strong>manière</strong> dont je voulais créer le plateau,
|
|
|
pour cela, j'ai crée une <strong>matrice</strong> remplie
|
|
|
des chiffres 1 et 2, 1 lorsque c'est un mur et 2 lorsque
|
|
|
la voie est libre.
|
|
|
</p>
|
|
|
<p>
|
|
|
- J'ai ensuite crée le <strong>comportement</strong>
|
|
|
du personnage jouable en l'animant avec des
|
|
|
<strong>sprites</strong> trouvés sur internet ainsi qu'en
|
|
|
codant ses différentes méthodes et en créant les
|
|
|
<strong>collisions</strong> avec les murs.
|
|
|
</p>
|
|
|
<p>
|
|
|
- Pour les ennemis, les 4 fantomes, je leur ai codé un
|
|
|
<strong>comportement</strong> plus ou moins
|
|
|
<strong>aléatoire</strong>. En effet, ils cherchent à
|
|
|
atteindre PacMan si celui-ci n'est pas
|
|
|
<strong>trop loin</strong>, sinon leurs mouvements sont
|
|
|
<strong>aléatoires</strong>.
|
|
|
</p>
|
|
|
<p>
|
|
|
- Pour finir, j'ai implémenté les intéractions entre
|
|
|
PacMan et les fantomes en créant le système de vies, j'ai
|
|
|
mis sur le plateau les "Gums" que PacMan doit manger et
|
|
|
j'ai implémenté le visuel du jeu.
|
|
|
</p>
|
|
|
<h4>Resultat :</h4>
|
|
|
<p>
|
|
|
Je possède maintenant un jeu PacMan
|
|
|
<strong>fonctionnel</strong> qui se joue avec les flèches
|
|
|
directionnelles et j'ai pu apprendre les bases du
|
|
|
<strong>JavaScript</strong>.
|
|
|
</p>
|
|
|
<p>
|
|
|
Vous pouvez retrouver le jeu en cliquant
|
|
|
<a href="https://hugocrne.github.io/PacMan_Game_js/"
|
|
|
>ici</a
|
|
|
>
|
|
|
ou consulter le code source ci-dessous.
|
|
|
</p>
|
|
|
<a href="https://github.com/hugocrne/PacMan_Game_js"
|
|
|
>Code Source</a
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="portfolio-item padd-15">
|
|
|
<div class="portfolio-item-inner shadow-dark">
|
|
|
<div
|
|
|
class="portfolio-img"
|
|
|
onclick="toggleDescription('portfolio-3')"
|
|
|
onKeyPress="handleKeyPress(event)"
|
|
|
tabindex="0"
|
|
|
>
|
|
|
<img
|
|
|
src="images/Capture d'écran 2024-05-20 145306.png"
|
|
|
alt="Image Mon PortFolio avec ReactJS"
|
|
|
width="auto"
|
|
|
height="auto"
|
|
|
/>
|
|
|
</div>
|
|
|
<div
|
|
|
class="portfolio-description-img3 pdesc hidden padd-15"
|
|
|
id="portfolio-3"
|
|
|
>
|
|
|
<h3>Mon PortFolio avec ReactJS</h3>
|
|
|
<h4>Contexte :</h4>
|
|
|
<p>
|
|
|
Je suis passionné de développement web et je souhaitais me
|
|
|
familiariser avec le framework JavaScript ReactJS, pour
|
|
|
cela, je me suis sit que la création d'un PortFolio était
|
|
|
la meilleure idée
|
|
|
</p>
|
|
|
<h4>Objectif :</h4>
|
|
|
<p>Créer un PortFolio en utilisant ReactJS</p>
|
|
|
<h4>Travail Réalisé :</h4>
|
|
|
<p>
|
|
|
- J'ai premièrement crée le <strong>design</strong> de mon
|
|
|
PortFolio en m'inspirant de ce qui a déjà été fait par
|
|
|
d'autres.
|
|
|
</p>
|
|
|
<p>
|
|
|
- J'ai ensuite choisi les outils que j'allais utiliser
|
|
|
comme par exemple <strong>shadcn.ui</strong> pour certains
|
|
|
styles, la police de <strong>Vercel</strong>
|
|
|
ou encode les icones de
|
|
|
<strong>Lucide</strong>
|
|
|
</p>
|
|
|
<p>
|
|
|
- J'ai enfin pu développer mon site web en utilisant
|
|
|
activement <strong>Tailwind CSS</strong> afin de créer
|
|
|
plus vite et plus rapidement les styles, tout en séparant
|
|
|
les différentes parties du site en
|
|
|
<strong>composants</strong> que je peux réutiliser
|
|
|
plusieurs fois.
|
|
|
</p>
|
|
|
<h4>Resultat :</h4>
|
|
|
<p>
|
|
|
Je possède maintenant un PortFolio développé avec React JS
|
|
|
que je pourrais publier à l'instant ou je le voudrais.
|
|
|
J'ai également pu me familiariser grandement avec cette
|
|
|
technologie.
|
|
|
</p>
|
|
|
<a href="https://github.com/hugocrne/reactportfolio"
|
|
|
>Code Source</a
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row padd-15">
|
|
|
<div class="portfolio-heading2 padd-15">
|
|
|
<h2>Mes Projets Universitaires</h2>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="portfolio-item padd-15">
|
|
|
<div class="portfolio-item-inner shadow-dark">
|
|
|
<div
|
|
|
class="portfolio-img"
|
|
|
onclick="toggleDescription('portfolio-4')"
|
|
|
onKeyPress="handleKeyPress(event)"
|
|
|
tabindex="0"
|
|
|
>
|
|
|
<img
|
|
|
src="images/Reseau.png"
|
|
|
alt="Image Création d'un système réseau"
|
|
|
width="auto"
|
|
|
height="auto"
|
|
|
/>
|
|
|
</div>
|
|
|
<div
|
|
|
class="portfolio-description-img4 pdesc hidden padd-15"
|
|
|
id="portfolio-4"
|
|
|
>
|
|
|
<h3>Création d'un système réseau</h3>
|
|
|
<h4>Contexte :</h4>
|
|
|
<p>
|
|
|
Ce projet est un projet universitaire réalisé sous la
|
|
|
supervision de notre professeur de réseaux.
|
|
|
</p>
|
|
|
<h4>Objectif :</h4>
|
|
|
<p>
|
|
|
Je devais, à partir d'une machine virutelle, créer des
|
|
|
communications entre plusieurs machines à l'aide du
|
|
|
protocode FTP permettant leur commmunication.
|
|
|
</p>
|
|
|
<h4>Travail Réalisé :</h4>
|
|
|
<p>
|
|
|
- J'ai premièrement du configurer les
|
|
|
<strong>adresses IP</strong> des différentes machines en
|
|
|
configurant les <strong>fichiers</strong> "/etc/hosts"
|
|
|
"/etc/hostname" et "/etc/network/interfaces" grace à
|
|
|
cela, les machines peuvent se "Ping" c'est à dire
|
|
|
s'envoyer des signaux et donc des paquets.
|
|
|
</p>
|
|
|
<p>
|
|
|
- J'ai ensuite du configurer un
|
|
|
<strong>server web Apache</strong>
|
|
|
qui affichait une page
|
|
|
<strong>web</strong> par défaut dés qu'il était
|
|
|
consulté.
|
|
|
</p>
|
|
|
<p>
|
|
|
- Enfin, j'ai configuré une
|
|
|
<strong>communication ssh</strong> entre les différentes
|
|
|
machines afin qu'elles puissent
|
|
|
<strong>récuperer</strong> des fichiers l'une chez
|
|
|
l'autre à tavers
|
|
|
<strong>différents utilisateurs</strong>.
|
|
|
</p>
|
|
|
<p>
|
|
|
- Afin de sécuriser ce réseau, j'ai utilisé le logiciel
|
|
|
<strong>fail2ban</strong> et je l'ai configuré afin de
|
|
|
me protéger des attaques DDOS, c'està dire un
|
|
|
<strong>envoi massif</strong> de paquets à mon server
|
|
|
faisant planter le réseau. J'ai pu configurer un
|
|
|
<strong>système de banissement</strong> des adresses IP
|
|
|
ainsi qu'une suspension momentannée de certaines.
|
|
|
</p>
|
|
|
<h4>Resultat :</h4>
|
|
|
<p>
|
|
|
J'ai pu réaliser presque toutes les taches qui m'étaient
|
|
|
demandées, j'ai pour cela reçu la note de
|
|
|
<strong>17/20</strong> pour une moyenne de classe aux
|
|
|
alentours de 14.
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="portfolio-item padd-15">
|
|
|
<div class="portfolio-item-inner shadow-dark">
|
|
|
<div
|
|
|
class="portfolio-img"
|
|
|
onclick="toggleDescription('portfolio-5')"
|
|
|
onKeyPress="handleKeyPress(event)"
|
|
|
tabindex="0"
|
|
|
>
|
|
|
<img
|
|
|
src="images/formation_pompiers.png"
|
|
|
alt="Application de gestion de formations pour les sapeurs-pompiers"
|
|
|
width="auto"
|
|
|
height="auto"
|
|
|
/>
|
|
|
</div>
|
|
|
<div
|
|
|
class="portfolio-description-img5 pdesc hidden padd-15"
|
|
|
id="portfolio-5"
|
|
|
>
|
|
|
<h3>
|
|
|
Application de Gestion de Formations pour les
|
|
|
Sapeurs-Pompiers
|
|
|
</h3>
|
|
|
<h4>Contexte :</h4>
|
|
|
<p>
|
|
|
Cette application web a été développée pour optimiser la
|
|
|
gestion des formations des sapeurs-pompiers du
|
|
|
département du Puy-de-Dôme. Elle vise à centraliser les
|
|
|
informations relatives aux sessions de formation, aux
|
|
|
formateurs, aux lieux et aux participants, permettant
|
|
|
ainsi une gestion plus efficace et une vue d'ensemble de
|
|
|
l'avancement des compétences des pompiers.
|
|
|
</p>
|
|
|
<h4>Objectif :</h4>
|
|
|
<p>
|
|
|
L'objectif principal de cette application est de
|
|
|
simplifier et d’automatiser l’organisation des
|
|
|
formations, tout en facilitant l'accès aux informations
|
|
|
pour les administrateurs. Elle permet notamment
|
|
|
d'afficher les formations disponibles, de gérer les
|
|
|
inscriptions, et de suivre les détails relatifs aux
|
|
|
formateurs et aux sessions.
|
|
|
</p>
|
|
|
<h4>Fonctionnalités :</h4>
|
|
|
<p>
|
|
|
- <strong>Affichage des formations :</strong> Les
|
|
|
utilisateurs peuvent consulter les formations en cours,
|
|
|
les lieux, et les horaires associés.
|
|
|
</p>
|
|
|
<p>
|
|
|
-
|
|
|
<strong>Gestion des inscriptions :</strong>
|
|
|
L'application permet aux administrateurs d'inscrire et
|
|
|
de retirer des participants, de vérifier les présences,
|
|
|
et de suivre l'historique de formation de chaque
|
|
|
pompier.
|
|
|
</p>
|
|
|
<p>
|
|
|
- <strong>Suivi des formateurs :</strong> Elle assure la
|
|
|
gestion des disponibilités des formateurs et leur
|
|
|
attribution aux sessions de formation.
|
|
|
</p>
|
|
|
<p>
|
|
|
-
|
|
|
<strong>Rapports et statistiques :</strong>
|
|
|
L'application génère des rapports de participation, des
|
|
|
statistiques sur la complétion des formations, et des
|
|
|
données sur l'efficacité des sessions.
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="portfolio-item padd-15">
|
|
|
<div class="portfolio-item-inner shadow-dark">
|
|
|
<div
|
|
|
class="portfolio-img"
|
|
|
onclick="toggleDescription('portfolio-6')"
|
|
|
onKeyPress="handleKeyPress(event)"
|
|
|
tabindex="0"
|
|
|
>
|
|
|
<img
|
|
|
src="images/Dames.png"
|
|
|
alt="Image Implémentation d'un jeu de Dames en C# XAML"
|
|
|
width="auto"
|
|
|
height="auto"
|
|
|
/>
|
|
|
</div>
|
|
|
<div
|
|
|
class="portfolio-description-img6 pdesc hidden padd-15"
|
|
|
id="portfolio-6"
|
|
|
>
|
|
|
<h3>Implémentation d'un jeu de Dames en C# XAML</h3>
|
|
|
<h4>Contexte :</h4>
|
|
|
<p>
|
|
|
Ce projet est un projet universitaire réalisé en groupe
|
|
|
de 3 sous la supervision d'un professeur, nous devons
|
|
|
créer une implémentation d'un jeu de Dames en utilisant
|
|
|
les technologies .NET.
|
|
|
</p>
|
|
|
<h4>Objectif :</h4>
|
|
|
<p>
|
|
|
Nous devons créer de toute pièce un jeu de dame qui
|
|
|
s'executera sur windows, pour cela, nous utilisons les
|
|
|
langagesXAML pour le front-end et C# pour le back-end.
|
|
|
</p>
|
|
|
<h4>Travail Réalisé :</h4>
|
|
|
<p>
|
|
|
- Premièrement, il a fallu créer une
|
|
|
<strong>documentation</strong> pour ce projet, dans
|
|
|
celle ci, nous avons mis sur papier les
|
|
|
<strong>règles du jeu</strong>
|
|
|
, ce que nous allons faire, des
|
|
|
<strong>personnas</strong> et des
|
|
|
<strong>user-story</strong>.
|
|
|
</p>
|
|
|
<p>
|
|
|
- Il a ensuite fallu penser le
|
|
|
<strong>design</strong> de notre application. Pour cela,
|
|
|
j'ai utilisé l'outil <strong>Figma</strong> qui me
|
|
|
permet de créer facilement des designs
|
|
|
<strong>complets</strong>.
|
|
|
</p>
|
|
|
<p>
|
|
|
- A partir de ces maquettes, nous avons crée un
|
|
|
<strong>storyboard</strong>, c'est à dire un document
|
|
|
expliquant quelles seront les
|
|
|
<strong>intéractions</strong> entre les différentes
|
|
|
pages par exemple à travers des boutons.
|
|
|
</p>
|
|
|
<p>
|
|
|
- Nous sommes ensuite passés à la création du
|
|
|
<strong>code C# pur</strong> du jeu. Pour nous aider
|
|
|
dans ce travail, il a fallu créer des
|
|
|
<strong>diagrames de classe</strong> ainsi que des
|
|
|
<strong>diagrames de paquetage</strong>.
|
|
|
</p>
|
|
|
<p>
|
|
|
- Après l'implémentation de ce travail en
|
|
|
<strong>C#</strong> est venu l'étape de la gestion de la
|
|
|
<strong>persistance</strong> de l'application. En effet,
|
|
|
nous voulons implémenter un système de
|
|
|
<strong>comptes utilisateurs</strong> dans notre
|
|
|
application. Pour cela, nous avons utilisé un système
|
|
|
comprenant des fichier <strong>JSON</strong>.
|
|
|
</p>
|
|
|
<p>
|
|
|
- Enfin est venu l'étape du
|
|
|
<strong>data-binding</strong>, c'est à dire la
|
|
|
<strong>liaison</strong> du code C# du back-end avec
|
|
|
l'interface XAML.
|
|
|
</p>
|
|
|
<p>
|
|
|
- Nous avons egalement mis en place la
|
|
|
<strong>persistance</strong> des données grâce à un
|
|
|
classement en stockant les données dans un fichier
|
|
|
<strong>JSON</strong>.
|
|
|
</p>
|
|
|
<p>
|
|
|
- Nous avons accompagné ce code d'une
|
|
|
<strong>documentation</strong> complète comprenant les
|
|
|
règles du jeu, les user-story, les diagrammes de classe,
|
|
|
de paquetage et de séquence ainsi qu'une documentation
|
|
|
<strong>Doxygen</strong>.
|
|
|
</p>
|
|
|
<p>
|
|
|
- Nous avons également réalisé des
|
|
|
<strong>tests unitaires</strong> afin de tester 80% du
|
|
|
code de nos methodes.
|
|
|
</p>
|
|
|
<h4>Resultat :</h4>
|
|
|
<p>
|
|
|
Nous n'avons pas eu de notation pour le moment sur ce
|
|
|
travail. Mais notre professeur nous à fait par de son
|
|
|
enthousiasme autour de notre projet. J'ai également pu
|
|
|
découvrir le développement en C# ainsi qu'en XAML, les
|
|
|
technologies .NET ainsi que l'utilisation de l'outil
|
|
|
Visual Studio Community.
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
<section class="interet section" id="interet">
|
|
|
<div class="container">
|
|
|
<div class="row">
|
|
|
<div class="section-title padd-15">
|
|
|
<h2>Centres d'Intérêt</h2>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="interet-item padd-15">
|
|
|
<div class="interet-item-inner">
|
|
|
<div class="icon">
|
|
|
<em class="fa fa-car"></em>
|
|
|
</div>
|
|
|
<h4>Automobile</h4>
|
|
|
<p>
|
|
|
Passionné par le monde de l'<strong>automobile</strong>,
|
|
|
j’apprécie découvrir les innovations technologiques et les
|
|
|
<strong>designs audacieux</strong> qui transforment chaque
|
|
|
modèle en une œuvre d'ingénierie unique. Ce domaine allie à
|
|
|
la fois <strong>performance</strong> et
|
|
|
<strong>esthétique</strong>, avec des avancées constantes en
|
|
|
matière de motorisation, de sécurité et d'écologie, sans
|
|
|
jamais sacrifier la beauté des lignes et l’expérience de
|
|
|
conduite. J'aime suivre l'évolution des technologies, comme
|
|
|
les <strong>véhicules autonomes</strong>, qui redéfinissent
|
|
|
l'avenir de la mobilité. L'automobile, pour moi, incarne le parfait équilibre entre l'innovation et
|
|
|
l'art, faisant de chaque découverte un moment
|
|
|
particulièrement captivant.
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="interet-item padd-15">
|
|
|
<div class="interet-item-inner">
|
|
|
<div class="icon">
|
|
|
<em class="fa fa-film"></em>
|
|
|
</div>
|
|
|
<h4>Cinéma</h4>
|
|
|
<p>
|
|
|
Le <strong>cinéma</strong> est une source inépuisable
|
|
|
d'<strong>inspiration</strong> et de
|
|
|
<strong>créativité</strong>. Il me fascine par sa capacité à
|
|
|
transmettre des idées et émotions à travers des
|
|
|
<strong>univers visuels uniques</strong>, où chaque image et
|
|
|
chaque mot portent un sens profond. J'aime explorer divers
|
|
|
genres, de la <strong>science-fiction</strong> au
|
|
|
<strong>drame</strong>, chacun offrant une
|
|
|
<strong>perspective unique</strong> sur le monde. Le cinéma
|
|
|
qui combine des scénarios profonds et des visuels marquants
|
|
|
m'invite à réfléchir, me rappelant à quel point l’art
|
|
|
cinématographique peut être puissant et évocateur.
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="interet-item padd-15">
|
|
|
<div class="interet-item-inner">
|
|
|
<div class="icon">
|
|
|
<em class="fa fa-bicycle"></em>
|
|
|
</div>
|
|
|
<h4>Sport</h4>
|
|
|
<p>
|
|
|
Le <strong>sport</strong>, et plus particulièrement le
|
|
|
<strong>vélo</strong>, occupe une place essentielle dans ma
|
|
|
vie. Au-delà du simple exercice, le vélo représente pour moi
|
|
|
un <strong>défi physique</strong> constant, où l'endurance
|
|
|
et la persévérance sont essentielles. Chaque sortie est
|
|
|
l'occasion de repousser mes limites, de me fixer de nouveaux
|
|
|
objectifs et de ressentir un profond
|
|
|
<strong>sentiment de liberté</strong> en parcourant des
|
|
|
paysages variés. Cette activité m'aide à maintenir une bonne
|
|
|
<strong>forme physique</strong> tout en me procurant un
|
|
|
bien-être mental. Le vélo allie effort et plaisir, me
|
|
|
permettant de me ressourcer et de trouver un équilibre entre
|
|
|
corps et esprit.
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
<section class="contact section" id="contact">
|
|
|
<div class="container">
|
|
|
<div class="row">
|
|
|
<div class="section-title padd-15">
|
|
|
<h2>Contactez moi</h2>
|
|
|
</div>
|
|
|
</div>
|
|
|
<h3 class="contact-title padd-15">Avez-vous des questions ?</h3>
|
|
|
<h4 class="contact-sub-title padd-15">JE SUIS A VOTRE SERVICE</h4>
|
|
|
<div class="row listcontact">
|
|
|
<div class="contact-info-item padd-15">
|
|
|
<div class="icon"><em class="fa fa-envelope"></em></div>
|
|
|
<h4>Email</h4>
|
|
|
<p>hugo.creneau@etu.uca.fr</p>
|
|
|
</div>
|
|
|
<div class="contact-info-item padd-15">
|
|
|
<div class="icon"><em class="fa fa-map-marker-alt"></em></div>
|
|
|
<h4>Lieu :</h4>
|
|
|
<p>Clermont-Ferrand (63) - France</p>
|
|
|
</div>
|
|
|
<div class="contact-info-item padd-15">
|
|
|
<div class="icon"><em class="fa fa-globe-europe"></em></div>
|
|
|
<h4>LinkedIn</h4>
|
|
|
<a
|
|
|
href="https://www.linkedin.com/in/hugo-creneau-53a7402a8/"
|
|
|
id="linked"
|
|
|
>Mon LinkedIn</a
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<form id="contactForm" class="contact-form padd-15" method="POST">
|
|
|
<div class="row">
|
|
|
<div class="form-item col-6 padd-15">
|
|
|
<div class="form-group">
|
|
|
<label for="nameInput">Nom :</label>
|
|
|
<input
|
|
|
id="nameInput"
|
|
|
name="name"
|
|
|
type="text"
|
|
|
class="form-control"
|
|
|
placeholder="Nom"
|
|
|
required
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="form-item col-6 padd-15">
|
|
|
<div class="form-group">
|
|
|
<label for="emailInput">Email :</label>
|
|
|
<input
|
|
|
id="emailInput"
|
|
|
name="email"
|
|
|
type="email"
|
|
|
class="form-control"
|
|
|
placeholder="Email"
|
|
|
required
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="form-item col-12 padd-15">
|
|
|
<div class="form-group">
|
|
|
<label for="subjectInput">Objet :</label>
|
|
|
<input
|
|
|
id="subjectInput"
|
|
|
name="subject"
|
|
|
type="text"
|
|
|
class="form-control"
|
|
|
placeholder="Objet"
|
|
|
required
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="form-item col-12 padd-15">
|
|
|
<div class="form-group">
|
|
|
<label for="messageInput">Message :</label>
|
|
|
<textarea
|
|
|
id="messageInput"
|
|
|
name="message"
|
|
|
class="form-control"
|
|
|
placeholder="Message"
|
|
|
required
|
|
|
></textarea>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="form-item col-12 padd-15">
|
|
|
<button type="submit" class="btn">Envoyer message</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="style-switcher">
|
|
|
<div class="style-switcher-toggle s-icon">
|
|
|
<em class="fas fa-cog fa-spin"></em>
|
|
|
</div>
|
|
|
<div class="day-night s-icon">
|
|
|
<em class="fas fa-moon"></em>
|
|
|
</div>
|
|
|
<h4>Theme Colors</h4>
|
|
|
<div class="colors">
|
|
|
<span
|
|
|
class="color-1"
|
|
|
onclick="setActiveStyle('color-1')"
|
|
|
onKeyPress="handleKeyPress(event)"
|
|
|
tabIndex="0"
|
|
|
></span>
|
|
|
<span
|
|
|
class="color-2"
|
|
|
onclick="setActiveStyle('color-2')"
|
|
|
onKeyPress="handleKeyPress(event)"
|
|
|
tabIndex="0"
|
|
|
></span>
|
|
|
<span
|
|
|
class="color-3"
|
|
|
onclick="setActiveStyle('color-3')"
|
|
|
onKeyPress="handleKeyPress(event)"
|
|
|
tabIndex="0"
|
|
|
></span>
|
|
|
<span
|
|
|
class="color-4"
|
|
|
onclick="setActiveStyle('color-4')"
|
|
|
onKeyPress="handleKeyPress(event)"
|
|
|
tabIndex="0"
|
|
|
></span>
|
|
|
<span
|
|
|
class="color-5"
|
|
|
onclick="setActiveStyle('color-5')"
|
|
|
onKeyPress="handleKeyPress(event)"
|
|
|
tabIndex="0"
|
|
|
></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<script
|
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.1.0/typed.umd.js"
|
|
|
integrity="sha512-+2pW8xXU/rNr7VS+H62aqapfRpqFwnSQh9ap6THjsm41AxgA0MhFRtfrABS+Lx2KHJn82UOrnBKhjZOXpom2LQ=="
|
|
|
crossorigin="anonymous"
|
|
|
referrerpolicy="no-referrer"
|
|
|
></script>
|
|
|
<script src="js/script.js"></script>
|
|
|
<script src="js/style-switcher.js"></script>
|
|
|
</body>
|
|
|
</html>
|
