|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
|
|
|
|
|
|
<html lang="fr">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
|
<title>Portfolio PRADIER Hugo</title>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- CSS Boostrap -->
|
|
|
|
|
|
<link
|
|
|
|
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
|
|
|
|
|
|
rel="stylesheet"
|
|
|
|
|
|
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
|
|
|
|
|
|
crossorigin="anonymous"
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Font Awesome -->
|
|
|
|
|
|
<script
|
|
|
|
|
|
src="https://kit.fontawesome.com/af391c05eb.js"
|
|
|
|
|
|
crossorigin="anonymous"
|
|
|
|
|
|
></script>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Icon Bootstrap -->
|
|
|
|
|
|
<link
|
|
|
|
|
|
rel="stylesheet"
|
|
|
|
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- EmailJS -->
|
|
|
|
|
|
<script
|
|
|
|
|
|
type="text/javascript"
|
|
|
|
|
|
src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"
|
|
|
|
|
|
></script>
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
(function () {
|
|
|
|
|
|
emailjs.init("zIk9mEnEj0qd3wDjU");
|
|
|
|
|
|
})();
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<!-- Barre de navigation -->
|
|
|
|
|
|
<header class="py-4">
|
|
|
|
|
|
<nav class="navbar navbar-expand-md fixed-top navbar-light bg-light">
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
<a class="navbar-brand text-uppercase fw-bold" href="#">
|
|
|
|
|
|
<span class="bg-secondary bg-gradient p-1 rounded-3 text-light"
|
|
|
|
|
|
>Hugo</span
|
|
|
|
|
|
>
|
|
|
|
|
|
PRADIER
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<button
|
|
|
|
|
|
class="navbar-toggler"
|
|
|
|
|
|
type="button"
|
|
|
|
|
|
data-bs-toggle="collapse"
|
|
|
|
|
|
data-bs-target="#navbarNav"
|
|
|
|
|
|
aria-controls="navbarNav"
|
|
|
|
|
|
aria-expanded="false"
|
|
|
|
|
|
aria-label="Toggle navigation"
|
|
|
|
|
|
>
|
|
|
|
|
|
<span class="navbar-toggler-icon"></span>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="collapse navbar-collapse justify-content-end"
|
|
|
|
|
|
id="navbarNav"
|
|
|
|
|
|
>
|
|
|
|
|
|
<ul class="navbar-nav">
|
|
|
|
|
|
<li class="nav-item">
|
|
|
|
|
|
<a class="nav-link" href="#accueil">Accueil </a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="nav-item">
|
|
|
|
|
|
<a class="nav-link" href="#apropos">À propos de moi</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="nav-item">
|
|
|
|
|
|
<a class="nav-link" href="#experiences">Expériences</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="nav-item">
|
|
|
|
|
|
<a class="nav-link" href="#formation">Formation</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="nav-item">
|
|
|
|
|
|
<a class="nav-link" href="#competences">Compétences</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="nav-item">
|
|
|
|
|
|
<a class="nav-link" href="#contact">Contact</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</nav>
|
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
|
|
<main>
|
|
|
|
|
|
<!-- Accueil -->
|
|
|
|
|
|
<section id="accueil" class="my-5">
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
<div class="row gy-4 align-items-center">
|
|
|
|
|
|
<div class="col-12 col-md-6">
|
|
|
|
|
|
<h1 class="fw-bold">
|
|
|
|
|
|
Je suis Hugo PRADIER, <br />
|
|
|
|
|
|
Alternant Développeur
|
|
|
|
|
|
</h1>
|
|
|
|
|
|
<h2 class="fw-light">Bienvenue sur mon portfolio !</h2>
|
|
|
|
|
|
<a
|
|
|
|
|
|
href="https://www.linkedin.com/in/hugo-pradier-25b562251/"
|
|
|
|
|
|
class="text-decoration-none text-dark"
|
|
|
|
|
|
data-bs-toggle="tooltip"
|
|
|
|
|
|
title="LinkedIn"
|
|
|
|
|
|
>
|
|
|
|
|
|
<i class="fab fa-linkedin fa-2x mt-4"></i>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<a
|
|
|
|
|
|
href="https://github.com/Hugo-P3663"
|
|
|
|
|
|
class="text-decoration-none text-dark"
|
|
|
|
|
|
data-bs-toggle="tooltip"
|
|
|
|
|
|
title="Github"
|
|
|
|
|
|
>
|
|
|
|
|
|
<i class="fab fa-github fa-2x"></i> </a
|
|
|
|
|
|
><a
|
|
|
|
|
|
href="mailto:pradier.hugo36@gmail.com"
|
|
|
|
|
|
class="text-decoration-none text-dark"
|
|
|
|
|
|
data-bs-toggle="tooltip"
|
|
|
|
|
|
title="Mail"
|
|
|
|
|
|
>
|
|
|
|
|
|
<i class="bi bi-envelope-fill fa-2x"></i> </a
|
|
|
|
|
|
><a
|
|
|
|
|
|
href="tel:+33 7 68 36 13 59"
|
|
|
|
|
|
class="text-decoration-none text-dark"
|
|
|
|
|
|
data-bs-toggle="tooltip"
|
|
|
|
|
|
title="Phone"
|
|
|
|
|
|
>
|
|
|
|
|
|
<i class="bi bi-telephone-fill fa-2x"></i>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<br />
|
|
|
|
|
|
<button
|
|
|
|
|
|
class="btn btn-secondary mt-5"
|
|
|
|
|
|
onclick="window.open('./assets/pdf/CV PRADIER Hugo.pdf', '_blank')"
|
|
|
|
|
|
>
|
|
|
|
|
|
Télécharger mon CV
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<!-- renvoi vers le formulaire de contact -->
|
|
|
|
|
|
<button
|
|
|
|
|
|
class="btn btn-secondary mt-5"
|
|
|
|
|
|
onclick="window.location.href='#contact'"
|
|
|
|
|
|
>
|
|
|
|
|
|
Contactez-moi
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-12 col-md-6">
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="./assets/images/photoIdentite.jpg"
|
|
|
|
|
|
alt="Photo de Hugo PRADIER"
|
|
|
|
|
|
width="95%"
|
|
|
|
|
|
class="rounded-3 shadow"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- À propos de moi -->
|
|
|
|
|
|
<section id="apropos" class="py-5 bg-light">
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
<div class="col">
|
|
|
|
|
|
<h2>À propos de moi</h2>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col">
|
|
|
|
|
|
<p></p>
|
|
|
|
|
|
<h2 class="py-3">Bonjour, je m'appelle Hugo Pradier</h2>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Étudiant en troisième année de BUT Production Informatique à
|
|
|
|
|
|
l'IUT de Clermont-Ferrand. Passionné par l’informatique, je suis
|
|
|
|
|
|
toujours en quête de nouveaux défis et compétences, explorant
|
|
|
|
|
|
divers domaines avec une fascination particulière pour le monde
|
|
|
|
|
|
du web.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Titulaire d'un baccalauréat avec mention Bien, mes spécialités
|
|
|
|
|
|
étaient "Mathématiques" et "N.S.I" j’ai alors poursuivi sur un
|
|
|
|
|
|
Bachelor universitaire et technologique en Production
|
|
|
|
|
|
informatique.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Au fil de mes expériences, j'ai acquis une expertise dans un
|
|
|
|
|
|
large éventail de langages de programmation, de bases de données
|
|
|
|
|
|
et de frameworks.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Dans ce portfolio, je vous invite à découvrir en détail mes
|
|
|
|
|
|
compétences, ma formation et mes diverses expériences.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
N'hésitez pas à me contacter pour toute question ou opportunité
|
|
|
|
|
|
de collaboration.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>Merci de votre visite !</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Experiences -->
|
|
|
|
|
|
<section id="experiences" class="py-5">
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
<h2 class="mb-4">Expériences</h2>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
|
<div class="card">
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="./assets/images/logoSylink.jpg"
|
|
|
|
|
|
class="card-img-top img-fluid"
|
|
|
|
|
|
alt="Logo Sylink"
|
|
|
|
|
|
style="height: 200px"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
|
<h5 class="card-title">Alternance chez Sylink Technologie</h5>
|
|
|
|
|
|
<p class="card-text">
|
|
|
|
|
|
<strong>Nom de l'entreprise :</strong> Sylink Technologie<br />
|
|
|
|
|
|
<strong>Situation géographique :</strong> Clermont-Ferrand,
|
|
|
|
|
|
63<br />
|
|
|
|
|
|
<strong>Secteur d’activité :</strong> Informatique :
|
|
|
|
|
|
conception et édition de solutions de cybersécurité
|
|
|
|
|
|
innovantes.<br />
|
|
|
|
|
|
<strong>Fonction exercée :</strong> Alternant développeur<br />
|
|
|
|
|
|
<strong>Nom et fonction du maître de stage :</strong> Rémy
|
|
|
|
|
|
Simon, Chef de projet, développeur C#/.Net<br />
|
|
|
|
|
|
<strong>Dates de l'expérience :</strong> du 1er septembre
|
|
|
|
|
|
2023 au 31 août 2024 (1 an)
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<a
|
|
|
|
|
|
href="#"
|
|
|
|
|
|
class="btn btn-secondary"
|
|
|
|
|
|
data-bs-toggle="modal"
|
|
|
|
|
|
data-bs-target="#modalSylink"
|
|
|
|
|
|
>En savoir plus</a
|
|
|
|
|
|
>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Modal -->
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="modal fade"
|
|
|
|
|
|
id="modalSylink"
|
|
|
|
|
|
tabindex="-1"
|
|
|
|
|
|
aria-labelledby="labelModalSylink"
|
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
|
<div class="modal-header">
|
|
|
|
|
|
<h5 class="modal-title">Alternance Sylink Technologie</h5>
|
|
|
|
|
|
<button
|
|
|
|
|
|
type="button"
|
|
|
|
|
|
class="btn-close"
|
|
|
|
|
|
data-bs-dismiss="modal"
|
|
|
|
|
|
aria-label="Close"
|
|
|
|
|
|
></button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="modal-body">
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Pendant ma troisième année de BUT Informatique, j'ai eu la
|
|
|
|
|
|
chance d’effectuer une alternance d'un an chez Sylink
|
|
|
|
|
|
Technologie. Cette entreprise française est spécialisée
|
|
|
|
|
|
dans la conception et l'édition de solutions de
|
|
|
|
|
|
cybersécurité innovantes.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Je travaillais sur deux projets distincts qui visaient à
|
|
|
|
|
|
renforcer les capacités de sécurité des entreprises. Le
|
|
|
|
|
|
premier consistait à développer une API en ASP .NET Core
|
|
|
|
|
|
pour faciliter la récupération d'informations sur les
|
|
|
|
|
|
appareils au sein du réseau d’une organisation à partir de
|
|
|
|
|
|
bases de données sous PostgreSQL ou QuestDB. Cette API
|
|
|
|
|
|
permettait le traitement des données au format JSON pour
|
|
|
|
|
|
la visualisation, la détection et l'analyse de menaces
|
|
|
|
|
|
potentielles. Durant ce projet, j’ai été amené à
|
|
|
|
|
|
communiquer avec une entreprise prestataire qui s’occupait
|
|
|
|
|
|
de la visualisation en 3D, cela m’a permis de mettre en
|
|
|
|
|
|
pratique et d’améliorer mes connaissances en
|
|
|
|
|
|
communication.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Simultanément, je travaillais sur un projet console en C#
|
|
|
|
|
|
qui utilisait Dehashed, un moteur de recherche de bases de
|
|
|
|
|
|
données piratées. Ce projet impliquait la création d'un
|
|
|
|
|
|
système permettant à l'utilisateur de sélectionner une
|
|
|
|
|
|
organisation pour générer des rapports sur les fuites de
|
|
|
|
|
|
données piratées, contribuant ainsi à renforcer la
|
|
|
|
|
|
sécurité des comptes et à détecter les violations. Les
|
|
|
|
|
|
résultats et les journaux étaient enregistrés dans une
|
|
|
|
|
|
base de données.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
J'ai ensuite déployé ces deux projets pour tester avec de
|
|
|
|
|
|
vraies données et partager à mes collaborateurs mes
|
|
|
|
|
|
avancées. Grâce à l’utilisation du serveur WEB Microsoft
|
|
|
|
|
|
IIS, j’ai pu déployer et servir les applications web
|
|
|
|
|
|
développées dans le cadre du projet, en offrant un
|
|
|
|
|
|
environnement robuste et sécurisé pour leur exécution.
|
|
|
|
|
|
Mais, avant cela, j’ai dû configurer une machine sur
|
|
|
|
|
|
Proxmox qui est une plateforme de virtualisation
|
|
|
|
|
|
open-source combinant la virtualisation de serveurs et la
|
|
|
|
|
|
gestion de conteneurs. Je m’occupais de versionner mes
|
|
|
|
|
|
projets pour communiquer plus facilement dessus.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
J'ai travaillé de manière autonome sur ces projets, tout
|
|
|
|
|
|
en recevant des retours réguliers de mon maître
|
|
|
|
|
|
d'alternance et de l'entreprise prestataire. Je réalisais
|
|
|
|
|
|
des comptes rendus quotidiens pour suivre mes progrès,
|
|
|
|
|
|
envisager des améliorations futures et recueillir des
|
|
|
|
|
|
suggestions. J'ai également communiqué avec d'autres
|
|
|
|
|
|
collègues spécialisés dans des technologies spécifiques.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Les diagrammes UML et les graphiques établis en amont ont
|
|
|
|
|
|
été précieux pour concevoir des applications structurées
|
|
|
|
|
|
et efficaces, favorisant une meilleure optimisation du
|
|
|
|
|
|
développement.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Parallèlement, j'ai utilisé des méthodes telles que Merise
|
|
|
|
|
|
pour établir des liens cohérents entre les bases de
|
|
|
|
|
|
données, assurant ainsi une gestion efficace des données
|
|
|
|
|
|
et une intégration harmonieuse avec l'application. Ma
|
|
|
|
|
|
maîtrise avancée du langage SQL m'a permis de créer des
|
|
|
|
|
|
requêtes complexes et optimisées.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Enfin, j'ai proposé d'intégrer une documentation Swagger
|
|
|
|
|
|
dans mon projet d'API, comme je l'avais appris lors de mon
|
|
|
|
|
|
stage précédent chez Cegi Alfa. Cette documentation était
|
|
|
|
|
|
essentielle pour faciliter la communication avec les
|
|
|
|
|
|
parties prenantes et assurer la pérennité du projet, même
|
|
|
|
|
|
en cas de reprise par un autre développeur.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
|
<div class="card">
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="./assets/images/cegiLogo.png"
|
|
|
|
|
|
class="card-img-top img-fluid"
|
|
|
|
|
|
alt="Logo Cegi Alfa"
|
|
|
|
|
|
style="height: 200px"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
|
<h5 class="card-title">Stage chez Cegi Alfa</h5>
|
|
|
|
|
|
<p class="card-text">
|
|
|
|
|
|
<strong>Nom de l'entreprise :</strong> Cegi Alfa<br />
|
|
|
|
|
|
<strong>Situation géographique :</strong> Clermont-Ferrand,
|
|
|
|
|
|
63<br />
|
|
|
|
|
|
<strong>Secteur d’activité :</strong> Informatique :
|
|
|
|
|
|
développement de logiciels de gestion dans les domaines du
|
|
|
|
|
|
médico-social, social et sanitaire.<br />
|
|
|
|
|
|
<strong>Fonction exercée :</strong> Stagiaire analyste
|
|
|
|
|
|
programmeur
|
|
|
|
|
|
<br />
|
|
|
|
|
|
<strong>Nom et fonction du maître de stage :</strong> Djamel
|
|
|
|
|
|
Massaïd, Chef d’équipe développeur du projet AgileS<br />
|
|
|
|
|
|
<strong>Dates de l'expérience :</strong> du 11 avril au 17
|
|
|
|
|
|
juin 2023 (10 semaines)
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<a
|
|
|
|
|
|
href="#"
|
|
|
|
|
|
class="btn btn-secondary"
|
|
|
|
|
|
data-bs-toggle="modal"
|
|
|
|
|
|
data-bs-target="#modalSylink"
|
|
|
|
|
|
>En savoir plus</a
|
|
|
|
|
|
>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Modal -->
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="modal fade"
|
|
|
|
|
|
id="modalSylink"
|
|
|
|
|
|
tabindex="-1"
|
|
|
|
|
|
aria-labelledby="labelModalSylink"
|
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
|
<div class="modal-header">
|
|
|
|
|
|
<h5 class="modal-title">Stage Cegi Alfa</h5>
|
|
|
|
|
|
<button
|
|
|
|
|
|
type="button"
|
|
|
|
|
|
class="btn-close"
|
|
|
|
|
|
data-bs-dismiss="modal"
|
|
|
|
|
|
aria-label="Close"
|
|
|
|
|
|
></button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="modal-body">
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Lors de ma deuxième année de BUT Production Informatique,
|
|
|
|
|
|
j’ai réalisé un stage de dix semaines au sein de
|
|
|
|
|
|
l’entreprise CEGI Alfa. Cette société est spécialisée dans
|
|
|
|
|
|
le développement de logiciels de gestion dans les domaines
|
|
|
|
|
|
du médico-social, du social et du sanitaire.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Mon sujet de stage portait sur le développement d'une API
|
|
|
|
|
|
(Application Programming Interface) en Java Spring pour
|
|
|
|
|
|
permettre l'interfaçage entre deux applications du groupe.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
D'un côté, le logiciel AgileS permet à des structures la
|
|
|
|
|
|
gestion de dossiers dans le domaine du social. Il est
|
|
|
|
|
|
destiné à gérer des personnes au sein d’organismes
|
|
|
|
|
|
d’accueil et d’accompagnement. De l’autre, VivaLity
|
|
|
|
|
|
constitue un dossier de l’usager sécurisé facilitant
|
|
|
|
|
|
l’échange d’informations avec « Mon Espace Santé ».
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Cette première expérience professionnelle dans le
|
|
|
|
|
|
développement a été véritablement enrichissante, me
|
|
|
|
|
|
permettant d'appliquer les compétences acquises lors de
|
|
|
|
|
|
mon parcours scolaire.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
En intégrant une équipe, j’ai ainsi eu l'occasion de
|
|
|
|
|
|
mettre en avant ma capacité à travailler en groupe, à
|
|
|
|
|
|
partager des connaissances et à coordonner mes actions
|
|
|
|
|
|
avec celles des autres membres. J'ai aussi consolidé mes
|
|
|
|
|
|
compétences techniques dans plusieurs domaines clés. En
|
|
|
|
|
|
premier lieu, j'ai approfondi ma maîtrise de Java, en
|
|
|
|
|
|
particulier en l'associant à Spring Boot, une combinaison
|
|
|
|
|
|
souvent utilisée pour le développement d'applications
|
|
|
|
|
|
robustes et efficaces. J'ai également appliqué le patron
|
|
|
|
|
|
d'architecture MVC, qui offre une structure organisée et
|
|
|
|
|
|
modulaire pour une conception évolutive. Les diagrammes
|
|
|
|
|
|
UML et graphiques établis en amont m'ont été précieux pour
|
|
|
|
|
|
concevoir une application structurée et efficace,
|
|
|
|
|
|
favorisant une meilleure optimisation du développement.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Parallèlement, j'ai bénéficié de l'utilisation de méthodes
|
|
|
|
|
|
telles que Merise pour établir des liens cohérents entre
|
|
|
|
|
|
les bases de données, assurant ainsi une gestion efficace
|
|
|
|
|
|
des données et une intégration harmonieuse avec
|
|
|
|
|
|
l'application. Ma compréhension avancée du langage SQL m'a
|
|
|
|
|
|
été utile pour créer des requêtes complexes et optimisées
|
|
|
|
|
|
dans Microsoft SQL Server Management.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Enfin, j'ai produit une documentation technique en
|
|
|
|
|
|
utilisant Swagger, une plateforme pour la création de
|
|
|
|
|
|
spécifications et de documentation claires et précises
|
|
|
|
|
|
pour les API. Cet outil m'a permis de fournir des
|
|
|
|
|
|
informations détaillées sur le fonctionnement de mon API,
|
|
|
|
|
|
facilitant ainsi son utilisation et sa maintenance pour
|
|
|
|
|
|
les développeurs ultérieurs.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Bien qu’ayant rencontré quelques défis initiaux, notamment
|
|
|
|
|
|
liés à l'exploration approfondie des technologies et à des
|
|
|
|
|
|
modifications imprévues, j'ai su surmonter ces obstacles
|
|
|
|
|
|
et aboutir au développement d'une API fonctionnelle. Cette
|
|
|
|
|
|
dernière est conçue pour enregistrer et manipuler les
|
|
|
|
|
|
données conformément aux spécifications du projet. Plus
|
|
|
|
|
|
précisément, elle offre à l'utilisateur la possibilité de
|
|
|
|
|
|
créer et de mettre à jour un dossier d'usager, ainsi que
|
|
|
|
|
|
de générer et de modifier une demande de prise en charge.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Pour l'avenir, l'ajout d'un système d'authentification à
|
|
|
|
|
|
l'API apparaît comme une piste prometteuse. Cette mesure
|
|
|
|
|
|
permettrait de renforcer la sécurité et l'interopérabilité
|
|
|
|
|
|
du système, ouvrant ainsi la voie à de nouvelles
|
|
|
|
|
|
possibilités et à une évolution continue. Elle
|
|
|
|
|
|
correspondait à la dernière tâche de ma planification où
|
|
|
|
|
|
je me suis retrouvé en autonomie.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Formation -->
|
|
|
|
|
|
<section id="formation" class="py-5 bg-light">
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
<h2 class="text-center">Formation</h2>
|
|
|
|
|
|
<div class="container mt-5">
|
|
|
|
|
|
<div class="row justify-content-center align-items-center">
|
|
|
|
|
|
<div class="col-md-4 text-center">
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="rounded-circle bg-secondary d-flex justify-content-center align-items-center"
|
|
|
|
|
|
style="width: 200px; height: 200px"
|
|
|
|
|
|
>
|
|
|
|
|
|
<span
|
|
|
|
|
|
class="text-white fw-bold"
|
|
|
|
|
|
style="
|
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
|
|
|
|
|
"
|
|
|
|
|
|
>2021-2024</span
|
|
|
|
|
|
>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-md-3">
|
|
|
|
|
|
<h3 class="text-md-end">BUT Production Informatique</h3>
|
|
|
|
|
|
<p class="text-md-end">
|
|
|
|
|
|
IUT de Clermont-Ferrand, 63<br />
|
|
|
|
|
|
<strong>Spécialité :</strong> Développement WEB
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<hr />
|
|
|
|
|
|
<!-- Barre horizontale -->
|
|
|
|
|
|
<div class="row justify-content-center align-items-center mt-4">
|
|
|
|
|
|
<div class="col-md-4 text-center">
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="rounded-circle bg-secondary d-flex justify-content-center align-items-center"
|
|
|
|
|
|
style="width: 200px; height: 200px"
|
|
|
|
|
|
>
|
|
|
|
|
|
<span
|
|
|
|
|
|
class="text-white fw-bold"
|
|
|
|
|
|
style="
|
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
|
|
|
|
|
"
|
|
|
|
|
|
>2018-2021</span
|
|
|
|
|
|
>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-md-3">
|
|
|
|
|
|
<h3 class="text-md-end">Baccalauréat Général</h3>
|
|
|
|
|
|
<p class="text-md-end">
|
|
|
|
|
|
Lycée George Sand, 36<br />
|
|
|
|
|
|
<strong>Spécialités :</strong> N.S.I / Mathématiques /
|
|
|
|
|
|
Physique Chimie <br />
|
|
|
|
|
|
<strong>Mention :</strong> Bien
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<hr />
|
|
|
|
|
|
<!-- Barre horizontale -->
|
|
|
|
|
|
<div class="row justify-content-center align-items-center mt-4">
|
|
|
|
|
|
<div class="col-md-4 text-center">
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="rounded-circle bg-secondary d-flex justify-content-center align-items-center"
|
|
|
|
|
|
style="width: 200px; height: 200px"
|
|
|
|
|
|
>
|
|
|
|
|
|
<span
|
|
|
|
|
|
class="text-white fw-bold"
|
|
|
|
|
|
style="
|
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
|
|
|
|
|
"
|
|
|
|
|
|
>2014-2018</span
|
|
|
|
|
|
>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-md-3">
|
|
|
|
|
|
<h3 class="text-md-end">
|
|
|
|
|
|
Diplôme National du Brevet des collèges
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
<p class="text-md-end">
|
|
|
|
|
|
Collège Vincent Rotinat, 36<br />
|
|
|
|
|
|
<strong>Mention :</strong> Très bien
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Compétences -->
|
|
|
|
|
|
<section id="competences" class="py-5">
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
<h2>Compétences</h2>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Developpement -->
|
|
|
|
|
|
<h3 class="mt-4">Développement</h3>
|
|
|
|
|
|
<div class="row mt-4">
|
|
|
|
|
|
<div class="col-2">
|
|
|
|
|
|
<div class="card border-secondary mb-3" style="max-width: 10rem">
|
|
|
|
|
|
<div class="card-body text-secondary">
|
|
|
|
|
|
<h5 class="card-title text-center">HTML</h5>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="./assets/images/html.png"
|
|
|
|
|
|
class="card-img-bottom"
|
|
|
|
|
|
alt="HTML"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-2">
|
|
|
|
|
|
<div class="card border-secondary mb-3" style="max-width: 10rem">
|
|
|
|
|
|
<div class="card-body text-secondary">
|
|
|
|
|
|
<h5 class="card-title text-center">CSS</h5>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="./assets/images/css.png"
|
|
|
|
|
|
class="card-img-bottom"
|
|
|
|
|
|
alt="CSS"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-2">
|
|
|
|
|
|
<div class="card border-secondary mb-3" style="max-width: 10rem">
|
|
|
|
|
|
<div class="card-body text-secondary">
|
|
|
|
|
|
<h5 class="card-title text-center">Javascript</h5>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="./assets/images/js.png"
|
|
|
|
|
|
class="card-img-bottom"
|
|
|
|
|
|
alt="JS"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-2">
|
|
|
|
|
|
<div class="card border-secondary mb-3" style="max-width: 10rem">
|
|
|
|
|
|
<div class="card-body text-secondary">
|
|
|
|
|
|
<h5 class="card-title text-center">PHP</h5>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="./assets/images/php.png"
|
|
|
|
|
|
class="card-img-bottom"
|
|
|
|
|
|
alt="PHP"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-2">
|
|
|
|
|
|
<div class="card border-secondary mb-3" style="max-width: 10rem">
|
|
|
|
|
|
<div class="card-body text-secondary">
|
|
|
|
|
|
<h5 class="card-title text-center">Typescript</h5>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="./assets/images/typescript.png"
|
|
|
|
|
|
class="card-img-bottom"
|
|
|
|
|
|
alt="Typescript"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-2">
|
|
|
|
|
|
<div class="card border-secondary mb-3" style="max-width: 10rem">
|
|
|
|
|
|
<div class="card-body text-secondary">
|
|
|
|
|
|
<h5 class="card-title text-center">Ruby</h5>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="./assets/images/ruby.png"
|
|
|
|
|
|
class="card-img-bottom"
|
|
|
|
|
|
alt="Ruby"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-2">
|
|
|
|
|
|
<div class="card border-secondary mb-3" style="max-width: 10rem">
|
|
|
|
|
|
<div class="card-body text-secondary">
|
|
|
|
|
|
<h5 class="card-title text-center">Python</h5>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="./assets/images/python.png"
|
|
|
|
|
|
class="card-img-bottom"
|
|
|
|
|
|
alt="Python"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-2">
|
|
|
|
|
|
<div class="card border-secondary mb-3" style="max-width: 10rem">
|
|
|
|
|
|
<div class="card-body text-secondary">
|
|
|
|
|
|
<h5 class="card-title text-center">Java</h5>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="./assets/images/java.png"
|
|
|
|
|
|
class="card-img-bottom"
|
|
|
|
|
|
alt="Java"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-2">
|
|
|
|
|
|
<div class="card border-secondary mb-3" style="max-width: 10rem">
|
|
|
|
|
|
<div class="card-body text-secondary">
|
|
|
|
|
|
<h5 class="card-title text-center">C</h5>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="./assets/images/c.png"
|
|
|
|
|
|
class="card-img-bottom"
|
|
|
|
|
|
alt="C"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-2">
|
|
|
|
|
|
<div class="card border-secondary mb-3" style="max-width: 10rem">
|
|
|
|
|
|
<div class="card-body text-secondary">
|
|
|
|
|
|
<h5 class="card-title text-center">C++</h5>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="./assets/images/c++.png"
|
|
|
|
|
|
class="card-img-bottom"
|
|
|
|
|
|
alt="C++"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-2">
|
|
|
|
|
|
<div class="card border-secondary mb-3" style="max-width: 10rem">
|
|
|
|
|
|
<div class="card-body text-secondary">
|
|
|
|
|
|
<h5 class="card-title text-center">C#</h5>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="./assets/images/c-sharp.png"
|
|
|
|
|
|
class="card-img-bottom"
|
|
|
|
|
|
alt="C#"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-2">
|
|
|
|
|
|
<div class="card border-secondary mb-3" style="max-width: 10rem">
|
|
|
|
|
|
<div class="card-body text-secondary">
|
|
|
|
|
|
<h5 class="card-title text-center">SQL</h5>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="./assets/images/sql.png"
|
|
|
|
|
|
class="card-img-bottom"
|
|
|
|
|
|
alt="SQL"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Langues -->
|
|
|
|
|
|
<h3>Langues</h3>
|
|
|
|
|
|
<div class="d-flex justify-content-center">
|
|
|
|
|
|
<div class="col-2">
|
|
|
|
|
|
<div class="card border-secondary mb-3" style="max-width: 10rem">
|
|
|
|
|
|
<div class="card-body text-secondary">
|
|
|
|
|
|
<h5 class="card-title text-center">Français</h5>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="./assets/images/france.png"
|
|
|
|
|
|
class="card-img-bottom"
|
|
|
|
|
|
alt="Drapeau de la France"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<p class="card-text text-center">
|
|
|
|
|
|
<strong>Langue maternelle</strong>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-2">
|
|
|
|
|
|
<div class="card border-secondary mb-3" style="max-width: 10rem">
|
|
|
|
|
|
<div class="card-body text-secondary">
|
|
|
|
|
|
<h5 class="card-title text-center">Anglais</h5>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="./assets/images/unitedKingdom.png"
|
|
|
|
|
|
class="card-img-bottom"
|
|
|
|
|
|
alt="Drapeau du Royaume Uni"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<p class="card-text text-center">
|
|
|
|
|
|
<strong>Intermédiaire avancé (B2)</strong>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-2">
|
|
|
|
|
|
<div class="card border-secondary mb-3" style="max-width: 10rem">
|
|
|
|
|
|
<div class="card-body text-secondary">
|
|
|
|
|
|
<h5 class="card-title text-center">Espagnol</h5>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="./assets/images/espagne.png"
|
|
|
|
|
|
class="card-img-bottom"
|
|
|
|
|
|
alt="Drapeau de l'Espagne"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<p class="card-text text-center">
|
|
|
|
|
|
<strong>Intermédiaire (B1)</strong>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Outils -->
|
|
|
|
|
|
|
|
|
|
|
|
<h3>Outils</h3>
|
|
|
|
|
|
<div class="row mt-4">
|
|
|
|
|
|
<div class="col-2">
|
|
|
|
|
|
<div class="card border-secondary mb-3" style="max-width: 10rem">
|
|
|
|
|
|
<div class="card-body text-secondary">
|
|
|
|
|
|
<h5 class="card-title text-center">Visual Studio</h5>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="./assets/images/visualStudio.png"
|
|
|
|
|
|
class="card-img-bottom"
|
|
|
|
|
|
alt="Visual Studio"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-2">
|
|
|
|
|
|
<div class="card border-secondary mb-3" style="max-width: 10rem">
|
|
|
|
|
|
<div class="card-body text-secondary">
|
|
|
|
|
|
<h5 class="card-title text-center">Jetbrains</h5>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="./assets/images/jetbrains.png"
|
|
|
|
|
|
class="card-img-bottom"
|
|
|
|
|
|
alt="Suite Jetbrains"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-2">
|
|
|
|
|
|
<div class="card border-secondary mb-3" style="max-width: 10rem">
|
|
|
|
|
|
<div class="card-body text-secondary">
|
|
|
|
|
|
<h5 class="card-title text-center">Docker</h5>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="./assets/images/docker.png"
|
|
|
|
|
|
class="card-img-bottom"
|
|
|
|
|
|
alt="Docker"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-2">
|
|
|
|
|
|
<div class="card border-secondary mb-3" style="max-width: 10rem">
|
|
|
|
|
|
<div class="card-body text-secondary">
|
|
|
|
|
|
<h5 class="card-title text-center">Kubernetes</h5>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="./assets/images/kubernetes.png"
|
|
|
|
|
|
class="card-img-bottom"
|
|
|
|
|
|
alt="Kubernetes"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-2">
|
|
|
|
|
|
<div class="card border-secondary mb-3" style="max-width: 10rem">
|
|
|
|
|
|
<div class="card-body text-secondary">
|
|
|
|
|
|
<h5 class="card-title text-center">Proxmox</h5>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="./assets/images/proxmox.png"
|
|
|
|
|
|
class="card-img-bottom"
|
|
|
|
|
|
alt="Proxmox"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-2">
|
|
|
|
|
|
<div class="card border-secondary mb-3" style="max-width: 10rem">
|
|
|
|
|
|
<div class="card-body text-secondary">
|
|
|
|
|
|
<h5 class="card-title text-center">Git</h5>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="./assets/images/git.png"
|
|
|
|
|
|
class="card-img-bottom"
|
|
|
|
|
|
alt="Git"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-2">
|
|
|
|
|
|
<div class="card border-secondary mb-3" style="max-width: 10rem">
|
|
|
|
|
|
<div class="card-body text-secondary">
|
|
|
|
|
|
<h5 class="card-title text-center">xUnit</h5>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="./assets/images/xUnit.png"
|
|
|
|
|
|
class="card-img-bottom"
|
|
|
|
|
|
alt="Suite de tests unitaires xUnit"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-2">
|
|
|
|
|
|
<div class="card border-secondary mb-3" style="max-width: 10rem">
|
|
|
|
|
|
<div class="card-body text-secondary">
|
|
|
|
|
|
<h5 class="card-title text-center">Postman</h5>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="./assets/images/postman.png"
|
|
|
|
|
|
class="card-img-bottom"
|
|
|
|
|
|
alt="Postman"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-2">
|
|
|
|
|
|
<div class="card border-secondary mb-3" style="max-width: 10rem">
|
|
|
|
|
|
<div class="card-body text-secondary">
|
|
|
|
|
|
<h5 class="card-title text-center">Swagger</h5>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="./assets/images/swagger.png"
|
|
|
|
|
|
class="card-img-bottom"
|
|
|
|
|
|
alt="Swagger"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-2">
|
|
|
|
|
|
<div class="card border-secondary mb-3" style="max-width: 10rem">
|
|
|
|
|
|
<div class="card-body text-secondary">
|
|
|
|
|
|
<h5 class="card-title text-center">Figma</h5>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="./assets/images/figma.png"
|
|
|
|
|
|
class="card-img-bottom"
|
|
|
|
|
|
alt="Figma"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-2">
|
|
|
|
|
|
<div class="card border-secondary mb-3" style="max-width: 10rem">
|
|
|
|
|
|
<div class="card-body text-secondary">
|
|
|
|
|
|
<h5 class="card-title text-center">Canva</h5>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="./assets/images/canva.png"
|
|
|
|
|
|
class="card-img-bottom"
|
|
|
|
|
|
alt="Canva"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-2">
|
|
|
|
|
|
<div class="card border-secondary mb-3" style="max-width: 10rem">
|
|
|
|
|
|
<div class="card-body text-secondary">
|
|
|
|
|
|
<h5 class="card-title text-center">Office</h5>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="./assets/images/office.png"
|
|
|
|
|
|
class="card-img-bottom"
|
|
|
|
|
|
alt="Suite Microsoft Office"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Contact -->
|
|
|
|
|
|
<section id="contact" class="py-5 bg-light">
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
<h2>Contact</h2>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="row gy-4 mt-5">
|
|
|
|
|
|
<div class="col-4">
|
|
|
|
|
|
<h3>Informations</h3>
|
|
|
|
|
|
<ul class="list-unstyled mt-5">
|
|
|
|
|
|
<li style="font-size: 20px">
|
|
|
|
|
|
<i class="bi bi-geo-alt-fill"></i> 63110 - Beaumont
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li style="font-size: 20px">
|
|
|
|
|
|
<i class="bi bi-telephone-fill"></i> +33 7 68 36 13 59
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li style="font-size: 20px">
|
|
|
|
|
|
<i class="bi bi-envelope-fill"></i>
|
|
|
|
|
|
<a href="mailto:pradier.hugo36@gmail.com">
|
|
|
|
|
|
pradier.hugo36@gmail.com</a
|
|
|
|
|
|
>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col-8">
|
|
|
|
|
|
<!-- Formulaire -->
|
|
|
|
|
|
<h3>Formulaire</h3>
|
|
|
|
|
|
<form id="contact-form" class="row mt-5">
|
|
|
|
|
|
<div class="col-6 my-2">
|
|
|
|
|
|
<label for="firstname" class="form-label">Prénom</label>
|
|
|
|
|
|
<input
|
|
|
|
|
|
name="firstname"
|
|
|
|
|
|
type="text"
|
|
|
|
|
|
class="form-control default-example"
|
|
|
|
|
|
id="firstname"
|
|
|
|
|
|
placeholder="Ex: John"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<span id="firstname-error" class="text-danger"></span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-6 my-2">
|
|
|
|
|
|
<label for="name" class="form-label">Nom</label>
|
|
|
|
|
|
<input
|
|
|
|
|
|
name="name"
|
|
|
|
|
|
type="text"
|
|
|
|
|
|
class="form-control default-example"
|
|
|
|
|
|
id="name"
|
|
|
|
|
|
placeholder="Ex: Doe"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<span id="name-error" class="text-danger"></span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-12 my-2">
|
|
|
|
|
|
<label for="email" class="form-label">Email</label>
|
|
|
|
|
|
<input
|
|
|
|
|
|
name="email"
|
|
|
|
|
|
type="email"
|
|
|
|
|
|
class="form-control default-example"
|
|
|
|
|
|
id="email"
|
|
|
|
|
|
placeholder="Ex: johndoe@example.com"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<span id="email-error" class="text-danger"></span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-12 my-2">
|
|
|
|
|
|
<label for="phone" class="form-label">Téléphone</label>
|
|
|
|
|
|
<input
|
|
|
|
|
|
name="phone"
|
|
|
|
|
|
type="tel"
|
|
|
|
|
|
class="form-control default-example"
|
|
|
|
|
|
id="phone"
|
|
|
|
|
|
placeholder="Ex: 1234567890"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<span id="phone-error" class="text-danger"></span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-12 my-2">
|
|
|
|
|
|
<label for="message" class="form-label">Message</label>
|
|
|
|
|
|
<textarea
|
|
|
|
|
|
name="message"
|
|
|
|
|
|
class="form-control default-example"
|
|
|
|
|
|
id="message"
|
|
|
|
|
|
rows="3"
|
|
|
|
|
|
placeholder="Exemple de message"
|
|
|
|
|
|
></textarea>
|
|
|
|
|
|
<span id="message-error" class="text-danger"></span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<span id="response" class="text-danger"></span>
|
|
|
|
|
|
<div class="col-12 my-2">
|
|
|
|
|
|
<button
|
|
|
|
|
|
type="button"
|
|
|
|
|
|
class="btn btn-secondary w-100"
|
|
|
|
|
|
onclick="sendEmail()"
|
|
|
|
|
|
>
|
|
|
|
|
|
Envoyer
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</form>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
</main>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Bas de page -->
|
|
|
|
|
|
<footer class="border-top">
|
|
|
|
|
|
<div class="container py-5">
|
|
|
|
|
|
<div class="row gy-4 align-items-center">
|
|
|
|
|
|
<div class="col-12 col-md-4">
|
|
|
|
|
|
<a class="navbar-brand text-dark text-uppercase fw-bold" href="#">
|
|
|
|
|
|
<span class="bg-secondary bg-gradient p-1 rounded-3 text-light"
|
|
|
|
|
|
>Hugo</span
|
|
|
|
|
|
>
|
|
|
|
|
|
PRADIER
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-12 col-md-4 text-md-center">
|
|
|
|
|
|
<ul class="list-unstyled mb-0">
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<a
|
|
|
|
|
|
href="#"
|
|
|
|
|
|
class="text-decoration-none text-dark"
|
|
|
|
|
|
data-bs-toggle="modal"
|
|
|
|
|
|
data-bs-target="#mentionsLegales"
|
|
|
|
|
|
>Mentions légales</a
|
|
|
|
|
|
>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-12 col-md-4 text-md-end">
|
|
|
|
|
|
<ul class="list-inline mb-0">
|
|
|
|
|
|
<li class="list-inline-item">
|
|
|
|
|
|
<a
|
|
|
|
|
|
href="https://www.linkedin.com/in/hugo-pradier-25b562251/"
|
|
|
|
|
|
class="text-decoration-none text-dark"
|
|
|
|
|
|
data-bs-toggle="tooltip"
|
|
|
|
|
|
title="LinkedIn"
|
|
|
|
|
|
>
|
|
|
|
|
|
<i class="fab fa-linkedin fa-2x"></i>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="list-inline-item">
|
|
|
|
|
|
<a
|
|
|
|
|
|
href="https://github.com/Hugo-P3663"
|
|
|
|
|
|
class="text-decoration-none text-dark"
|
|
|
|
|
|
data-bs-toggle="tooltip"
|
|
|
|
|
|
title="Github"
|
|
|
|
|
|
>
|
|
|
|
|
|
<i class="fab fa-github fa-2x"></i>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="list-inline-item">
|
|
|
|
|
|
<a
|
|
|
|
|
|
href="mailto:pradier.hugo36@gmail.com"
|
|
|
|
|
|
class="text-decoration-none text-dark"
|
|
|
|
|
|
data-bs-toggle="tooltip"
|
|
|
|
|
|
title="Mail"
|
|
|
|
|
|
>
|
|
|
|
|
|
<i class="bi bi-envelope-fill fa-2x"></i>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="list-inline-item">
|
|
|
|
|
|
<a
|
|
|
|
|
|
href="tel:+33 7 68 36 13 59"
|
|
|
|
|
|
class="text-decoration-none text-dark"
|
|
|
|
|
|
data-bs-toggle="tooltip"
|
|
|
|
|
|
title="Phone"
|
|
|
|
|
|
>
|
|
|
|
|
|
<i class="bi bi-telephone-fill fa-2x"></i>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Modal -->
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="modal fade"
|
|
|
|
|
|
id="mentionsLegales"
|
|
|
|
|
|
tabindex="-1"
|
|
|
|
|
|
aria-labelledby="labelModalMentionsLegales"
|
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
|
<div class="modal-header">
|
|
|
|
|
|
<h5 class="modal-title">Mentions légales</h5>
|
|
|
|
|
|
<button
|
|
|
|
|
|
type="button"
|
|
|
|
|
|
class="btn-close"
|
|
|
|
|
|
data-bs-dismiss="modal"
|
|
|
|
|
|
aria-label="Close"
|
|
|
|
|
|
></button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="modal-body">
|
|
|
|
|
|
<h2 class="text-center">Édition du site</h2>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Le présent site, accessible à l’URL
|
|
|
|
|
|
<a href="https://hugopradier.github.io"
|
|
|
|
|
|
>https://hugopradier.github.io</a
|
|
|
|
|
|
>, est édité par :
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Hugo PRADIER, résidant 11 Rue de l'Hôtel de Ville 63110
|
|
|
|
|
|
BEAUMONT, de nationalité Française, né le 07/03/2003.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<h2 class="text-center">Hébergement</h2>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Le Site est hébergé par la société GitHub, possédant son siège
|
|
|
|
|
|
social à San Francisco,
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<h2 class="text-center">Administrateur du site</h2>
|
|
|
|
|
|
<p>L'administrateur du site est Hugo PRADIER.</p>
|
|
|
|
|
|
<h2 class="text-center">Me contacter</h2>
|
|
|
|
|
|
<p>Par téléphone : +33768361359</p>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Par email :
|
|
|
|
|
|
<a href="mailto:pradier.hugo36@gmail.com"
|
|
|
|
|
|
>pradier.hugo36@gmail.com</a
|
|
|
|
|
|
>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>Par courrier : 11 Rue de l'Hôtel de Ville 63110 BEAUMONT</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</footer>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- JS Boostrap -->
|
|
|
|
|
|
<script
|
|
|
|
|
|
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
|
|
|
|
|
|
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
|
|
|
|
|
|
crossorigin="anonymous"
|
|
|
|
|
|
></script>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- JS Perso -->
|
|
|
|
|
|
<script src="zIk9mEnEj0qd3wDjU.js"></script>
|
|
|
|
|
|
<script src="./assets/js/sendEmail.js"></script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
