<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>N.Mouala</title>
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" media="screen" href="/static/css/style2.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.2/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.2/TextPlugin.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.2/ScrollTrigger.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.4/MotionPathPlugin.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">





</head>

<body>
  <div id="wordContainer">
    <span id="changingWord">Hello</span>
  </div>


  <div id="glow-point0"></div>

  <img id="steve" src=" /static/img/steve.png">

  <div id="ss">!</div>

  <div id="abc">
    <div class="sp1" style="left: 0vmax;">H</div>
    <div class="sp1 " style="left: 4.5vmax;">e</div>
    <div class="sp1" style="left: 9vmax;">l</div>
    <div class="sp1 " style="left: 13.5vmax;">l</div>
    <div class="sp1" style="left: 18vmax;">o</div>
  </div>

  <div class="sp3 big" id="bigS">S</div>
  <div class="sp3 small" id="bigK" style="left: 33.5vmax;">K</div>
  <div class="sp3 small" style="left: 42vmax;">l</div>
  <div class="sp3 small" style="left: 45.5vmax;">l</div>
  <div class="sp3 small " style="left: 49vmax;">S</div>
  <div class="sp4" id="littleD">D</div>
  <div class="sp4" id="littleE">E</div>
  <div class="sp4" id="littleM">M</div>
  <div class="sp4 " id="littleS">S</div>


  <div id="intro">
    <div id="intro-text"></div>
  </div>


  <img id="ball" src="/static/img/ball.png">
  <div id="welcome-container">
    <div id="welcome-statement">
      <div class="wel-text">I'm</div>
      <div class="wel-text">N Mouala,</div>
      <br><br>
      <div class="wel-text">Master’s </div>
      <div class="wel-text">student </div>
      <div class="wel-text">in </div>
      <div class="wel-text">Computer </div>
      <div class="wel-text">Science </div>
      <br><br>
      <div class="wel-text">Specializing </div>
      <div class="wel-text">in </div>
      <div class="wel-text">Computer </div>
      <div class="wel-text">security</div>
    </div>
  </div>

  <div id="lchc">
    <div id="first-word"></div>
    <div id="second-word"></div>
  </div>




  <img class="skills-images" id="dotnet-img" src="/static/img/floating/1 (1).png">
  <div class="skills-text" id="dotnet-text"> Full-stack development of both frontend and backend using C# .NET
    framework, JavaScript and cHTML</div>
  <img class="skills-images" id="linux-img" src="/static/img/floating/1 (2).png">
  <div class="skills-text" id="linux-text"> Managing and optimizing Linux-based operating systems for various
    applications</div>
  <img class="skills-images" id="docker-img" src="/static/img/floating/1 (3).png">
  <div class="skills-text" id="docker-text"> Docker containerization to enhance application portability and scalability.
  </div>
  <img class="skills-images" id="sql-img" src="/static/img/floating/1 (5).png">
  <div class="skills-text" id="sql-text"> Designing and maintaining SQL databases to fit business operations.</div>
  <img class="skills-images" id="azure-img" src="/static/img/floating/1 (8).png">
  <div class="skills-text" id="azure-text">Managing identities and access controls with Azure Active Directory to secure
    applications and services in the cloud. </div>



  <section id="s2">
  </section>

  <div class="headers" id="project-title1"> Green Smart Home Management System (Sep-Nov 2022) </div>
  <div class="headers" id="project-title2"> Multi-Agent Path Finding Project (Feb-Apr 2023) </div>
  <div class="headers" id="project-title3"> Printer-server (Oct-Nov 2023) </div>
  <div class="headers" id="project-title4"> DICOM-HaWk (Sep-Dec 2024) </div>

  <div id="title-tails">
    <img class="title-icons" style="cursor: pointer;" id="github" src="/static/img/github.svg">
    <img class="title-icons" style="cursor: pointer;" id="pdf" src="/static/img/pdf.svg">
  </div>

  <li class="headers" id="project-description">
    Project Description
  </li>

  <div class="headers-text" id="smarthome-description">The Green Smart Home project is a smart home management
    system with a microservices architecture. It uses Docker for deployment, Hazelcast for real-time distributed
    data management, and the MVC pattern for the web service.
    Data from LoRaWAN sensors is collected through an MQTT broker integrated into the "The Things network stack".
    This data is then used as the basis for controlling physical devices based on the collected data. </div>

  <div class="headers-text" id="ai-description">A single AI client,
    implemented in Java, manages multiple virtual workers (agents) to complete tasks.
    It uses planning techniques to prevent delays and conflicts when agents operate simultaneously.
    Particularly in loosely connected tasks (Moving boxes).Each agent works independently but cohesively.
    To assign tasks, a "relaxed problem" approach was used utilizing Depth-First Search (DFS) and Breadth-First
    Search (BFS) algorithms for exploring options, and A* heuristics, with dynamic width assignment, to prioritize
    paths based on practicality. </div>



  <div class="headers-text" id="datasec-description">A tls protected client-server architecture using JRMP
    communication protocol. A centralized memoy-based proxy server acting as an intermediary between the client and the
    server hoding a tls protected shared registery.
    Classpath repositories are shared on a proxy level. JRMP provides access to a authentication
    service and a printer services implemented in the server side. The client is a spring boot application with API
    end-points serving a https protected User interface
  </div>

  <div class="headers-text" id="dicomhawk-description">DICOMHawk is a honeypot that simulates a real-world DICOM server
    with a high
    interaction level. DICOM is an international imaging and communication protocol for medical devices' communication.
    The honeypot embeds a Web API that allows a user to browse through DICOM image storage. On request, the DICOM server
    provides a real looking output utalizing the Cancer Images Archive API with real DICOM files as output. As well,
    the honeypot embeds a set of honeytokens that allow us to identify the attacker and understand the nature of the
    attack.
    Using an elastic stack, the honeypot supports the logging of real-time data and the analysis of the data. </div>





  <img id="arch1-img" src="/static/img/architecture2.png">
  <img id="data-sec" src="/static/img/data-sec.png">

  <div id="ved-div">
    <video id="ved1" src="/static/img/ved4.mp4" autoplay loop muted> </video>
    <video id="ved2" src="/static/img/ved1.mp4" autoplay loop muted> </video>
  </div>

  <img id="dicomhawk" src="/static/img/dhawk.png">













  <script>

    update = function () {


      requestAnimationFrame(update);
    };
    requestAnimationFrame(update);
  </script>


  <!-- <script src="./assets/particles.js"></script> -->
  <!-- <script src="./assets/app.js"></script> -->
  <script src="/static/js/tests.js"></script>

  <!-- <script src="./assets/section1Script.js"></script> -->
  <!-- <script src="./assets/section2Script.js"></script> -->



</body>

</html>