<h2>Introductie</h2>
<p>Met de bestaande infrastructuur die vertrouwde op afzonderlijke desktops zonder communicatiemogelijkheden, was er behoefte aan een oplossing om studentenprojecten te ondersteunen en geïsoleerde omgevingen te creëren. Proxmox, een krachtig virtualisatieplatform, werd geïmplementeerd om dit probleem aan te pakken. Door over te stappen naar Proxmox kreeg de infrastructuur de mogelijkheid om flexibele en schaalbare virtuele omgevingen te bieden voor studenten, waarbij de integriteit en beveiliging van de hoofdinfrastructuur behouden bleven.</p>
<h2>De Noodzaak voor Proxmox</h2>
<p>Proxmox biedt een ideale omgeving voor het creëren van geïsoleerde systemen voor studenten, waardoor ze volledige toegang krijgen zonder de hoofdinfrastructuur te verstoren. Dit vereiste echter de omzetting van de huidige desktops naar Proxmox.</p>
<h2>Overgangsuitdagingen</h2>
<p>De overgang naar Proxmox vormde een grote uitdaging; het waarborgen van geen dataverlies tijdens het proces. Met meerdere Docker-containers die cruciale gegevens opslaan op de huidige desktops, was het van cruciaal belang de integriteit van deze informatie te behouden.</p>
<h2>De Overgangsoplossing</h2>
<p>Om dataverlies te omzeilen en downtime te minimaliseren, werd besloten om aparte desktops te gebruiken voor de overgang, waardoor de huidige infrastructuur tegelijkertijd operationeel kon blijven.</p>
<h2>Overgangsresultaat</h2>
<p>De overdracht naar de Proxmox-cluster is succesvol verlopen, met Docker die in een enkele container draait, waardoor de infrastructuur effectief wordt geïsoleerd van anderen.</p>
<h2>Problemen</h2>
<p>Een resterend probleem is het onvermogen van de Cloudflare-tunnel die in ons netwerk wordt gebruikt om te communiceren met de virtuele omgeving, een probleem dat moet worden aangepakt voordat de overgang definitief is.</p>
<h2>Toekomstplannen</h2>
<p>Zodra alle elementen op hun plaats zijn en operationeel zijn, is het plan om het proces zoveel mogelijk te automatiseren door een Ansible-playbook te schrijven, waardoor de implementatie en het beheer van de infrastructuur verder worden gestroomlijnd.</p>


Migratie van afzonderlijke desktops naar Proxmox virtualisatie, waardoor geïsoleerde omgevingen mogelijk zijn voor studentenprojecten, met toekomstplannen voor automatisering via een Ansible-playbook.

Proxmox

<h2>Introduction</h2>
<p>With the existing infrastructure relying on separate desktops that lacked communication capabilities, a solution was needed to support student projects and create isolated environments. Proxmox, a powerful virtualization platform, was implemented to address this challenge. By migrating to Proxmox, the infrastructure gained the ability to provide flexible and scalable virtual environments for students, allowing them to work on projects while ensuring the integrity and security of the main infrastructure.</p>
<h2>The Need for Proxmox</h2>
<p>Proxmox offers an ideal environment for creating isolated systems for students, granting them full access without disturbing the main infrastructure. However, this necessitated the conversion of current desktops to Proxmox.</p>
<h2>Transition Challenges</h2>
<p>Transitioning to Proxmox presented a major challenge; ensuring no data loss during the process. With multiple docker containers storing crucial data running on the current desktops, it was critical to maintain the integrity of this information.</p>
<h2>The Transition Solution</h2>
<p>To circumvent data loss and minimize downtime, the decision was made to utilize separate desktops for the transition, allowing the current infrastructure to remain operational simultaneously.</p>
<h2>Transition Outcome</h2>
<p>The transfer to the Proxmox cluster has been successful, with Docker running in a single container, effectively isolating the infrastructure from others.</p>
<h2>Issues</h2>
<p>A remaining issue is the inability of the Cloudflare tunnel used in our network to communicate with the virtual environment, a problem that needs addressing before the transition is finalized.</p>
<h2>Future Plans</h2>
<p>Once all elements are in place and operational, the plan is to automate the process as much as possible by writing an Ansible playbook, further streamlining the deployment and management of the infrastructure.</p>


Migration from separate desktops to Proxmox virtualization, enabling isolated environments for student projects, with future plans for automation using an Ansible playbook.

<h2>Inleiding</h2>
<p>Het Anet issuetracker-systeem kampte met het probleem dat het offline en ontoegankelijk was. Om dit probleem te overwinnen en effectieve probleemregistratie en -oplossing mogelijk te maken, werd er een project gestart om de issuetracker nieuw leven in te blazen en te herstellen. Door het systeem te herstellen, kregen gebruikers weer toegang tot een efficiënt platform voor probleembeheer, wat resulteert in verbeterde communicatie en gestroomlijnde probleemoplossing binnen de Anet-organisatie.</p>
<h2>Verdieping in Django en Analyse van de Databankstructuur</h2>
<p>Eerst moest ik me verdiepen in Django, omdat ik nog niet vaak een ORM-model had gebruikt voor een relatief groot project. Daarna analyseerde ik de structuur van de huidige databank. Het leek op het eerste gezicht vrij standaard en vertaalbaar naar tabellen en associatieve tabellen.</p>
<h2>Uitdagingen en Oplossingen</h2>
<p>Echter, de databank bleek niet zo makkelijk te gebruiken binnen Django’s ORM-systeem, te wijten aan vreemde veldnamen en overtollige tabellen. De oplossing was om een script te schrijven dat met eenvoudige SQL-operaties de benodigde data uit de oude databank haalt en in het Django ORM-model plaatst.</p>
<h2>Implementatie van Datastructuur</h2>
<p>Ik heb vervolgens functies geschreven om deze taak zo eenvoudig mogelijk te maken. De structuur van de data was als volgt: "Issue" met daaronder "Keywords" en "Messages". Elk bericht had ook relevante trefwoorden. Voor elke issue moesten de berichten en de bijbehorende trefwoorden worden opgehaald.</p>
<p><img src="/projects/model_cur.png" alt="Fig 1. Overzicht van de datastructuur">
<em>Fig 1. Overzicht van de datastructuur</em></p>
<h2>Interface en Zoekfunctionaliteit</h2>
<p>Na het oplossen van de databankproblemen, kon ik aan de slag met de templates. Ik heb een eenvoudige interface gemaakt die real-time zoekt naar de issues die overeenkomen met de ingevoerde zoektermen. Het zoeken is nu aanzienlijk vereenvoudigd door meerdere attributen in één zoekveld te kunnen ingeven.</p>
<h2>Toekomstige Plannen</h2>
<p>Hoewel het project momenteel is opgebouwd met standaard Django templates, is het de bedoeling om dit uiteindelijk over te zetten naar Jinja2 templates.</p>


Een herontwikkelde issuetracker voor Anet, met verbeterde databankintegratie en zoekfunctionaliteit dankzij Django.

Issue tracker

<h2>Introduction</h2>
<p>The Anet issuetracker system faced the challenge of being offline and inaccessible. To overcome this problem and enable effective issue tracking and resolution, a project was undertaken to revive and restore the issuetracker. By reviving the system, users regained access to an efficient issue management platform, fostering improved communication and streamlined issue resolution within the Anet organization.</p>
<h2>Diving into Django and Database Structure Analysis</h2>
<p>Initially, I had to delve into Django, given my limited experience using ORM models in relatively large projects. Following that, I analyzed the current database structure which, at first glance, seemed fairly standard and translatable into tables and associative tables.</p>
<h2>Challenges and Solutions</h2>
<p>However, using the database within Django’s ORM system turned out to be not as straightforward, due to peculiar field names and redundant tables. The solution was to write a script that extracts necessary data from the old database using simple SQL operations and inserts it into the Django ORM model.</p>
<h2>Implementation of Data Structure</h2>
<p>Next, I created functions to make this task as easy as possible. The data structure was as follows: "Issue", which housed "Keywords" and "Messages". Each message also contained relevant keywords. For every issue, the corresponding messages and their keywords needed to be fetched.</p>
<p><img src="/projects/model_cur.png" alt="Fig 1. Overview of the datastructure">
<em>Fig 1. Overview of the datastructure</em></p>
<h2>Interface and Search Functionality</h2>
<p>After solving the database issues, I started working on the templates. I created a simple interface that searches for issues matching entered search terms in real-time. The search process has been significantly simplified, allowing for multiple attributes to be entered into a single search field.</p>
<h2>Future Plans</h2>
<p>While the project currently utilizes standard Django templates, the intention is to eventually migrate this to Jinja2 templates.</p>


A redeveloped issuetracker for Anet, with enhanced database integration and search functionality, powered by Django.

<h2>Inleiding</h2>
<p>Het beheer van spelers, teams en clubs in de Dartsfederatie Kempen bracht tal van administratieve taken en coördinatie-uitdagingen met zich mee. Om de activiteiten te stroomlijnen, de betrokkenheid van leden te vergroten en de algehele dartservaring in de Kempen-regio te verbeteren, is er een uitgebreide webtoepassing ontwikkeld. Deze toepassing biedt een gebruiksvriendelijk platform voor efficiënt beheer van spelers, teams en clubs, het plannen van wedstrijden, invoeren van scores en genereren van ranglijsten.</p>
<h2>Over Dartsfederatie Kempen</h2>
<p>Dartsfederatie Kempen is een gerespecteerde dartfederatie met ongeveer 1000 leden en een jaarlijkse groei van 20%. Dit benadrukt de passie voor darts in de regio en het belang van de federatie in de lokale gemeenschap.</p>
<h2>Het Doel van de Applicatie</h2>
<p>Om de ervaring van leden te verbeteren, startte de federatie een webapplicatie project. Dit platform is ontworpen om administratieve taken te vereenvoudigen, de communicatie te verbeteren en verschillende aspecten van de operaties van de federatie te beheren, zoals spelers-, team- en clubbeheer.</p>
<h2>Competitiesysteem in de Applicatie</h2>
<p>De applicatie had een robuust systeem nodig om wedstrijddagen bij te houden en scores op te nemen, wat cruciaal is voor het genereren van spelerranglijsten en het onderhouden van een nauwkeurige ranglijst.</p>
<h2>Technische aspecten</h2>
<p>Het project maakte gebruik van NextJS en Tailwind CSS, bekend om hun schaalbaarheid en prestaties, naast Cloudflare voor de backend-infrastructuur. De samensmelting van deze technologieën faciliteerde de creatie van een betrouwbare en dynamische webapplicatie die aan alle eisen van de federatie voldeed.</p>
<h2>Mijn Rol in het Project</h2>
<p>In tegenstelling tot mijn collega, die zich bezighield met de front-end en enkele backend-componenten, was mijn rol meer gericht op back-end ontwikkeling. Ik was voornamelijk belast met het creëren van het datamodel en het ontwikkelen van de API. Dit werd allemaal aangedreven door een serverless-architectuur, die een cruciale rol speelde in de algehele prestaties en functionaliteit van de applicatie. Door mijn inspanningen zorgde ik voor een robuuste basis voor de applicatie, waardoor efficiënt datamanagement en naadloze interactiviteit mogelijk waren.</p>
<p><img src="/projects/dartsfederatie_model.png" alt="Fig 1. Initiëel data model met associatieve tabellen">
<em>Fig1. Initial data model with associative tables</em></p>
<h1>Het Eindproduct</h1>
<p>Ons team heeft met succes een volledig functionele webapplicatie gecreëerd die de unieke identiteit van de Dartsfederatie Kempen weerspiegelt. De backend-infrastructuur is met succes geïmplementeerd, wat efficiënt datamanagement en naadloze interactiviteit door de gehele applicatie biedt.</p>
<p>Er zijn echter nog een paar dingen te doen.</p>
<ul>
<li>XHR sanitering (controle)</li>
<li>CSRF tokens</li>
<li>Inlogsysteem voor authenticatie</li>
</ul>
<h2>Conclusie</h2>
<p>Dit was een uitdagend project, voornamelijk omdat de taak niet alleen was om één ding te creëren, maar om alles samen te brengen. Een goede intuïtieve UI samen met een goed geschreven API. Dit maakte het project zeer interessant en gaf een heel goed idee van hoe het is om een full-stack product te leveren.</p>


Een webapplicatie ontworpen om de operaties te optimaliseren, de betrokkenheid van leden te stimuleren en de dart-ervaring in de Kempen te verrijken voor de Dartsfederatie Kempen.

Dartsfederatie

<h2>Introduction</h2>
<p>Managing players, teams, and clubs in the Dartsfederatie Kempen involved numerous administrative tasks and coordination challenges. To streamline operations, enhance member engagement, and improve the overall darts experience in the Kempen region, a comprehensive web application was developed. This application provides a user-friendly platform for efficiently managing players, teams, and clubs, scheduling matches, inputting scores, and generating rankings.</p>
<h2>About Dartsfederatie Kempen</h2>
<p>Dartsfederatie Kempen is a respected darts federation with about 1000 members and a growth rate of 20% annually. This highlights the region's passion for darts and the federation's significance in the local community.</p>
<h2>The Application's Purpose</h2>
<p>To enhance member experience, the federation initiated a web application project. This platform was designed to simplify administrative tasks, enhance communication, and manage different aspects of the federation's operations, such as player, team, and club management.</p>
<h2>Competition System in the Application</h2>
<p>The application needed a robust system to track match days and record scores, crucial for generating player rankings and maintaining an accurate leaderboard.</p>
<h2>Technical aspects</h2>
<p>The project took advantage of NextJS and Tailwind CSS, renowned for scalability and performance, alongside Cloudflare for backend infrastructure. The amalgamation of these technologies facilitated the creation of a reliable and dynamic web application meeting all of the federation's demands.</p>
<h2>My Role in the Project</h2>
<p>Unlike my colleague, who took charge of the front-end and some backend components, my role was more focused on back-end development. I was primarily tasked with creating the data model and developing the API. This was all powered by a serverless architecture, which played a pivotal role in the overall performance and functionality of the application. Through my efforts, I ensured a robust foundation for the application, allowing for efficient data management and seamless interactivity.</p>
<p><img src="/projects/dartsfederatie_model.png" alt="Fig 1. Initial data model with associative tables">
<em>Fig1. Initial data model with associative tables</em></p>
<h2>The Final Product</h2>
<p>Our team successfully created a fully functional web application reflecting the unique identity of the Dartsfederatie Kempen. The back-end infrastructure has been successfully implemented, offering efficient data management and seamless interactivity throughout the application.</p>
<p>However, there are still a few things to do.</p>
<ul>
<li>XHR sanitizing (checking)</li>
<li>CSRF tokens</li>
<li>Login system for authentication</li>
</ul>
<h2>Conclusion</h2>
<p>This was a challenging project, mostly since the task was not just to create one thing, instead binding it all together. A good intuitive UI together with a well-writen API. This is what made the project very interesting, and it gave a very good idea of what it is like to deliver a full-stack product.</p>


A web application designed to optimize operations, foster member engagement, and enrich the darts experience in Kempen for the Dartsfederatie Kempen.

<h2>Algemeen</h2>
<p>Renarti is gespecialiseerd in renovatie in de bouwgeschiedenis.
Om hun afgewerkte projecten in de schijnwerpers te zetten, wilden ze een website om hun werk te tonen.</p>
<h2>Mijn rol</h2>
<p>Voor dit project was mijn rol zowel het ontwerpen als het bouwen van deze website.
De functionaliteiten bestonden uit de volgende onderdelen:</p>
<ul>
<li>Beheer van projecten (bekijken, toevoegen, bewerken, verwijderen)</li>
<li>Dynamisch contactformulier</li>
<li>Hosting</li>
</ul>
<p>De site wordt statisch gehost. Dit betekent dat de website telkens opnieuw wordt opgebouwd wanneer er een project wordt toegevoegd of gewijzigd. Hierdoor is de site sneller omdat deze niet telkens opnieuw zijn gegevens hoeft op te halen.</p>
<h2>Link</h2>
<p>De website is toegankelijk via de volgende link: <a href="https://www.renarti.be">https://www.renarti.be</a></p>


Renarti's renovatieprojecten tot leven brengen via een dynamische showcase

Renarti

<h2>General</h2>
<p>Renarti specializes in renovation in the construction history.
To bring their finished projects in the spotlights, they wanted a website to showcase their work.</p>
<h2>My role</h2>
<p>For this project, my role was to design as well as build this website.
The functionalities consisted of the following:</p>
<ul>
<li>Manage projects (view,add,edit,delete)</li>
<li>Dynamic contactform</li>
<li>Hosting</li>
</ul>
<p>The site is static hosted. This means the website will be rebuilt each time a project is added or altered. This makes the site more performant since it doesn't need to fetch it's data each time.</p>
<h2>Link</h2>
<p>The website is accessible through the following link: <a href="https://www.renarti.be">https://www.renarti.be</a> <em>(beware, it's in Dutch! :))</em></p>


Bringing Renarti's renovation projects to life through a dynamic showcase

<h2>De Noodzaak van een Digitale Aanwezigheid</h2>
<p>In een steeds meer verbonden wereld is een digitale aanwezigheid cruciaal geworden voor organisaties om in contact te komen met hun gemeenschap, hun werk te laten zien en communicatie te vergemakkelijken. Digitale Innovatie, ondanks de technologische focus, miste in eerste instantie een webaanwezigheid. Dit besef leidde tot het opzetten van een project om een website te creëren die als digitaal platform voor de organisatie zou dienen, waardoor deze kon communiceren met haar publiek, updates kon delen en projectvoorstellen kon accepteren.</p>
<h2>Introductie</h2>
<p>Het "Digitale Innovatie Website" project was een groepsinspanning gericht op het creëren van een webaanwezigheid voor Digitale Innovatie. Ons team verdeelde de verantwoordelijkheden over verschillende aspecten van het project, en mijn voornaamste rol was om de server-side code voor het inlogsysteem te ontwikkelen en de ingediende berichten of projectvoorstellen te beheren.</p>
<h2>Mijn Rol in het Project</h2>
<p>Als lid van het team was mijn belangrijkste verantwoordelijkheid het ontwikkelen van de backend-functionaliteit. Dit betrof de implementatie van het inlogsysteem met behulp van GitHub-authenticatie en het afhandelen van de verwerking en opslag van berichten en projectvoorstellen die via het contactformulier van de website werden ingediend. Ik was ook betrokken bij besluitvormingsprocessen, droeg bij aan discussies en hielp bij het kiezen van de technologieën die in het project werden gebruikt.</p>
<h2>Keuze van Tools en Vereistenanalyse</h2>
<p>Een van de eerste stappen in het project was het selecteren van de juiste technologieën. We evalueerden verschillende populaire front-end ontwikkelingsframeworks, waaronder <code>NuxtJS</code>, <code>NextJS</code> en <code>Hugo</code>. Na het overwegen van de kenmerken en mogelijkheden van elk, kozen we voor <code>NextJS</code> met statische sitegeneratie vanwege de hoge prestaties en flexibiliteit.</p>
<p>Ook de styling was een aspect waar we een keuze moesten maken. We evalueerden <code>Sass</code>, <code>CSS</code> en <code>TailwindCSS</code>, en kozen uiteindelijk voor <code>TailwindCSS</code> vanwege zijn dynamische aard en gebruiksgemak. Het zorgde voor een consistente stylingaanpak tussen verschillende teamleden, bevorderde de samenwerking en handhaafde de consistentie in onze codebase.</p>
<p>Voor de hosting overwogen we <code>Vercel</code>, <code>Cloudflare</code> en <code>Netlify</code>. We kozen voor <code>Cloudflare</code> voornamelijk vanwege persoonlijke voorkeur en het feit dat onze andere infrastructuur al gehost werd op Cloudflare, wat de integratie vlotter en handiger maakte.</p>
<p>Vooraleer al dit nuttig was, is er ook een analyse gemaakt van de vereisten. Deze analyse hebben we uitgevoerd door het maken van een use-case diagram.</p>
<p><img src="/projects/dinowebsite_datamodel.png" alt="Fig 1. Datamodel">
<em>Fig 1. Datamodel</em></p>
<h2>Datamodellering</h2>
<p>De inzendingen van het formulier werden opgeslagen in Cloudflare's Key-Value (KV) opslag. Omdat de werkelijke data in Cloudflare KV werd opgeslagen, was mijn rol om de typedefinities voor deze inzendingen te creëren. De voornaamste gedefinieerde typen waren:</p>
<ul>
<li><code>ProjectData</code>: Dit type ving de details over een project op, inclusief filter, pad, afbeelding, titel, datum, ruwe datum, positie, samenvatting, inhoud en uitgelichte status.</li>
<li><code>InquiryData</code>: Dit type omvatte de details van een onderzoek, inclusief een optionele ID, de voornaam, achternaam, e-mail, bericht, datum en een optionele bestandsbijlage van de gebruiker.</li>
<li><code>EventData</code>: Dit type vertegenwoordigde de details van een evenement, inclusief pad, afbeelding, titel, datum, ruwe datum, positie, samenvatting en inhoud.</li>
</ul>
<p>Deze typen waren essentieel om ervoor te zorgen dat de data die in Cloudflare KV werd opgeslagen, een voorspelbare en consistente structuur hadden.</p>
<h2>Uitdagingen en Oplossingen</h2>
<p>Hoewel de implementatie van het inlogsysteem met <code>GitHub</code>-authenticatie vrij eenvoudig was, was de grootste uitdaging die we tegenkwamen het afhandelen en beheren van formulierinzendingen. Het formulier op de contactpagina stelt gebruikers in staat om vragen of projectvoorstellen in te dienen, en deze moesten efficiënt worden opgeslagen en beheerd. Om dit aan te pakken, ontwikkelde ik een robuust systeem dat de inzendingen sorteerde en categoriseerde op basis van hun inhoud, waardoor het voor het team van Digitale Innovatie gemakkelijker werd om ze te beheren en erop te reageren.</p>
<h2>Implementatie van de Server-side Code</h2>
<p>Ons team werkte samen aan de ontwikkeling van de server-side code voor het afhandelen van het inloggen en de inzending van formulieren. Voor het inlogsysteem implementeerde ik <code>GitHub</code>-authenticatie. Voor de inzending van formulieren maakte ik de eerder genoemde typen om gebruikersvragen en projectvoorstellen te beheren.</p>
<h2>Interface en Login Functionaliteit</h2>
<p>We werkten samen om een gebruikersvriendelijke interface voor de inlogpagina te creëren. Gebruikers konden inloggen met hun <code>GitHub</code>-accounts, wat zorgde voor een soepel en veilig inlogproces. Ook het formulier voor het indienen van vragen en projectvoorstellen was intuïtief ontworpen, met de nadruk op gebruiksgemak.</p>
<h2>Conclusie</h2>
<p>Door onze gezamenlijke inspanningen hebben we met succes een website ontwikkeld die niet alleen aan de oorspronkelijke vereisten voldeed, maar ook een gebruiksvriendelijk platform voor interactie bood. De reis had zijn aandeel in uitdagingen, maar deze werden overwonnen door zorgvuldige planning, selectie van geschikte technologieën en teamwork. De voltooiing van dit project heeft geleid tot een digitale aanwezigheid voor Digitale Innovatie, het bevorderen van betrokkenheid van de gemeenschap en het stimuleren van groei.</p>


Met de gehele groep van Digital Innovation hebben we een webapplicatie ontwikkeld om de digitale identiteit van onze studierichting vorm te geven.

Dinowebsite

<h2>The Need for a Digital Presence</h2>
<p>In an increasingly connected world, a digital presence has become crucial for organizations to engage with their community, showcase their work, and facilitate communication. Digital Innovation, despite its technological focus, initially lacked a web presence. This realization led to the inception of a project aimed at creating a website that would serve as a digital platform for the organization, enabling it to interact with its audience, share updates, and accept project proposals.</p>
<h2>Introduction</h2>
<p>The "Digital Innovation Website" project was a group endeavor aimed at creating a web presence for Digital Innovation. Our team shared responsibilities across different aspects of the project, and my primary role was to develop the server-side code for the login system and manage the submitted messages or project proposals.</p>
<h2>My Role in the Project</h2>
<p>As a member of the team, my main responsibility was to develop the backend functionality. This involved implementing the login system using GitHub authentication and handling the processing and storage of messages and project proposals submitted via the website's contact form. I was also involved in decision-making processes, contributing to discussions and helping to choose the technologies used in the project.</p>
<h2>Tools Selection and Requirement Analysis</h2>
<p>One of the first steps in the project was selecting the appropriate technologies. We evaluated several popular frontend development frameworks, including <code>NuxtJS</code>, <code>NextJS</code>, and <code>Hugo</code>. After considering the features and capabilities of each, we opted for <code>NextJS</code> with static site generation due to its high performance and flexibility.</p>
<p>Styling was another aspect where we had to make a choice. We evaluated <code>Sass</code>, <code>CSS</code>, and <code>TailwindCSS</code>, eventually selecting <code>TailwindCSS</code> for its dynamic nature and ease of use. It provided a consistent styling approach across different team members, fostering collaboration and maintaining consistency in our codebase.</p>
<p>For hosting, we considered <code>Vercel</code>, <code>Cloudflare</code>, and <code>Netlify</code>. We chose <code>Cloudflare</code> primarily due to personal preference and the fact that our other infrastructure was already hosted on Cloudflare, which made the integration smoother and more convenient.</p>
<p>Vooraleer al dit nuttig was, is er ook een analyse gemaakt van de vereisten. We performed this analysis by creating a use-case diagram.</p>
<p><img src="/projects/dinowebsite_datamodel.png" alt="Fig 1. Datamodel">
<em>Fig 1. Datamodel</em></p>
<h2>Data Modeling</h2>
<p>The form submissions were stored in Cloudflare's Key-Value (KV) storage. As the actual data was stored in Cloudflare KV, my role was to create the type definitions for these submissions. The main types defined were:</p>
<ul>
<li><code>ProjectData</code>: This type captured the details about a project, including filter, path, image, title, date, raw date, position, summary, content, and featured status.</li>
<li><code>InquiryData</code>: This type encapsulated the details of an inquiry, including an optional ID, the user's first name, last name, email, message, date, and an optional file attachment.</li>
<li><code>EventData</code>: This type represented the details of an event, including path, image, title, date, raw date, position, summary, and content.</li>
</ul>
<p>These types were essential in ensuring that the data stored in Cloudflare KV had a predictable and consistent structure.</p>
<h2>Challenges and Solutions</h2>
<p>While the implementation of the login system using <code>GitHub</code> authentication was fairly straightforward, the major challenge we faced was the handling and managing of form submissions. The form on the contact page allows users to submit queries or project proposals, and these needed to be efficiently stored and managed. Addressing this, I developed a robust system that sorted and categorized the submissions based on their content, making it easier for the Digital Innovation team to manage and respond to them.</p>
<h2>Server-side Code Implementation</h2>
<p>Our team collaborated to develop the server-side code handling the login and form submission processes. For the login system, I implemented <code>GitHub</code> authentication. For form submissions, I created the aforementioned types to manage user queries and project proposals.</p>
<h2>Interface and Login Functionality</h2>
<p>We worked together to create a user</p>
<p>-friendly interface for the login page. Users could log in using their <code>GitHub</code> accounts, ensuring a smooth and secure login process. The form for submitting queries and project proposals was also intuitively designed, emphasizing ease of use.</p>
<h2>Conclusion</h2>
<p>Through our collective efforts, we successfully developed a website that not only met the initial requirements but also provided a user-friendly platform for interaction. The journey had its share of challenges, but these were overcome through careful planning, selection of appropriate technologies, and teamwork. The completion of this project has resulted in a digital presence for Digital Innovation, facilitating community engagement and fostering growth.</p>


Together with the entire group of Digital Innovation, our team developed a web application to shape the digital identity of our field of study.

<h2>Algemeen</h2>
<p>'t Meppeler Assurantiekantoor is een assurantiekantoor gelegen te Meppeler (Nederland). <br>
Om hun professioneel merk kenbaar te maken wouden zij zichzelf ook digitaal in de kijker zetten.</p>
<h2>Mijn rol</h2>
<p>Mijn rol binnen dit project lag rond zowel het ontwerpen als het uitbouwen van deze website.
De functionaliteiten van dit project omvatte het volgende:</p>
<ul>
<li>Dynamisch contactformulier</li>
<li>Mailinglijst</li>
<li>Hostingvoorzieningen</li>
</ul>
<h2>Link</h2>
<p>De website is toegankelijk via de volgende link: <a href="https://www.tmak.nl">https://www.tmak.nl</a></p>


Een professionele online aanwezigheid creëren voor 't Meppeler Assurantiekantoor

TMAK

<h2>General</h2>
<p>'t Meppeler Assurantiekantoor is an insurance office located in Meppeler (Netherlands). <br>
To make their professional brand known, they wanted to put themselves in the spotlight digitally as well.</p>
<h2>My role</h2>
<p>For this project, my role was to design as well as build this website.
The functionalities consisted of the following:</p>
<ul>
<li>Dynamic contactform</li>
<li>Mailinglist</li>
<li>Hosting</li>
</ul>
<h2>Link</h2>
<p>The website is accessible through the following link: <a href="https://www.tmak.nl">https://www.tmak.nl</a> <em>(beware, it's in Dutch! :))</em></p>


Creating a professional online presence for 't Meppeler Assurantiekantoor

<h2>Algemeen</h2>
<p>Elk verhaal heeft een begin. Voor mij was dat mijn eigen portfolio-website. In feite is dit de website die je op dit moment bekijkt.</p>
<h2>Mijn rol</h2>
<p>De functionaliteiten bestaan op dit moment uit de volgende onderdelen:</p>
<ul>
<li>Beheer van projecten</li>
<li>Licht/donkere modus</li>
<li>Meertalige ondersteuning</li>
</ul>
<p>Deze site wordt statisch gehost. De projecten worden gegenereerd uit aangepaste markdown-bestanden die ik handmatig aan het repository toevoeg. Voor mijn persoonlijke gebruik is dit prima. Voor grotere projecten wordt echter een CMS aangeraden.</p>


Mijn projecten tot leven brengen met een dynamische portfoliowebsite

Portfolio

<h2>General</h2>
<p>Every story has its start. For me, this was my own portfolio site. In fact, that is the website you are currently browsing.</p>
<h2>My role</h2>
<p>The functionalities currently consist of the following:</p>
<ul>
<li>Manage projects</li>
<li>Light/Dark mode</li>
<li>Multilanguage support</li>
</ul>
<p>This site is static hosted. The projects are generated from customized markdown files that I manually add to the repository. For my personal use-case, this is fine. For bigger projects, a CMS is recommended.</p>


Bringing my projects to life with a dynamic portfolio site.

Websitebouwer en fulltime student. Dit is mijn plekje op het internet.

Hey, ik ben Syan!

Zoekresultaten

Twijfel niet om me te contacteren via één van de onderstaande kanalen!

Dit is waar ik uitschijn! Ik ben gespecialiseerd in het bouwen van websites die passen bij jouw merk. Dit betekent geen sjablonen, en geen gedoe. De mogelijkheden zijn eindeloos wanneer je je creativiteit aan het werk zet.

Mijn specialiteit

Coderen

Ontwerp

Hosting

Onderhoud

Vragenpunt 

Sjablonen, websitebouwers enzovoort zijn allemaal opties, maar er is één groot probleem... Het lijkt allemaal op mekaar! De mogelijkheden zijn eindig, en het uniek gevoel van deze sites is bijna onbestaand.

Waarom...

Mijn specialiteit

Mijn diensten