|
|
<!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>
|
|
|
|
|
|
<!-- Boutons de langue -->
|
|
|
<li class="nav-item">
|
|
|
<div class="dropdown">
|
|
|
<button
|
|
|
class="btn btn-link dropdown-toggle"
|
|
|
type="button"
|
|
|
id="selectedLanguage"
|
|
|
data-bs-toggle="dropdown"
|
|
|
aria-expanded="false"
|
|
|
>
|
|
|
Langue
|
|
|
</button>
|
|
|
<ul class="dropdown-menu" aria-labelledby="languageDropdown">
|
|
|
<li>
|
|
|
<button class="dropdown-item" onclick="setLanguage('fr')">
|
|
|
<img
|
|
|
src="assets/images/france.png"
|
|
|
alt="French Flag"
|
|
|
width="50"
|
|
|
/>
|
|
|
Français
|
|
|
</button>
|
|
|
</li>
|
|
|
<li>
|
|
|
<button class="dropdown-item" onclick="setLanguage('en')">
|
|
|
<img
|
|
|
src="assets/images/unitedKingdom.png"
|
|
|
alt="UK Flag"
|
|
|
width="50"
|
|
|
/>
|
|
|
English
|
|
|
</button>
|
|
|
</li>
|
|
|
<li>
|
|
|
<button class="dropdown-item" onclick="setLanguage('es')">
|
|
|
<img
|
|
|
src="assets/images/espagne.png"
|
|
|
alt="Spanish Flag"
|
|
|
width="50"
|
|
|
/>
|
|
|
Español
|
|
|
</button>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</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
|
|
|
id="telechargerCV"
|
|
|
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
|
|
|
id="contactezMoi"
|
|
|
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-5 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-12 col-md-4">
|
|
|
<h2 id="titleAbout">À propos de moi</h2>
|
|
|
</div>
|
|
|
<div class="col-12 col-md-8">
|
|
|
<p></p>
|
|
|
<h3 id="bonjourTitle" class="py-3">
|
|
|
Bonjour, je m'appelle Hugo PRADIER
|
|
|
</h3>
|
|
|
<p id="bonjourContent1">
|
|
|
Étudiant en troisième année de BUT Production Informatique à
|
|
|
l'IUT de Clermont-Ferrand, je suis toujours en quête de nouveaux
|
|
|
défis et compétences. Passionné par l'informatique, j'explore
|
|
|
divers domaines avec une fascination particulière pour le monde
|
|
|
du web.
|
|
|
</p>
|
|
|
<p id="bonjourContent2">
|
|
|
Titulaire d'un baccalauréat mention Bien avec spécialités
|
|
|
"Mathématiques" et "N.S.I", j’ai alors poursuivi vers un
|
|
|
Bachelor Universitaire et Technologique en Production
|
|
|
informatique.
|
|
|
</p>
|
|
|
<p id="bonjourContent3">
|
|
|
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 id="bonjourContent4">
|
|
|
Dans ce portfolio, je vous invite à découvrir en détail mes
|
|
|
compétences, ma formation et mes diverses expériences.
|
|
|
</p>
|
|
|
<p id="bonjourContent5">
|
|
|
N'hésitez pas à me contacter pour toute question ou opportunité
|
|
|
de collaboration.
|
|
|
</p>
|
|
|
<p id="bonjourContent6">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-12 col-lg-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 id="sylinkTitle" class="card-title">
|
|
|
Alternance chez Sylink Technologie
|
|
|
</h5>
|
|
|
<p id="sylinkDescription" 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>
|
|
|
<div class="row">
|
|
|
<a
|
|
|
id="developmentSylink"
|
|
|
href="#"
|
|
|
class="btn btn-secondary col-12 col-md-4 me-2 mb-2"
|
|
|
data-bs-toggle="modal"
|
|
|
data-bs-target="#modalSylinkDev"
|
|
|
>Développement</a
|
|
|
>
|
|
|
<a
|
|
|
id="documentationSylink"
|
|
|
href="#"
|
|
|
class="btn btn-secondary col-12 col-md-4 me-2 mb-2"
|
|
|
data-bs-toggle="modal"
|
|
|
data-bs-target="#modalSylinkDoc"
|
|
|
>Documentation</a
|
|
|
>
|
|
|
<a
|
|
|
id="collaborationSylink"
|
|
|
href="#"
|
|
|
class="btn btn-secondary col-12 col-md-3 me-2 mb-2"
|
|
|
data-bs-toggle="modal"
|
|
|
data-bs-target="#modalSylinkCollab"
|
|
|
>Collaboration</a
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="col-12 col-lg-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 id="cegiTitle" class="card-title">
|
|
|
Stage chez Cegi Alfa
|
|
|
</h5>
|
|
|
<p id="cegiDescription" 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>
|
|
|
<div class="row">
|
|
|
<a
|
|
|
id="developmentCegi"
|
|
|
href="#"
|
|
|
class="btn btn-secondary col-12 col-md-4 me-2 mb-2"
|
|
|
data-bs-toggle="modal"
|
|
|
data-bs-target="#modalCegiDev"
|
|
|
>Développement</a
|
|
|
>
|
|
|
<a
|
|
|
id="documentationCegi"
|
|
|
href="#"
|
|
|
class="btn btn-secondary col-12 col-md-4 me-2 mb-2"
|
|
|
data-bs-toggle="modal"
|
|
|
data-bs-target="#modalCegiDoc"
|
|
|
>Documentation</a
|
|
|
>
|
|
|
<a
|
|
|
id="projectManagementCegi"
|
|
|
href="#"
|
|
|
class="btn btn-secondary col-12 col-md-3 me-2 mb-2"
|
|
|
data-bs-toggle="modal"
|
|
|
data-bs-target="#modalCegiConduite"
|
|
|
>
|
|
|
Conduire un projet</a
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Modal (Détails de mex expériences) -->
|
|
|
|
|
|
<!-- Cegi Alfa -->
|
|
|
|
|
|
<!-- Développement -->
|
|
|
<div
|
|
|
class="modal fade"
|
|
|
id="modalCegiDev"
|
|
|
tabindex="-1"
|
|
|
aria-labelledby="labelModalCegi"
|
|
|
aria-hidden="true"
|
|
|
>
|
|
|
<div
|
|
|
class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
|
|
|
>
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
|
<h5 id="titleSection1Cegi" class="modal-title">
|
|
|
Développer chez Cegi Alfa
|
|
|
</h5>
|
|
|
<button
|
|
|
type="button"
|
|
|
class="btn-close"
|
|
|
data-bs-dismiss="modal"
|
|
|
aria-label="Close"
|
|
|
></button>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
<p id="text1Section1Cegi">
|
|
|
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 qui 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 id="text2Section1Cegi">
|
|
|
J'ai 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.
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Conception et documentation -->
|
|
|
<div
|
|
|
class="modal fade"
|
|
|
id="modalCegiDoc"
|
|
|
tabindex="-1"
|
|
|
aria-labelledby="labelModalCegi"
|
|
|
aria-hidden="true"
|
|
|
>
|
|
|
<div
|
|
|
class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
|
|
|
>
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
|
<h5 id="titleSection2Cegi" class="modal-title">
|
|
|
Concevoir et documenter chez Cegi Alfa
|
|
|
</h5>
|
|
|
<button
|
|
|
type="button"
|
|
|
class="btn-close"
|
|
|
data-bs-dismiss="modal"
|
|
|
aria-label="Close"
|
|
|
></button>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
<p id="text1Section2Cegi">
|
|
|
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 id="text2Section2Cegi">
|
|
|
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 id="text3Section2Cegi">
|
|
|
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>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Conception et documentation -->
|
|
|
<div
|
|
|
class="modal fade"
|
|
|
id="modalCegiConduite"
|
|
|
tabindex="-1"
|
|
|
aria-labelledby="labelModalCegi"
|
|
|
aria-hidden="true"
|
|
|
>
|
|
|
<div
|
|
|
class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
|
|
|
>
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
|
<h5 id="titleSection3Cegi" class="modal-title">
|
|
|
Conduire un projet chez Cegi Alfa
|
|
|
</h5>
|
|
|
<button
|
|
|
type="button"
|
|
|
class="btn-close"
|
|
|
data-bs-dismiss="modal"
|
|
|
aria-label="Close"
|
|
|
></button>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
<p id="text1Section3Cegi">
|
|
|
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 id="text2Section3Cegi">
|
|
|
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>
|
|
|
|
|
|
<!-- Sylink Technologie -->
|
|
|
<!-- Développement -->
|
|
|
<div
|
|
|
class="modal fade"
|
|
|
id="modalSylinkDev"
|
|
|
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 id="titleSection1Sylink" class="modal-title">
|
|
|
Développer chez Sylink
|
|
|
</h5>
|
|
|
<button
|
|
|
type="button"
|
|
|
class="btn-close"
|
|
|
data-bs-dismiss="modal"
|
|
|
aria-label="Close"
|
|
|
></button>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
<p id="text1Section1Sylink">
|
|
|
En troisième année de BUT Informatique, au cours de mon
|
|
|
alternance d'un an chez Sylink Technologie, j’ai travaillé
|
|
|
sur deux projets distincts visant à 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.
|
|
|
</p>
|
|
|
<p id="text2Section1Sylink">
|
|
|
Simultanément, j’ai conduit 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
|
|
|
</p>
|
|
|
<p id="text3Section1Sylink">
|
|
|
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. Mais, avant cela, j’ai dû configurer une machine sur
|
|
|
Proxmox. Je m’occupais de versionner mes projets pour
|
|
|
communiquer plus facilement dessus.
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Conception et documentation -->
|
|
|
<div
|
|
|
class="modal fade"
|
|
|
id="modalSylinkDoc"
|
|
|
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 id="titleSection2Sylink" class="modal-title">
|
|
|
Concevoir et documenter chez Sylink
|
|
|
</h5>
|
|
|
<button
|
|
|
type="button"
|
|
|
class="btn-close"
|
|
|
data-bs-dismiss="modal"
|
|
|
aria-label="Close"
|
|
|
></button>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
<p id="text1Section2Sylink">
|
|
|
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 id="text2Section2Sylink">
|
|
|
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 id="text3Section2Sylink">
|
|
|
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>
|
|
|
|
|
|
<!-- Collaboration -->
|
|
|
<div
|
|
|
class="modal fade"
|
|
|
id="modalSylinkCollab"
|
|
|
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 id="titleSection3Sylink" class="modal-title">
|
|
|
Collaborer chez Sylink
|
|
|
</h5>
|
|
|
<button
|
|
|
type="button"
|
|
|
class="btn-close"
|
|
|
data-bs-dismiss="modal"
|
|
|
aria-label="Close"
|
|
|
></button>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
<p id="text1Section3Sylink">
|
|
|
J'ai travaillé de manière autonome sur ces projets, tout
|
|
|
en recevant des retours réguliers de mon maître
|
|
|
d'alternance. J’ai également été amené à communiquer avec
|
|
|
une entreprise prestataire s’occupant de la visualisation
|
|
|
3D. J’ai ainsi pu mettre en pratique et améliorer mes
|
|
|
connaissances en communication. J'ai aussi eu l’occasion
|
|
|
de communiquer avec d'autres collègues spécialisés dans
|
|
|
des technologies spécifiques.
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<!-- Formation -->
|
|
|
<section id="formation" class="py-5 bg-light">
|
|
|
<div class="container">
|
|
|
<h2 id="tileFormation" class="text-center">Formation</h2>
|
|
|
<div class="container mt-5">
|
|
|
<div class="row justify-content-center align-items-center">
|
|
|
<div class="col-12 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-12 col-md-3">
|
|
|
<h3 id="butName" class="text-md-end">
|
|
|
BUT Production Informatique
|
|
|
</h3>
|
|
|
<p id="butInfo" class="text-md-end">
|
|
|
IUT de Clermont-Ferrand, 63<br />
|
|
|
<strong>Spécialité :</strong> Développement WEB
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<hr />
|
|
|
<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 id="bacName" class="text-md-end">Baccalauréat Général</h3>
|
|
|
<p id="bacInfo" 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 />
|
|
|
<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 id="brevetName" class="text-md-end">
|
|
|
Diplôme National du Brevet des collèges
|
|
|
</h3>
|
|
|
<p id="brevetInfo" 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 id="skill" class="text-center">Compétences</h2>
|
|
|
|
|
|
<!-- Developpement -->
|
|
|
<h3 id="dev" class="mt-4">Développement</h3>
|
|
|
<div class="row mt-4">
|
|
|
<div class="col-6 col-md-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-6 col-md-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-6 col-md-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-6 col-md-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-6 col-md-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-6 col-md-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-6 col-md-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-6 col-md-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-6 col-md-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-6 col-md-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-6 col-md-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-6 col-md-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 id="lang">Langues</h3>
|
|
|
<div class="d-flex justify-content-center mt-4">
|
|
|
<div class="col-4 col-md-2">
|
|
|
<div class="card border-secondary mb-3" style="max-width: 10rem">
|
|
|
<div class="card-body text-secondary">
|
|
|
<h5 id="french" class="card-title text-center">Français</h5>
|
|
|
<img
|
|
|
src="./assets/images/france.png"
|
|
|
class="card-img-bottom"
|
|
|
alt="Drapeau de la France"
|
|
|
/>
|
|
|
<p id="nativeLanguage" class="card-text text-center">
|
|
|
<strong>Langue maternelle</strong>
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-4 col-md-2">
|
|
|
<div class="card border-secondary mb-3" style="max-width: 10rem">
|
|
|
<div class="card-body text-secondary">
|
|
|
<h5 id="english" class="card-title text-center">Anglais</h5>
|
|
|
<img
|
|
|
src="./assets/images/unitedKingdom.png"
|
|
|
class="card-img-bottom"
|
|
|
alt="Drapeau du Royaume Uni"
|
|
|
/>
|
|
|
<p id="intermediateAdvanced" class="card-text text-center">
|
|
|
<strong>Intermédiaire avancé (B2)</strong>
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-4 col-md-2">
|
|
|
<div class="card border-secondary mb-3" style="max-width: 10rem">
|
|
|
<div class="card-body text-secondary">
|
|
|
<h5 id="spanish" class="card-title text-center">Espagnol</h5>
|
|
|
<img
|
|
|
src="./assets/images/espagne.png"
|
|
|
class="card-img-bottom"
|
|
|
alt="Drapeau de l'Espagne"
|
|
|
/>
|
|
|
<p id="intermediate" class="card-text text-center">
|
|
|
<strong>Intermédiaire (B1)</strong>
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Outils -->
|
|
|
|
|
|
<h3 id="tools">Outils</h3>
|
|
|
<div class="row mt-4">
|
|
|
<div class="col-6 col-md-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-6 col-md-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-6 col-md-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-6 col-md-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-6 col-md-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-6 col-md-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-6 col-md-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-6 col-md-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-6 col-md-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-6 col-md-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-6 col-md-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-6 col-md-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 id="contactSection">Contact</h2>
|
|
|
|
|
|
<div class="row gy-4 mt-5">
|
|
|
<div class="col-12 col-md-4">
|
|
|
<h3 id="infoSection">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-12 col-md-8">
|
|
|
<!-- Formulaire -->
|
|
|
<h3 id="form">Formulaire</h3>
|
|
|
<form id="contact-form" class="row mt-5">
|
|
|
<div class="col-6 my-2">
|
|
|
<label id="prenom" 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 id="nom" 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 id="mail" 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 id="tel" 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="Test"
|
|
|
></textarea>
|
|
|
<span id="message-error" class="text-danger"></span>
|
|
|
</div>
|
|
|
<span id="response" class="text-danger"></span>
|
|
|
<div class="col-12 my-2">
|
|
|
<button
|
|
|
id="send"
|
|
|
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 text-center text-md-start">
|
|
|
<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-center">
|
|
|
<ul class="list-unstyled mb-0">
|
|
|
<li>
|
|
|
<a
|
|
|
id="legal"
|
|
|
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 text-center">
|
|
|
<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 id="legalM" 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 id="edit" class="text-center">Édition du site</h2>
|
|
|
<p id="descEdit">
|
|
|
Le présent site, accessible à l’URL
|
|
|
<a
|
|
|
href="https://codefirst.iut.uca.fr/containers/hugopradier2-Portfolio_PRADIER/"
|
|
|
>https://codefirst.iut.uca.fr/containers/hugopradier2-Portfolio_PRADIER/</a
|
|
|
>, est édité par :
|
|
|
</p>
|
|
|
<p id="hugo">
|
|
|
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 id="hosting" class="text-center">Hébergement</h2>
|
|
|
<p id="hostingDesc">
|
|
|
Le Site est hébergé par la société GitHub, possédant son siège
|
|
|
social à San Francisco,
|
|
|
</p>
|
|
|
<h2 id="admin" class="text-center">Administrateur du site</h2>
|
|
|
<p id="adminDesc">L'administrateur du site est Hugo PRADIER.</p>
|
|
|
<h2 id="contactMe" class="text-center">Me contacter</h2>
|
|
|
<p id="phoneContact">Par téléphone : +33768361359</p>
|
|
|
<p id="emailContact">
|
|
|
Par email :
|
|
|
<a href="mailto:pradier.hugo36@gmail.com"
|
|
|
>pradier.hugo36@gmail.com</a
|
|
|
>
|
|
|
</p>
|
|
|
<p id="postalContact">
|
|
|
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>
|
|
|
<script src="./assets/js/translate.js"></script>
|
|
|
</body>
|
|
|
</html>
|
