|
|
|
@ -40,14 +40,22 @@
|
|
|
|
|
<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
|
|
|
|
|
<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>
|
|
|
|
@ -80,21 +88,31 @@
|
|
|
|
|
<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>
|
|
|
|
|
<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).
|
|
|
|
|
<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>
|
|
|
|
@ -109,19 +127,31 @@
|
|
|
|
|
<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
|
|
|
|
|
<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>
|
|
|
|
|
<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="" width="auto" height="auto">
|
|
|
|
|
</div>
|
|
|
|
@ -148,9 +178,12 @@
|
|
|
|
|
<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>
|
|
|
|
|
<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">
|
|
|
|
@ -159,10 +192,15 @@
|
|
|
|
|
<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
|
|
|
|
|
<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>
|
|
|
|
@ -172,11 +210,16 @@
|
|
|
|
|
<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
|
|
|
|
|
<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>
|
|
|
|
@ -186,12 +229,18 @@
|
|
|
|
|
<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
|
|
|
|
|
<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>
|
|
|
|
@ -201,11 +250,17 @@
|
|
|
|
|
<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>
|
|
|
|
|
<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">
|
|
|
|
@ -214,11 +269,18 @@
|
|
|
|
|
<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>
|
|
|
|
|
<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>
|
|
|
|
@ -238,12 +300,20 @@
|
|
|
|
|
<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
|
|
|
|
|
<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>
|
|
|
|
@ -253,12 +323,18 @@
|
|
|
|
|
<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>
|
|
|
|
|
<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">
|
|
|
|
@ -267,13 +343,23 @@
|
|
|
|
|
<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>
|
|
|
|
|
<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>
|
|
|
|
@ -300,26 +386,43 @@
|
|
|
|
|
<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
|
|
|
|
|
<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>
|
|
|
|
|
<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
|
|
|
|
|
<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
|
|
|
|
|
<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>
|
|
|
|
|
<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
|
|
|
|
|
<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>
|
|
|
|
@ -333,26 +436,44 @@
|
|
|
|
|
<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>
|
|
|
|
|
<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>
|
|
|
|
|
<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
|
|
|
|
|
<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
|
|
|
|
|
<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>
|
|
|
|
|
<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>
|
|
|
|
|
<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>
|
|
|
|
@ -366,22 +487,32 @@
|
|
|
|
|
<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>
|
|
|
|
|
<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à
|
|
|
|
|
<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
|
|
|
|
|
<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>
|
|
|
|
|
<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>
|
|
|
|
|
<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>
|
|
|
|
@ -398,26 +529,42 @@
|
|
|
|
|
<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>
|
|
|
|
|
<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
|
|
|
|
|
<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
|
|
|
|
|
<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
|
|
|
|
|
<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>
|
|
|
|
|
<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>
|
|
|
|
@ -429,27 +576,52 @@
|
|
|
|
|
<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
|
|
|
|
|
<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>
|
|
|
|
|
<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
|
|
|
|
|
<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
|
|
|
|
|
<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>
|
|
|
|
|
<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
|
|
|
|
|
<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>
|
|
|
|
@ -462,34 +634,64 @@
|
|
|
|
|
<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>
|
|
|
|
|
<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>
|
|
|
|
|
<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>- 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 à
|
|
|
|
|
<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
|
|
|
|
|
<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
|
|
|
|
|
<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 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>
|
|
|
|
|
<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>
|
|
|
|
|
<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>
|
|
|
|
@ -523,7 +725,8 @@
|
|
|
|
|
<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
|
|
|
|
|
<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">
|
|
|
|
|