othmane.benjelloun
/
Othmane-Benjelloun
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

english version
continuous-integration/drone/push Build is passing Details

Browse Source
master
otbenjello 5 months ago
parent 4e50e74020
commit d3c4719fad
5 changed files with 895 additions and 2 deletions
Show Stats Download Patch File Download Diff File

BIN
CV_BENJELLOUN_OTHMANE_EPITA_ALTERANCE.pdf
View File

Binary file not shown.

47
assets/css/style.css
Unescape View File

@ -332,9 +332,15 @@ main {
gap: 15px;
}
.avatar-box {
display: flex;
background: none;
border-radius: 20px;
justify-content: center;
align-items: center;
padding-top: 60px;
}
.info-content .name {
@ -1842,7 +1848,6 @@ textarea.form-input::-webkit-resizer { display: none; }
max-height: max-content;
height: 100%;
margin-bottom: 0;
padding-top: 60px;
z-index: 1;
}
@ -1909,4 +1914,42 @@ textarea.form-input::-webkit-resizer { display: none; }
margin-left: 20px;
margin-top: 10px;
}
}
.language-buttons {
display: flex;
gap: 10px;
margin-top: 15px;
color: rgb(231, 231, 231);
}
.btn-lang {
border: 1px solid #ffffff;
border-radius: 5px;
padding: 10px 15px;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'Poppins', sans-serif;
font-weight: 500;
color: #dfdfdf;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
}
.btn-lang:hover {
color: #fff;
}
.btn-lang.fr span::before {
content: "🇫🇷";
margin-right: 5px;
}
.btn-lang.en span::before {
content: "🇬🇧";
margin-right: 5px;
}

4
assets/js/script.js
Unescape View File

@ -158,4 +158,8 @@ for (let i = 0; i < navigationLinks.length; i++) {
}
});
}
if (!window.location.href.endsWith('/')) {
window.location.href = window.location.href + '/';
}

17
index.html
Unescape View File

@ -45,6 +45,20 @@
<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">
@ -171,6 +185,9 @@
<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>

829
indexEn.html
Unescape View File

@ -0,0 +1,829 @@
<!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="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">Student in cybersecurity</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">Phone</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 of Birth</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">Location</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">About</button>
</li>
<li class="navbar-item">
<button class="navbar-link" data-nav-link="resume">Career</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">Resume</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">About Me</h2>
</header>
<section class="about-text">
<p>
Student at <strong>EPITA</strong> in Engineering Cycle - 1st year for the 2024 intake, I am passionate about <strong>development</strong> and <strong>cybersecurity</strong>.
I love exploring new technologies and tackling complex challenges. My goal is to create innovative solutions while ensuring system security and robustness.
</p>
<p>
Motivated and curious, I am always looking for new opportunities to improve my skills and contribute to ambitious projects.
</p>
</section>
<!--
- service
-->
<section class="service">
<h3 class="h3 service-title">Skills</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">
Lover of design, I believe in the power of <strong>visually appealing</strong> websites. Every <strong>line of code</strong> and every <strong>visual element</strong> are carefully crafted to provide an <strong>exceptional user experience</strong>. </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">Web Development</h4>
<p class="service-item-text">
I develop websites with proficiency in <strong>HTML</strong>, <strong>CSS</strong>, <strong>JavaScript</strong>, <strong>PHP</strong>, as well as frameworks like <strong>Symfony</strong> and <strong>Flutter</strong>. I also have solid experience in database management with <strong>SQL</strong> and <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">Networks</h4>
<p class="service-item-text">
I am proficient in using network technologies such as <strong>DNS</strong>, <strong>SSH</strong>, <strong>FTP</strong>, <strong>DHCP</strong>, <strong>Firewalls</strong>, as well as network protocols. Additionally, I am familiar with using <strong>Bash</strong> for task automation and system management. </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">Project Management</h4>
<p class="service-item-text">
Experience in agile project management with <strong>Scrum</strong> and other <strong>agile</strong> methods, acquired during university projects and internships. Effective planning, team coordination for collaborative deliveries.
</li>
</ul>
</section>
<!--
- testimonials
-->
<section class="testimonials">
<h3 class="h3 testimonials-title">Interests</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>Gym</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>Travel</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">Career</h2>
</header>
<section class="timeline">
<div class="title-wrapper">
<div class="icon-box">
<ion-icon name="book-outline"></ion-icon>
</div>
<h3 class="h3">Education</h3>
</div>
<ol class="timeline-list">
<li class="timeline-item">
<h4 class="h4 timeline-item-title"> Engineer in learning - Cybersecurity </h4>
<span><strong>Epita</strong> - 1st year for September 2024</span>
</li>
<li class="timeline-item">
<h4 class="h4 timeline-item-title">Bachelor in Computer Science </h4>
<span><strong>Université Clermont Auvergne</strong> - 2021-2024</span>
</li>
<li class="timeline-item">
<h4 class="h4 timeline-item-title"> Bac S with mention quite well </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">Developer Intern</h4>
<span> <strong>SAPE</strong> - 03/11/2024 - 08/16/2024</span>
<p class="timeline-text">
<ul >
<li class="tache">Analysis and implementation of connection APIs with state agencies (URSSAF, DGFIP, Net...) </li>
<li class="tache">Adaptation interface between the old Exaucett software and the new version</li>
<li class="tache">analysis of the specifications</li>
</ul>
</p>
</li>
<li class="timeline-item">
<h4 class="h4 timeline-item-title">Development of a site and application. mobile Fitness</h4>
<span> <strong>Project at the University</strong> - 09/20/2023 au 12/22/2023</span>
<p class="timeline-text">
<ul >
<li class="tache">Conception of mock-ups</li>
<li class="tache">Integrating mock-ups using Flutter</li>
<li class="tache">Managing the database with MySql</li>
<li class="tache">Connecting the back-end to the front-end in dart</li>
</ul>
</p>
</li>
<li class="timeline-item">
<h4 class="h4 timeline-item-title">Internship Network </h4>
<span> <strong>LAPEYRE SERVICES</strong> - 13/04/2023 - 21/06/2023</span>
<p class="timeline-text">
<ul >
<li class="tache">Study of the different sites of the company to assess their. specificities and their needs in equipements</li>
<li class="tache">Reinforcement of the network infrastructure of Lapeyre Services as part of its modernization.
<ul>
<li >Configuring Firewalls Sophos.</li>
<li>Configuration of TP-Link routers.</li>
</ul>
</li>
<li class="tache">Automation of firewalls configuration tasks. thanks to a script for management</li>
<li class="tache">Installation and configuration of network equipment to. improve connectivity and security</li>
<li class="tache">Logistics management to ensure supplies, . deliveries and organization of the material on 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"> Associative experiences.</h3>
</div>
<ol class="timeline-list">
<li class="timeline-item">
<h4 class="h4 timeline-item-title">Member of the association Bab Rayan</h4>
<span> <strong>Bab Rayan Morocco</strong> - 04/13/2019 - 06/21/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>All</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>All</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 - E-commerce website</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">Web/Mobile Developement </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">IA project</h3>
<p class="project-category"> Artificial Intelligence</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">Web Developement </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">Web Developement</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 to undertake</h3>
<p class="project-category">entrepreneurship</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="Name" required>
<input type="email" name="email" class="form-input" placeholder="Mail" required>
</div>
<textarea name="message" class="form-input" placeholder="Your message" required></textarea>
<button class="form-btn" type="submit">
<ion-icon name="paper-plane"></ion-icon>
<span>Send</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>
Write Preview
Loading…
Cancel
Save