Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="icon" type="image/x-icon" href="/images/back.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Portfolio">
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css" rel="stylesheet" />
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<title>Portfolio</title>
</head>
<body>
<div id="loading-screen">
<div class="spinner"></div>
</div>
<nav>
<div class="nav-content">
<div class="logo"><a href="#" onclick="showSection('home')">Portfolio</a></div>
<label for="check" class="checkbox">
<i class="ri-menu-line"></i>
</label>
<input type="checkbox" name="check" id="check" />
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<section id="home" class="section">
<div class="section-container">
<div class="content">
<p class="subtitle">Hoi</p>
<h1 class="title">
Ik ben <span>Othmane Aissaoui<br /></span> Software Developer
</h1>
<p class="description">Welkom bij mijn Portfolio!</p>
<div class="action-btns">
<a href="cv1.pdf" class="btn" target="blank"> MIJN CV </a>
<a href="#projects" onclick="showSection('projects')" class="btnn"> Projecten </a>
</div>
<div class="social-media">
<a href="https://telegram.org/" target="_blank"><i class="bx bxl-telegram"></i></a>
<a href="https://instagram.com/oth_ai_?igshid=NzZlODBkYWE4Ng==" aria-label="Instagram" target="_blank"><i class="bx bxl-instagram"></i></a>
<a href="https://www.linkedin.com/in/othmane-aissaoui-0a0640245/" aria-label="LinkedIn" target="_blank"><i class="bx bxl-linkedin"></i></a>
<a href="https://twitter.com/jouw_gebruikersnaam" aria-label="Twitter" target="_blank"><i class="bx bxl-twitter"></i></a>
</div>
</div>
<div class="image">
<img src="./images/oaa.png" alt="">
</div>
</div>
</section>
<section id="about" class="section" style="display:none;">
<div class="about-container">
<div class="content1">
<p class="subtitle1">Wie ben ik?</p>
<div class="pre">
<p><strong>Opleiding:</strong> Softwaredeveloper | ROC Midden Nederland</p>
<hr>
<p><strong>Studiejaar:</strong> 2023</p>
<hr>
<p><strong>Leeftijd:</strong> 22 Jaar</p>
<hr>
</div>
<p class="description1">
Ik ben Othmane Aissaoui, 22 jaar oud, en ik woon in Utrecht. Ik ben
een student die het verlangen heeft om te studeren en nieuwe
vaardigheden te leren die me helpen mezelf te ontwikkelen en nieuwe
ervaringen op te doen die me in de toekomst zullen helpen om mezelf
ten goede te ontwikkelen. Mijn hobby's zijn voetbalspellen en af en
toe fitnessen.
</p>
</div>
<div class="image1">
<img src="./images/profile.png" alt="">
</div>
</div>
</section>
<section id="projects" class="section" style="display:none;">
<div class="projects-container">
<div class="portfolio-content">
<div class="row">
<img src="./images/technowire.png" alt="">
<div class="layer">
<h5>Technowire</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae, eaque illum sed vero sequi
illo nesciunt, beatae repudiandae</p>
<a href="./technowire/techno.html" target="_blank"><i class="bx bx-link-external"></i></a>
</div>
</div>
<div class="row">
<img src="./images/gamecraft.png" alt="">
<div class="layer">
<h5>GameCraft </h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae, eaque illum sed vero sequi
illo nesciunt, beatae repudiandae</p>
<a href="./l2-pro-3-gamecraft-webdevelopers/gchome.html" target="_blank"><i class="bx bx-link-external"></i></a>
</div>
</div>
<div class="row">
<img src="./images/tic.png" alt="">
<div class="layer">
<h5>Tic Toc Toe </h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae, eaque illum sed vero sequi
illo nesciunt, beatae repudiandae </p>
<a href="./game/game.html" target="_blank"><i class="bx bx-link-external"></i></a>
</div>
</div>
<div class="row">
<img src="./yard.nl/Yard_logo.png" alt="">
<div class="layer">
<h5> Yard </h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae, eaque illum sed vero sequi
illo nesciunt, beatae repudiandae </p>
<a href="./yard.nl/yard.html" target="_blank"><i class="bx bx-link-external"></i></a>
</div>
</div>
<div class="row">
<img src="./images/gastenboek.png" alt="">
<div class="layer">
<h5>Gastenboek </h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae, eaque illum sed vero sequi
illo nesciunt, beatae repudiandae</p>
<a href="./l3-gastenboek-Othmaneaissaoui/index.php" target="_blank"><i class="bx bx-link-external"></i></a>
</div>
</div>
<div class="row">
<img src="./images/ergowijzer.png" alt="">
<div class="layer">
<h5>Ergowijzer</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae, eaque illum sed vero sequi
illo nesciunt, beatae repudiandae</p>
<a href="./l3-pro-3-ergowijzer-logiccoders/php/" target="_blank"><i class="bx bx-link-external"></i></a>
</div>
</div>
<div class="row">
<img src="./images/fooddelivery.png" alt="">
<div class="layer">
<h5>Fooddelivery</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae, eaque illum sed vero sequi
illo nesciunt, beatae repudiandae</p>
<a href="./Clock/index.php" target="_blank"><i class="bx bx-link-external"></i></a>
</div>
</div>
<div class="row">
<img src="./images/bing.png" alt="">
<div class="layer">
<h5>Bing</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae, eaque illum sed vero sequi
illo nesciunt, beatae repudiandae</p>
<a href="https://github.com/Othmaneaissaoui/frontendproject" target="_blank"><i class="bx bx-link-external"></i></a>
</div>
</div>
<div class="row">
<img src="./images/images.png" alt="">
<div class="layer">
<h5>E-learning</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae, eaque illum sed vero sequi
illo nesciunt, beatae repudiandae</p>
<a href="https://github.com/roc-ica/l7-pro-2-e-learning-2023-Othmaneaissaoui" target="_blank"><i class="bx bx-link-external"></i></a>
</div>
</div>
<div class="row">
<img src="./images/project.png" alt="">
<div class="layer">
<h5>Rekenrace</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae, eaque illum sed vero sequi
illo nesciunt, beatae repudiandae</p>
<a href="https://github.com/roc-ica/l7-pro-1-rekenrace-2023-Othmaneaissaoui" target="_blank"><i class="bx bx-link-external"></i></a>
</div>
</div>
<div class="row">
<img src="./images/project.png" alt="">
<div class="layer">
<h5>Stemadvies App</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae, eaque illum sed vero sequi
illo nesciunt, beatae repudiandae</p>
<a href="https://github.com/roc-ica/l9-pro-2-stemadvies-politieke-partij-codetrio" target="_blank"><i class="bx bx-link-external"></i></a>
</div>
</div>
<div class="row">
<img src="./images/project.png" alt="">
<div class="layer">
<h5>Parketvloer</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae, eaque illum sed vero sequi
illo nesciunt, beatae repudiandae</p>
<a href="https://github.com/Mertcc180/parketvloer" target="_blank"><i class="bx bx-link-external"></i></a>
</div>
</div>
</div>
</div>
</section>
<section id="contact" class="section" style="display:none;">
<div class="contact-container">
<div class="info">
<h2>Heb je een vraag of wil je meer informatie?</h2>
<br>
<p>📞 Bellen: <span>0600-000-000</span></p>
<br>
<p>🏠 Adres: <span>3333AA, Utrecht</span></p>
</div>
<div class="form-container">
<h2>Send Me a message </h2>
<br>
<form action="process_form.php" method="post">
<input type="text" name="name" placeholder="Full name*" required>
<input type="email" name="email" placeholder="Email address*" required>
<input type="text" name="subject" placeholder="Subject">
<textarea name="message" placeholder="Tell us more about your project*" rows="5" required></textarea>
<button type="submit">Send message</button>
</form>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js" integrity="sha512-gmwBmiTVER57N3jYS3LinA9eb8aHrJua5iQD7yqYCKa5x6Jjc7VDVaEA0je0Lu0bP9j7tEjV3+1qUm6loO99Kw==" crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
<script src="script.js" defer></script>
<script>
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault();
const formData = new FormData(this);
fetch('process_form.php', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
const messageModal = document.getElementById('messageModal');
const messageText = document.getElementById('messageText');
messageText.textContent = data.message;
messageModal.classList.add('show');
setTimeout(() => {
messageModal.classList.remove('show');
}, 3000);
if (data.status === 'success') {
document.querySelector('form').reset();
}
})
.catch(error => {
console.error('Error:', error);
const messageModal = document.getElementById('messageModal');
const messageText = document.getElementById('messageText');
messageText.textContent = 'Er is een fout opgetreden bij het verzenden van het bericht.';
messageModal.classList.add('show');
setTimeout(() => {
messageModal.classList.remove('show');
}, 3000);
});
});
</script>
<div id="messageModal">
<p id="messageText"></p>
</div>
</body>
</html>