codesmell
continuous-integration/drone/push Build is passing Details

master
Hugo CRENEAU 11 months ago
parent 4c235e0639
commit 9203ced8aa

@ -40,14 +40,22 @@
<div class="home-info padd-15"> <div class="home-info padd-15">
<h3 class="hello">Bonjour, je m'appelle <span class="name">Hugo Creneau</span></h3> <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> <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, <p>En tant qu'étudiant en Première année de <strong>BUT Informatique</strong>
je maîtrise les langages HTML, CSS, JavaScript et Python pour créer des applications web <strong>efficaces</strong> passionné par le développement web,
. Mon approche <strong>créative</strong> se reflète dans mes projets, tandis que mon <strong>adaptabilité</strong> je maîtrise les langages HTML, CSS, JavaScript et Python pour créer des
me permet de relever les défis techniques qui se présentent. Ma <strong>rigueur</strong> garantit la qualité et la applications web <strong>efficaces</strong>
fiabilité de chaque développement. En combinant mes <strong>compétences</strong> techniques, incluant des . Mon approche <strong>créative</strong> se reflète dans mes projets,
connaissances en frameworks tels que <strong>Vue, Nuxt, Angular, React</strong>, et mes <strong>qualités</strong>, tandis que mon <strong>adaptabilité</strong>
je suis capable de transformer des concepts en applications web de manière professionnelle. Pour la rentrée 2024, me permet de relever les défis techniques qui se présentent. Ma
je suis à la recherche d'une <strong>alternance</strong> dans le domaine du développement web sur un rythme de 3 <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> mois 3 mois.</p>
<p>Je vous invite à télécharger mon CV ci-dessous ou à consulter mon LinkedIn.</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="./images/CVHugoCRENEAU.pdf" download="./images/CVHugoCRENEAU.pdf" class="btn" id="boutonCV">Mon CV</a>
@ -80,21 +88,31 @@
<em class="fa fa-calendar"></em> 2023 -2024 <em class="fa fa-calendar"></em> 2023 -2024
</h3> </h3>
<h4 class="timeline-title">1ere année BUT Informatique</h4> <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, <p class="timeline-text">Le <strong>BUT Informatique</strong>
un monde d'opportunités pour l'innovation. Durant cette année, j'ai abordé de nombreux me plonge dans le développement,
sujets tels que le <strong>développement web</strong> avec les langages HTML et CSS, mais un monde d'opportunités pour l'innovation. Durant
également le <strong>développement objet</strong> en C# et C++ et Python ainsi que cette année, j'ai abordé de nombreux
l'<strong>administration de bases de données</strong> en PostgreSQL.</p> 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>
<div class="timeline-item"> <div class="timeline-item">
<div class="circle-dot"></div> <div class="circle-dot"></div>
<h3 class="timeline-date"> <h3 class="timeline-date">
<em class="fa fa-calendar"></em> 2021 - 2023 <em class="fa fa-calendar"></em> 2021 - 2023
</h3> </h3>
<h4 class="timeline-title">Obtention du diplome du Baccalauréat</h4> <h4 class="timeline-title">
<p class="timeline-text">Durant ces années au lycée Jean-Zay à Thiers(63), j'ai obtenu le Obtention du diplome du Baccalauréat
diplome du <strong>Baccalauréat</strong> avec <strong>mention</strong> en étudiant les </h4>
spécialités Mathématiques, Physique-Chimie et Numérique et sciences de l'informatique(NSI). <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> </p>
</div> </div>
</div> </div>
@ -109,19 +127,31 @@
<div class="timeline-item"> <div class="timeline-item">
<div class="circle-dot"></div> <div class="circle-dot"></div>
<h3 class="timeline-date"> <h3 class="timeline-date">
<em class="fa fa-calendar"></em> 22-23 mai 2022 - 3-4 juin 2023 <em class="fa fa-calendar"></em> 22-23 mai 2022 -
3-4 juin 2023
</h3> </h3>
<h4 class="timeline-title">Bénévolat durant l'évenement enduforez</h4> <h4 class="timeline-title">Bénévolat durant l'évenement
<p class="timeline-text">En mai 2022 et en juin 2023, je faisais partie des responsables de enduforez</h4>
l<strong>organisation</strong> dun événement de VTT nommé EnduForez accueillant plus de <p class="timeline-text">En mai 2022 et en juin
700 participants. Jai donc dû participer a la <strong>gestion</strong> du logement des 2023, je faisais partie des responsables de
personnes, de leur <strong>restauration</strong>, du <strong>stockage</strong> de leurs l<strong>organisation</strong> dun événement
véhicules, de l<strong>acheminement</strong> des participants par navettes sur le lieu de de VTT nommé EnduForez accueillant plus de
départ de lévénement, ainsi que leur <strong>ravitaillement</strong> lors du parcours. 700 participants. Jai donc dû participer a la
Cette expérience ma donc permis de prendre mes <strong>responsabilités</strong> lors de <strong>gestion</strong> du logement des
lorganisation dun événement sportif accueillant de nombreuses personnes ainsi que personnes, de leur <strong>restauration</strong>
dapprendre à <strong>réagir</strong> vite face à des situations pouvant savérer , du <strong>stockage</strong> de leurs
problématiques telles que, lors de cet événement, des prises de <strong>retard</strong> 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 ma donc permis de prendre mes
<strong>responsabilités</strong> lors de
lorganisation dun événement sportif accueillant
de nombreuses personnes ainsi que
dapprendre à <strong>réagir</strong> vite face à
des situations pouvant savérer
problématiques telles que, lors de cet événement,
des prises de <strong>retard</strong>
liées aux navettes.</p> liées aux navettes.</p>
<img src="images/end2.png" id="end1" alt="" width="auto" height="auto"> <img src="images/end2.png" id="end1" alt="" width="auto" height="auto">
</div> </div>
@ -148,9 +178,12 @@
<em class="fa fa-pencil-alt"></em> <em class="fa fa-pencil-alt"></em>
</div> </div>
<h4>Web Design</h4> <h4>Web Design</h4>
<p>Le <strong>webdesign</strong> est l'art de concevoir des interfaces web attrayantes et fonctionnelles, <p>Le <strong>webdesign</strong> est l'art de concevoir des
alliant <strong>esthétique</strong> et <strong>utilité</strong> pour offrir une expérience utilisateur interfaces web attrayantes et fonctionnelles,
optimale. La réalisation de ce <strong>PortFolio</strong> m'a permis de m'entrainer dans ce domaine.</p> 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> </div>
<div class="competences-item padd-15"> <div class="competences-item padd-15">
@ -159,10 +192,15 @@
<em class="fa fa-laptop-code"></em> <em class="fa fa-laptop-code"></em>
</div> </div>
<h4>Web Development</h4> <h4>Web Development</h4>
<p>Le <strong>développement web</strong> englobe la création et la maintenance de sites web, utilisant des <p>Le <strong>développement web</strong> englobe la
langages de programmation comme <strong>HTML</strong>, <strong>CSS</strong> et <strong>JavaScript</strong> création et la maintenance de sites web, utilisant des
pour concevoir des interfaces interactives et des fonctionnalités <strong>dynamiques</strong>. Les cours de langages de programmation comme <strong>HTML</strong>
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 , <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> qui me <strong>passionne</strong>.</p>
</div> </div>
</div> </div>
@ -172,11 +210,16 @@
<em class="fa fa-rocket"></em> <em class="fa fa-rocket"></em>
</div> </div>
<h4>Frameworks web</h4> <h4>Frameworks web</h4>
<p>Les <strong>frameworks web</strong> sont des outils essentiels qui permettent de structurer et de faciliter le <p>Les <strong>frameworks web</strong> sont des outils
développement d'applications web. En utilisant des frameworks tels que <strong>Angular</strong>, essentiels qui permettent de structurer et de faciliter le
<strong>Vue</strong>, <strong>Nuxt</strong> ou <strong>React</strong>. Je peux créer des interfaces développement d'applications web. En utilisant
utilisateur dynamiques et performantes. Ces frameworks offrent une <strong>liberté</strong> créative des frameworks tels que <strong>Angular</strong>,
immense, permettant de développer rapidement des fonctionnalités complexes à partir de structures solides <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> et modulaires.</p>
</div> </div>
</div> </div>
@ -186,12 +229,18 @@
<em class="fa fa-code"></em> <em class="fa fa-code"></em>
</div> </div>
<h4>Coding</h4> <h4>Coding</h4>
<p>Le <strong>coding</strong>, ou <strong>codage</strong>, fait référence à l'acte d'écrire du code informatique <p>Le <strong>coding</strong>, ou <strong>codage</strong>,
dans des langages de programmation <strong>spécifiques</strong>, permettant de créer des applications, fait référence à l'acte d'écrire du code informatique
des sites web, des logiciels et bien plus encore. C'est une pratique qui me passionne de part la dans des langages de programmation <strong>spécifiques</strong>
<strong>liberté</strong> que cela procure de pourvoir tout créer à partir de rien. J'ai pour habiotude , permettant de créer des applications,
d'utiliser l'éditeur de code <strong>Visual Studio Code</strong> car celui-ci à un design confortable ainsi des sites web, des logiciels et bien plus encore.
que de nombreuses fonctionnalités utiles telles que Git qui permet le <strong>partage</strong> de mon travail 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> avec mes coéquipiers.</p>
</div> </div>
</div> </div>
@ -201,11 +250,17 @@
<em class="fa fa-puzzle-piece"></em> <em class="fa fa-puzzle-piece"></em>
</div> </div>
<h4>Développement Orienté Objet</h4> <h4>Développement Orienté Objet</h4>
<p>Le <strong>développement orienté objet</strong> est une approche de programmation où les concepts du monde <p>Le <strong>développement orienté objet</strong>
réel sont modélisés en objets, chacun ayant des <strong>propriétés</strong> et des comportements est une approche de programmation où les concepts
<strong>spécifiques</strong>. J'ai découvert à travers le <strong>C++</strong> ce versant du développement, du monde
c'est un langage crée à partir du <strong>C</strong> que j'avais étudié précédament. Cela m'a permis de me réel sont modélisés en objets, chacun ayant des
focaliser sur le côté <strong>objet</strong> du développement plutôt que sur le <strong>langage</strong></p> <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> </div>
<div class="competences-item padd-15"> <div class="competences-item padd-15">
@ -214,11 +269,18 @@
<em class="fa fa-cogs"></em> <em class="fa fa-cogs"></em>
</div> </div>
<h4>Développement Applicatif</h4> <h4>Développement Applicatif</h4>
<p>Le <strong>développement applicatif</strong> avec <strong>XAML</strong> et <strong>C#</strong> consiste à <p>Le <strong>développement applicatif</strong> avec
créer des applications interactives pour les plateformes Windows en utilisant le langage de <strong>balisage <strong>XAML</strong> et <strong>C#</strong>
XAML</strong> pour la conception d'interfaces utilisateur et le langage de programmation consiste à
<strong>C#</strong> pour la <strong>logique</strong> applicative. Cette approche permet de développer créer des applications interactives pour les
des applications riches et performantes pour une <strong>variété</strong> de dispositifs.</p> 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>
</div> </div>
@ -238,12 +300,20 @@
<em class="fa fa-paint-brush"></em> <em class="fa fa-paint-brush"></em>
</div> </div>
<h4>Créativité</h4> <h4>Créativité</h4>
<p>La <strong>créativité</strong> est une qualité essentielle dans le domaine du design et du développement, <p>La <strong>créativité</strong> est une qualité
permettant de générer des idées <strong>innovantes</strong>, de résoudre des problèmes de manière essentielle dans le domaine du design et du
<strong>originale</strong> et d'apporter une touche unique à chaque projet. Elle se manifeste par la développement,
capacité à <strong>penser différemment</strong>, à explorer de nouvelles voies et à repousser les permettant de générer des idées <strong>innovantes</strong>
<strong>limites</strong> de la conception et de la programmation. Le développement de ce PortFolio ainsi , de résoudre des problèmes de manière
que de mes différents projets m'ont permis d'entrainer cette <strong>qualité</strong> et de l'éxercer avec <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> brio.</p>
</div> </div>
</div> </div>
@ -253,12 +323,18 @@
<em class="fa fa-puzzle-piece"></em> <em class="fa fa-puzzle-piece"></em>
</div> </div>
<h4>Adaptibilité</h4> <h4>Adaptibilité</h4>
<p>L'<strong>adaptabilité</strong> est une qualité clé qui me caractérise. Elle se manifeste par ma capacité à <p>L'<strong>adaptabilité</strong> est une qualité clé
m'ajuster facilement aux <strong>changements</strong>, à m'adapter à de nouvelles situations et à trouver qui me caractérise. Elle se manifeste par ma capacité à
des solutions <strong>créatives</strong> face à des défis imprévus. Cette qualité me permet de rester m'ajuster facilement aux <strong>changements</strong>
<strong>efficace</strong> et <strong>productif</strong> dans des environnements dynamiques et en , à m'adapter à de nouvelles situations et à trouver
<strong>constante</strong> évolution. Je m'adapte en continu dans le développement car, pour de nombreux des solutions <strong>créatives</strong> face à des
projets, il est necessaire de changer de langage et donc de s'adapter <strong>constamment</strong>.</p> 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> </div>
<div class="qualites-item padd-15"> <div class="qualites-item padd-15">
@ -267,13 +343,23 @@
<em class="fa fa-ruler"></em> <em class="fa fa-ruler"></em>
</div> </div>
<h4>Rigueur</h4> <h4>Rigueur</h4>
<p>La <strong>rigueur</strong> est l'une de mes qualités fondamentales. Elle se manifeste dans mon approche <p>La <strong>rigueur</strong> est l'une de mes qualités
méthodique du travail, ma capacité à suivre des processus avec <strong>précision</strong> et à maintenir fondamentales. Elle se manifeste dans mon approche
des normes élevées de qualité dans tout ce que j'entreprends. Cela se traduit également par mon souci du méthodique du travail, ma capacité à suivre des
<strong>détail</strong> et ma <strong>persévérance</strong> à atteindre les objectifs fixés, même dans les processus avec <strong>précision</strong> et à maintenir
situations les plus <strong>exigeantes</strong>. Dans le développement, on doit absolument, pour créer un des normes élevées de qualité dans tout ce que
code <strong>fonctionnel</strong> créant une bonne expérience pour l'utilisateur, obtenir un code fonctionnel j'entreprends. Cela se traduit également par
dans bug, il faut être <strong>rigoureux</strong> pour cela.</p> 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>
</div> </div>
@ -300,26 +386,43 @@
<div class="portfolio-description-img1 pdesc hidden padd-15" id="portfolio-1"> <div class="portfolio-description-img1 pdesc hidden padd-15" id="portfolio-1">
<h3>Service d'envoi massif d'email</h3> <h3>Service d'envoi massif d'email</h3>
<h4>Contexte :</h4> <h4>Contexte :</h4>
<p>Une entreprise peut avoir besoin d'envoyer nombre d'Emails à ses clients. C'est pour cela que j'ai <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> entrepris la création de ce SAAS</p>
<h4>Objectif :</h4> <h4>Objectif :</h4>
<p>L'objectif est de réaliser avec différents outils tels que React, Tailwind CSS, Node JS ainsi que <p>L'objectif est de réaliser avec différents outils
PostgreSQL. Un service d'envoi massif d'emails marketing.</p> tels que React, Tailwind CSS, Node JS ainsi que
PostgreSQL. Un service d'envoi massif d'emails
marketing.</p>
<h4>Travail Réalisé :</h4> <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 <p>- J'ai premièrement choisi ma <strong>stack</strong>
framework JavaScript <strong>React JS</strong> pour deux raisons, le fait que c'est le framework que pour le développement de ce projet, j'ai choisi le
je <strong>maitrise</strong> le plus ainsi que le fait que ce frameword permette un design moderne.</p> framework JavaScript <strong>React JS</strong>
<p>- J'ai ensuite pensé la <strong>structure</strong> du projet afin d'avoir une vision d'ensemble pour la 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> suite.</p>
<p>- J'ai développé l'<strong>interface</strong> de la page d'accueil en utilisant l'outil <p>- J'ai développé l'<strong>interface</strong> de
la page d'accueil en utilisant l'outil
<strong>shadcn UI</strong>.</p> <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 <p>- J'ai entrepris la création d'un système de
de base de données que je maitrise grâce à mes <strong>études</strong>. Il faut que chaque utilisateur compte en utilisant <strong>PostgreSQL</strong>
puisse créer un compte avec une <strong>adresse mail</strong> ou un compte <strong>Google</strong>, et , un langage
qu'il renseigne un mot de passe qui sera stocké après avoir été <strong>hashé</strong>.</p> 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> <h4>Resultat :</h4>
<p>Pour le moment, je possède une <strong>interface</strong> d'accueil moderne ainsi qu'une base de données <p>Pour le moment, je possède une <strong>interface</strong>
pouvant stocker des utilisateurs. La prochaine étape est de <strong>lier</strong> la base de données et 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> le projet.</p>
<a href="https://github.com/hugocrne/marketmailtmp">Cliquez ici pour consulter le code source</a> <a href="https://github.com/hugocrne/marketmailtmp">Cliquez ici pour consulter le code source</a>
</div> </div>
@ -333,26 +436,44 @@
<div class="portfolio-description-img2 pdesc hidden padd-15" id="portfolio-2"> <div class="portfolio-description-img2 pdesc hidden padd-15" id="portfolio-2">
<h3>Implémentation du jeu PacMan en JavaScript</h3> <h3>Implémentation du jeu PacMan en JavaScript</h3>
<h4>Contexte :</h4> <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 <p>Je suis passionné de jeu vidéo et j'ai
web, j'ai eu envie d'apprendre le JavaScript, j'ai donc voulu conjuguer ces deux envies.</p> 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> <h4>Objectif :</h4>
<p>L'objectif est de créer une implémentation du jeu PacMan en JavaScript</p> <p>L'objectif est de créer une implémentation
du jeu PacMan en JavaScript</p>
<h4>Travail Réalisé :</h4> <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 <p>- J'ai premièrement choisi la <strong>manière</strong>
crée une <strong>matrice</strong> remplie des chiffres 1 et 2, 1 lorsque c'est un mur et 2 lorsque la voie 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> est libre.</p>
<p>- J'ai ensuite crée le <strong>comportement</strong> du personnage jouable en l'animant avec des <p>- J'ai ensuite crée le <strong>comportement</strong>
<strong>sprites</strong> trouvés sur internet ainsi qu'en codant ses différentes méthodes et en créant 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> 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 <p>- Pour les ennemis, les 4 fantomes, je leur ai codé
<strong>aléatoire</strong>. En effet, ils cherchent à atteindre PacMan si celui-ci n'est pas un <strong>comportement</strong> plus ou moins
<strong>trop loin</strong>, sinon leurs mouvements sont <strong>aléatoires</strong>.</p> <strong>aléatoire</strong>. En effet, ils cherchent
<p>- Pour finir, j'ai implémenté les intéractions entre PacMan et les fantomes en créant le système de vies, à atteindre PacMan si celui-ci n'est pas
j'ai mis sur le plateau les "Gums" que PacMan doit manger et j'ai implémenté le visuel du jeu.</p> <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> <h4>Resultat :</h4>
<p>Je possède maintenant un jeu PacMan <strong>fonctionnel</strong> qui se joue avec les flèches <p>Je possède maintenant un jeu PacMan <strong>fonctionnel</strong>
directionnelles et j'ai pu apprendre les bases du <strong>JavaScript</strong>.</p> qui se joue avec les flèches
<p>Vous pouvez retrouver le jeu en cliquant <a href="https://hugocrne.github.io/PacMan_Game_js/">ici</a> 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> ou consulter le code source ci-dessous.</p>
<a href="https://github.com/hugocrne/PacMan_Game_js">Code Source</a> <a href="https://github.com/hugocrne/PacMan_Game_js">Code Source</a>
</div> </div>
@ -366,22 +487,32 @@
<div class="portfolio-description-img3 pdesc hidden padd-15" id="portfolio-3"> <div class="portfolio-description-img3 pdesc hidden padd-15" id="portfolio-3">
<h3>Mon PortFolio avec ReactJS</h3> <h3>Mon PortFolio avec ReactJS</h3>
<h4>Contexte :</h4> <h4>Contexte :</h4>
<p>Je suis passionné de développement web et je souhaitais me familiariser avec le framework JavaScript <p>Je suis passionné de développement web et je
ReactJS, pour cela, je me suis sit que la création d'un PortFolio était la meilleure idée</p> 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> <h4>Objectif :</h4>
<p>Créer un PortFolio en utilisant ReactJS</p> <p>Créer un PortFolio en utilisant ReactJS</p>
<h4>Travail Réalisé :</h4> <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à <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> été fait par d'autres.</p>
<p>- J'ai ensuite choisi les outils que j'allais utiliser comme par exemple <strong>shadcn.ui</strong> <p>- J'ai ensuite choisi les outils que j'allais
pour certains styles, la police de <strong>Vercel</strong> ou encode les icones de 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> <strong>Lucide</strong></p>
<p>- J'ai enfin pu développer mon site web en utilisant activement <strong>Tailwind CSS</strong> afin de <p>- J'ai enfin pu développer mon site web en utilisant
créer plus vite et plus rapidement les styles, tout en séparant les différentes parties du site en activement <strong>Tailwind CSS</strong> afin de
<strong>composants</strong> que je peux réutiliser plusieurs fois.</p> 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> <h4>Resultat :</h4>
<p>Je possède maintenant un PortFolio développé avec React JS que je pourrais publier à l'instant ou je <p>Je possède maintenant un PortFolio développé avec
le voudrais. J'ai également pu me familiariser grandement avec cette technologie.</p> 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> <a href="https://github.com/hugocrne/reactportfolio">Code Source</a>
</div> </div>
</div> </div>
@ -398,26 +529,42 @@
<div class="portfolio-description-img4 pdesc hidden padd-15" id="portfolio-4"> <div class="portfolio-description-img4 pdesc hidden padd-15" id="portfolio-4">
<h3>Création d'un système réseau</h3> <h3>Création d'un système réseau</h3>
<h4>Contexte :</h4> <h4>Contexte :</h4>
<p>Ce projet est un projet universitaire réalisé sous la supervision de notre professeur de réseaux.</p> <p>Ce projet est un projet universitaire réalisé sous
la supervision de notre professeur de réseaux.</p>
<h4>Objectif :</h4> <h4>Objectif :</h4>
<p>Je devais, à partir d'une machine virutelle, créer des communications entre plusieurs machines à l'aide du <p>Je devais, à partir d'une machine virutelle,
créer des communications entre plusieurs machines
à l'aide du
protocode FTP permettant leur commmunication.</p> protocode FTP permettant leur commmunication.</p>
<h4>Travail Réalisé :</h4> <h4>Travail Réalisé :</h4>
<p>- J'ai premièrement du configurer les <strong>adresses IP</strong> des différentes machines en configurant <p>- J'ai premièrement du configurer les
les <strong>fichiers</strong> "/etc/hosts" "/etc/hostname" et "/etc/network/interfaces" grace à cela, <strong>adresses IP</strong> des différentes machines
les machines peuvent se "Ping" c'est à dire s'envoyer des signaux et donc des paquets.</p> en configurant
<p>- J'ai ensuite du configurer un <strong>server web Apache</strong> qui affichait une page les <strong>fichiers</strong> "/etc/hosts" "/etc/hostname"
<strong>web</strong> par défaut dés qu'il était consulté.</p> et "/etc/network/interfaces" grace à cela,
<p>- Enfin, j'ai configuré une <strong>communication ssh</strong> entre les différentes machines afin les machines peuvent se "Ping" c'est à dire
qu'elles puissent <strong>récuperer</strong> des fichiers l'une chez l'autre à tavers <strong>différents 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> utilisateurs</strong>.</p>
<p>- Afin de sécuriser ce réseau, j'ai utilisé le logiciel <strong>fail2ban</strong> et je l'ai configuré <p>- Afin de sécuriser ce réseau, j'ai utilisé le logiciel
afin de me protéger des attaques DDOS, c'està dire un <strong>envoi massif</strong> de paquets à mon <strong>fail2ban</strong> et je l'ai configuré
server faisant planter le réseau. J'ai pu configurer un <strong>système de banissement</strong> des 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> adresses IP ainsi qu'une suspension momentannée de certaines.</p>
<h4>Resultat :</h4> <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 <p>J'ai pu réaliser presque toutes les taches qui m'étaient
<strong>17/20</strong> pour une moyenne de classe aux alentours de 14.</p> 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>
</div> </div>
@ -429,27 +576,52 @@
<div class="portfolio-description-img5 pdesc hidden padd-15" id="portfolio-5"> <div class="portfolio-description-img5 pdesc hidden padd-15" id="portfolio-5">
<h3>Création de base de données</h3> <h3>Création de base de données</h3>
<h4>Contexte :</h4> <h4>Contexte :</h4>
<p>Pour ce projet universitaire non supervisé par un professeur, nous devions, en équipe de 4, créer la <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> base de données d'une entreprise fictive</p>
<h4>Objectif :</h4> <h4>Objectif :</h4>
<p>Nous devions créer la base de donnée de l'entreprise fictive AskehCorp, une entreprise leader de la <p>Nous devions créer la base de donnée de l'entreprise
grande distribution. A l'issue de ce travail, nous devions rendre un Modèle Conceptuel de Données (MCD) fictive AskehCorp, une entreprise leader de la
qui décrit chacune de nos tables SQL ainsi qu'un script PostgreSQL créant ces différentes tables, nous grande distribution. A l'issue de ce travail,
devions également réaliser un oral afin de présenter notre travail à un professeur.</p> 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> <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, <p>- Premièrement, il a fallu créer le
pour cela, je me suis inspiré de celui de l'entreprise Carrefour car notre entreprise s'organisait sous <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> 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 <p>- Ensuite, il a fallu ecrire en
tables. Celles-ci présentent des <strong>particularités</strong> comme par exemple le fait que certaines <strong>PostgreSQL</strong> le code permettant
donnée doit être <strong>impérativement</strong> présente lors de l'ajout de données.</p> la création des différentes
<p>- Il a ensuite fallu remplir cette base de données, pour cela, j'ai généré avec de l'IA plusieurs 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> 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 <p>- Enfin, j'ai écrit des requètes SQL demandant
pays dans lequel il y à le plus de commandes ou le fournisseur coutant le plus cher.</p> à 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> <h4>Resultat :</h4>
<p>Le professeur était très satisfait de notre travail car nous avions réalisé toutes les taches qui nous <p>Le professeur était très satisfait de notre
étaient demandées, malgré cela, notre code nécessitait quelques optimisations. Nous avons obtenu la 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> note de 12.5/14 pour une moyenne à 10.</p>
</div> </div>
</div> </div>
@ -462,34 +634,64 @@
<div class="portfolio-description-img6 pdesc hidden padd-15" id="portfolio-6"> <div class="portfolio-description-img6 pdesc hidden padd-15" id="portfolio-6">
<h3>Implémentation d'un jeu de Dames en C# XAML</h3> <h3>Implémentation d'un jeu de Dames en C# XAML</h3>
<h4>Contexte :</h4> <h4>Contexte :</h4>
<p>Ce projet est un projet universitaire réalisé en groupe de 3 sous la supervision d'un professeur, nous <p>Ce projet est un projet universitaire réalisé
devons créer une implémentation d'un jeu de Dames en utilisant les technologies .NET.</p> 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> <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 <p>Nous devons créer de toute pièce un jeu de
les langagesXAML pour le front-end et C# pour le back-end.</p> 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> <h4>Travail Réalisé :</h4>
<p>- Premièrement, il a fallu créer une <strong>documentation</strong> pour ce projet, dans celle ci, nous <p>- Premièrement, il a fallu créer une
avons mis sur papier les <strong>règles du jeu</strong>, ce que nous allons faire, des <strong>documentation</strong> pour ce projet,
<strong>personnas</strong> et des <strong>user-story</strong>.</p> dans celle ci, nous
<p>- Il a ensuite fallu penser le <strong>design</strong> de notre application. Pour cela, j'ai utilisé avons mis sur papier les <strong>règles du jeu</strong>
l'outil <strong>Figma</strong> qui me permet de créer facilement des designs <strong>complets</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>
<p>- A partir de ces maquettes, nous avons crée un <strong>storyboard</strong>, c'est à dire un document <p>- A partir de ces maquettes, nous avons crée un
expliquant quelles seront les <strong>intéractions</strong> entre les différentes pages par exemple à <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> 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 <p>- Nous sommes ensuite passés à la création du
ce travail, il a fallu créer des <strong>diagrames de classe</strong> ainsi que des <strong>diagrames <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> 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 <p>- Après l'implémentation de ce travail en
<strong>persistance</strong> de l'application. En effet, nous voulons implémenter un système de <strong>C#</strong> est venu l'étape de la
<strong>comptes utilisateurs</strong> dans notre application. Pour cela, nous avons utilisé un système 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> comprenant des fichier <strong>JSON</strong>.</p>
<p>- Enfin est venu l'étape du data-binding, c'est à dire la liaison du code C# du back-end avec l'interface <p>- Enfin est venu l'étape du data-binding, c'est
à dire la liaison du code C# du back-end avec
l'interface
utilisateur.</p> utilisateur.</p>
<h4>Resultat :</h4> <h4>Resultat :</h4>
<p>Nous n'avons pas eu de notation pour le moment sur ce travail. Mais notre professeur nous à fait par de <p>Nous n'avons pas eu de notation pour le moment
son enthousiasme autour de notre projet. J'ai également pu découvrir le développement en C# ainsi qu'en sur ce travail. Mais notre professeur nous à
XAML, les technologies .NET ainsi que l'utilisation de l'outil Visual Studio Community.</p> 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>
@ -523,7 +725,8 @@
<a href="https://www.linkedin.com/in/hugo-creneau-53a7402a8/" id="linked">Mon LinkedIn</a> <a href="https://www.linkedin.com/in/hugo-creneau-53a7402a8/" id="linked">Mon LinkedIn</a>
</div> </div>
</div> </div>
<h3 class="contact-title padd-15">ENVOYER EMAIL (Par manque de serveur, cette fonctionnalité n'est pas disponible, merci de <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> me contacter au mail ci dessus)</h3>
<h4 class="contact-sub-title padd-15">JE REPONDS AUX MESSAGES</h4> <h4 class="contact-sub-title padd-15">JE REPONDS AUX MESSAGES</h4>
<div class="row"> <div class="row">

Loading…
Cancel
Save