|
|
|
|
@ -1,34 +1,456 @@
|
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
|
|
|
|
<html>
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="fr">
|
|
|
|
|
<head>
|
|
|
|
|
<title>portfoliobutcreneauhugo - One incredible styled html page</title>
|
|
|
|
|
<link rel="stylesheet" href="mycoolstyle.css">
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>PortFolio - Accueil</title>
|
|
|
|
|
<link rel="stylesheet" href="css/style.css">
|
|
|
|
|
<link rel="stylesheet" href="css/skins/color-1.css">
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
|
|
|
|
|
<link rel="stylesheet" href="css/skins/color-1.css" class="alternate-style" title="color-1" disabled>
|
|
|
|
|
<link rel="stylesheet" href="css/skins/color-2.css" class="alternate-style" title="color-2" disabled>
|
|
|
|
|
<link rel="stylesheet" href="css/skins/color-3.css" class="alternate-style" title="color-3" disabled>
|
|
|
|
|
<link rel="stylesheet" href="css/skins/color-4.css" class="alternate-style" title="color-4" disabled>
|
|
|
|
|
<link rel="stylesheet" href="css/skins/color-5.css" class="alternate-style" title="color-5" disabled>
|
|
|
|
|
<link rel="stylesheet" href="css/style-switcher.css">
|
|
|
|
|
<link rel="icon" href="./images/pages-fill.png">
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<!-- Navigation menu -->
|
|
|
|
|
<ul class="navbar">
|
|
|
|
|
<li><a href="https://codefirst.iut.uca.fr/home">Code#0</a>
|
|
|
|
|
<li><a href="http://iut.uca.fr">IUT</a>
|
|
|
|
|
<li><a href="https://neilyoungarchives.com/">Very good music</a>
|
|
|
|
|
<li><a href="https://www.youtube.com/watch?v=CY5dTBhRxOA">Very good music too!</a>
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
<!-- Main Content -->
|
|
|
|
|
<h1>portfoliobutcreneauhugo is my first page, and it has got style!</h1>
|
|
|
|
|
|
|
|
|
|
<p>Welcome on this template html/css project
|
|
|
|
|
|
|
|
|
|
<p>Very simple, some links, some menu... make it your own
|
|
|
|
|
…
|
|
|
|
|
|
|
|
|
|
<p>I have nothing more to say
|
|
|
|
|
|
|
|
|
|
<!-- my footer -->
|
|
|
|
|
<address>Template made in 2022<br>
|
|
|
|
|
with Code#0 <a href="https://codefirst.iut.uca.fr/home"><img src="images/CodeFirstLogo.png" alt="Code#0" align="middle" border="0" height="40px"/>
|
|
|
|
|
</a></address>
|
|
|
|
|
|
|
|
|
|
<div class="main-container">
|
|
|
|
|
<div class="aside">
|
|
|
|
|
<div class="logo">
|
|
|
|
|
<a href="#"><span>H</span>ugo</a>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="nav-toggler">
|
|
|
|
|
<span></span>
|
|
|
|
|
</div>
|
|
|
|
|
<ul class="nav">
|
|
|
|
|
<li id="texthomeenrouge"><a href="#home" class="active"><i class="fa fa-home"></i>Accueil</a></li>
|
|
|
|
|
<li><a href="#about"><i class="fa fa-user"></i>Mon Experience</a></li>
|
|
|
|
|
<li><a href="#competences"><i class="fa fa-list"></i>Compétences</a></li>
|
|
|
|
|
<li><a href="#qualites"><i class="fa fa-star"></i>Qualités</a></li>
|
|
|
|
|
<li><a href="#portfolio"><i class="fa fa-briefcase"></i>Mes Projets</a></li>
|
|
|
|
|
<li><a href="#contact"><i class="fa fa-comments"></i>Contact</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main-content">
|
|
|
|
|
<section class="home active section" id="home">
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="home-info padd-15">
|
|
|
|
|
<h3 class="hello">Bonjour, je m'appelle <span class="name">Hugo Creneau</span></h3>
|
|
|
|
|
<h3 class="my-profession">Je suis <span class="typing">Developpeur</span></h3>
|
|
|
|
|
<p>En tant qu'étudiant en Première année de <strong>BUT Informatique</strong> passionné par le développement web, je maîtrise les langages HTML, CSS, JavaScript et Python pour créer des applications web <strong>efficaces</strong>. Mon approche <strong>créative</strong> se reflète dans mes projets, tandis que mon <strong>adaptabilité</strong> me permet de relever les défis techniques qui se présentent. Ma <strong>rigueur</strong> garantit la qualité et la fiabilité de chaque développement. En combinant mes <strong>compétences</strong> techniques, incluant des connaissances en frameworks tels que <strong>Vue, Nuxt, Angular, React</strong>, et mes <strong>qualités</strong>, je suis capable de transformer des concepts en applications web de manière professionnelle. Pour la rentrée 2024, je suis à la recherche d'une <strong>alternance</strong> dans le domaine du développement web sur un rythme de 3 mois 3 mois.</p>
|
|
|
|
|
<p>Je vous invite à télécharger mon CV ci-dessous ou à consulter mon LinkedIn.</p>
|
|
|
|
|
<a href="./images/CVHugoCRENEAU.pdf" download="./images/CVHugoCRENEAU.pdf" class="btn" id="boutonCV">Mon CV</a>
|
|
|
|
|
<a href="https://www.linkedin.com/in/hugo-creneau-53a7402a8/" class="btn" id="boutonLI">Mon LinkedIn</a>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="home-img padd-15">
|
|
|
|
|
<img src="images/moi.png" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="about section" id="about">
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="section-title padd-15">
|
|
|
|
|
<h2>Mon Expérience</h2>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="about-content padd-15">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="education padd-15">
|
|
|
|
|
<h3 class="title">Mon Parcours</h3>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="timeline-box padd-15">
|
|
|
|
|
<div class="timeline shadow-dark">
|
|
|
|
|
<div class="timeline-item">
|
|
|
|
|
<div class="circle-dot"></div>
|
|
|
|
|
<h3 class="timeline-date">
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="timeline-item">
|
|
|
|
|
<div class="circle-dot"></div>
|
|
|
|
|
<h3 class="timeline-date">
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="experience padd-15">
|
|
|
|
|
<h3 class="title">Expérience professionnelle</h3>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="timeline-box padd-15">
|
|
|
|
|
<div class="timeline shadow-dark">
|
|
|
|
|
<div class="timeline-item">
|
|
|
|
|
<div class="circle-dot"></div>
|
|
|
|
|
<h3 class="timeline-date">
|
|
|
|
|
<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> 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="">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="competences section" id="competences">
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="section-title padd-15">
|
|
|
|
|
<h2>Compétences</h2>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="competences-item padd-15">
|
|
|
|
|
<div class="competences-item-inner">
|
|
|
|
|
<div class="icon">
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="competences-item padd-15">
|
|
|
|
|
<div class="competences-item-inner">
|
|
|
|
|
<div class="icon">
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="competences-item padd-15">
|
|
|
|
|
<div class="competences-item-inner">
|
|
|
|
|
<div class="icon">
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="competences-item padd-15">
|
|
|
|
|
<div class="competences-item-inner">
|
|
|
|
|
<div class="icon">
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="competences-item padd-15">
|
|
|
|
|
<div class="competences-item-inner">
|
|
|
|
|
<div class="icon">
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="competences-item padd-15">
|
|
|
|
|
<div class="competences-item-inner">
|
|
|
|
|
<div class="icon">
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="qualites section" id="qualites">
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="section-title padd-15">
|
|
|
|
|
<h2>Qualités</h2>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="qualites-item padd-15">
|
|
|
|
|
<div class="qualites-item-inner">
|
|
|
|
|
<div class="icon">
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="qualites-item padd-15">
|
|
|
|
|
<div class="qualites-item-inner">
|
|
|
|
|
<div class="icon">
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="qualites-item padd-15">
|
|
|
|
|
<div class="qualites-item-inner">
|
|
|
|
|
<div class="icon">
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="portfolio section" id="portfolio">
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="section-title padd-15">
|
|
|
|
|
<h2>Mes Projets</h2>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="portfolio-heading padd-15">
|
|
|
|
|
<h2>Mes Projets Personnels (cliquez sur les images pour plus de détails)</h2>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="portfolio-item padd-15">
|
|
|
|
|
<div class="portfolio-item-inner shadow-dark">
|
|
|
|
|
<div class="portfolio-img" onclick="toggleDescription('portfolio-1')">
|
|
|
|
|
<img src="images/Capture d'écran 2024-05-26 204304.png" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="portfolio-description-img1 pdesc hidden padd-15" id="portfolio-1">
|
|
|
|
|
<h3>Service d'envoi massif d'email</h3>
|
|
|
|
|
<h4>Contexte :</h4>
|
|
|
|
|
<p>Une entreprise peut avoir besoin d'envoyer nombre d'Emails à ses clients. C'est pour cela que j'ai entrepris la création de ce SAAS</p>
|
|
|
|
|
<h4>Objectif :</h4>
|
|
|
|
|
<p>L'objectif est de réaliser avec différents outils tels que React, Tailwind CSS, Node JS ainsi que PostgreSQL. Un service d'envoi massif d'emails marketing.</p>
|
|
|
|
|
<h4>Travail Réalisé :</h4>
|
|
|
|
|
<p>- J'ai premièrement choisi ma <strong>stack</strong> pour le développement de ce projet, j'ai choisi le framework JavaScript <strong>React JS</strong> pour deux raisons, le fait que c'est le framework que je <strong>maitrise</strong> le plus ainsi que le fait que ce frameword permette un design moderne.</p>
|
|
|
|
|
<p>- J'ai ensuite pensé la <strong>structure</strong> du projet afin d'avoir une vision d'ensemble pour la suite.</p>
|
|
|
|
|
<p>- J'ai développé l'<strong>interface</strong> de la page d'accueil en utilisant l'outil <strong>shadcn UI</strong>.</p>
|
|
|
|
|
<p>- J'ai entrepris la création d'un système de compte en utilisant <strong>PostgreSQL</strong>, un langage de base de données que je maitrise grâce à mes <strong>études</strong>. Il faut que chaque utilisateur puisse créer un compte avec une <strong>adresse mail</strong> ou un compte <strong>Google</strong>, et qu'il renseigne un mot de passe qui sera stocké après avoir été <strong>hashé</strong>.</p>
|
|
|
|
|
<h4>Resultat :</h4>
|
|
|
|
|
<p>Pour le moment, je possède une <strong>interface</strong> d'accueil moderne ainsi qu'une base de données pouvant stocker des utilisateurs. La prochaine étape est de <strong>lier</strong> la base de données et le projet.</p>
|
|
|
|
|
<a href="https://github.com/hugocrne/marketmailtmp">Cliquez ici pour consulter le code source</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="portfolio-item padd-15">
|
|
|
|
|
<div class="portfolio-item-inner shadow-dark">
|
|
|
|
|
<div class="portfolio-img" onclick="toggleDescription('portfolio-2')">
|
|
|
|
|
<img src="images/PacManJS.png" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="portfolio-description-img2 pdesc hidden padd-15" id="portfolio-2">
|
|
|
|
|
<h3>Implémentation du jeu PacMan en JavaScript</h3>
|
|
|
|
|
<h4>Contexte :</h4>
|
|
|
|
|
<p>Je suis passionné de jeu vidéo et j'ai toujours voulu en créer un, également passionné par le développement web, j'ai eu envie d'apprendre le JavaScript, j'ai donc voulu conjuguer ces deux envies.</p>
|
|
|
|
|
<h4>Objectif :</h4>
|
|
|
|
|
<p>L'objectif est de créer une implémentation du jeu PacMan en JavaScript</p>
|
|
|
|
|
<h4>Travail Réalisé :</h4>
|
|
|
|
|
<p>- J'ai premièrement choisi la <strong>manière</strong> dont je voulais créer le plateau, pour cela, j'ai crée une <strong>matrice</strong> remplie des chiffres 1 et 2, 1 lorsque c'est un mur et 2 lorsque la voie est libre.</p>
|
|
|
|
|
<p>- J'ai ensuite crée le <strong>comportement</strong> du personnage jouable en l'animant avec des <strong>sprites</strong> trouvés sur internet ainsi qu'en codant ses différentes méthodes et en créant les <strong>collisions</strong> avec les murs.</p>
|
|
|
|
|
<p>- Pour les ennemis, les 4 fantomes, je leur ai codé un <strong>comportement</strong> plus ou moins <strong>aléatoire</strong>. En effet, ils cherchent à atteindre PacMan si celui-ci n'est pas <strong>trop loin</strong>, sinon leurs mouvements sont <strong>aléatoires</strong>.</p>
|
|
|
|
|
<p>- Pour finir, j'ai implémenté les intéractions entre PacMan et les fantomes en créant le système de vies, j'ai mis sur le plateau les "Gums" que PacMan doit manger et j'ai implémenté le visuel du jeu.</p>
|
|
|
|
|
<h4>Resultat :</h4>
|
|
|
|
|
<p>Je possède maintenant un jeu PacMan <strong>fonctionnel</strong> qui se joue avec les flèches directionnelles et j'ai pu apprendre les bases du <strong>JavaScript</strong>.</p>
|
|
|
|
|
<p>Vous pouvez retrouver le jeu en cliquant <a href="https://hugocrne.github.io/PacMan_Game_js/">ici</a> ou consulter le code source ci-dessous.</p>
|
|
|
|
|
<a href="https://github.com/hugocrne/PacMan_Game_js">Code Source</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="portfolio-item padd-15">
|
|
|
|
|
<div class="portfolio-item-inner shadow-dark">
|
|
|
|
|
<div class="portfolio-img" onclick="toggleDescription('portfolio-3')">
|
|
|
|
|
<img src="images/Capture d'écran 2024-05-20 145306.png" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="portfolio-description-img3 pdesc hidden padd-15" id="portfolio-3">
|
|
|
|
|
<h3>Mon PortFolio avec ReactJS</h3>
|
|
|
|
|
<h4>Contexte :</h4>
|
|
|
|
|
<p>Je suis passionné de développement web et je souhaitais me familiariser avec le framework JavaScript ReactJS, pour cela, je me suis sit que la création d'un PortFolio était la meilleure idée</p>
|
|
|
|
|
<h4>Objectif :</h4>
|
|
|
|
|
<p>Créer un PortFolio en utilisant ReactJS</p>
|
|
|
|
|
<h4>Travail Réalisé :</h4>
|
|
|
|
|
<p>- J'ai premièrement crée le <strong>design</strong> de mon PortFolio en m'inspirant de ce qui a déjà été fait par d'autres.</p>
|
|
|
|
|
<p>- J'ai ensuite choisi les outils que j'allais utiliser comme par exemple <strong>shadcn.ui</strong> pour certains styles, la police de <strong>Vercel</strong> ou encode les icones de <strong>Lucide</strong></p>
|
|
|
|
|
<p>- J'ai enfin pu développer mon site web en utilisant activement <strong>Tailwind CSS</strong> afin de créer plus vite et plus rapidement les styles, tout en séparant les différentes parties du site en <strong>composants</strong> que je peux réutiliser plusieurs fois.</p>
|
|
|
|
|
<h4>Resultat :</h4>
|
|
|
|
|
<p>Je possède maintenant un PortFolio développé avec React JS que je pourrais publier à l'instant ou je le voudrais. J'ai également pu me familiariser grandement avec cette technologie.</p>
|
|
|
|
|
<a href="https://github.com/hugocrne/reactportfolio">Code Source</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row padd-15">
|
|
|
|
|
<div class="portfolio-heading2 padd-15">
|
|
|
|
|
<h2>Mes Projets Universitaires</h2>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="portfolio-item padd-15">
|
|
|
|
|
<div class="portfolio-item-inner shadow-dark">
|
|
|
|
|
<div class="portfolio-img" onclick="toggleDescription('portfolio-4')">
|
|
|
|
|
<img src="images/Reseau.png" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="portfolio-description-img4 pdesc hidden padd-15" id="portfolio-4">
|
|
|
|
|
<h3>Création d'un système réseau</h3>
|
|
|
|
|
<h4>Contexte :</h4>
|
|
|
|
|
<p>Ce projet est un projet universitaire réalisé sous la supervision de notre professeur de réseaux.</p>
|
|
|
|
|
<h4>Objectif :</h4>
|
|
|
|
|
<p>Je devais, à partir d'une machine virutelle, créer des communications entre plusieurs machines à l'aide du protocode FTP permettant leur commmunication.</p>
|
|
|
|
|
<h4>Travail Réalisé :</h4>
|
|
|
|
|
<p>- J'ai premièrement du configurer les <strong>adresses IP</strong> des différentes machines en configurant les <strong>fichiers</strong> "/etc/hosts" "/etc/hostname" et "/etc/network/interfaces" grace à cela, les machines peuvent se "Ping" c'est à dire s'envoyer des signaux et donc des paquets.</p>
|
|
|
|
|
<p>- J'ai ensuite du configurer un <strong>server web Apache</strong> qui affichait une page <strong>web</strong> par défaut dés qu'il était consulté.</p>
|
|
|
|
|
<p>- Enfin, j'ai configuré une <strong>communication ssh</strong> entre les différentes machines afin qu'elles puissent <strong>récuperer</strong> des fichiers l'une chez l'autre à tavers <strong>différents utilisateurs</strong>.</p>
|
|
|
|
|
<p>- Afin de sécuriser ce réseau, j'ai utilisé le logiciel <strong>fail2ban</strong> et je l'ai configuré afin de me protéger des attaques DDOS, c'està dire un <strong>envoi massif</strong> de paquets à mon server faisant planter le réseau. J'ai pu configurer un <strong>système de banissement</strong> des adresses IP ainsi qu'une suspension momentannée de certaines.</p>
|
|
|
|
|
<h4>Resultat :</h4>
|
|
|
|
|
<p>J'ai pu réaliser presque toutes les taches qui m'étaient demandées, j'ai pour cela reçu la note de <strong>17/20</strong> pour une moyenne de classe aux alentours de 14.</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="portfolio-item padd-15">
|
|
|
|
|
<div class="portfolio-item-inner shadow-dark">
|
|
|
|
|
<div class="portfolio-img" onclick="toggleDescription('portfolio-5')">
|
|
|
|
|
<img src="images/MLD.png" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="portfolio-description-img5 pdesc hidden padd-15" id="portfolio-5">
|
|
|
|
|
<h3>Création de base de données</h3>
|
|
|
|
|
<h4>Contexte :</h4>
|
|
|
|
|
<p>Pour ce projet universitaire non supervisé par un professeur, nous devions, en équipe de 4, créer la base de données d'une entreprise fictive</p>
|
|
|
|
|
<h4>Objectif :</h4>
|
|
|
|
|
<p>Nous devions créer la base de donnée de l'entreprise fictive AskehCorp, une entreprise leader de la grande distribution. A l'issue de ce travail, nous devions rendre un Modèle Conceptuel de Données (MCD) qui décrit chacune de nos tables SQL ainsi qu'un script PostgreSQL créant ces différentes tables, nous devions également réaliser un oral afin de présenter notre travail à un professeur.</p>
|
|
|
|
|
<h4>Travail Réalisé :</h4>
|
|
|
|
|
<p>- Premièrement, il a fallu créer le <strong>modèle conceptuel de données</strong> de la base de données, pour cela, je me suis inspiré de celui de l'entreprise Carrefour car notre entreprise s'organisait sous la <strong>même forme</strong>.</p>
|
|
|
|
|
<p>- Ensuite, il a fallu ecrire en <strong>PostgreSQL</strong> le code permettant la création des différentes tables. Celles-ci présentent des <strong>particularités</strong> comme par exemple le fait que certaines donnée doit être <strong>impérativement</strong> présente lors de l'ajout de données.</p>
|
|
|
|
|
<p>- Il a ensuite fallu remplir cette base de données, pour cela, j'ai généré avec de l'IA plusieurs itérations du contenu de chaque table.</p>
|
|
|
|
|
<p>- Enfin, j'ai écrit des requètes SQL demandant à la base de données des informations telles que le pays dans lequel il y à le plus de commandes ou le fournisseur coutant le plus cher.</p>
|
|
|
|
|
<h4>Resultat :</h4>
|
|
|
|
|
<p>Le professeur était très satisfait de notre travail car nous avions réalisé toutes les taches qui nous étaient demandées, malgré cela, notre code nécessitait quelques optimisations. Nous avons obtenu la note de 12.5/14 pour une moyenne à 10.</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="portfolio-item padd-15">
|
|
|
|
|
<div class="portfolio-item-inner shadow-dark">
|
|
|
|
|
<div class="portfolio-img" onclick="toggleDescription('portfolio-6')">
|
|
|
|
|
<img src="images/Dames.png" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="portfolio-description-img6 pdesc hidden padd-15" id="portfolio-6">
|
|
|
|
|
<h3>Implémentation d'un jeu de Dames en C# XAML</h3>
|
|
|
|
|
<h4>Contexte :</h4>
|
|
|
|
|
<p>Ce projet est un projet universitaire réalisé en groupe de 3 sous la supervision d'un professeur, nous devons créer une implémentation d'un jeu de Dames en utilisant les technologies .NET.</p>
|
|
|
|
|
<h4>Objectif :</h4>
|
|
|
|
|
<p>Nous devons créer de toute pièce un jeu de dame qui s'executera sur windows, pour cela, nous utilisons les langagesXAML pour le front-end et C# pour le back-end.</p>
|
|
|
|
|
<h4>Travail Réalisé :</h4>
|
|
|
|
|
<p>- Premièrement, il a fallu créer une <strong>documentation</strong> pour ce projet, dans celle ci, nous avons mis sur papier les <strong>règles du jeu</strong>, ce que nous allons faire, des <strong>personnas</strong> et des <strong>user-story</strong>.</p>
|
|
|
|
|
<p>- Il a ensuite fallu penser le <strong>design</strong> de notre application. Pour cela, j'ai utilisé l'outil <strong>Figma</strong> qui me permet de créer facilement des designs <strong>complets</strong>.</p>
|
|
|
|
|
<p>- A partir de ces maquettes, nous avons crée un <strong>storyboard</strong>, c'est à dire un document expliquant quelles seront les <strong>intéractions</strong> entre les différentes pages par exemple à travers des boutons.</p>
|
|
|
|
|
<p>- Nous sommes ensuite passés à la création du <strong>code C# pur</strong> du jeu. Pour nous aider dans ce travail, il a fallu créer des <strong>diagrames de classe</strong> ainsi que des <strong>diagrames de paquetage</strong>.</p>
|
|
|
|
|
<p>- Après l'implémentation de ce travail en <strong>C#</strong> est venu l'étape de la gestion de la <strong>persistance</strong> de l'application. En effet, nous voulons implémenter un système de <strong>comptes utilisateurs</strong> dans notre application. Pour cela, nous avons utilisé un système comprenant des fichier <strong>JSON</strong>.</p>
|
|
|
|
|
<p>- Enfin est venu l'étape du 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>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="contact section" id="contact">
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="section-title padd-15">
|
|
|
|
|
<h2>Contactez moi</h2>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<h3 class="contact-title padd-15">Avez-vous des questions ?</h3>
|
|
|
|
|
<h4 class="contact-sub-title padd-15">JE SUIS A VOTRE SERVICE</h4>
|
|
|
|
|
<div class="row listcontact">
|
|
|
|
|
<div class="contact-info-item padd-15">
|
|
|
|
|
<div class="icon"><i class="fa fa-envelope"></i></div>
|
|
|
|
|
<h4>Email</h4>
|
|
|
|
|
<p>hugo.creneau@etu.uca.fr</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="contact-info-item padd-15">
|
|
|
|
|
<div class="icon"><i class="fa fa-map-marker-alt"></i></div>
|
|
|
|
|
<h4>Lieu :</h4>
|
|
|
|
|
<p>Clermont-Ferrand (63) - France</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="contact-info-item padd-15">
|
|
|
|
|
<div class="icon"><i class="fa fa-globe-europe"></i></div>
|
|
|
|
|
<h4>LinkedIn</h4>
|
|
|
|
|
<a href="https://www.linkedin.com/in/hugo-creneau-53a7402a8/" id="linked">Mon LinkedIn</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<h3 class="contact-title padd-15">ENVOYER EMAIL (Par manque de serveur, cette fonctionnalité n'est pas disponible, merci de me contacter au mail ci dessus)</h3>
|
|
|
|
|
<h4 class="contact-sub-title padd-15">JE REPONDS AUX MESSAGES</h4>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<form class="contact-form padd-15" action="/PHP/main.php" method="POST">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="form-item col-6 padd-15">
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<input type="text" class="form-control" placeholder="Name">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-item col-6 padd-15">
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<input type="email" class="form-control" placeholder="Email">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="form-item col-12 padd-15">
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<input type="text" class="form-control" placeholder="Subject">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="form-item col-12 padd-15">
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<textarea name="" class="form-control" id="" placeholder="Message"></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="form-item col-12 padd-15">
|
|
|
|
|
<button type="submit" class="btn">Envoyer message</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="style-switcher">
|
|
|
|
|
<div class="style-switcher-toggle s-icon">
|
|
|
|
|
<i class="fas fa-cog fa-spin"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="day-night s-icon">
|
|
|
|
|
<i class="fas "></i>
|
|
|
|
|
</div>
|
|
|
|
|
<h4>Theme Colors</h4>
|
|
|
|
|
<div class="colors">
|
|
|
|
|
<span class="color-1" onclick="setActiveStyle('color-1')"></span>
|
|
|
|
|
<span class="color-2" onclick="setActiveStyle('color-2')"></span>
|
|
|
|
|
<span class="color-3" onclick="setActiveStyle('color-3')"></span>
|
|
|
|
|
<span class="color-4" onclick="setActiveStyle('color-4')"></span>
|
|
|
|
|
<span class="color-5" onclick="setActiveStyle('color-5')"></span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.1.0/typed.umd.js"
|
|
|
|
|
integrity="sha512-+2pW8xXU/rNr7VS+H62aqapfRpqFwnSQh9ap6THjsm41AxgA0MhFRtfrABS+Lx2KHJn82UOrnBKhjZOXpom2LQ=="
|
|
|
|
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
|
|
|
<script src="js/script.js"></script>
|
|
|
|
|
<script src="js/style-switcher.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
