# Portfolio

## Informatie

Naam: Kobe Marchal
Geboortedatum: 4 maart 2001
Diploma: Bachelor Multimedia en Communicatie Technologie (Web App Development)
E-mail: [e-mail]
Website: https://kobemarchal.be

## Inleiding

Ik ben Kobe Marchal, 22 jaar oud en woon in Brugge, België.

Ik studeer bijna af aan Howest in de richting Multimedia en Communicatie Technologie met uitstroom Web App Development.

Ik heb het meeste ervaring in het bouwen van full stack web projecten.

**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

Hiernaast heb ik ook al projecten gemaakt in Python (Raspberry Pi, Flask), C# (Unity) en C++ (Arduino).

Ik ben ook niet bang om wat te experimenteren met robotica met een Raspberry Pi, Arduino of ESP module.

Tegenwoordig groeit mijn interesse ook sterk naar XR-applicaties. Ik heb geëxperimenteerd met WebGL, WebXR en WebRTC. Hiervoor maakte ik vooral gebruik van een Oculus Quest 2 en Google Cardboards.

## Projecten

### EasyTalk






Als eindwerk voor het eerste jaar, heb ik gekozen om een probleem op te lossen die we thuis hebben. Mijn broer speelt namelijk graag spelletjes op zijn computer met zijn hoofdtelefoon op. Dit verhindert de communicatie tussen hem en mijn moeder als er bijvoorbeeld moet meegedeeld worden dat het eten klaar is van op afstand.

Aangezien deze computer ook vaak aanstaat, is de luchtkwaliteit niet zo denderend in zijn kamer.

Dit probeer ik op te lossen door een toestel te maken die de temperatuur en luchtkwaliteit bijhoudt en alarm slaat als deze te veel toeneemt/afneemt. Dit wordt bijgehouden in een database en kan worden weergegeven op de website in een mooie, kleurrijke grafiek.

Iedereen die de login heeft, kan via de website ook een bericht sturen die dan op het toestel een melding geeft met geluid. Dit bericht wordt getoond op het OLED-scherm.

Het is ook mogelijk een kalender te bekijken op de website waar activiteiten aan kunnen toegevoegd worden. De meeste externe kalenders zoals Outlook en Smartschool, beschikken over de functie om een iCal bestand te exporteren. Dit kan geïmporteerd worden in de kalender op de website. Als er een activiteit dichtbij is, krijgt de gebruiker ook een meldingen op het toestel.

Op het toestel staan er ook drie knoppen om te navigeren doorheen de kalender of om de temperatuur en luchtkwaliteit te bekijken zonder de website te gebruiken.

De behuizing werd volledig zelf ontworpen in Fusion en geprint m.b.v. een 3D-printer.

Om de kabels wat beter te beheren, heb ik zelf een PCB ontworpen.

Dit project werd gebruikt als promotiemateriaal voor Howest.

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

### Hanssens Catering


Als vakantiejob, heb ik geholpen bij het opstarten van een bestelplatform voor Hanssens Catering.

Ik heb hier een dynamische tabel gemaakt zonder externe libraries. Het is mogelijk tabellen te bewerken, toe te voegen door vanuit Excel te kopiëren en plakken, menu's te uploaden,..

### KAZ Comedy Night




Voor school moesten we een full stack project maken. Ik vond het belangrijk dat ik dit project kon uittesten dus sprak ik de middelbare school aan waar ik les volgde.

Zij organiseren elk jaar een Humorfestival met de leerlingen van het laatste jaar. Dit is vorig jaar hernoemt naar KAZ Comedy Night.

Ik heb een project gemaakt waar het mogelijk is plaatsen te reserveren en op de dag zelf, drinken te bestellen vanaf je stoel.

Om de plaatsen te reserveren, heb ik een opstelling gemaakt waar admins categorieën kunnen aanmaken en zetels kunnen plaatsen op een canvas. Ze kunnen ook vormen en tekst plaatsen om bv. aan te tonen waar het podium en de toog is.

Ik heb dit volledig zelf gemaakt zonder externe libraries. Het is mogelijk zetels te plaatsen, deze te bewerken en meerdere zetels te selecteren om deze op hetzelfde moment te bewerken en te verplaatsen.

De admins kunnen ook artikelen toevoegen en een afbeelding uploaden die dan in de backend gestuurd worden naar Cloudinary.

Wanneer een gebruiker iets besteld, wordt dit realtime getoond bij de barmannen d.m.v. SocketIO.

Ze kunnen dan de fase van de bestelling veranderen van "in de wachtrij" naar “aan bezig" naar "staat klaar" naar "is opgehaald".

De gebruikers krijgen een sms als de bestelling klaar staat via Twilio.

Dit project heeft men echter niet gebruikt voor dit evenement aangezien kaarten veel vroeger moesten verkocht worden en door Covid de bezoekers maar 20 min drinken konden bestellen.

Maar het trok wel veel positieve aandacht bij de organisators. Daarom ga ik zeker nog een applicatie maken die meer is uitgewerkt en over een mooier en gebruiksvriendelijker ontwerp beschikt, voor volgende edities.

#### 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

### Bachelorproef



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

Om te slagen voor mijn studies, heb ik een onderzoeksvraag moeten beantwoorden:

`
Hoe kan een web omgeving opgemaakt worden om oefeningen rond web gerelateerd programmeren, die de leerlingen tweede graad secundair onderwijs maken a.d.h.v. een online code editor en live preview, automatisch te verbeteren en nieuwe oefeningen toe te kennen?
`

Ik heb deze vraag gekozen aangezien ik zag hoe weinig leerlingen interesse vertoonden in informatica toen ik in het middelbaar zat. Ik sta in nauw contact met een informatica leerkracht op die school en weet van hem dat deze interesse blijft dalen. Na onderzoek ben ik er achter gekomen dat dit misschien wel te wijten kan zijn aan het feit dat er niet super veel oefeningen worden gegeven en al zeker geen oefeningen die afgesteld zijn op het bepaalde niveau van de leerling.

Daarom heb ik onderzocht in hoeverre het mogelijk is een webapplicatie te maken waar leerkrachten oefeningen in kunnen maken en leerlingen die dan op hun beurt kunnen proberen oplossen. Dit gebeurt a.d.h.v. een code editor (Monaco: zelfde als in Visual Studio Code) en live preview binnenin de webapplicatie.

Wanneer een leerling een oefening indient, wordt deze automatisch verbeterd door gebruik te maken van de Levenshtein Distance en wordt de moeilijkheidsgraad van de volgende oefening bepaald door de behaalde score.

Dit resulteert in veel oefeningen met een gepaste moeilijkheidsgraad en geen verbeterwerk voor de leerkracht.

Na het maken van dit project, is duidelijk geworden dat hier zeker potentie in zit en ben ik van plan om dit project in de toekomst uit te breiden door eens te kijken wat de mogelijkheden zijn om de zelfdeterminatie theorie toe te passen in deze context. Als dit lukt, kan dit misschien wel een grote impact hebben op het lesgeven van informatica gerelateerde talen.

Ik ben nu nog bezig met het schrijven van de bachelorproef maar via deze [link](https://hackmd.io/@0mbU7XgNQc6qDZV6QEp4dQ/HkM5OLVAF) kan er meer informatie gevonden worden over de uitwerking.

#### 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

### Stage

Het finale deel van mijn studies is het uitvoeren van een stage.

Het is altijd al een droom geweest om te werken in het buitenland en dus leek het mij een gepaste stap om mijn stage te volgen in Italië, Turijn bij Granstudio.

[Granstudio](https://www.granstudio.com/) is een bedrijf die auto's ontwerpt en niet bang is om innovatieve manieren te bedenken om het ontwerpproces te optimaliseren.

Daarom zijn ze sinds kort begonnen met een nieuwe opstelling, namelijk de [DigiPHY](https://www.granstudio.com/digiphy).


Granstudio wil graag uitpakken met dit idee en daarom willen ze een digitale showroom publiceren die toegankelijk is via de website.

Om de mogelijkheden te bekijken, heb ik eerst wat geëxperimenteerd met Unity en WebGL.


Ik heb een minified model gekregen van de DigiPHY en een start gemaakt bij het animeren van dit model. Wanneer de gebruiker de pagina opent, beweegt zijn camera rond het object. Er zijn points rond het object en wanneer de gebruiker hier passeert, staat hij even stil, animeert de DigiPHY en krijgt de gebruiker wat informatie. Dit project staat on hold ter afwachting van de verschillende ontwerpen van de designers.


Het doel van deze stage is dat beide partijen veel bijleren. Daarom hebben ze mij gevraagd of ik eens kan kijken in hoeverre het mogelijk is een virtuele meetingroom te creëren die toegankelijk is voor iedereen.

Ik heb daarom een Unity project gebouwd die toegankelijk is via een website d.m.v. WebGL.

Er zijn twee rollen: watchers en een presenter.

De presenter maakt gebruik van de Oculus Quest 2 om te navigeren door de applicatie en te interageren met het menu en de watchers.

De watchers kunnen op een desktop de website bekijken of voor een immersive experience, gebruik maken van hun smartphone en een Google Cardboard.

Deze VR-ervaring wordt verwerkt door WebXR.

Multiplayer wordt verzorgd door Photon.


Uiteraard speelt communicatie ook een belangrijke rol in deze context. Daarom heb ik gebruik gemaakt van WebRTC om zo een many-to-many voice chat op te stellen. Video werkt ook maar is uitgeschakeld in dit project. Ik heb gebruik gemaakt van SocketIO voor de realtime communicatie en geen externe libraries gebruikt om dit op te zetten.


Wanneer de gebruikers joinen, komen ze eerst aan een ronde tafel. In het midden van deze tafel bevindt zich canvas die altijd gericht is naar de speler, deze is dus niet gesynct over het netwerk.

De presenter kan dan naar de volgende slide gaan m.b.v. de controllers.

Het idee was oorspronkelijk bedoeld om gebruik te maken van een HDMI capture card en deze te streamen van een webpagina naar Unity via WebRTC zodat een scherm kan gedeeld worden op het canvas. Maar aangezien WebRTC, op de tijd dat ik dit schrijf, nog steeds in beta fase zit, kreeg ik dit niet werkende.

Daarom ben ik overgeschakeld naar simpele afbeeldingen waar de presenter dan kan doorgaan.


Uiteraard speelt het tonen van een object een grote rol in dit bedrijf. Daarom kan de presenter iedereen teleporteren naar een studio scene nadat de presentatie afgerond is.

In deze studio kan de presenter objecten initialiseren. Iedereen wordt geteleporteerd op hetzelfde punt rond het object. Maar toch zie je de andere watchers naast je staan. Dit komt omdat het doel van dit project een immersive experience is. Dit kan wel wat voor verwarring zorgen maar is vooral om te experimenteren met dit idee. De presenter kan de locatie veranderen van de watchers rond het object aangezien de watchers zichzelf niet kunnen bewegen als ze in VR zitten met de Google Cardboard.