|
|
<!DOCTYPE html>
|
|
|
<html lang="fr">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>PortFolio - Accueil</title>
|
|
|
<link rel="stylesheet" href="css/style.css">
|
|
|
<link rel="stylesheet" href="css/skins/color-1.css">
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
|
|
|
<link rel="stylesheet" href="css/skins/color-1.css" class="alternate-style" title="color-1" disabled>
|
|
|
<link rel="stylesheet" href="css/skins/color-2.css" class="alternate-style" title="color-2" disabled>
|
|
|
<link rel="stylesheet" href="css/skins/color-3.css" class="alternate-style" title="color-3" disabled>
|
|
|
<link rel="stylesheet" href="css/skins/color-4.css" class="alternate-style" title="color-4" disabled>
|
|
|
<link rel="stylesheet" href="css/skins/color-5.css" class="alternate-style" title="color-5" disabled>
|
|
|
<link rel="stylesheet" href="css/style-switcher.css">
|
|
|
<link rel="icon" href="./images/pages-fill.png">
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="main-container">
|
|
|
<div class="aside">
|
|
|
<div class="logo">
|
|
|
<a href="#"><span>H</span>ugo</a>
|
|
|
</div>
|
|
|
<div class="nav-toggler">
|
|
|
<span></span>
|
|
|
</div>
|
|
|
<ul class="nav">
|
|
|
<li id="texthomeenrouge"><a href="#home" class="active"><em class="fa fa-home"></em>Accueil</a></li>
|
|
|
<li><a href="#about"><em class="fa fa-user"></em>Mon Experience</a></li>
|
|
|
<li><a href="#competences"><em class="fa fa-list"></em>Compétences</a></li>
|
|
|
<li><a href="#qualites"><em class="fa fa-star"></em>Qualités</a></li>
|
|
|
<li><a href="#portfolio"><em class="fa fa-briefcase"></em>Mes Projets</a></li>
|
|
|
<li><a href="#contact"><em class="fa fa-comments"></em>Contact</a></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="main-content">
|
|
|
<section class="home active section" id="home">
|
|
|
<div class="container">
|
|
|
<div class="row">
|
|
|
<div class="home-info padd-15">
|
|
|
<h3 class="hello">Bonjour, je m'appelle <span class="name">Hugo Creneau</span></h3>
|
|
|
<h3 class="my-profession">Je suis <span class="typing">Developpeur</span></h3>
|
|
|
<p>En tant qu'étudiant en Première année de <strong>BUT Informatique</strong> passionné par le développement web,
|
|
|
je maîtrise les langages HTML, CSS, JavaScript et Python pour créer des applications web <strong>efficaces</strong>
|
|
|
. Mon approche <strong>créative</strong> se reflète dans mes projets, tandis que mon <strong>adaptabilité</strong>
|
|
|
me permet de relever les défis techniques qui se présentent. Ma <strong>rigueur</strong> garantit la qualité et la
|
|
|
fiabilité de chaque développement. En combinant mes <strong>compétences</strong> techniques, incluant des
|
|
|
connaissances en frameworks tels que <strong>Vue, Nuxt, Angular, React</strong>, et mes <strong>qualités</strong>,
|
|
|
je suis capable de transformer des concepts en applications web de manière professionnelle. Pour la rentrée 2024,
|
|
|
je suis à la recherche d'une <strong>alternance</strong> dans le domaine du développement web sur un rythme de 3
|
|
|
mois 3 mois.</p>
|
|
|
<p>Je vous invite à télécharger mon CV ci-dessous ou à consulter mon LinkedIn.</p>
|
|
|
<a href="./images/CVHugoCRENEAU.pdf" download="./images/CVHugoCRENEAU.pdf" class="btn" id="boutonCV">Mon CV</a>
|
|
|
<a href="https://www.linkedin.com/in/hugo-creneau-53a7402a8/" class="btn" id="boutonLI">Mon LinkedIn</a>
|
|
|
</div>
|
|
|
<div class="home-img padd-15">
|
|
|
<img src="images/moi.png" alt="">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
<section class="about section" id="about">
|
|
|
<div class="container">
|
|
|
<div class="row">
|
|
|
<div class="section-title padd-15">
|
|
|
<h2>Mon Expérience</h2>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="about-content padd-15">
|
|
|
<div class="row">
|
|
|
<div class="education padd-15">
|
|
|
<h3 class="title">Mon Parcours</h3>
|
|
|
<div class="row">
|
|
|
<div class="timeline-box padd-15">
|
|
|
<div class="timeline shadow-dark">
|
|
|
<div class="timeline-item">
|
|
|
<div class="circle-dot"></div>
|
|
|
<h3 class="timeline-date">
|
|
|
<em class="fa fa-calendar"></em> 2023 -2024
|
|
|
</h3>
|
|
|
<h4 class="timeline-title">1ere année BUT Informatique</h4>
|
|
|
<p class="timeline-text">Le <strong>BUT Informatique</strong> me plonge dans le développement,
|
|
|
un monde d'opportunités pour l'innovation. Durant cette année, j'ai abordé de nombreux
|
|
|
sujets tels que le <strong>développement web</strong> avec les langages HTML et CSS, mais
|
|
|
également le <strong>développement objet</strong> en C# et C++ et Python ainsi que
|
|
|
l'<strong>administration de bases de données</strong> en PostgreSQL.</p>
|
|
|
</div>
|
|
|
<div class="timeline-item">
|
|
|
<div class="circle-dot"></div>
|
|
|
<h3 class="timeline-date">
|
|
|
<em class="fa fa-calendar"></em> 2021 - 2023
|
|
|
</h3>
|
|
|
<h4 class="timeline-title">Obtention du diplome du Baccalauréat</h4>
|
|
|
<p class="timeline-text">Durant ces années au lycée Jean-Zay à Thiers(63), j'ai obtenu le
|
|
|
diplome du <strong>Baccalauréat</strong> avec <strong>mention</strong> en étudiant les
|
|
|
spécialités Mathématiques, Physique-Chimie et Numérique et sciences de l'informatique(NSI).
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="experience padd-15">
|
|
|
<h3 class="title">Expérience professionnelle</h3>
|
|
|
<div class="row">
|
|
|
<div class="timeline-box padd-15">
|
|
|
<div class="timeline shadow-dark">
|
|
|
<div class="timeline-item">
|
|
|
<div class="circle-dot"></div>
|
|
|
<h3 class="timeline-date">
|
|
|
<em class="fa fa-calendar"></em> 22-23 mai 2022 - 3-4 juin 2023
|
|
|
</h3>
|
|
|
<h4 class="timeline-title">Bénévolat durant l'évenement enduforez</h4>
|
|
|
<p class="timeline-text">En mai 2022 et en juin 2023, je faisais partie des responsables de
|
|
|
l’<strong>organisation</strong> d’un événement de VTT nommé EnduForez accueillant plus de
|
|
|
700 participants. J’ai donc dû participer a la <strong>gestion</strong> du logement des
|
|
|
personnes, de leur <strong>restauration</strong>, du <strong>stockage</strong> de leurs
|
|
|
véhicules, de l’<strong>acheminement</strong> des participants par navettes sur le lieu de
|
|
|
départ de l’événement, ainsi que leur <strong>ravitaillement</strong> lors du parcours.
|
|
|
Cette expérience m’a donc permis de prendre mes <strong>responsabilités</strong> lors de
|
|
|
l’organisation d’un événement sportif accueillant de nombreuses personnes ainsi que
|
|
|
d’apprendre à <strong>réagir</strong> vite face à des situations pouvant s’avérer
|
|
|
problématiques telles que, lors de cet événement, des prises de <strong>retard</strong>
|
|
|
liées aux navettes.</p>
|
|
|
<img src="images/end2.png" id="end1" alt="">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
<section class="competences section" id="competences">
|
|
|
<div class="container">
|
|
|
<div class="row">
|
|
|
<div class="section-title padd-15">
|
|
|
<h2>Compétences</h2>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="competences-item padd-15">
|
|
|
<div class="competences-item-inner">
|
|
|
<div class="icon">
|
|
|
<em class="fa fa-pencil-alt"></em>
|
|
|
</div>
|
|
|
<h4>Web Design</h4>
|
|
|
<p>Le <strong>webdesign</strong> est l'art de concevoir des interfaces web attrayantes et fonctionnelles,
|
|
|
alliant <strong>esthétique</strong> et <strong>utilité</strong> pour offrir une expérience utilisateur
|
|
|
optimale. La réalisation de ce <strong>PortFolio</strong> m'a permis de m'entrainer dans ce domaine.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="competences-item padd-15">
|
|
|
<div class="competences-item-inner">
|
|
|
<div class="icon">
|
|
|
<em class="fa fa-laptop-code"></em>
|
|
|
</div>
|
|
|
<h4>Web Development</h4>
|
|
|
<p>Le <strong>développement web</strong> englobe la création et la maintenance de sites web, utilisant des
|
|
|
langages de programmation comme <strong>HTML</strong>, <strong>CSS</strong> et <strong>JavaScript</strong>
|
|
|
pour concevoir des interfaces interactives et des fonctionnalités <strong>dynamiques</strong>. Les cours de
|
|
|
web m'ont formés à cette pratique et j'ai continué à en faire après la fin de ce module car c'est un domaine
|
|
|
qui me <strong>passionne</strong>.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="competences-item padd-15">
|
|
|
<div class="competences-item-inner">
|
|
|
<div class="icon">
|
|
|
<em class="fa fa-rocket"></em>
|
|
|
</div>
|
|
|
<h4>Frameworks web</h4>
|
|
|
<p>Les <strong>frameworks web</strong> sont des outils essentiels qui permettent de structurer et de faciliter le
|
|
|
développement d'applications web. En utilisant des frameworks tels que <strong>Angular</strong>,
|
|
|
<strong>Vue</strong>, <strong>Nuxt</strong> ou <strong>React</strong>. Je peux créer des interfaces
|
|
|
utilisateur dynamiques et performantes. Ces frameworks offrent une <strong>liberté</strong> créative
|
|
|
immense, permettant de développer rapidement des fonctionnalités complexes à partir de structures solides
|
|
|
et modulaires.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="competences-item padd-15">
|
|
|
<div class="competences-item-inner">
|
|
|
<div class="icon">
|
|
|
<em class="fa fa-code"></em>
|
|
|
</div>
|
|
|
<h4>Coding</h4>
|
|
|
<p>Le <strong>coding</strong>, ou <strong>codage</strong>, fait référence à l'acte d'écrire du code informatique
|
|
|
dans des langages de programmation <strong>spécifiques</strong>, permettant de créer des applications,
|
|
|
des sites web, des logiciels et bien plus encore. C'est une pratique qui me passionne de part la
|
|
|
<strong>liberté</strong> que cela procure de pourvoir tout créer à partir de rien. J'ai pour habiotude
|
|
|
d'utiliser l'éditeur de code <strong>Visual Studio Code</strong> car celui-ci à un design confortable ainsi
|
|
|
que de nombreuses fonctionnalités utiles telles que Git qui permet le <strong>partage</strong> de mon travail
|
|
|
avec mes coéquipiers.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="competences-item padd-15">
|
|
|
<div class="competences-item-inner">
|
|
|
<div class="icon">
|
|
|
<em class="fa fa-puzzle-piece"></em>
|
|
|
</div>
|
|
|
<h4>Développement Orienté Objet</h4>
|
|
|
<p>Le <strong>développement orienté objet</strong> est une approche de programmation où les concepts du monde
|
|
|
réel sont modélisés en objets, chacun ayant des <strong>propriétés</strong> et des comportements
|
|
|
<strong>spécifiques</strong>. J'ai découvert à travers le <strong>C++</strong> ce versant du développement,
|
|
|
c'est un langage crée à partir du <strong>C</strong> que j'avais étudié précédament. Cela m'a permis de me
|
|
|
focaliser sur le côté <strong>objet</strong> du développement plutôt que sur le <strong>langage</strong></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="competences-item padd-15">
|
|
|
<div class="competences-item-inner">
|
|
|
<div class="icon">
|
|
|
<em class="fa fa-cogs"></em>
|
|
|
</div>
|
|
|
<h4>Développement Applicatif</h4>
|
|
|
<p>Le <strong>développement applicatif</strong> avec <strong>XAML</strong> et <strong>C#</strong> consiste à
|
|
|
créer des applications interactives pour les plateformes Windows en utilisant le langage de <strong>balisage
|
|
|
XAML</strong> pour la conception d'interfaces utilisateur et le langage de programmation
|
|
|
<strong>C#</strong> pour la <strong>logique</strong> applicative. Cette approche permet de développer
|
|
|
des applications riches et performantes pour une <strong>variété</strong> de dispositifs.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
<section class="qualites section" id="qualites">
|
|
|
<div class="container">
|
|
|
<div class="row">
|
|
|
<div class="section-title padd-15">
|
|
|
<h2>Qualités</h2>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="qualites-item padd-15">
|
|
|
<div class="qualites-item-inner">
|
|
|
<div class="icon">
|
|
|
<em class="fa fa-paint-brush"></em>
|
|
|
</div>
|
|
|
<h4>Créativité</h4>
|
|
|
<p>La <strong>créativité</strong> est une qualité essentielle dans le domaine du design et du développement,
|
|
|
permettant de générer des idées <strong>innovantes</strong>, de résoudre des problèmes de manière
|
|
|
<strong>originale</strong> et d'apporter une touche unique à chaque projet. Elle se manifeste par la
|
|
|
capacité à <strong>penser différemment</strong>, à explorer de nouvelles voies et à repousser les
|
|
|
<strong>limites</strong> de la conception et de la programmation. Le développement de ce PortFolio ainsi
|
|
|
que de mes différents projets m'ont permis d'entrainer cette <strong>qualité</strong> et de l'éxercer avec
|
|
|
brio.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="qualites-item padd-15">
|
|
|
<div class="qualites-item-inner">
|
|
|
<div class="icon">
|
|
|
<em class="fa fa-puzzle-piece"></em>
|
|
|
</div>
|
|
|
<h4>Adaptibilité</h4>
|
|
|
<p>L'<strong>adaptabilité</strong> est une qualité clé qui me caractérise. Elle se manifeste par ma capacité à
|
|
|
m'ajuster facilement aux <strong>changements</strong>, à m'adapter à de nouvelles situations et à trouver
|
|
|
des solutions <strong>créatives</strong> face à des défis imprévus. Cette qualité me permet de rester
|
|
|
<strong>efficace</strong> et <strong>productif</strong> dans des environnements dynamiques et en
|
|
|
<strong>constante</strong> évolution. Je m'adapte en continu dans le développement car, pour de nombreux
|
|
|
projets, il est necessaire de changer de langage et donc de s'adapter <strong>constamment</strong>.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="qualites-item padd-15">
|
|
|
<div class="qualites-item-inner">
|
|
|
<div class="icon">
|
|
|
<em class="fa fa-ruler"></em>
|
|
|
</div>
|
|
|
<h4>Rigueur</h4>
|
|
|
<p>La <strong>rigueur</strong> est l'une de mes qualités fondamentales. Elle se manifeste dans mon approche
|
|
|
méthodique du travail, ma capacité à suivre des processus avec <strong>précision</strong> et à maintenir
|
|
|
des normes élevées de qualité dans tout ce que j'entreprends. Cela se traduit également par mon souci du
|
|
|
<strong>détail</strong> et ma <strong>persévérance</strong> à atteindre les objectifs fixés, même dans les
|
|
|
situations les plus <strong>exigeantes</strong>. Dans le développement, on doit absolument, pour créer un
|
|
|
code <strong>fonctionnel</strong> créant une bonne expérience pour l'utilisateur, obtenir un code fonctionnel
|
|
|
dans bug, il faut être <strong>rigoureux</strong> pour cela.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
<section class="portfolio section" id="portfolio">
|
|
|
<div class="container">
|
|
|
<div class="row">
|
|
|
<div class="section-title padd-15">
|
|
|
<h2>Mes Projets</h2>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="portfolio-heading padd-15">
|
|
|
<h2>Mes Projets Personnels (cliquez sur les images pour plus de détails)</h2>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="portfolio-item padd-15">
|
|
|
<div class="portfolio-item-inner shadow-dark">
|
|
|
<div class="portfolio-img" onclick="toggleDescription('portfolio-1')">
|
|
|
<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"><em class="fa fa-envelope"></em></div>
|
|
|
<h4>Email</h4>
|
|
|
<p>hugo.creneau@etu.uca.fr</p>
|
|
|
</div>
|
|
|
<div class="contact-info-item padd-15">
|
|
|
<div class="icon"><em class="fa fa-map-marker-alt"></em></div>
|
|
|
<h4>Lieu :</h4>
|
|
|
<p>Clermont-Ferrand (63) - France</p>
|
|
|
</div>
|
|
|
<div class="contact-info-item padd-15">
|
|
|
<div class="icon"><em class="fa fa-globe-europe"></em></div>
|
|
|
<h4>LinkedIn</h4>
|
|
|
<a href="https://www.linkedin.com/in/hugo-creneau-53a7402a8/" id="linked">Mon LinkedIn</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
<h3 class="contact-title padd-15">ENVOYER EMAIL (Par manque de serveur, cette fonctionnalité n'est pas disponible, merci de
|
|
|
me contacter au mail ci dessus)</h3>
|
|
|
<h4 class="contact-sub-title padd-15">JE REPONDS AUX MESSAGES</h4>
|
|
|
<div class="row">
|
|
|
<form 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">
|
|
|
<em class="fas fa-cog fa-spin"></em>
|
|
|
</div>
|
|
|
<div class="day-night s-icon">
|
|
|
<em class="fas "></em>
|
|
|
</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> |
