|
|
<!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="#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>En tant qu'étudiant en Première année de <strong>BUT Informatique</strong>
|
|
|
passionné par le développement web,
|
|
|
je maîtrise les langages HTML, CSS, JavaScript et Python pour créer des
|
|
|
applications web <strong>efficaces</strong>
|
|
|
. Mon approche <strong>créative</strong> se reflète dans mes projets,
|
|
|
tandis que mon <strong>adaptabilité</strong>
|
|
|
me permet de relever les défis techniques qui se présentent. Ma
|
|
|
<strong>rigueur</strong> garantit la qualité et la
|
|
|
fiabilité de chaque développement. En combinant mes <strong>compétences</strong>
|
|
|
techniques, incluant des
|
|
|
connaissances en frameworks tels que <strong>Vue, Nuxt, Angular, React</strong>
|
|
|
, et mes <strong>qualités</strong>,
|
|
|
je suis capable de transformer des concepts en applications web de manière
|
|
|
professionnelle. Pour la rentrée 2024,
|
|
|
je suis à la recherche d'une <strong>alternance</strong> dans le domaine du
|
|
|
développement web sur un rythme de 3
|
|
|
mois 3 mois.</p>
|
|
|
<p>Je vous invite à télécharger mon CV ci-dessous ou à 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> 2023 -2024
|
|
|
</h3>
|
|
|
<h4 class="timeline-title">1ere 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# et 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 diplome du Baccalauréat
|
|
|
</h4>
|
|
|
<p class="timeline-text">Durant ces années au lycée
|
|
|
Jean-Zay à Thiers(63), j'ai obtenu le
|
|
|
diplome 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 professionnelle</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>webdesign</strong> est l'art de concevoir des
|
|
|
interfaces web attrayantes et fonctionnelles,
|
|
|
alliant <strong>esthétique</strong> et
|
|
|
<strong>utilité</strong> pour offrir une expérience utilisateur
|
|
|
optimale. La réalisation de ce <strong>PortFolio</strong>
|
|
|
m'a permis de m'entrainer dans ce domaine.</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>Web Development</h4>
|
|
|
<p>Le <strong>développement web</strong> englobe la
|
|
|
création et la maintenance de sites web, utilisant des
|
|
|
langages de programmation comme <strong>HTML</strong>
|
|
|
, <strong>CSS</strong> et <strong>JavaScript</strong>
|
|
|
pour concevoir des interfaces interactives et
|
|
|
des fonctionnalités <strong>dynamiques</strong>.
|
|
|
Les cours de
|
|
|
web m'ont formés à cette pratique et j'ai continué
|
|
|
à en faire après la fin de ce module car c'est un domaine
|
|
|
qui me <strong>passionne</strong>.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="competences-item padd-15">
|
|
|
<div class="competences-item-inner">
|
|
|
<div class="icon">
|
|
|
<em class="fa fa-rocket"></em>
|
|
|
</div>
|
|
|
<h4>Frameworks web</h4>
|
|
|
<p>Les <strong>frameworks web</strong> sont des outils
|
|
|
essentiels qui permettent de structurer et de faciliter le
|
|
|
développement d'applications web. En utilisant
|
|
|
des frameworks tels que <strong>Angular</strong>,
|
|
|
<strong>Vue</strong>, <strong>Nuxt</strong> ou
|
|
|
<strong>React</strong>. Je peux créer des interfaces
|
|
|
utilisateur dynamiques et performantes. Ces
|
|
|
frameworks offrent une <strong>liberté</strong> créative
|
|
|
immense, permettant de développer rapidement des
|
|
|
fonctionnalités complexes à partir de structures solides
|
|
|
et modulaires.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="competences-item padd-15">
|
|
|
<div class="competences-item-inner">
|
|
|
<div class="icon">
|
|
|
<em class="fa fa-code"></em>
|
|
|
</div>
|
|
|
<h4>Coding</h4>
|
|
|
<p>Le <strong>coding</strong>, ou <strong>codage</strong>,
|
|
|
fait référence à l'acte d'écrire du code informatique
|
|
|
dans des langages de programmation <strong>spécifiques</strong>
|
|
|
, permettant de créer des applications,
|
|
|
des sites web, des logiciels et bien plus encore.
|
|
|
C'est une pratique qui me passionne de part la
|
|
|
<strong>liberté</strong> que cela procure de pourvoir
|
|
|
tout créer à partir de rien. J'ai pour habiotude
|
|
|
d'utiliser l'éditeur de code <strong>Visual Studio Code</strong>
|
|
|
car celui-ci à un design confortable ainsi
|
|
|
que de nombreuses fonctionnalités utiles telles que Git qui
|
|
|
permet le <strong>partage</strong> de mon travail
|
|
|
avec mes coéquipiers.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="competences-item padd-15">
|
|
|
<div class="competences-item-inner">
|
|
|
<div class="icon">
|
|
|
<em class="fa fa-puzzle-piece"></em>
|
|
|
</div>
|
|
|
<h4>Développement Orienté Objet</h4>
|
|
|
<p>Le <strong>développement orienté objet</strong>
|
|
|
est une approche de programmation où les concepts
|
|
|
du monde
|
|
|
réel sont modélisés en objets, chacun ayant des
|
|
|
<strong>propriétés</strong> et des comportements
|
|
|
<strong>spécifiques</strong>. J'ai découvert à travers
|
|
|
le <strong>C++</strong> ce versant du développement,
|
|
|
c'est un langage crée à partir du <strong>C</strong>
|
|
|
que j'avais étudié précédament. Cela m'a permis de me
|
|
|
focaliser sur le côté <strong>objet</strong> du
|
|
|
développement plutôt que sur le <strong>langage</strong></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="competences-item padd-15">
|
|
|
<div class="competences-item-inner">
|
|
|
<div class="icon">
|
|
|
<em class="fa fa-cogs"></em>
|
|
|
</div>
|
|
|
<h4>Développement Applicatif</h4>
|
|
|
<p>Le <strong>développement applicatif</strong> avec
|
|
|
<strong>XAML</strong> et <strong>C#</strong>
|
|
|
consiste à
|
|
|
créer des applications interactives pour les
|
|
|
plateformes Windows en utilisant le langage de
|
|
|
<strong>balisage
|
|
|
XAML</strong> pour la conception d'interfaces
|
|
|
utilisateur et le langage de programmation
|
|
|
<strong>C#</strong> pour la <strong>logique</strong>
|
|
|
applicative. Cette approche permet de développer
|
|
|
des applications riches et performantes pour
|
|
|
une <strong>variété</strong> de dispositifs.</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 Personnels (cliquez sur les images pour plus de détails)</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/MLD.png" alt="Image Création de base de données" width="auto" height="auto">
|
|
|
</div>
|
|
|
<div class="portfolio-description-img5 pdesc hidden padd-15" id="portfolio-5">
|
|
|
<h3>Création de base de données</h3>
|
|
|
<h4>Contexte :</h4>
|
|
|
<p>Pour ce projet universitaire non supervisé
|
|
|
par un professeur, nous devions, en équipe de 4,
|
|
|
créer la
|
|
|
base de données d'une entreprise fictive</p>
|
|
|
<h4>Objectif :</h4>
|
|
|
<p>Nous devions créer la base de donnée de l'entreprise
|
|
|
fictive AskehCorp, une entreprise leader de la
|
|
|
grande distribution. A l'issue de ce travail,
|
|
|
nous devions rendre un Modèle Conceptuel de
|
|
|
Données (MCD)
|
|
|
qui décrit chacune de nos tables SQL ainsi
|
|
|
qu'un script PostgreSQL créant ces différentes
|
|
|
tables, nous
|
|
|
devions également réaliser un oral afin de
|
|
|
présenter notre travail à un professeur.</p>
|
|
|
<h4>Travail Réalisé :</h4>
|
|
|
<p>- Premièrement, il a fallu créer le
|
|
|
<strong>modèle conceptuel de données</strong>
|
|
|
de la base de données,
|
|
|
pour cela, je me suis inspiré de celui de
|
|
|
l'entreprise Carrefour car notre entreprise
|
|
|
s'organisait sous
|
|
|
la <strong>même forme</strong>.</p>
|
|
|
<p>- Ensuite, il a fallu ecrire en
|
|
|
<strong>PostgreSQL</strong> le code permettant
|
|
|
la création des différentes
|
|
|
tables. Celles-ci présentent des
|
|
|
<strong>particularités</strong> comme par
|
|
|
exemple le fait que certaines
|
|
|
donnée doit être <strong>impérativement</strong>
|
|
|
présente lors de l'ajout de données.</p>
|
|
|
<p>- Il a ensuite fallu remplir cette base de données,
|
|
|
pour cela, j'ai généré avec de l'IA plusieurs
|
|
|
itérations du contenu de chaque table.</p>
|
|
|
<p>- Enfin, j'ai écrit des requètes SQL demandant
|
|
|
à la base de données des informations telles
|
|
|
que le
|
|
|
pays dans lequel il y à le plus de commandes
|
|
|
ou le fournisseur coutant le plus cher.</p>
|
|
|
<h4>Resultat :</h4>
|
|
|
<p>Le professeur était très satisfait de notre
|
|
|
travail car nous avions réalisé toutes
|
|
|
les taches qui nous
|
|
|
étaient demandées, malgré cela, notre
|
|
|
code nécessitait quelques optimisations.
|
|
|
Nous avons obtenu la
|
|
|
note de 12.5/14 pour une moyenne à 10.</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="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>
|
|
|
<h3 class="contact-title padd-15">ENVOYER EMAIL (Par manque de serveur,
|
|
|
cette fonctionnalité n'est pas disponible, merci de
|
|
|
me contacter au mail ci dessus)</h3>
|
|
|
<h4 class="contact-sub-title padd-15">JE REPONDS AUX MESSAGES</h4>
|
|
|
<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>
|
|
|
<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> |
