|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
|
|
|
<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>Benjelloun Othmane - Portfolio</title>
|
|
|
<script type="text/javascript" src="https://cdn.emailjs.com/dist/email.min.js"></script>
|
|
|
<script type="text/javascript">
|
|
|
(function(){
|
|
|
emailjs.init("7BilGPRGiKeG3EoPa");
|
|
|
})();
|
|
|
</script>
|
|
|
<!--
|
|
|
- favicon
|
|
|
-->
|
|
|
<link rel="shortcut icon" href="./assets/images/logo.ico" type="image/x-icon">
|
|
|
|
|
|
<!--
|
|
|
- custom css link
|
|
|
-->
|
|
|
<link rel="stylesheet" href="./assets/css/style.css">
|
|
|
|
|
|
<!--
|
|
|
- google font link
|
|
|
-->
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<!--
|
|
|
- #MAIN
|
|
|
-->
|
|
|
|
|
|
<main>
|
|
|
|
|
|
<!--
|
|
|
- #SIDEBAR
|
|
|
-->
|
|
|
|
|
|
<aside class="sidebar" data-sidebar>
|
|
|
|
|
|
<div class="sidebar-info">
|
|
|
<div class="language-buttons">
|
|
|
<a href="index.html">
|
|
|
<button class="btn-lang fr">
|
|
|
<span>Fr</span>
|
|
|
</button>
|
|
|
</a>
|
|
|
<a href="indexEn.html" >
|
|
|
<button class="btn-lang en">
|
|
|
<span>En</span>
|
|
|
</button>
|
|
|
</a>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<figure class="avatar-box">
|
|
|
<img src="./assets/images/my-avatar.png" width="80">
|
|
|
</figure>
|
|
|
|
|
|
<div class="info-content">
|
|
|
<h1 class="name" title="Richard hanrick">Benjelloun Othmane</h1>
|
|
|
|
|
|
<p class="title">Etudiant en cybersécurité</p>
|
|
|
</div>
|
|
|
|
|
|
<button class="info_more-btn" data-sidebar-btn>
|
|
|
<span>Contact</span>
|
|
|
|
|
|
<ion-icon name="chevron-down"></ion-icon>
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="sidebar-info_more">
|
|
|
|
|
|
<div class="separator"></div>
|
|
|
|
|
|
<ul class="contacts-list">
|
|
|
|
|
|
<li class="contact-item">
|
|
|
|
|
|
<div class="icon-box">
|
|
|
<ion-icon name="mail-outline"></ion-icon>
|
|
|
</div>
|
|
|
|
|
|
<div class="contact-info">
|
|
|
<p class="contact-title">Email</p>
|
|
|
|
|
|
<a href="mailto:othmanebenj01@gmail.com" class="contact-link">othmanebenj01@gmail.com</a>
|
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="contact-item">
|
|
|
|
|
|
<div class="icon-box">
|
|
|
<ion-icon name="phone-portrait-outline"></ion-icon>
|
|
|
</div>
|
|
|
|
|
|
<div class="contact-info">
|
|
|
<p class="contact-title">Télephone</p>
|
|
|
|
|
|
<a href="tel:+12133522795" class="contact-link">+33 6 03 95 51 30</a>
|
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="contact-item">
|
|
|
|
|
|
<div class="icon-box">
|
|
|
<ion-icon name="calendar-outline"></ion-icon>
|
|
|
</div>
|
|
|
|
|
|
<div class="contact-info">
|
|
|
<p class="contact-title">Date de naissance</p>
|
|
|
|
|
|
<time datetime="1982-06-23">17 Dec 2003</time>
|
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="contact-item">
|
|
|
|
|
|
<div class="icon-box">
|
|
|
<ion-icon name="location-outline"></ion-icon>
|
|
|
</div>
|
|
|
|
|
|
<div class="contact-info">
|
|
|
<p class="contact-title">Emplacement</p>
|
|
|
|
|
|
<address>Suresnes, Paris, France</address>
|
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<div class="separator"></div>
|
|
|
|
|
|
<ul class="social-list">
|
|
|
|
|
|
<li class="social-item">
|
|
|
<a href="https://fr.linkedin.com/in/othmane-benjelloun-651920255" class="social-link">
|
|
|
<ion-icon name="logo-linkedin"></ion-icon>
|
|
|
</a>
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</aside>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
- #main-content
|
|
|
-->
|
|
|
|
|
|
<div class="main-content">
|
|
|
|
|
|
<!--
|
|
|
- #NAVBAR
|
|
|
-->
|
|
|
|
|
|
<nav class="navbar">
|
|
|
<ul class="navbar-list">
|
|
|
<li class="navbar-item">
|
|
|
<button class="navbar-link active" data-nav-link="about">À propos</button>
|
|
|
</li>
|
|
|
<li class="navbar-item">
|
|
|
<button class="navbar-link" data-nav-link="resume">Parcours</button>
|
|
|
</li>
|
|
|
<li class="navbar-item">
|
|
|
<button class="navbar-link" data-nav-link="portfolio">Portfolio</button>
|
|
|
</li>
|
|
|
<li class="navbar-item">
|
|
|
<a class="navbar-link" href="CV_BENJELLOUN_OTHMANE_EPITA_ALTERANCE.pdf" download="CV_BENJELLOUN_OTHMANE_EPITA_ALTERANCE.pdf">CV</a>
|
|
|
</li>
|
|
|
<li class="navbar-item">
|
|
|
<button class="navbar-link" data-nav-link="contact">Contact</button>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
- #ABOUT
|
|
|
-->
|
|
|
|
|
|
<article class="about active" data-page="about">
|
|
|
|
|
|
<header>
|
|
|
<h2 class="h2 article-title">À propos de moi</h2>
|
|
|
</header>
|
|
|
|
|
|
<section class="about-text">
|
|
|
<p>
|
|
|
Étudiant à l’<strong>EPITA</strong> en Cycle Ingénieur en apprentissage - 1ère année pour la rentrée 2024, je suis passionné par le <strong>développement</strong> et la <strong>cybersécurité</strong>.
|
|
|
J'adore explorer de nouvelles technologies et relever des défis complexes. Mon objectif est de créer des solutions innovantes tout en assurant la sécurité et la robustesse des systèmes.
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
Motivé et curieux, je suis toujours à la recherche de nouvelles opportunités pour améliorer mes compétences et contribuer à des projets ambitieux.
|
|
|
</p>
|
|
|
</section>
|
|
|
|
|
|
|
|
|
<!--
|
|
|
- service
|
|
|
-->
|
|
|
|
|
|
<section class="service">
|
|
|
|
|
|
<h3 class="h3 service-title">Compétences</h3>
|
|
|
|
|
|
<ul class="service-list">
|
|
|
|
|
|
<li class="service-item">
|
|
|
|
|
|
<div class="service-icon-box">
|
|
|
<img src="./assets/images/icon-design.svg
|
|
|
" alt="design icon" width="40">
|
|
|
</div>
|
|
|
|
|
|
<div class="service-content-box">
|
|
|
<h4 class="h4 service-item-title">Web design</h4>
|
|
|
|
|
|
<p class="service-item-text">
|
|
|
Amoureux du design, je crois en la puissance des sites web <strong>esthétiquement plaisants</strong>. Chaque <strong>ligne de code</strong> et chaque <strong>élément visuel</strong> sont soigneusement pensés pour offrir une <strong>expérience utilisateur exceptionnelle</strong> </p>
|
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="service-item">
|
|
|
|
|
|
<div class="service-icon-box">
|
|
|
<img src="./assets/images/icon-dev.svg" alt="Web development icon" width="40">
|
|
|
</div>
|
|
|
|
|
|
<div class="service-content-box">
|
|
|
<h4 class="h4 service-item-title">Développement web</h4>
|
|
|
|
|
|
<p class="service-item-text">
|
|
|
je développe des sites web avec une maîtrise de <strong>HTML</strong>, <strong>CSS</strong>, <strong>JavaScript</strong>, <strong>PHP</strong>, ainsi que des frameworks tels que <strong>Symfony</strong> et <strong>Flutter</strong>. J'ai également une solide expérience dans la gestion de bases de données avec <strong>SQL</strong> et <strong>PLPGSQL</strong>.
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="service-item">
|
|
|
|
|
|
<div class="service-icon-box">
|
|
|
<img src="./assets/images/reseau.png" alt="mobile app icon" width="40">
|
|
|
</div>
|
|
|
|
|
|
<div class="service-content-box">
|
|
|
<h4 class="h4 service-item-title">Réseaux</h4>
|
|
|
|
|
|
<p class="service-item-text">
|
|
|
Je suis compétent dans l'utilisation de technologies réseau telles que <strong>DNS</strong>, <strong>SSH</strong>, <strong>FTP</strong>, <strong>DHCP</strong>, les <strong>Firewalls</strong>, ainsi que les protocoles de réseaux. De plus, je suis familiarisé avec l'utilisation de <strong>Bash</strong> pour l'automatisation des tâches et la gestion des systèmes.
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="service-item">
|
|
|
|
|
|
<div class="service-icon-box">
|
|
|
<img src="./assets/images/gestion-de-projet.png" alt="camera icon" width="40">
|
|
|
</div>
|
|
|
|
|
|
<div class="service-content-box">
|
|
|
<h4 class="h4 service-item-title">Gestion de projet</h4>
|
|
|
|
|
|
<p class="service-item-text">
|
|
|
Expérience en gestion de projet <strong>agile</strong> avec <strong>Scrum</strong> et autres méthodes <strong>agiles</strong>, acquise lors des projets universitaires et des stages. Planification efficace, coordination d'équipe pour des livraisons collaboratives. </div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
<!--
|
|
|
- testimonials
|
|
|
-->
|
|
|
|
|
|
<section class="testimonials">
|
|
|
|
|
|
<h3 class="h3 testimonials-title">Centres D'intérêt</h3>
|
|
|
|
|
|
<ul class="testimonials-list has-scrollbar">
|
|
|
|
|
|
|
|
|
<li class="testimonials-item">
|
|
|
<div class="content-card" data-testimonials-item>
|
|
|
|
|
|
<figure class="testimonials-avatar-box">
|
|
|
<img src="./assets/images/hobby4.png" width="60" data-testimonials-avatar>
|
|
|
</figure>
|
|
|
|
|
|
<h4 class="h4 testimonials-item-title" data-testimonials-title>Sport en salle</h4>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
</li>
|
|
|
<li class="testimonials-item">
|
|
|
<div class="content-card" data-testimonials-item>
|
|
|
|
|
|
<figure class="testimonials-avatar-box">
|
|
|
<img src="./assets/images/hobby1.png" width="60" data-testimonials-avatar>
|
|
|
</figure>
|
|
|
|
|
|
<h4 class="h4 testimonials-item-title" data-testimonials-title>E-commerce</h4>
|
|
|
|
|
|
|
|
|
</div>
|
|
|
</li>
|
|
|
|
|
|
<li class="testimonials-item">
|
|
|
<div class="content-card" data-testimonials-item>
|
|
|
|
|
|
<figure class="testimonials-avatar-box">
|
|
|
<img src="./assets/images/hobby2.png" width="60" data-testimonials-avatar>
|
|
|
</figure>
|
|
|
|
|
|
<h4 class="h4 testimonials-item-title" data-testimonials-title>Voyage</h4>
|
|
|
|
|
|
|
|
|
</div>
|
|
|
</li>
|
|
|
|
|
|
<li class="testimonials-item">
|
|
|
<div class="content-card" data-testimonials-item>
|
|
|
|
|
|
<figure class="testimonials-avatar-box">
|
|
|
<img src="./assets/images/hobby3.png" width="60" data-testimonials-avatar>
|
|
|
</figure>
|
|
|
|
|
|
<h4 class="h4 testimonials-item-title" data-testimonials-title>Karaté</h4>
|
|
|
|
|
|
</div>
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
<!--
|
|
|
- testimonials modal
|
|
|
-->
|
|
|
|
|
|
<div class="modal-container" data-modal-container>
|
|
|
|
|
|
<div class="overlay" data-overlay></div>
|
|
|
|
|
|
<section class="testimonials-modal">
|
|
|
|
|
|
<button class="modal-close-btn" data-modal-close-btn>
|
|
|
<ion-icon name="close-outline"></ion-icon>
|
|
|
</button>
|
|
|
|
|
|
<div class="modal-img-wrapper">
|
|
|
<figure class="modal-avatar-box">
|
|
|
<img src="./assets/images/avatar-1.png" width="80" data-modal-img>
|
|
|
</figure>
|
|
|
|
|
|
<img src="./assets/images/icon-quote.svg" alt="quote icon">
|
|
|
</div>
|
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
|
<h4 class="h3 modal-title" data-modal-title>Daniel lewis</h4>
|
|
|
|
|
|
<time datetime="2021-06-14">14 June, 2021</time>
|
|
|
|
|
|
<div data-modal-text>
|
|
|
<p>
|
|
|
Richard was hired to create a corporate identity. We were very pleased with the work done. She has a
|
|
|
lot of experience
|
|
|
and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt
|
|
|
consectetur adipiscing
|
|
|
elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
- #RESUME
|
|
|
-->
|
|
|
|
|
|
<article class="resume" data-page="resume">
|
|
|
|
|
|
<header>
|
|
|
<h2 class="h2 article-title">Parcours</h2>
|
|
|
</header>
|
|
|
|
|
|
<section class="timeline">
|
|
|
|
|
|
<div class="title-wrapper">
|
|
|
<div class="icon-box">
|
|
|
<ion-icon name="book-outline"></ion-icon>
|
|
|
</div>
|
|
|
|
|
|
<h3 class="h3">Formations</h3>
|
|
|
</div>
|
|
|
|
|
|
<ol class="timeline-list">
|
|
|
|
|
|
<li class="timeline-item">
|
|
|
|
|
|
<h4 class="h4 timeline-item-title">Cycle Ingénieur en apprentissage - Cybersécurité</h4>
|
|
|
|
|
|
<span><strong>Epita</strong> - 1ière année pour la rentrée 2024</span>
|
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="timeline-item">
|
|
|
|
|
|
<h4 class="h4 timeline-item-title">BUT informatique réalisation d’applications</h4>
|
|
|
|
|
|
<span><strong>Université Clermont Auvergne</strong> - 2021-2024</span>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="timeline-item">
|
|
|
|
|
|
<h4 class="h4 timeline-item-title">Bac S avec mention assez bien</h4>
|
|
|
|
|
|
<span><strong>Leon l’Africain (AEFE)</strong> - 2021</span>
|
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ol>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
<section class="timeline">
|
|
|
|
|
|
<div class="title-wrapper">
|
|
|
<div class="icon-box">
|
|
|
<ion-icon name="business-outline"></ion-icon>
|
|
|
</div>
|
|
|
|
|
|
<h3 class="h3">Experience</h3>
|
|
|
</div>
|
|
|
|
|
|
<ol class="timeline-list">
|
|
|
|
|
|
<li class="timeline-item">
|
|
|
|
|
|
<h4 class="h4 timeline-item-title">Stage développeur</h4>
|
|
|
|
|
|
<span> <strong>SAPE</strong> - Du 11/03/2024 au 16/08/2024</span>
|
|
|
|
|
|
<p class="timeline-text">
|
|
|
<ul >
|
|
|
<li class="tache">Analyse et mise en place d’API de connexion auprès d'organismes étatiques (URSSAF, DGFIP, Net Entreprise...)</li>
|
|
|
<li class="tache">Interface d'adaptation entre l'ancien logiciel Exaucett et la nouvelle version</li>
|
|
|
<li class="tache">Analyse du cahier des charges</li>
|
|
|
</ul>
|
|
|
</p>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="timeline-item">
|
|
|
|
|
|
<h4 class="h4 timeline-item-title">Développement d’un site et application
|
|
|
mobile de Fitness</h4>
|
|
|
|
|
|
<span> <strong>Projet à l’université</strong> - Du 20/09/2023 au 22/12/2023</span>
|
|
|
|
|
|
<p class="timeline-text">
|
|
|
<ul >
|
|
|
<li class="tache">Conception de maquettes</li>
|
|
|
<li class="tache">Intégration des maquettes à l'aide de Flutter</li>
|
|
|
<li class="tache">Gestion de la base de données avec MySql</li>
|
|
|
<li class="tache">Connexion du back-end au front-end en dart</li>
|
|
|
</ul>
|
|
|
</p>
|
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="timeline-item">
|
|
|
|
|
|
<h4 class="h4 timeline-item-title">Stage réseau</h4>
|
|
|
|
|
|
<span> <strong>LAPEYRE SERVICES</strong> - Du 13/04/2023 au 21/06/2023</span>
|
|
|
|
|
|
<p class="timeline-text">
|
|
|
<ul >
|
|
|
<li class="tache">Étude des différents sites de l'entreprise pour évaluer leurs
|
|
|
spécificités et leurs besoins en équipements.</li>
|
|
|
<li class="tache">Renforcement de l'infrastructure réseau de Lapeyre Services dans le cadre de sa modernisation des outils digitaux :
|
|
|
<ul>
|
|
|
<li >Configuration de Firewalls Sophos.</li>
|
|
|
<li>Configuration de routeurs TP-Link.</li>
|
|
|
</ul>
|
|
|
</li>
|
|
|
<li class="tache">Automatisation des tâches de configuration des firewalls
|
|
|
grâce à un script pour une gestion simplifiée et une
|
|
|
sécurité renforcée.</li>
|
|
|
<li class="tache">Installation et configuration des équipements réseau pour
|
|
|
améliorer la connectivité et la sécurité.</li>
|
|
|
<li class="tache">Gestion logistique pour assurer les approvisionnements, les
|
|
|
livraisons et l'organisation du matériel sur site.</li>
|
|
|
</ul>
|
|
|
</p>
|
|
|
|
|
|
|
|
|
</li>
|
|
|
</ol>
|
|
|
|
|
|
</section>
|
|
|
<section class="timeline">
|
|
|
|
|
|
<div class="title-wrapper">
|
|
|
<div class="icon-box">
|
|
|
<ion-icon name="accessibility-outline"></ion-icon>
|
|
|
</div>
|
|
|
|
|
|
<h3 class="h3">Expériences associatives</h3>
|
|
|
</div>
|
|
|
|
|
|
<ol class="timeline-list">
|
|
|
|
|
|
<li class="timeline-item">
|
|
|
|
|
|
<h4 class="h4 timeline-item-title">Membre de l'association Bab Rayan</h4>
|
|
|
|
|
|
<span> <strong>Bab Rayan Maroc</strong> - Du 13/04/2019 au 21/06/2020</span>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
- #PORTFOLIO
|
|
|
-->
|
|
|
|
|
|
<article class="portfolio" data-page="portfolio">
|
|
|
|
|
|
<header>
|
|
|
<h2 class="h2 article-title">Portfolio</h2>
|
|
|
</header>
|
|
|
|
|
|
<section class="projects">
|
|
|
|
|
|
<ul class="filter-list">
|
|
|
|
|
|
<li class="filter-item">
|
|
|
<button class="active" data-filter-btn>Tout</button>
|
|
|
</li>
|
|
|
</ul>
|
|
|
|
|
|
<div class="filter-select-box">
|
|
|
|
|
|
<button class="filter-select" data-select>
|
|
|
|
|
|
<div class="select-value" data-selecct-value>Select category</div>
|
|
|
|
|
|
<div class="select-icon">
|
|
|
<ion-icon name="chevron-down"></ion-icon>
|
|
|
</div>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<ul class="select-list">
|
|
|
|
|
|
<li class="select-item">
|
|
|
<button data-select-item>Tout</button>
|
|
|
</li>
|
|
|
|
|
|
<li class="select-item">
|
|
|
<button data-select-item>Web design</button>
|
|
|
</li>
|
|
|
|
|
|
<li class="select-item">
|
|
|
<button data-select-item>Applications</button>
|
|
|
</li>
|
|
|
|
|
|
<li class="select-item">
|
|
|
<button data-select-item>Web development</button>
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<ul class="project-list">
|
|
|
|
|
|
<li class="project-item active" data-filter-item data-category="web development">
|
|
|
<a href="https://nailsizy.com/">
|
|
|
|
|
|
<figure class="project-img">
|
|
|
<div class="project-item-icon-box">
|
|
|
<ion-icon name="eye-outline"></ion-icon>
|
|
|
</div>
|
|
|
|
|
|
<img src="./assets/images/projectt1.png" alt="finance" loading="lazy">
|
|
|
</figure>
|
|
|
|
|
|
<h3 class="project-title">Nailsizy - Site E-commerce</h3>
|
|
|
|
|
|
<p class="project-category">Développement Web</p>
|
|
|
|
|
|
</a>
|
|
|
</li>
|
|
|
<li class="project-item active" data-filter-item data-category="web design">
|
|
|
<a href="https://www.canva.com/design/DAF3UQDm0XM/BgAH2PNr5Xr4tTFPpCcpCg/edit?utm_content=DAF3UQDm0XM&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton">
|
|
|
|
|
|
<figure class="project-img">
|
|
|
<div class="project-item-icon-box">
|
|
|
<ion-icon name="eye-outline"></ion-icon>
|
|
|
</div>
|
|
|
|
|
|
<img src="./assets/images/project6.PNG" loading="lazy">
|
|
|
</figure>
|
|
|
|
|
|
<h3 class="project-title">SmartFit</h3>
|
|
|
|
|
|
<p class="project-category">Développement Web/Mobile</p>
|
|
|
|
|
|
</a>
|
|
|
</li>
|
|
|
|
|
|
|
|
|
<li class="project-item active" data-filter-item data-category="web design">
|
|
|
<a href="https://www.canva.com/design/DAGHqaZSDj8/7anfQiIBc2KU7BxLHR0Cvg/edit?utm_content=DAGHqaZSDj8&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton">
|
|
|
|
|
|
<figure class="project-img">
|
|
|
<div class="project-item-icon-box">
|
|
|
<ion-icon name="eye-outline"></ion-icon>
|
|
|
</div>
|
|
|
|
|
|
<img src="./assets/images/project3.png" loading="lazy">
|
|
|
</figure>
|
|
|
|
|
|
<h3 class="project-title">Projet IA</h3>
|
|
|
|
|
|
<p class="project-category">Intelligence Artificielle</p>
|
|
|
|
|
|
</a>
|
|
|
</li>
|
|
|
|
|
|
<li class="project-item active" data-filter-item data-category="applications">
|
|
|
<a href="https://www.canva.com/design/DAGHqoSGD0Q/-wJCJX65fT6PdvUgxc5BcA/edit?utm_content=DAGHqoSGD0Q&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton">
|
|
|
|
|
|
<figure class="project-img">
|
|
|
<div class="project-item-icon-box">
|
|
|
<ion-icon name="eye-outline"></ion-icon>
|
|
|
</div>
|
|
|
|
|
|
<img src="./assets/images/project4.png" loading="lazy">
|
|
|
</figure>
|
|
|
|
|
|
<h3 class="project-title">KeepSafe</h3>
|
|
|
|
|
|
<p class="project-category">Développement Web</p>
|
|
|
|
|
|
</a>
|
|
|
</li>
|
|
|
|
|
|
<li class="project-item active" data-filter-item data-category="web design">
|
|
|
<a href="https://www.canva.com/design/DAGHqmO_3sk/2ELdKRYwbIum4jR0eiN24g/edit?utm_content=DAGHqmO_3sk&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton">
|
|
|
|
|
|
<figure class="project-img">
|
|
|
<div class="project-item-icon-box">
|
|
|
<ion-icon name="eye-outline"></ion-icon>
|
|
|
</div>
|
|
|
|
|
|
<img src="./assets/images/project5.PNG" loading="lazy">
|
|
|
</figure>
|
|
|
|
|
|
<h3 class="project-title">PokéBlazor</h3>
|
|
|
|
|
|
<p class="project-category">Développement web</p>
|
|
|
|
|
|
</a>
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="project-item active" data-filter-item data-category="web development">
|
|
|
<a href="https://www.canva.com/design/DAGHqYlymLE/h0RAuPKeyuV2SDGdRZ2bPA/edit?utm_content=DAGHqYlymLE&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton">
|
|
|
|
|
|
<figure class="project-img">
|
|
|
<div class="project-item-icon-box">
|
|
|
<ion-icon name="eye-outline"></ion-icon>
|
|
|
</div>
|
|
|
|
|
|
<img src="./assets/images/projeect2.png" loading="lazy">
|
|
|
</figure>
|
|
|
|
|
|
<h3 class="project-title">24h pour entreprendre</h3>
|
|
|
|
|
|
<p class="project-category">Entreprenariat</p>
|
|
|
|
|
|
</a>
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
</article>
|
|
|
|
|
|
<!--
|
|
|
- #CONTACT
|
|
|
-->
|
|
|
|
|
|
<article class="contact" data-page="contact">
|
|
|
|
|
|
<header>
|
|
|
<h2 class="h2 article-title">Contact</h2>
|
|
|
</header>
|
|
|
|
|
|
<section class="mapbox" data-mapbox>
|
|
|
<figure>
|
|
|
<iframe
|
|
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d41945.5255947859!2d2.2526705697080715!3d48.85661405159127!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2baf9%3A0x29d95ef3dfef5241!2sParis%2C%20France!5e0!3m2!1sen!2sus!4v1647608789441!5m2!1sen!2sus"
|
|
|
width="400" height="300" loading="lazy"></iframe>
|
|
|
</figure>
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<section class="contact-form">
|
|
|
<h3 class="h3 form-title">Formulaire</h3>
|
|
|
<form id="contact-form" class="form">
|
|
|
<div class="input-wrapper">
|
|
|
<input type="text" name="fullname" class="form-input" placeholder="Nom" required>
|
|
|
<input type="email" name="email" class="form-input" placeholder="Adresse mail" required>
|
|
|
</div>
|
|
|
<textarea name="message" class="form-input" placeholder="Votre message" required></textarea>
|
|
|
<button class="form-btn" type="submit">
|
|
|
<ion-icon name="paper-plane"></ion-icon>
|
|
|
<span>Envoyer</span>
|
|
|
</button>
|
|
|
</form>
|
|
|
<p id="status"></p>
|
|
|
</section>
|
|
|
|
|
|
</article>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</main>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
- custom js link
|
|
|
-->
|
|
|
<script src="./assets/js/script.js"></script>
|
|
|
|
|
|
<!--
|
|
|
- ionicon link
|
|
|
-->
|
|
|
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
|
|
|
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
|
|
|
<script type="text/javascript">
|
|
|
document.getElementById('contact-form').addEventListener('submit', function(event) {
|
|
|
event.preventDefault();
|
|
|
|
|
|
var fullname = document.querySelector('input[name="fullname"]').value;
|
|
|
var email = document.querySelector('input[name="email"]').value;
|
|
|
var message = document.querySelector('textarea[name="message"]').value;
|
|
|
|
|
|
var templateParams = {
|
|
|
fullname: fullname,
|
|
|
email: email,
|
|
|
message: message
|
|
|
};
|
|
|
|
|
|
emailjs.send('service_miwbldn', 'template_vi7w5fd', templateParams)
|
|
|
.then(function(response) {
|
|
|
console.log('SUCCESS!', response.status, response.text);
|
|
|
document.getElementById('status').innerText = 'Message envoyé avec succès!';
|
|
|
document.getElementById('status').style.color = 'green';
|
|
|
|
|
|
|
|
|
document.querySelector('input[name="fullname"]').value = '';
|
|
|
document.querySelector('input[name="email"]').value = '';
|
|
|
document.querySelector('textarea[name="message"]').value = '';
|
|
|
}, function(error) {
|
|
|
console.log('FAILED...', error);
|
|
|
document.getElementById('status').innerText = 'Erreur lors de l\'envoi du message.';
|
|
|
document.getElementById('status').style.color = 'red';
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html> |
