# Portfolio

## Information

Name: Kobe Marchal
Date of Birth: March 4, 2001
Diploma: Bachelor Multimedia and Creative Technologies (Web App Development)
Email: [e-mail]
Website: https://kobemarchal.be
LinkedIn: https://linkedin.com/in/kobemarchal

## Introduction

I'm Kobe Marchal, 22 years old and I live in Bruges, Belgium.

### Skills

**Frontend**: React / NextJS / Tailwind
**Backend**: JavaScript (/ TypeSript) / NestJS / GraphQL / REST / tRPC / Express
**Database**: PostgreSQL / MySQL / MariaDB / DynamoDB
**DevOps**: Docker / Github Actions / CircleCI / Kubernetes / AWS / Google Cloud / Azure

### Other

I have also created projects in Python (Raspberry Pi, Flask), C# (Unity) and C++ (Arduino).

My interest is growing for XR applications. I mainly create these apps in Unity. I've experimented with WebGL, WebXR and linking the Unity app with React Native. I use an Oculus Quest 2 for VR applications.

## Projects

### EasyTalk






For my thesis of the first year, I chose to solve a problem that we have at home. My brother likes to play games on his computer with his headphones on. This prevents communication between him and my mother if, for example, it is necessary to announce that dinner is ready from a distance.

Since his computer is also often turned on, the air quality in his room is not that great.

I tried to solve this by making a device that monitors the temperature and air quality and sounds an alarm if it increases/decreases too much. This is kept in a database and can be displayed on the website in a beautiful, colorful graph.

Anyone who has the login can also send a message via the website, which then gives a notification with sound on the device. This message is displayed on the OLED screen.

It is also possible to view a calendar on the website to which activities can be added. Most external calendars, such as Outlook and Smartschool, have the function to export an iCal file. This can be imported into the calendar on the website. If an activity is nearby, the user will also receive a notification on the device.

There are also three buttons on the device to navigate through the calendar or to view the temperature and air quality without using the website.

The housing was completely designed in Fusion by myself and printed using a 3D printer.

To better manage the cables, I designed the PCB myself.

This project was used as promotional material for Howest.

Website: [link](https://www.instructables.com/EasyTalk-Easy-Communication-and-a-Calendar-Next-to/)

### Hanssens Catering


As a student job, I helped to start up an ordering platform for Hanssens Catering.

I have created a dynamic table without external libraries. It is possible to edit tables, add rows by copying and pasting from Excel, upload menus,...

### KAZ Comedy Night




For school we had to make a full stack project. I thought it was important that this project could be used in a real context, so I approached the secondary school where I was taking lessons.

Every year they organize a Humor Festival with the students of the last year. This was renamed to KAZ Comedy Night last year.

I made a project where it is possible to reserve seats and order drinks from your seat on the day itself.

To reserve the seats, I made a setup where admins can create categories and place seats on a canvas. They can also place shapes and text to show, for example, where the podium and the bar are.

I made this completely myself with no external libraries. It is possible to place seats, edit them and select multiple seats to edit and move them at the same time.

The admins can also add drinks/food and upload an image which is then sent to Cloudinary in the backend.

When a user orders something, this is shown in real time to the bartenders by the use of SocketIO.

They can then change the stage of the order from "queuing" to "in progress" to "ready" to "collected".

Users receive a text message when the order is ready via Twilio.

However, this project was not used for this event since tickets had to be sold much earlier and visitors could only order drinks for 20 minutes due to Covid.

But it did attract a lot of positive attention from the organizers. That is why I will definitely make another application that is more elaborate and has a nicer and more user-friendly design, for future editions.

#### Frontend
Vue3 / Vite / Vue Router / SASS / TypeScript / Jest / Canvas / QR / Particles

#### Backend
Express / TypeOrm / GraphQL / Apollo / Firebase (custom auth) / JWT / BCrypt / Cloudinary / NodeMailer / Twilio / Helmet / Winston / Rate Limit / Depth Limit

#### Database
MySQL / MariaDB

#### SocketIO
WebSockets / Axios

#### Other
Adminer / Redis / Docker / Kubernetes

### Bachelor thesis



Video: [link](https://youtu.be/VCUQqfmZuEM)

To pass my studies, I had to answer a research question:

`
How can a web environment be set up for exercises on web-related programming, which students make in second grade secondary education using an online code editor and live preview, automatically improve and assign new exercises?
`

I chose this question because I saw how few students showed interest in computer science when I was in secondary school. I am in close contact with a computer science teacher at that school and know from him that this interest continues to decline. After research I found out that this may be due to the fact that not a lot of exercises are given and certainly no exercises that are adjusted to the particular level of the student.

That is why I researched to what extent it is possible to make a web application in which teachers can make exercises and students can then try to solve them in turn. This is done on the basis of a code editor (Monaco: same as in Visual Studio Code) and live preview within the web application (iframe).

When a student submits an exercise, it is automatically scored by using the Levenshtein Distance and the difficulty of the next exercise is determined by the score obtained.

This results in many exercises with an appropriate level of difficulty and no work for the teacher.

After making this project, it has become clear that there is definitely potential in this project and I plan to expand this project in the future by looking at the possibilities to apply the self-determination theory in this context. If successful, it could have a major impact on the teaching of computer science related languages.

I am still writing the bachelor's thesis, but via this [link](https://hackmd.io/@0mbU7XgNQc6qDZV6QEp4dQ/HkM5OLVAF) (Dutch) more information can be found about the elaboration.

#### Frontend
Vue3 / Vuex / Vite / Vue Router / SASS / TypeScript

#### Backend
Express / TypeOrm / GraphQL / Apollo / Firebase (custom auth) / JWT / BCrypt / Random avatar generator / NodeMailer

#### Database
MySQL / MariaDB

#### Other
Adminer / Redis / Docker

### Internship

The final part of my studies is an internship.

It has always been a dream to work abroad and so it seemed appropriate to do my internship in Italy, Turin at Granstudio.

[Granstudio](https://www.granstudio.com/) is a car design company and is not afraid to come up with innovative ways to optimize the design process.

That's why they recently started with a new setup, called the [DigiPHY](https://www.granstudio.com/digiphy).


Granstudio would like to show this idea and that is why they want to publish a digital showroom that can be accessed via the website.

To see the possibilities, I first experimented with Unity and WebGL.


I got a minified model from the DigiPHY and started animating this model. When the user opens the webpage, their camera moves around the object. There are points around the object and when the user passes here they stop for a moment, animate the DigiPHY and show the user some information. This project is on hold pending the various designs of the designers.


The aim of this internship is that both parties learn a lot. That is why they asked me if I could see to what extent it is possible to create a virtual meeting room that is accessible to everyone.

I have therefore built a Unity project that can be accessed via a website by means of WebGL.

There are two roles: watchers and a presenter.

The presenter uses the Oculus Quest 2 to navigate through the application and interact with the menu and watchers.

The watchers can view the website on a desktop or, for an immersive experience, use their smartphone and a Google Cardboard.

This VR experience is processed by WebXR.

Multiplayer is provided by Photon.


Of course, communication also plays an important role in this context. That's why I used WebRTC to set up a many-to-many voice chat. Video also works but is disabled in this project. I have been using SocketIO for the realtime communication and am not using any external libraries to set this up.


When the users join, they first get placed around a big round table. In the middle of this table is canvas that always faces the player, so it is not synced over the network.

The presenter can then move to the next slide using the controllers.

The idea was originally to take an HDMI capture card and stream it from a webpage to Unity via WebRTC so that a screen can be shared on the canvas. But since WebRTC, at the time of writing this, is still in beta, I couldn't get this to work.

That's why I switched to simple images where the presenter can navigate through the slides.


Obviously, displaying an object plays a major role in this company. Therefore, the presenter can teleport anyone to a studio scene after the presentation is ended.

In this studio the presenter can initialize objects. Everyone is teleported to the same point around the object. But you still see the other watchers standing next to you. This is because the goal of this project is an immersive experience. This can cause some confusion but is mainly to experiment with this idea. The presenter can change the location of the watchers around the object as the watchers cannot move themselves when they are in VR with the Google Cardboard.

This project got good feedback by Granstudio.