master
Hugo CRENEAU 6 months ago
parent 31711b3d6f
commit f9727aa2b1

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

@ -40,7 +40,15 @@
<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>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>
@ -72,7 +80,11 @@
<i class="fa fa-calendar"></i> 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>
@ -80,7 +92,10 @@
<i class="fa fa-calendar"></i> 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>
<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>
@ -97,7 +112,17 @@
<i class="fa fa-calendar"></i> 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> dun événement de VTT nommé EnduForez accueillant plus de 700 participants. Jai 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 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>
<p class="timeline-text">En mai 2022 et en juin 2023, je faisais partie des responsables de
l<strong>organisation</strong> dun événement de VTT nommé EnduForez accueillant plus de
700 participants. Jai 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 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>
<img src="images/end2.png" id="end1" alt="">
</div>
</div>
@ -123,7 +148,9 @@
<i class="fa fa-pencil-alt"></i>
</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">
@ -132,7 +159,11 @@
<i class="fa fa-laptop-code"></i>
</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>
<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">
@ -141,7 +172,12 @@
<i class="fa fa-rocket"></i>
</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>
<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">
@ -150,7 +186,13 @@
<i class="fa fa-code"></i>
</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>
<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">
@ -159,7 +201,11 @@
<i class="fa fa-puzzle-piece"></i>
</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">
@ -168,7 +214,11 @@
<i class="fa fa-cogs"></i>
</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>
@ -188,7 +238,13 @@
<i class="fa fa-paint-brush"></i>
</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>
<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">
@ -197,7 +253,12 @@
<i class="fa fa-puzzle-piece"></i>
</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">
@ -206,7 +267,13 @@
<i class="fa fa-ruler"></i>
</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>
@ -233,16 +300,27 @@
<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>
<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 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>
<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>
<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>
@ -255,17 +333,27 @@
<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>
<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>
<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>
<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>
@ -278,15 +366,22 @@
<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à é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>
<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>
<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>
@ -305,14 +400,24 @@
<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>
<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>
<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>
<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>
@ -324,16 +429,28 @@
<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>
<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 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>
<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>
<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>
@ -345,18 +462,34 @@
<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>
<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 data-binding, c'est à dire la liaison du code C# du back-end avec l'interface utilisateur.</p>
<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 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>
@ -389,7 +522,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 me contacter au mail ci dessus)</h3>
<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 class="contact-form padd-15" action="/PHP/main.php" method="POST">

@ -1,32 +0,0 @@
body {
padding-left: 11em;
font-family: Georgia, 'Georgia', "Times New Roman",
Times, serif;
color: darksalmon;
background-color: rgb(39, 39, 84) }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid darksalmon }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: darkblue }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
Loading…
Cancel
Save