kevin/portfolio
1
0
Fork 0
Code

Add (untranslated) project pages for Japanese and Dutch languages.

Browse Source 
And include dates in existing English pages for sorting.
This commit is contained in:
Kevin Matsubara 2026-01-02 23:49:47 +01:00
parent 595c938ddd
commit dacb75e1ad
43 changed files with 3374 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
portfolio/pages/en/software/projects/attachment-module.md
View File

@ -3,6 +3,7 @@ logosub: "Technical Specialist, Automation"
language: "en"
title: "Attachment module"
year: "2017"
date: "2017-01-01"
---
Sometimes a project owner wants a feature implemented in their project that the developers somehow are unable to realize. The project was a website containing a form that customers would enter text data on. The project owner asked for a feature which allowed customers to attach files to this form.

1
portfolio/pages/en/software/projects/board-of-education-bot.md
View File

@ -3,6 +3,7 @@ logosub: "Avans TI student, year 1"
language: "en"
title: "Board of Education Bot"
year: "2012"
date: "2012-01-01"
---
The Board of Education (Ro)Bot is a development platform made by Parallax.

1
portfolio/pages/en/software/projects/configuration-automation.md
View File

@ -3,6 +3,7 @@ logosub: "Technical Specialist, Automation"
language: "en"
title: "Configuration Automation"
year: "2016"
date: "2016-01-01"
---
At <a href="https://www.hitachivantara.com/" target="_blank" rel="noopener noreferrer">Hitachi Vantara</a> I worked on automating a configuration process using <a href="https://www.python.org/" target="_blank" rel="noopener noreferrer">Python</a> and several external API.

1
portfolio/pages/en/software/projects/digital-experience-platform.md
View File

@ -3,6 +3,7 @@ logosub: "Backend developer"
language: "en"
title: "Digital Experience Platform"
year: "2023"
date: "2023-01-01"
---
A "Digital Experience Platform" is basically interactive software where data can be maintained, not much different from a regular application. But it's a marketing term, because software also needs to be sold. One such DXP I loved working on was for <a href="https://www.opple.eu/" target="_blank" rel="noopener noreferrer">OPPLE</a>. They are a brand of lighting products and have over 14000 different items.

1
portfolio/pages/en/software/projects/embedded-internet-radio.md
View File

@ -3,6 +3,7 @@ logosub: "Avans TI student, year 3"
language: "en"
title: "Embedded Internet Radio"
year: "2014"
date: "2014-01-01"
---
This project gave me the opportunity to work with the SIR120 internet radio made by the company StreamIT. The radio involved connecting to exiting internet streams and interfacing with the <a href="https://en.wikipedia.org/wiki/Liquid-crystal_display" target="_blank" rel="noopener noreferrer">LCD</a> and buttons on the device. The code was written in <a href="https://en.wikipedia.org/wiki/C_(programming_language)" target="_blank" rel="noopener noreferrer">C</a>.

1
portfolio/pages/en/software/projects/festival-simulator.md
View File

@ -3,6 +3,7 @@ logosub: "Avans TI student, year 2"
language: "en"
title: "Festival Simulator"
year: "2013"
date: "2013-01-01"
---
A team project in which a festival can be simulated to view how crowds of people behave. It was named: "SimFest-Tycoon". The user can build festivals, roads, snackbars and assign time periods when a band plays at a stage. The project was programmed in Java. A school project made by four people. The software allows users to build their own festival grounds. Snackbarstands, toilets, roads and stages can be placed to view how people form crowds and bottlenecks in certain areas. The user can also assign a band that plays for a certain time at a stage using a scheduler.

1
portfolio/pages/en/software/projects/ios-airports.md
View File

@ -3,6 +3,7 @@ logosub: "Avans TI student, year 4"
language: "en"
title: "iOS Airports"
year: "2015"
date: "2015-01-01"
---
A mobile iPhone application using a <a href="https://sqlite.org/" target="_blank" rel="noopener noreferrer">SQLite</a> database to display airports around the world. With this project I got to experience working with <a href="https://en.wikipedia.org/wiki/Xcode" target="_blank" rel="noopener noreferrer">Xcode</a> and <a href="https://en.wikipedia.org/wiki/Swift_(programming_language)" target="_blank" rel="noopener noreferrer">Swift</a> to develop iOS mobile applications.

1
portfolio/pages/en/software/projects/kanji-application.md
View File

@ -3,6 +3,7 @@ logosub: "Software developer"
language: "en"
title: "Kanji flashcard Android application"
year: "2018"
date: "2018-01-01"
---
In my free time I like to learn Japanese. I am married with someone from Japan, so being able talk with her parents in their own language is nice! You also pick up much of the culture through learning the language.

1
portfolio/pages/en/software/projects/metroid-shooter.md
View File

@ -3,6 +3,7 @@ logosub: "Avans TI student, year 2"
language: "en"
title: "Metroid Horizontal Shooter"
year: "2013"
date: "2013-01-01"
---
A simple Java 2D game using Nintendo's <a href="https://en.wikipedia.org/wiki/Metroid" target="_blank" rel="noopener noreferrer">Metroid</a> franchise sprites. This was a school project. This little game I made to practice programming with 2D graphics. It slowly gained more and more features like extra weapons and different levels, because I really enjoyed working on this project.

1
portfolio/pages/en/software/projects/raspberry-pi-jukebox.md
View File

@ -3,6 +3,7 @@ logosub: "Hardware tweaker"
language: "en"
title: "Raspberry Pi Jukebox"
year: "2016"
date: "2016-01-01"
---
I used a <a href="https://www.raspberrypi.org/" target="_blank" rel="noopener noreferrer">Raspberry Pi</a> to stream internet radio. <a href="https://www.python.org/" target="_blank" rel="noopener noreferrer">Python</a> and <a href="https://flask.palletsprojects.com/" target="_blank" rel="noopener noreferrer">Flask</a> were used to create a simple website interface that resided on the Raspberry Pi using the Apache web engine. This simple site had buttons to control the LEDs, the station to stream and to adjust the volume.

1
portfolio/pages/en/software/projects/swiv-for-pi.md
View File

@ -3,6 +3,7 @@ logosub: "Avans TI student, year 3"
language: "en"
title: "SWIV for Pi"
year: "2014"
date: "2014-01-01"
---
A simple vertical space shooter created for the <a href="https://www.raspberrypi.org/" target="_blank" rel="noopener noreferrer">Raspberry Pi</a>. The game is played with regular keyboard and a custom joystick setup. The game was programmed in Python using the <a href="https://www.pygame.org/" target="_blank" rel="noopener noreferrer">PyGame</a> library. This project was mainly to create small game and interface it with a custom hardware setup. The setup uses an analog joystick to control the player's helicopter. An <a href="https://en.wikipedia.org/wiki/Analog-to-digital_converter" target="_blank" rel="noopener noreferrer">ADC (Analog Digital Converter)</a> samples the analog data into digital data so that the Raspberry Pi (version 1, type B) could parse the data.

1
portfolio/pages/en/software/projects/teslamaze.md
View File

@ -3,6 +3,7 @@ logosub: "Avans TI student, year 1"
language: "en"
title: "TeslaMaze"
year: "2012"
date: "2012-01-01"
---
## Gaming, Woodcraft and Teamwork!

1
portfolio/pages/en/software/projects/wifi-extension-board.md
View File

@ -3,6 +3,7 @@ logosub: "Avans TI internship"
language: "en"
title: "Wi-Fi extension board"
year: "2014"
date: "2014-01-01"
---
This project was part of my internship at Dazzletek in Breda. They no longer exist and the name "Dazzletek" now seems to belong to an American company. They created intelligent lighting control solutions and were part of Vitelec. My assignment was to create a prototype that would allow a device to communicate over <a href="https://en.wikipedia.org/wiki/Wi-Fi" target="_blank" rel="noopener noreferrer">Wi-Fi</a>. I worked with a <a href="https://en.wikipedia.org/wiki/PIC_microcontrollers" target="_blank" rel="noopener noreferrer">PIC microcontroller</a>.

1
portfolio/pages/en/software/projects/windows-10-cookbook.md
View File

@ -3,6 +3,7 @@ logosub: "Avans TI student, year 4"
language: "en"
title: "Windows 10 Cookbook"
year: "2015"
date: "2015-01-01"
---
This <a href="https://learn.microsoft.com/en-us/windows/uwp/get-started/universal-application-platform-guide" target="_blank" rel="noopener noreferrer">UWP</a> application was built with <a href="https://docs.microsoft.com/en-us/dotnet/csharp/" target="_blank" rel="noopener noreferrer">C#</a> and <a href="https://learn.microsoft.com/en-us/dotnet/desktop/wpf/xaml/?view=netdesktop-6.0" target="_blank" rel="noopener noreferrer">XAML</a>.

49
portfolio/pages/jp/software/projects/attachment-module.md Normal file
View File

@ -0,0 +1,49 @@
---
logosub: "Technical Specialist, Automation"
language: "jp"
title: "Attachment module"
year: "2017"
date: "2017-01-01"
---
<div class="alert alert-warning" role="alert">
<div>
<span>申し訳ありませんが、このページはまだ日本語に翻訳されていません。</span>
</div>
</div>
Sometimes a project owner wants a feature implemented in their project that the developers somehow are unable to realize. The project was a website containing a form that customers would enter text data on. The project owner asked for a feature which allowed customers to attach files to this form.
As a "temporary" solution, I suggested creating a stand-alone server that would handle file uploads that would be linked to the ID number of the form. This consisted of 2 servers. One server would be a simple web interface, the other a database server that hosted a simple API.
Both servers were VMs running <a href="https://en.wikipedia.org/wiki/Red_Hat_Enterprise_Linux" target="_blank" rel="noopener noreferrer">RHEL</a>.
The web server used the <a href="https://en.wikipedia.org/wiki/Nginx" target="_blank" rel="noopener noreferrer">Nginx</a> engine and the <a href="https://en.wikipedia.org/wiki/Django_(web_framework)" target="_blank" rel="noopener noreferrer">Django</a> framework. Python handles the HTTP requests with <a href="https://en.wikipedia.org/wiki/Gunicorn" target="_blank" rel="noopener noreferrer">Gunicorn</a>, a <a href="https://en.wikipedia.org/wiki/Web_Server_Gateway_Interface" target="_blank" rel="noopener noreferrer">WSGI</a> gateway.
The database server used a <a href="https://en.wikipedia.org/wiki/MySQL" target="_blank" rel="noopener noreferrer">MySQL</a> server to host uploaded file data. To expose this data, <a href="https://flask-restful.readthedocs.io/" target="_blank" rel="noopener noreferrer">Flask RESTful</a> was used to serve a simple API.
This was the first separate project I created for the company, so I set up a <a href="https://en.wikipedia.org/wiki/Web_Server_Gateway_Interface" target="_blank" rel="noopener noreferrer">GitLab</a> server for version control.
## Workflow
* The website hosting the forms, would serve a hyperlink to the "attachment module", along with the form's ID.
* The user is redirected to the website with a simple input field and browse button where a file can be uploaded.
* The file is validated by type, size and upload time.
* The file is copied to the database server.
* The file is also cached for 2 weeks on the web server, for quicker access.
* The database server creates a database entry.
* A link to the file is created for access on the website.
* After a file is uploaded, someone else will want to access it.
* The user accesses the website and clicks on the link with the file name.
* If the file is cached on the web server, then this file is opened.
* If the file is not cached, the web server downloads the file from the database server and then opens it.
## Lessons learnt
The project owner did not want the users to separately log in to the web server of the attachment module. So a big security issue is that anyone with the link, can access uploaded files. At the time this was agreed to be a "temporary" solution. The project was deployed in 2017 and in 2021 this project was still running though. After all, the business must go on and if the problem's symptoms seems fixed, why bother with it further...
Because other users could access other uploaded files using the right link, it was decided that users could only upload and never delete any files.
A big learning point for me was that not to compromise security, even for projects that are considered temporary. A problem never occurred. This compromise caused silly decisions to not allow users to delete their own files. I will defend my standpoint much more and use this project as an example.
The actual problem here though, is why the other developers were not able to create a simple file upload feature.

128
portfolio/pages/jp/software/projects/board-of-education-bot.md Normal file
View File

@ -0,0 +1,128 @@
---
logosub: "Avans TI student, year 1"
language: "jp"
title: "Board of Education Bot"
year: "2012"
date: "2012-01-01"
---
<div class="alert alert-warning" role="alert">
<div>
<span>申し訳ありませんが、このページはまだ日本語に翻訳されていません。</span>
</div>
</div>
The Board of Education (Ro)Bot is a development platform made by Parallax.
This school project was mainly to learn about basic electronics and programming for embedded devices. The BoeBot was created by Parallax and uses the Javelin stamp processor. This processor accepts the high-level programming language Java to control different pieces of hardware on the robot. The robot started as a simple prototype board with two servo motors. Sensors and actuators were later placed on the breadboard to allow sensory input and output. We created a GUI named "Robot at Work" which allowed the robot to follow a path using QPI linefollowers. The robot could also be controlled with an IR remote control.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/board-of-education-bot/boebot-classdiagram-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/board-of-education-bot/boebot-classdiagram-w480.webp"
/>
<img
src="/images/software/projects/board-of-education-bot/boebot-classdiagram-w800.webp"
alt="class diagram"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/board-of-education-bot/boebot-classdiagram.webp">
Class diagram
</a>
</figcaption>
</figure>
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/board-of-education-bot/javelin-w240.webp"
/>
<img
src="/images/software/projects/board-of-education-bot/javelin.webp"
alt="class diagram"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/board-of-education-bot/javelin.webp">
Javelin board
</a>
</figcaption>
</figure>
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/board-of-education-bot/boebot-gui-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/board-of-education-bot/boebot-gui-w480.webp"
/>
<img
src="/images/software/projects/board-of-education-bot/boebot-gui.webp"
alt="class diagram"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/board-of-education-bot/boebot-gui.webp">
GUI design
</a>
</figcaption>
</figure>
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/board-of-education-bot/robot2-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/board-of-education-bot/robot2-w480.webp"
/>
<img
src="/images/software/projects/board-of-education-bot/robot2.webp"
alt="class diagram"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/board-of-education-bot/robot2.webp">
Robot top
</a>
</figcaption>
</figure>
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/board-of-education-bot/robot3-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/board-of-education-bot/robot3-w480.webp"
/>
<img
src="/images/software/projects/board-of-education-bot/robot3.webp"
alt="class diagram"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/board-of-education-bot/robot3.webp">
Robot side
</a>
</figcaption>
</figure>

176
portfolio/pages/jp/software/projects/configuration-automation.md Normal file
View File

@ -0,0 +1,176 @@
---
logosub: "Technical Specialist, Automation"
language: "jp"
title: "Configuration Automation"
year: "2016"
date: "2016-01-01"
---
<div class="alert alert-warning" role="alert">
<div>
<span>申し訳ありませんが、このページはまだ日本語に翻訳されていません。</span>
</div>
</div>
At <a href="https://www.hitachivantara.com/" target="_blank" rel="noopener noreferrer">Hitachi Vantara</a> I worked on automating a configuration process using <a href="https://www.python.org/" target="_blank" rel="noopener noreferrer">Python</a> and several external API.
Products would be picked, assembled, configured and finally packaged for shipping at the distribution centre where I collaborated on this project. Configuration happend by connecting a Windows laptop to the product and apply settings. This related to the product's operating system, network and storage settings.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/hitachi/cto-config-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/hitachi/cto-config-w480.webp"
/>
<img
src="/images/software/projects/hitachi/cto-config-w800.webp"
alt="CTO configuration"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/hitachi/cto-config-w800.webp">
CTO configuration
</a>
</figcaption>
</figure>
---
## Development
This project started as a locally run Python 2 script, to only automate very specific settings. It later moved to USB drives and eventually to a VM on a network.
It eventually grew to support multiple product lines and at this moment I joined the other programmer to further extend this software after my internship.
Here I learnt working properly with Git and designing software architecture. I also learnt how to create automation by interfacing by GUI automation with <a href="https://www.autohotkey.com/" target="_blank" rel="noopener noreferrer">AutoHotkey</a> and combine multiple APIs to achieve results.
The automation software also used other resources like <a href="https://ttssh2.osdn.jp/index.html.en" target="_blank" rel="noopener noreferrer">Tera Term</a> scripts.
Another fun thing I added was an <a href="https://www.raritan.com/products/power/power-distribution" target="_blank" rel="noopener noreferrer">iPDU</a> where Python could safely powercycle 230 Volt AC power consumers. This was useful to power down devices when the distribution center was not operating at night to reduce costs.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/hitachi/cto-laptop-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/hitachi/cto-laptop-w480.webp"
/>
<img
src="/images/software/projects/hitachi/cto-laptop-w800.webp"
alt="CTO laptop"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/hitachi/cto-laptop-w800.webp">
CTO laptop
</a>
</figcaption>
</figure>
---
## Deployment
Creating the release of this software had to be done by running a batch script to create a bundled set of Python files. These files were then uploaded to the VM located in a European distribution center in the Netherlands. This VM is then used to run the software from on a local network on which all configuration laptops were connected to. A WinSCP script would then sync the contents of all VM's in distribution centres located in Singapore, United States and China in 24 hours.
A script (stub) on the configuration laptop would connect to the VM and run Python locally to receive instructions. The technician selects the product through a CLI menu and automated configuration starts.
Dedicated storage managing software had to be installed, so communicating with the Japanese supplier was always important. This software and other assets were separately deployed to create a stable configuration process.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/hitachi/storage-chassis-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/hitachi/storage-chassis-w480.webp"
/>
<img
src="/images/software/projects/hitachi/storage-chassis-w800.webp"
alt="Storage Chassis"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/hitachi/storage-chassis-w800.webp">
Storage Chassis
</a>
</figcaption>
</figure>
---
## Feedback
The application generated log files with each configuration and then upload these back to the VM after configuration was complete or halted. These logs were sorted under product name and the order number. But quite often, I found it very productive to go to the configuration area and simply talk with the technician to figure out what went wrong. Depending on the severity of the problem, it would get documented in Gitlab issues. On a weekly basis, issues would get assigned among developers.
Communication is always important and essential for proper DevOps. The people who operate and configure these machines daily often know a lot more details that can be used to optimize the software. But be certain to make them realize that they also contribute to profit, rather than believing their job may become obsolete.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/hitachi/hitachi-banner-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/hitachi/hitachi-banner-w480.webp"
/>
<img
src="/images/software/projects/hitachi/hitachi-banner-w800.webp"
alt="HiCEF banner"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/hitachi/hitachi-banner-w800.webp">
HiCEF banner
</a>
</figcaption>
</figure>
---
## Lessons learn
Being a programmer, I was mostly concerned with the software. But it requires hardware to run on. When the software does not work because of differences in the platform the software run on, what is there to do? I eventually started managing around 40 configuration laptops, using <a href="https://clonezilla.org/" target="_blank" rel="noopener noreferrer">Clonezilla</a> to create identical machines.
Docker would have been an ideal solution, but I did not know much of it at the time.
Also my many points of learning in git merges, creating release tags, deploying broken versions of the software and immediately needing to patch with hotfixes, all contributed to my learning of software development.
Automation demands an equalized platform to run on and once it is deployed, hundreds of products will be making use of it. So, thinking something over and propely design and architecture software is much more time-saving than quickly meeting deadlines.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/hitachi/many-laptops-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/hitachi/many-laptops-w480.webp"
/>
<img
src="/images/software/projects/hitachi/many-laptops-w800.webp"
alt="Many laptops"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/hitachi/many-laptops-w800.webp">
Many laptops
</a>
</figcaption>
</figure>

56
portfolio/pages/jp/software/projects/digital-experience-platform.md Normal file
View File

@ -0,0 +1,56 @@
---
logosub: "Backend developer"
language: "jp"
title: "Digital Experience Platform"
year: "2023"
date: "2023-01-01"
---
<div class="alert alert-warning" role="alert">
<div>
<span>申し訳ありませんが、このページはまだ日本語に翻訳されていません。</span>
</div>
</div>
A "Digital Experience Platform" is basically interactive software where data can be maintained, not much different from a regular application. But it's a marketing term, because software also needs to be sold. One such DXP I loved working on was for <a href="https://www.opple.eu/" target="_blank" rel="noopener noreferrer">OPPLE</a>. They are a brand of lighting products and have over 14000 different items.
My contributions were taking ownership of their catalog generator tool and maintaining the data of their products in <a href="https://www.drupal.org/" target="_blank" rel="noopener noreferrer">Drupal</a> on their website.
## OPPLE Catalog Generator
All the data was supplied through an external API by <a href="https://www.compano.com/" target="_blank" rel="noopener noreferrer">Compano</a> and through an uploaded XML file. This data had to be parsed and converged into a logical structure so that products and product families were matched along with their features, photographs, accessoires, dimensional drawings, sensor diagrams and more. And all data is <a href="https://en.wikipedia.org/wiki/Multilingualism" target="_blank" rel="noopener noreferrer">multilingual</a>. And of course data had to be exchanged through excel files for pricelists and tender texts. Data was used interchangably between different tools and websites.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/opple/opple-catalog-w240.webp"
/>
<img
src="/images/software/projects/opple/opple-catalog.webp"
alt="OPPLE product catalog"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/opple/opple-catalog.webp">
OPPLE product catalog
</a>
</figcaption>
</figure>
The catalog generator makes use of the Drupal platform as an intranet portal where thousands of PDF's could be automatically generated in a single batch. The customer only has to alter the data and the layouts and appropriate sections appear.
## Legacy code
This project was handed to me as a <a href="https://en.wikipedia.org/wiki/Monolithic_application" target="_blank" rel="noopener noreferrer">monolithic source</a>, with only 1 PHP file containing all the rendering logic and handling exceptions (as in, many products had their own unique, exceptional attributes). This was a project that had outgrown itself and was hard to scale further due to the current structure. I had to improve the code base, while retaining the legacy functions. But because everything was so tightly coupled I had to make sure a change did not break functionality elsewhere. The key is to write new code and provide "safety nets" for older code.
A common misconception is to think by creating quick code, is easy gain. Not much effort, just copy and paste the existing logic and adjust it a bit. Then put it in the same file, no need to document it. But by building up <a href="https://en.wikipedia.org/wiki/Technical_debt" target="_blank" rel="noopener noreferrer">Technical Dept</a>, you will either leave this code behind or you will forget how everything works. Making code scalable, is essential. Even for "small" or "temporary" projects. Do not take shortcuts, thinking it will save time or meet the deadline.
## Improvement
Restructuring code built as such requires mostly patience. You cannot instantly restart everything, as this tool is used in production. You cannot create a new architecture complete with diagrams, there is currently no time. It is not the only project I work on, there are 20 other projects that also require attention. Instead, I started by moving functions around every time I worked on a new feature for the tool. Dedicating existing functions to separate module files was the start. Creating object-oriented code for new features was the next step. Applying unit tests came next. As long as a new feature request did not exceed in time, it could be slowly prepared to grow by having prework done every time.
Eventually, it became a tool with composed logic, making future maintenance and feature requests a lot more simple.
Moving forward with a structured tool, I am proud to have collaborated on this project and improved upon it. But when I was no longer working on this project, it got outsourced or abandoned. To me, this really was a project that was handed down from developer to developer and code just got copied and pasted. There were so many lines of code confined within if-statements, a lot of duplicate code. I am not surprised this project was abandoned and sadly I put many hours of unpaid work into this project to make it better, but it also became complexer. Again, to me it means that taking time beforehand to desing and architecture the software would make more of a difference. Not, here is the code, add this feature, you have 5 hours according to Jira.

94
portfolio/pages/jp/software/projects/embedded-internet-radio.md Normal file
View File

@ -0,0 +1,94 @@
---
logosub: "Avans TI student, year 3"
language: "jp"
title: "Embedded Internet Radio"
year: "2014"
date: "2014-01-01"
---
<div class="alert alert-warning" role="alert">
<div>
<span>申し訳ありませんが、このページはまだ日本語に翻訳されていません。</span>
</div>
</div>
This project gave me the opportunity to work with the SIR120 internet radio made by the company StreamIT. The radio involved connecting to exiting internet streams and interfacing with the <a href="https://en.wikipedia.org/wiki/Liquid-crystal_display" target="_blank" rel="noopener noreferrer">LCD</a> and buttons on the device. The code was written in <a href="https://en.wikipedia.org/wiki/C_(programming_language)" target="_blank" rel="noopener noreferrer">C</a>.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/embedded-internet-radio/front-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/embedded-internet-radio/front-w480.webp"
/>
<img
src="/images/software/projects/embedded-internet-radio/front.webp"
alt="Radio front"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/embedded-internet-radio/front.webp">
Radio front
</a>
</figcaption>
</figure>
## Development
The radio had an existing operating system called <a href="https://en.wikipedia.org/wiki/Ethernut" target="_blank" rel="noopener noreferrer">Nut/OS</a>, an open source OS. Nut/OS provided the TCP/IP stack we required to connect the device to the internet. The radio was able to play a select number of internet streams. The user could read the stream channel on the LCD and use the buttons to navigate between them.
This project often had code overhauls because our code kept moving towards a more <a href="https://en.wikipedia.org/wiki/Object-oriented_programming" target="_blank" rel="noopener noreferrer">OOP</a> approach using structs rather than large chunks of produral code.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/embedded-internet-radio/inside-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/embedded-internet-radio/inside-w480.webp"
/>
<img
src="/images/software/projects/embedded-internet-radio/inside.webp"
alt="Radio insides"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/embedded-internet-radio/inside.webp">
Radio insides
</a>
</figcaption>
</figure>
## Design
A simple flowchart was created to show how the user could navigate through the menu.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/embedded-internet-radio/flowchart-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/embedded-internet-radio/flowchart-w480.webp"
/>
<img
src="/images/software/projects/embedded-internet-radio/flowchart-w800.webp"
alt="Radio insides"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/embedded-internet-radio/flowchart.webp">
Menu flowchart
</a>
</figcaption>
</figure>

190
portfolio/pages/jp/software/projects/festival-simulator.md Normal file
View File

@ -0,0 +1,190 @@
---
logosub: "Avans TI student, year 2"
language: "jp"
title: "Festival Simulator"
year: "2013"
date: "2013-01-01"
---
<div class="alert alert-warning" role="alert">
<div>
<span>申し訳ありませんが、このページはまだ日本語に翻訳されていません。</span>
</div>
</div>
A team project in which a festival can be simulated to view how crowds of people behave. It was named: "SimFest-Tycoon". The user can build festivals, roads, snackbars and assign time periods when a band plays at a stage. The project was programmed in Java. A school project made by four people. The software allows users to build their own festival grounds. Snackbarstands, toilets, roads and stages can be placed to view how people form crowds and bottlenecks in certain areas. The user can also assign a band that plays for a certain time at a stage using a scheduler.
The band has a timeperiod and popularity, which affects the amount of people visiting that stage. The goal of this software is create an overview of potential bottlenecks and overcrowded areas.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/festival-simulator/sft2-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/festival-simulator/sft2-w480.webp"
/>
<img
src="/images/software/projects/festival-simulator/sft2-w800.webp"
alt="Screenshot festival simulator"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/festival-simulator/sft2.webp">
Screenshot festival simulator
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/festival-simulator/sft4-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/festival-simulator/sft4-w480.webp"
/>
<img
src="/images/software/projects/festival-simulator/sft4-w800.webp"
alt="Screenshot festival simulator"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/festival-simulator/sft4.webp">
Screenshot festival simulator
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/festival-simulator/sft5-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/festival-simulator/sft5-w480.webp"
/>
<img
src="/images/software/projects/festival-simulator/sft5-w800.webp"
alt="Screenshot festival simulator"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/festival-simulator/sft5.webp">
Screenshot festival simulator
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/festival-simulator/sft7-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/festival-simulator/sft7-w480.webp"
/>
<img
src="/images/software/projects/festival-simulator/sft7-w800.webp"
alt="Screenshot festival simulator"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/festival-simulator/sft7.webp">
Screenshot festival simulator
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/festival-simulator/sft8-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/festival-simulator/sft8-w480.webp"
/>
<img
src="/images/software/projects/festival-simulator/sft8-w800.webp"
alt="Screenshot festival simulator"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/festival-simulator/sft8.webp">
Screenshot festival simulator
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/festival-simulator/sft9-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/festival-simulator/sft9-w480.webp"
/>
<img
src="/images/software/projects/festival-simulator/sft9-w800.webp"
alt="Screenshot festival simulator"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/festival-simulator/sft9.webp">
Screenshot festival simulator
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/festival-simulator/sft10-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/festival-simulator/sft10-w480.webp"
/>
<img
src="/images/software/projects/festival-simulator/sft10-w800.webp"
alt="Screenshot festival simulator"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/festival-simulator/sft10.webp">
Screenshot festival simulator
</a>
</figcaption>
</figure>

65
portfolio/pages/jp/software/projects/ios-airports.md Normal file
View File

@ -0,0 +1,65 @@
---
logosub: "Avans TI student, year 4"
language: "jp"
title: "iOS Airports"
year: "2015"
date: "2015-01-01"
---
<div class="alert alert-warning" role="alert">
<div>
<span>申し訳ありませんが、このページはまだ日本語に翻訳されていません。</span>
</div>
</div>
A mobile iPhone application using a <a href="https://sqlite.org/" target="_blank" rel="noopener noreferrer">SQLite</a> database to display airports around the world. With this project I got to experience working with <a href="https://en.wikipedia.org/wiki/Xcode" target="_blank" rel="noopener noreferrer">Xcode</a> and <a href="https://en.wikipedia.org/wiki/Swift_(programming_language)" target="_blank" rel="noopener noreferrer">Swift</a> to develop iOS mobile applications.
Source code can be seen on my Github page: <a href="https://github.com/PA4KEV/iOS-Airports" target="_blank" rel="noopener noreferrer">github.com</a>
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/ios-airports/screenshot-1-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/ios-airports/screenshot-1-w480.webp"
/>
<img
src="/images/software/projects/ios-airports/screenshot-1.webp"
alt="Radio front"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/ios-airports/screenshot-1.webp">
Screenshots
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/ios-airports/screenshot-2-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/ios-airports/screenshot-2-w480.webp"
/>
<img
src="/images/software/projects/ios-airports/screenshot-2.webp"
alt="Radio front"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/ios-airports/screenshot-2.webp">
Screenshots
</a>
</figcaption>
</figure>

109
portfolio/pages/jp/software/projects/kanji-application.md Normal file
View File

@ -0,0 +1,109 @@
---
logosub: "Software developer"
language: "jp"
title: "Kanji flashcard Android application"
year: "2018"
date: "2018-01-01"
---
<div class="alert alert-warning" role="alert">
<div>
<span>申し訳ありませんが、このページはまだ日本語に翻訳されていません。</span>
</div>
</div>
In my free time I like to learn Japanese. I am married with someone from Japan, so being able talk with her parents in their own language is nice! You also pick up much of the culture through learning the language.
I wanted a personalized way to learn <a href="https://en.wikipedia.org/wiki/Kanji" target="_blank" rel="noopener noreferrer">Kanji</a>. I keep track of the words I want to learn in a small <a href="https://sqlite.org/" target="_blank" rel="noopener noreferrer">SQLite</a> database. If I come across a Japanese word, I can enter it in the database myself, because many language learning applications give you a preset of words, usually of the <a href="https://en.wikipedia.org/wiki/J%C5%8Dy%C5%8D_kanji" target="_blank" rel="noopener noreferrer">jōyō Kanji</a>. The database can also be exported and imported to a file from the application.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/kanji-application/logo-w240.webp"
/>
<img
src="/images/software/projects/kanji-application/logo.webp"
alt="Application logo"
class="img-fluid"
/>
</figure>
---
## Tools
<a href="https://www.java.com" target="_blank" rel="noopener noreferrer">Java</a> and <a href="https://en.wikipedia.org/wiki/Android_Studio" target="_blank" rel="noopener noreferrer">Android studio</a> were used to create this application.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/kanji-application/screenshot-1-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/kanji-application/screenshot-1-w480.webp"
/>
<img
src="/images/software/projects/kanji-application/screenshot-1.webp"
alt="Screenshots flash card"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/kanji-application/screenshot-1.webp">
Screenshots flash card
</a>
</figcaption>
</figure>
## Customizability
Through user input, the difficulty of a Kanji is determined. A Kanji that is guessed wrong often will increase in difficulty and can be asked more frequently. Questioning can be done based on time and certain aspects of the Kanji can be shown or hidden. I added a dark- and light mode and the sizes of the characters can be changed.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/kanji-application/screenshot-2-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/kanji-application/screenshot-2-w480.webp"
/>
<img
src="/images/software/projects/kanji-application/screenshot-2.webp"
alt="Screenshots settings"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/kanji-application/screenshot-2.webp">
Screenshots settings
</a>
</figcaption>
</figure>
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/kanji-application/screenshot-3-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/kanji-application/screenshot-3-w480.webp"
/>
<img
src="/images/software/projects/kanji-application/screenshot-3.webp"
alt="Screenshots user input"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/kanji-application/screenshot-3.webp">
Screenshots user input
</a>
</figcaption>
</figure>

140
portfolio/pages/jp/software/projects/metroid-shooter.md Normal file
View File

@ -0,0 +1,140 @@
---
logosub: "Avans TI student, year 2"
language: "jp"
title: "Metroid Horizontal Shooter"
year: "2013"
date: "2013-01-01"
---
<div class="alert alert-warning" role="alert">
<div>
<span>申し訳ありませんが、このページはまだ日本語に翻訳されていません。</span>
</div>
</div>
A simple Java 2D game using Nintendo's <a href="https://en.wikipedia.org/wiki/Metroid" target="_blank" rel="noopener noreferrer">Metroid</a> franchise sprites. This was a school project. This little game I made to practice programming with 2D graphics. It slowly gained more and more features like extra weapons and different levels, because I really enjoyed working on this project.
The point of this project was to learn sprite rendering and moving it on X- and Y-axes on the screen. It does not make use of a predefined game engine.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/metroid/MetroidScreen1-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/metroid/MetroidScreen1-w480.webp"
/>
<img
src="/images/software/projects/metroid/MetroidScreen1-w800.webp"
alt="Screenshot Bull enemies"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/metroid/MetroidScreen1.webp">
Screenshot Bull enemies
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/metroid/MetroidScreen2-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/metroid/MetroidScreen2-w480.webp"
/>
<img
src="/images/software/projects/metroid/MetroidScreen2-w800.webp"
alt="Screenshot Kihunter enemies"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/metroid/MetroidScreen2.webp">
Screenshot Kihunter enemies
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/metroid/MetroidScreen3-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/metroid/MetroidScreen3-w480.webp"
/>
<img
src="/images/software/projects/metroid/MetroidScreen3-w800.webp"
alt="Screenshot player equipment"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/metroid/MetroidScreen3.webp">
Screenshot player equipment
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/metroid/MetroidScreen4-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/metroid/MetroidScreen4-w480.webp"
/>
<img
src="/images/software/projects/metroid/MetroidScreen4-w800.webp"
alt="Screenshot level selection"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/metroid/MetroidScreen4.webp">
Screenshot level selection
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/metroid/MetroidScreen5-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/metroid/MetroidScreen5-w480.webp"
/>
<img
src="/images/software/projects/metroid/MetroidScreen5-w800.webp"
alt="Screenshot Gamet enemies"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/metroid/MetroidScreen5.webp">
Screenshot Gamet enemies
</a>
</figcaption>
</figure>

117
portfolio/pages/jp/software/projects/raspberry-pi-jukebox.md Normal file
View File

@ -0,0 +1,117 @@
---
logosub: "Hardware tweaker"
language: "jp"
title: "Raspberry Pi Jukebox"
year: "2016"
date: "2016-01-01"
---
<div class="alert alert-warning" role="alert">
<div>
<span>申し訳ありませんが、このページはまだ日本語に翻訳されていません。</span>
</div>
</div>
I used a <a href="https://www.raspberrypi.org/" target="_blank" rel="noopener noreferrer">Raspberry Pi</a> to stream internet radio. <a href="https://www.python.org/" target="_blank" rel="noopener noreferrer">Python</a> and <a href="https://flask.palletsprojects.com/" target="_blank" rel="noopener noreferrer">Flask</a> were used to create a simple website interface that resided on the Raspberry Pi using the Apache web engine. This simple site had buttons to control the LEDs, the station to stream and to adjust the volume.
The LEDs were controlled using an <a href="https://www.arduino.cc/" target="_blank" rel="noopener noreferrer">Arduino</a> and a <a href="https://www.analog.com/media/en/technical-documentation/data-sheets/max7219-max7221.pdf" target="_blank" rel="noopener noreferrer">Maxim MAX7219 IC</a>.
I posted a tutorial about this long ago on Instructables: <a href="https://www.instructables.com/Raspberry-Pi-Internet-Radio-With-Flask/" target="_blank" rel="noopener noreferrer">instructables.com/Raspberry-Pi-Internet-Radio-With-Flask</a>
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/raspberry-pi-jukebox/disassembly-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/raspberry-pi-jukebox/disassembly-w480.webp"
/>
<img
src="/images/software/projects/raspberry-pi-jukebox/disassembly.webp"
alt="Jukebox disassembly"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/raspberry-pi-jukebox/disassembly.webp">
Jukebox disassembly
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/raspberry-pi-jukebox/old-interiour-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/raspberry-pi-jukebox/old-interiour-w480.webp"
/>
<img
src="/images/software/projects/raspberry-pi-jukebox/old-interiour.webp"
alt="Jukebox old interiour"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/raspberry-pi-jukebox/old-interiour.webp">
Jukebox old interiour
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/raspberry-pi-jukebox/led-matrix-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/raspberry-pi-jukebox/led-matrix-w480.webp"
/>
<img
src="/images/software/projects/raspberry-pi-jukebox/led-matrix.webp"
alt="Jukebox LED matrix"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/raspberry-pi-jukebox/led-matrix.webp">
Jukebox LED matrix
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/raspberry-pi-jukebox/fully-assembled-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/raspberry-pi-jukebox/fully-assembled-w480.webp"
/>
<img
src="/images/software/projects/raspberry-pi-jukebox/fully-assembled.webp"
alt="Jukebox fully assembled"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/raspberry-pi-jukebox/fully-assembled.webp">
Jukebox fully assembled
</a>
</figcaption>
</figure>

97
portfolio/pages/jp/software/projects/swiv-for-pi.md Normal file
View File

@ -0,0 +1,97 @@
---
logosub: "Avans TI student, year 3"
language: "jp"
title: "SWIV for Pi"
year: "2014"
date: "2014-01-01"
---
<div class="alert alert-warning" role="alert">
<div>
<span>申し訳ありませんが、このページはまだ日本語に翻訳されていません。</span>
</div>
</div>
A simple vertical space shooter created for the <a href="https://www.raspberrypi.org/" target="_blank" rel="noopener noreferrer">Raspberry Pi</a>. The game is played with regular keyboard and a custom joystick setup. The game was programmed in Python using the <a href="https://www.pygame.org/" target="_blank" rel="noopener noreferrer">PyGame</a> library. This project was mainly to create small game and interface it with a custom hardware setup. The setup uses an analog joystick to control the player's helicopter. An <a href="https://en.wikipedia.org/wiki/Analog-to-digital_converter" target="_blank" rel="noopener noreferrer">ADC (Analog Digital Converter)</a> samples the analog data into digital data so that the Raspberry Pi (version 1, type B) could parse the data.
<div class="d-flex justify-content-center">
<img src="/images/software/projects/swiv-for-pi/title.webp" alt="S W I V for Pi title screen"/>
<img src="/images/software/projects/swiv-for-pi/screenshot.webp" alt="S W I V for Pi screenshot"/>
</div>
## Hardware
Simple components were placed onto a breadboard and the joystick's analog resistive data would be converted into digital data. This data would be read by the GPIO pins and used to determine how the helicopter moves over the X- and Y-axis. To help with understanding electronic logic, an oscilloscope was used.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/swiv-for-pi/breadboard-top-view-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/swiv-for-pi/breadboard-top-view-w480.webp"
/>
<img
src="/images/software/projects/swiv-for-pi/breadboard-top-view-w800.webp"
alt="Breadboard with components top view"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/swiv-for-pi/breadboard-top-view-w800.webp">
Breadboard with components top view
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/swiv-for-pi/breadboard-front-view-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/swiv-for-pi/breadboard-front-view-w480.webp"
/>
<img
src="/images/software/projects/swiv-for-pi/breadboard-front-view-w800.webp"
alt="Breadboard with components front view"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/swiv-for-pi/breadboard-front-view.webp">
Breadboard with components front view
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/swiv-for-pi/oscilloscope-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/swiv-for-pi/oscilloscope-w480.webp"
/>
<img
src="/images/software/projects/swiv-for-pi/oscilloscope-w800.webp"
alt="Breadboard with components front view"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/swiv-for-pi/oscilloscope.webp">
Oscilloscope
</a>
</figcaption>
</figure>

256
portfolio/pages/jp/software/projects/teslamaze.md Normal file
View File

@ -0,0 +1,256 @@
---
logosub: "Avans TI student, year 1"
language: "jp"
title: "TeslaMaze"
year: "2012"
date: "2012-01-01"
---
<div class="alert alert-warning" role="alert">
<div>
<span>申し訳ありませんが、このページはまだ日本語に翻訳されていません。</span>
</div>
</div>
## Gaming, Woodcraft and Teamwork!
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/teslamaze/teslamaze-logo-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/teslamaze/teslamaze-logo-w480.webp"
/>
<img
src="/images/software/projects/teslamaze/teslamaze-logo.webp"
alt="TeslaMaze logo"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/teslamaze/teslamaze-logo.webp">
TeslaMaze logo
</a>
</figcaption>
</figure>
---
A team project where the player must align pipes correctly using a Wii remote. The ingame goals would then have effect on a custom built wooden tower. The game was programmed in <a href="https://www.java.com" target="_blank" rel="noopener noreferrer">Java</a>.
This project was made by four people working on both software and hardware. The game uses the <a href="https://en.wikipedia.org/wiki/Wii" target="_blank" rel="noopener noreferrer">Nintendo Wii remote</a> to get input from the player.
## Gameplay
The player must align pipes from the fictional tesla coil to "relay electricity" to a specific point in the game. The game communicates to the <a href="https://www.arduino.cc/" target="_blank" rel="noopener noreferrer">Arduino</a> to power <a href="https://en.wikipedia.org/wiki/Servomotor" target="_blank" rel="noopener noreferrer">servomotors</a> that operate three doors and an elevator. These doors were gates on the rails and the elevator was a metal spiral elevator that would move the ball to the top of the tower.
The game was complete if the player manager to bring the ball to the top of the tower, this would then turn on the plasma globe and register the time it took.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/teslamaze/gameplay-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/teslamaze/logo-w480.webp"
/>
<img
src="/images/software/projects/teslamaze/gameplay-w800.webp"
alt="TeslaMaze gameplay"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/teslamaze/gameplay.webp">
TeslaMaze gameplay
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/teslamaze/screenshot-game-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/teslamaze/screenshot-game-w480.webp"
/>
<img
src="/images/software/projects/teslamaze/screenshot-game.webp"
alt="TeslaMaze screenshot game"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/teslamaze/screenshot-game.webp">
TeslaMaze screenshot game
</a>
</figcaption>
</figure>
---
## Woodwork
The tower base is made of wood and has a metal screw elevator. A conductive metal ball has to be elevated up and then roll down three rails. One side of a rail is powered and the other is grounded. The metal ball conducts electricity to blue LED's on the rails when it passes by. Once the ball has reached the bottom of the tower within the time limit, a switch turns on the <a href="https://en.wikipedia.org/wiki/Plasma_globe" target="_blank" rel="noopener noreferrer">plasma globe</a> on the top of the tower and the game is won.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/teslamaze/elevator-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/teslamaze/elevator-w480.webp"
/>
<img
src="/images/software/projects/teslamaze/elevator.webp"
alt="TeslaMaze spiral elevator"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/teslamaze/elevator.webp">
TeslaMaze spiral elevator
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/teslamaze/rails-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/teslamaze/rails-w480.webp"
/>
<img
src="/images/software/projects/teslamaze/rails.webp"
alt="TeslaMaze rails"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/teslamaze/rails.webp">
TeslaMaze rails
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/teslamaze/tower-base-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/teslamaze/tower-base-w480.webp"
/>
<img
src="/images/software/projects/teslamaze/tower-base.webp"
alt="TeslaMaze tower base"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/teslamaze/tower-base.webp">
TeslaMaze tower base
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/teslamaze/in-progress-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/teslamaze/in-progress-w480.webp"
/>
<img
src="/images/software/projects/teslamaze/in-progress.webp"
alt="TeslaMaze within progress"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/teslamaze/in-progress.webp">
TeslaMaze within progress
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/teslamaze/render-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/teslamaze/render-w480.webp"
/>
<img
src="/images/software/projects/teslamaze/render.webp"
alt="TeslaMaze 3D render"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/teslamaze/render.webp">
TeslaMaze 3D render
</a>
</figcaption>
</figure>
---
## Lessons learnt
This was actually my favourite project to work on. It combined the talent of everyone in our team. We had a very skilled woodworker <i>(who doubled as a good project leader as well)</i> and we all were coding. This project taught me that effective team work with good group synergy, produces great results.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/teslamaze/teslamaze-final-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/teslamaze/teslamaze-final-w480.webp"
/>
<img
src="/images/software/projects/teslamaze/teslamaze-final.webp"
alt="TeslaMaze complete"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/teslamaze/teslamaze-final.webp">
TeslaMaze complete
</a>
</figcaption>
</figure>

123
portfolio/pages/jp/software/projects/wifi-extension-board.md Normal file
View File

@ -0,0 +1,123 @@
---
logosub: "Avans TI internship"
language: "jp"
title: "Wi-Fi extension board"
year: "2014"
date: "2014-01-01"
---
<div class="alert alert-warning" role="alert">
<div>
<span>申し訳ありませんが、このページはまだ日本語に翻訳されていません。</span>
</div>
</div>
This project was part of my internship at Dazzletek in Breda. They no longer exist and the name "Dazzletek" now seems to belong to an American company. They created intelligent lighting control solutions and were part of Vitelec. My assignment was to create a prototype that would allow a device to communicate over <a href="https://en.wikipedia.org/wiki/Wi-Fi" target="_blank" rel="noopener noreferrer">Wi-Fi</a>. I worked with a <a href="https://en.wikipedia.org/wiki/PIC_microcontrollers" target="_blank" rel="noopener noreferrer">PIC microcontroller</a>.
I developed a software program using <a href="https://en.wikipedia.org/wiki/C_(programming_language)" target="_blank" rel="noopener noreferrer">C</a> in the OpenAT framework, but also made adjustments to the hardware prototype board. At the end of my internship the prototype was realized into an extension board for the Antares gateway. The purpose of this assignment was to provide a device which communicates over <a href="https://en.wikipedia.org/wiki/General_Packet_Radio_Service" target="_blank" rel="noopener noreferrer">GPRS</a>, with the ability to communicate that data over Wi-Fi.
Instead of using the Wi-Fi stack, I was encouraged to develop my own data transfer logic over <a href="https://en.wikipedia.org/wiki/Serial_Peripheral_Interface" target="_blank" rel="noopener noreferrer">SPI</a>, which was then read by the oscilloscope.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/dazzletek/antares-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/dazzletek/antares-w480.webp"
/>
<img
src="/images/software/projects/dazzletek/antares.webp"
alt="Dazzletek Antares gateway"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/dazzletek/antares.webp">
Dazzletek Antares gateway
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/dazzletek/oscilloscope-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/dazzletek/oscilloscope-w480.webp"
/>
<img
src="/images/software/projects/dazzletek/oscilloscope.webp"
alt="SPI readings on a Oscilloscope"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/dazzletek/oscilloscope.webp">
SPI readings on a Oscilloscope
</a>
</figcaption>
</figure>
## Technology
The WF121 by <a href="https://en.wikipedia.org/wiki/Bluegiga" target="_blank" rel="noopener noreferrer">BlueGiga</a>, which used a <a href="https://en.wikipedia.org/wiki/PIC_microcontrollers" target="_blank" rel="noopener noreferrer">PIC32 microcontroller</a>, had to be programmed to accept and transfer data to a specific <a href="https://en.wikipedia.org/wiki/Service_set_(802.11_network)#SSID" target="_blank" rel="noopener noreferrer">SSID</a>. Also the AirPrime SL6087 by <a href="https://www.sierrawireless.com/" target="_blank" rel="noopener noreferrer">Sierra Wireless</a> (now Semtech) had to be programmed to relay the data to the Wi-Fi module.
I used <a href="https://www.wireshark.org/" target="_blank" rel="noopener noreferrer">Wireshark</a>, commandline debug and an oscilloscope to monitor the datatranfers. Version control was done in <a href="https://subversion.apache.org/" target="_blank" rel="noopener noreferrer">Subversion</a>.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/dazzletek/wifi-board-prototype-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/dazzletek/wifi-board-prototype-w480.webp"
/>
<img
src="/images/software/projects/dazzletek/wifi-board-prototype.webp"
alt="Wi-Fi prototype board"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/dazzletek/wifi-board-prototype.webp">
Wi-Fi prototype board
</a>
</figcaption>
</figure>
---
Finally, all the boards had to be provided with the firmware I wrote. I soldered a little <a href="https://en.wikipedia.org/wiki/Registered_jack" target="_blank" rel="noopener noreferrer">RJ45</a> connector that would allow the PIC programmer to write to the pins on the boards.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/dazzletek/programming-batch-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/dazzletek/programming-batch-w480.webp"
/>
<img
src="/images/software/projects/dazzletek/programming-batch.webp"
alt="Batch programming"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/dazzletek/programming-batch.webp">
Batch programming
</a>
</figcaption>
</figure>

121
portfolio/pages/jp/software/projects/windows-10-cookbook.md Normal file
View File

@ -0,0 +1,121 @@
---
logosub: "Avans TI student, year 4"
language: "jp"
title: "Windows 10 Cookbook"
year: "2015"
date: "2015-01-01"
---
<div class="alert alert-warning" role="alert">
<div>
<span>申し訳ありませんが、このページはまだ日本語に翻訳されていません。</span>
</div>
</div>
This <a href="https://learn.microsoft.com/en-us/windows/uwp/get-started/universal-application-platform-guide" target="_blank" rel="noopener noreferrer">UWP</a> application was built with <a href="https://docs.microsoft.com/en-us/dotnet/csharp/" target="_blank" rel="noopener noreferrer">C#</a> and <a href="https://learn.microsoft.com/en-us/dotnet/desktop/wpf/xaml/?view=netdesktop-6.0" target="_blank" rel="noopener noreferrer">XAML</a>.
This was a school project which retrieved recipies and other data from an API. Mostly this was to learn quickly how to develop a mobile application on the Windows platform with a responsive design.
Source code can be seen on my Github page: <a href="https://github.com/PA4KEV/Win10-Cookbook" target="_blank" rel="noopener noreferrer">github.com</a>
<picture>
<source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/windows10cookbook/logo-w240.webp`} />
<source media="(min-width: 800px)" srcset={`${process.env.PUBLIC_URL}/images/projects/windows10cookbook/logo.webp`} />
<img alt="application logo" src={`${process.env.PUBLIC_URL}/images/projects/windows10cookbook/logo.webp`}/>
</picture>
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/windows-10-cookbook/logo-w240.webp"
/>
<img
src="/images/software/projects/windows-10-cookbook/logo.webp"
alt="Dazzletek Antares gateway"
class="img-fluid"
/>
</picture>
</figure>
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/windows-10-cookbook/user-interface-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/windows-10-cookbook/user-interface-w480.webp"
/>
<img
src="/images/software/projects/windows-10-cookbook/user-interface-w800.webp"
alt="User interface"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/windows-10-cookbook/user-interface.webp">
User interface
</a>
</figcaption>
</figure>
## Mockups on laptop and mobile
These are mockups on other devices, using screenshots of the application.
<picture>
<source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/windows10cookbook/laptop-mockup-w240.webp`} />
<source media="(min-width: 800px) and (max-width: 1199px)" srcset={`${process.env.PUBLIC_URL}/images/projects/windows10cookbook/laptop-mockup-w480.webp`} />
<source media="(min-width: 1200px)" srcset={`${process.env.PUBLIC_URL}/images/projects/windows10cookbook/laptop-mockup.webp`} />
<img alt="laptop mockup" src={`${process.env.PUBLIC_URL}/images/projects/windows10cookbook/laptop-mockup.webp`}/>
</picture>
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/windows-10-cookbook/laptop-mockup-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/windows-10-cookbook/laptop-mockup-w480.webp"
/>
<img
src="/images/software/projects/windows-10-cookbook/laptop-mockup.webp"
alt="Mockup on a laptop"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/windows-10-cookbook/laptop-mockup.webp">
Mockup on a laptop
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/windows-10-cookbook/mobile-mockup-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/windows-10-cookbook/mobile-mockup-w480.webp"
/>
<img
src="/images/software/projects/windows-10-cookbook/mobile-mockup-w800.webp"
alt="Mockup on a laptop"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/windows-10-cookbook/mobile-mockup.webp">
Mockup on a smartphone and tablet
</a>
</figcaption>
</figure>

43
portfolio/pages/nl/software/projects/attachment-module.md Normal file
View File

@ -0,0 +1,43 @@
---
logosub: "Technical Specialist, Automation"
language: "nl"
title: "Attachment module"
year: "2017"
date: "2017-01-01"
---
Sometimes a project owner wants a feature implemented in their project that the developers somehow are unable to realize. The project was a website containing a form that customers would enter text data on. The project owner asked for a feature which allowed customers to attach files to this form.
As a "temporary" solution, I suggested creating a stand-alone server that would handle file uploads that would be linked to the ID number of the form. This consisted of 2 servers. One server would be a simple web interface, the other a database server that hosted a simple API.
Both servers were VMs running <a href="https://en.wikipedia.org/wiki/Red_Hat_Enterprise_Linux" target="_blank" rel="noopener noreferrer">RHEL</a>.
The web server used the <a href="https://en.wikipedia.org/wiki/Nginx" target="_blank" rel="noopener noreferrer">Nginx</a> engine and the <a href="https://en.wikipedia.org/wiki/Django_(web_framework)" target="_blank" rel="noopener noreferrer">Django</a> framework. Python handles the HTTP requests with <a href="https://en.wikipedia.org/wiki/Gunicorn" target="_blank" rel="noopener noreferrer">Gunicorn</a>, a <a href="https://en.wikipedia.org/wiki/Web_Server_Gateway_Interface" target="_blank" rel="noopener noreferrer">WSGI</a> gateway.
The database server used a <a href="https://en.wikipedia.org/wiki/MySQL" target="_blank" rel="noopener noreferrer">MySQL</a> server to host uploaded file data. To expose this data, <a href="https://flask-restful.readthedocs.io/" target="_blank" rel="noopener noreferrer">Flask RESTful</a> was used to serve a simple API.
This was the first separate project I created for the company, so I set up a <a href="https://en.wikipedia.org/wiki/Web_Server_Gateway_Interface" target="_blank" rel="noopener noreferrer">GitLab</a> server for version control.
## Workflow
* The website hosting the forms, would serve a hyperlink to the "attachment module", along with the form's ID.
* The user is redirected to the website with a simple input field and browse button where a file can be uploaded.
* The file is validated by type, size and upload time.
* The file is copied to the database server.
* The file is also cached for 2 weeks on the web server, for quicker access.
* The database server creates a database entry.
* A link to the file is created for access on the website.
* After a file is uploaded, someone else will want to access it.
* The user accesses the website and clicks on the link with the file name.
* If the file is cached on the web server, then this file is opened.
* If the file is not cached, the web server downloads the file from the database server and then opens it.
## Lessons learnt
The project owner did not want the users to separately log in to the web server of the attachment module. So a big security issue is that anyone with the link, can access uploaded files. At the time this was agreed to be a "temporary" solution. The project was deployed in 2017 and in 2021 this project was still running though. After all, the business must go on and if the problem's symptoms seems fixed, why bother with it further...
Because other users could access other uploaded files using the right link, it was decided that users could only upload and never delete any files.
A big learning point for me was that not to compromise security, even for projects that are considered temporary. A problem never occurred. This compromise caused silly decisions to not allow users to delete their own files. I will defend my standpoint much more and use this project as an example.
The actual problem here though, is why the other developers were not able to create a simple file upload feature.

122
portfolio/pages/nl/software/projects/board-of-education-bot.md Normal file
View File

@ -0,0 +1,122 @@
---
logosub: "Avans TI student, year 1"
language: "nl"
title: "Board of Education Bot"
year: "2012"
date: "2012-01-01"
---
The Board of Education (Ro)Bot is a development platform made by Parallax.
This school project was mainly to learn about basic electronics and programming for embedded devices. The BoeBot was created by Parallax and uses the Javelin stamp processor. This processor accepts the high-level programming language Java to control different pieces of hardware on the robot. The robot started as a simple prototype board with two servo motors. Sensors and actuators were later placed on the breadboard to allow sensory input and output. We created a GUI named "Robot at Work" which allowed the robot to follow a path using QPI linefollowers. The robot could also be controlled with an IR remote control.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/board-of-education-bot/boebot-classdiagram-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/board-of-education-bot/boebot-classdiagram-w480.webp"
/>
<img
src="/images/software/projects/board-of-education-bot/boebot-classdiagram-w800.webp"
alt="class diagram"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/board-of-education-bot/boebot-classdiagram.webp">
Class diagram
</a>
</figcaption>
</figure>
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/board-of-education-bot/javelin-w240.webp"
/>
<img
src="/images/software/projects/board-of-education-bot/javelin.webp"
alt="class diagram"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/board-of-education-bot/javelin.webp">
Javelin board
</a>
</figcaption>
</figure>
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/board-of-education-bot/boebot-gui-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/board-of-education-bot/boebot-gui-w480.webp"
/>
<img
src="/images/software/projects/board-of-education-bot/boebot-gui.webp"
alt="class diagram"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/board-of-education-bot/boebot-gui.webp">
GUI design
</a>
</figcaption>
</figure>
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/board-of-education-bot/robot2-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/board-of-education-bot/robot2-w480.webp"
/>
<img
src="/images/software/projects/board-of-education-bot/robot2.webp"
alt="class diagram"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/board-of-education-bot/robot2.webp">
Robot top
</a>
</figcaption>
</figure>
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/board-of-education-bot/robot3-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/board-of-education-bot/robot3-w480.webp"
/>
<img
src="/images/software/projects/board-of-education-bot/robot3.webp"
alt="class diagram"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/board-of-education-bot/robot3.webp">
Robot side
</a>
</figcaption>
</figure>

170
portfolio/pages/nl/software/projects/configuration-automation.md Normal file
View File

@ -0,0 +1,170 @@
---
logosub: "Technical Specialist, Automation"
language: "nl"
title: "Configuration Automation"
year: "2016"
date: "2016-01-01"
---
At <a href="https://www.hitachivantara.com/" target="_blank" rel="noopener noreferrer">Hitachi Vantara</a> I worked on automating a configuration process using <a href="https://www.python.org/" target="_blank" rel="noopener noreferrer">Python</a> and several external API.
Products would be picked, assembled, configured and finally packaged for shipping at the distribution centre where I collaborated on this project. Configuration happend by connecting a Windows laptop to the product and apply settings. This related to the product's operating system, network and storage settings.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/hitachi/cto-config-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/hitachi/cto-config-w480.webp"
/>
<img
src="/images/software/projects/hitachi/cto-config-w800.webp"
alt="CTO configuration"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/hitachi/cto-config-w800.webp">
CTO configuration
</a>
</figcaption>
</figure>
---
## Development
This project started as a locally run Python 2 script, to only automate very specific settings. It later moved to USB drives and eventually to a VM on a network.
It eventually grew to support multiple product lines and at this moment I joined the other programmer to further extend this software after my internship.
Here I learnt working properly with Git and designing software architecture. I also learnt how to create automation by interfacing by GUI automation with <a href="https://www.autohotkey.com/" target="_blank" rel="noopener noreferrer">AutoHotkey</a> and combine multiple APIs to achieve results.
The automation software also used other resources like <a href="https://ttssh2.osdn.jp/index.html.en" target="_blank" rel="noopener noreferrer">Tera Term</a> scripts.
Another fun thing I added was an <a href="https://www.raritan.com/products/power/power-distribution" target="_blank" rel="noopener noreferrer">iPDU</a> where Python could safely powercycle 230 Volt AC power consumers. This was useful to power down devices when the distribution center was not operating at night to reduce costs.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/hitachi/cto-laptop-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/hitachi/cto-laptop-w480.webp"
/>
<img
src="/images/software/projects/hitachi/cto-laptop-w800.webp"
alt="CTO laptop"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/hitachi/cto-laptop-w800.webp">
CTO laptop
</a>
</figcaption>
</figure>
---
## Deployment
Creating the release of this software had to be done by running a batch script to create a bundled set of Python files. These files were then uploaded to the VM located in a European distribution center in the Netherlands. This VM is then used to run the software from on a local network on which all configuration laptops were connected to. A WinSCP script would then sync the contents of all VM's in distribution centres located in Singapore, United States and China in 24 hours.
A script (stub) on the configuration laptop would connect to the VM and run Python locally to receive instructions. The technician selects the product through a CLI menu and automated configuration starts.
Dedicated storage managing software had to be installed, so communicating with the Japanese supplier was always important. This software and other assets were separately deployed to create a stable configuration process.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/hitachi/storage-chassis-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/hitachi/storage-chassis-w480.webp"
/>
<img
src="/images/software/projects/hitachi/storage-chassis-w800.webp"
alt="Storage Chassis"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/hitachi/storage-chassis-w800.webp">
Storage Chassis
</a>
</figcaption>
</figure>
---
## Feedback
The application generated log files with each configuration and then upload these back to the VM after configuration was complete or halted. These logs were sorted under product name and the order number. But quite often, I found it very productive to go to the configuration area and simply talk with the technician to figure out what went wrong. Depending on the severity of the problem, it would get documented in Gitlab issues. On a weekly basis, issues would get assigned among developers.
Communication is always important and essential for proper DevOps. The people who operate and configure these machines daily often know a lot more details that can be used to optimize the software. But be certain to make them realize that they also contribute to profit, rather than believing their job may become obsolete.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/hitachi/hitachi-banner-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/hitachi/hitachi-banner-w480.webp"
/>
<img
src="/images/software/projects/hitachi/hitachi-banner-w800.webp"
alt="HiCEF banner"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/hitachi/hitachi-banner-w800.webp">
HiCEF banner
</a>
</figcaption>
</figure>
---
## Lessons learn
Being a programmer, I was mostly concerned with the software. But it requires hardware to run on. When the software does not work because of differences in the platform the software run on, what is there to do? I eventually started managing around 40 configuration laptops, using <a href="https://clonezilla.org/" target="_blank" rel="noopener noreferrer">Clonezilla</a> to create identical machines.
Docker would have been an ideal solution, but I did not know much of it at the time.
Also my many points of learning in git merges, creating release tags, deploying broken versions of the software and immediately needing to patch with hotfixes, all contributed to my learning of software development.
Automation demands an equalized platform to run on and once it is deployed, hundreds of products will be making use of it. So, thinking something over and propely design and architecture software is much more time-saving than quickly meeting deadlines.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/hitachi/many-laptops-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/hitachi/many-laptops-w480.webp"
/>
<img
src="/images/software/projects/hitachi/many-laptops-w800.webp"
alt="Many laptops"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/hitachi/many-laptops-w800.webp">
Many laptops
</a>
</figcaption>
</figure>

50
portfolio/pages/nl/software/projects/digital-experience-platform.md Normal file
View File

@ -0,0 +1,50 @@
---
logosub: "Backend developer"
language: "nl"
title: "Digital Experience Platform"
year: "2023"
date: "2023-01-01"
---
A "Digital Experience Platform" is basically interactive software where data can be maintained, not much different from a regular application. But it's a marketing term, because software also needs to be sold. One such DXP I loved working on was for <a href="https://www.opple.eu/" target="_blank" rel="noopener noreferrer">OPPLE</a>. They are a brand of lighting products and have over 14000 different items.
My contributions were taking ownership of their catalog generator tool and maintaining the data of their products in <a href="https://www.drupal.org/" target="_blank" rel="noopener noreferrer">Drupal</a> on their website.
## OPPLE Catalog Generator
All the data was supplied through an external API by <a href="https://www.compano.com/" target="_blank" rel="noopener noreferrer">Compano</a> and through an uploaded XML file. This data had to be parsed and converged into a logical structure so that products and product families were matched along with their features, photographs, accessoires, dimensional drawings, sensor diagrams and more. And all data is <a href="https://en.wikipedia.org/wiki/Multilingualism" target="_blank" rel="noopener noreferrer">multilingual</a>. And of course data had to be exchanged through excel files for pricelists and tender texts. Data was used interchangably between different tools and websites.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/opple/opple-catalog-w240.webp"
/>
<img
src="/images/software/projects/opple/opple-catalog.webp"
alt="OPPLE product catalog"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/opple/opple-catalog.webp">
OPPLE product catalog
</a>
</figcaption>
</figure>
The catalog generator makes use of the Drupal platform as an intranet portal where thousands of PDF's could be automatically generated in a single batch. The customer only has to alter the data and the layouts and appropriate sections appear.
## Legacy code
This project was handed to me as a <a href="https://en.wikipedia.org/wiki/Monolithic_application" target="_blank" rel="noopener noreferrer">monolithic source</a>, with only 1 PHP file containing all the rendering logic and handling exceptions (as in, many products had their own unique, exceptional attributes). This was a project that had outgrown itself and was hard to scale further due to the current structure. I had to improve the code base, while retaining the legacy functions. But because everything was so tightly coupled I had to make sure a change did not break functionality elsewhere. The key is to write new code and provide "safety nets" for older code.
A common misconception is to think by creating quick code, is easy gain. Not much effort, just copy and paste the existing logic and adjust it a bit. Then put it in the same file, no need to document it. But by building up <a href="https://en.wikipedia.org/wiki/Technical_debt" target="_blank" rel="noopener noreferrer">Technical Dept</a>, you will either leave this code behind or you will forget how everything works. Making code scalable, is essential. Even for "small" or "temporary" projects. Do not take shortcuts, thinking it will save time or meet the deadline.
## Improvement
Restructuring code built as such requires mostly patience. You cannot instantly restart everything, as this tool is used in production. You cannot create a new architecture complete with diagrams, there is currently no time. It is not the only project I work on, there are 20 other projects that also require attention. Instead, I started by moving functions around every time I worked on a new feature for the tool. Dedicating existing functions to separate module files was the start. Creating object-oriented code for new features was the next step. Applying unit tests came next. As long as a new feature request did not exceed in time, it could be slowly prepared to grow by having prework done every time.
Eventually, it became a tool with composed logic, making future maintenance and feature requests a lot more simple.
Moving forward with a structured tool, I am proud to have collaborated on this project and improved upon it. But when I was no longer working on this project, it got outsourced or abandoned. To me, this really was a project that was handed down from developer to developer and code just got copied and pasted. There were so many lines of code confined within if-statements, a lot of duplicate code. I am not surprised this project was abandoned and sadly I put many hours of unpaid work into this project to make it better, but it also became complexer. Again, to me it means that taking time beforehand to desing and architecture the software would make more of a difference. Not, here is the code, add this feature, you have 5 hours according to Jira.

88
portfolio/pages/nl/software/projects/embedded-internet-radio.md Normal file
View File

@ -0,0 +1,88 @@
---
logosub: "Avans TI student, year 3"
language: "nl"
title: "Embedded Internet Radio"
year: "2014"
date: "2014-01-01"
---
This project gave me the opportunity to work with the SIR120 internet radio made by the company StreamIT. The radio involved connecting to exiting internet streams and interfacing with the <a href="https://en.wikipedia.org/wiki/Liquid-crystal_display" target="_blank" rel="noopener noreferrer">LCD</a> and buttons on the device. The code was written in <a href="https://en.wikipedia.org/wiki/C_(programming_language)" target="_blank" rel="noopener noreferrer">C</a>.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/embedded-internet-radio/front-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/embedded-internet-radio/front-w480.webp"
/>
<img
src="/images/software/projects/embedded-internet-radio/front.webp"
alt="Radio front"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/embedded-internet-radio/front.webp">
Radio front
</a>
</figcaption>
</figure>
## Development
The radio had an existing operating system called <a href="https://en.wikipedia.org/wiki/Ethernut" target="_blank" rel="noopener noreferrer">Nut/OS</a>, an open source OS. Nut/OS provided the TCP/IP stack we required to connect the device to the internet. The radio was able to play a select number of internet streams. The user could read the stream channel on the LCD and use the buttons to navigate between them.
This project often had code overhauls because our code kept moving towards a more <a href="https://en.wikipedia.org/wiki/Object-oriented_programming" target="_blank" rel="noopener noreferrer">OOP</a> approach using structs rather than large chunks of produral code.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/embedded-internet-radio/inside-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/embedded-internet-radio/inside-w480.webp"
/>
<img
src="/images/software/projects/embedded-internet-radio/inside.webp"
alt="Radio insides"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/embedded-internet-radio/inside.webp">
Radio insides
</a>
</figcaption>
</figure>
## Design
A simple flowchart was created to show how the user could navigate through the menu.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/embedded-internet-radio/flowchart-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/embedded-internet-radio/flowchart-w480.webp"
/>
<img
src="/images/software/projects/embedded-internet-radio/flowchart-w800.webp"
alt="Radio insides"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/embedded-internet-radio/flowchart.webp">
Menu flowchart
</a>
</figcaption>
</figure>

184
portfolio/pages/nl/software/projects/festival-simulator.md Normal file
View File

@ -0,0 +1,184 @@
---
logosub: "Avans TI student, year 2"
language: "nl"
title: "Festival Simulator"
year: "2013"
date: "2013-01-01"
---
A team project in which a festival can be simulated to view how crowds of people behave. It was named: "SimFest-Tycoon". The user can build festivals, roads, snackbars and assign time periods when a band plays at a stage. The project was programmed in Java. A school project made by four people. The software allows users to build their own festival grounds. Snackbarstands, toilets, roads and stages can be placed to view how people form crowds and bottlenecks in certain areas. The user can also assign a band that plays for a certain time at a stage using a scheduler.
The band has a timeperiod and popularity, which affects the amount of people visiting that stage. The goal of this software is create an overview of potential bottlenecks and overcrowded areas.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/festival-simulator/sft2-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/festival-simulator/sft2-w480.webp"
/>
<img
src="/images/software/projects/festival-simulator/sft2-w800.webp"
alt="Screenshot festival simulator"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/festival-simulator/sft2.webp">
Screenshot festival simulator
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/festival-simulator/sft4-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/festival-simulator/sft4-w480.webp"
/>
<img
src="/images/software/projects/festival-simulator/sft4-w800.webp"
alt="Screenshot festival simulator"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/festival-simulator/sft4.webp">
Screenshot festival simulator
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/festival-simulator/sft5-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/festival-simulator/sft5-w480.webp"
/>
<img
src="/images/software/projects/festival-simulator/sft5-w800.webp"
alt="Screenshot festival simulator"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/festival-simulator/sft5.webp">
Screenshot festival simulator
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/festival-simulator/sft7-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/festival-simulator/sft7-w480.webp"
/>
<img
src="/images/software/projects/festival-simulator/sft7-w800.webp"
alt="Screenshot festival simulator"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/festival-simulator/sft7.webp">
Screenshot festival simulator
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/festival-simulator/sft8-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/festival-simulator/sft8-w480.webp"
/>
<img
src="/images/software/projects/festival-simulator/sft8-w800.webp"
alt="Screenshot festival simulator"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/festival-simulator/sft8.webp">
Screenshot festival simulator
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/festival-simulator/sft9-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/festival-simulator/sft9-w480.webp"
/>
<img
src="/images/software/projects/festival-simulator/sft9-w800.webp"
alt="Screenshot festival simulator"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/festival-simulator/sft9.webp">
Screenshot festival simulator
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/festival-simulator/sft10-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/festival-simulator/sft10-w480.webp"
/>
<img
src="/images/software/projects/festival-simulator/sft10-w800.webp"
alt="Screenshot festival simulator"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/festival-simulator/sft10.webp">
Screenshot festival simulator
</a>
</figcaption>
</figure>

59
portfolio/pages/nl/software/projects/ios-airports.md Normal file
View File

@ -0,0 +1,59 @@
---
logosub: "Avans TI student, year 4"
language: "nl"
title: "iOS Airports"
year: "2015"
date: "2015-01-01"
---
A mobile iPhone application using a <a href="https://sqlite.org/" target="_blank" rel="noopener noreferrer">SQLite</a> database to display airports around the world. With this project I got to experience working with <a href="https://en.wikipedia.org/wiki/Xcode" target="_blank" rel="noopener noreferrer">Xcode</a> and <a href="https://en.wikipedia.org/wiki/Swift_(programming_language)" target="_blank" rel="noopener noreferrer">Swift</a> to develop iOS mobile applications.
Source code can be seen on my Github page: <a href="https://github.com/PA4KEV/iOS-Airports" target="_blank" rel="noopener noreferrer">github.com</a>
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/ios-airports/screenshot-1-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/ios-airports/screenshot-1-w480.webp"
/>
<img
src="/images/software/projects/ios-airports/screenshot-1.webp"
alt="Radio front"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/ios-airports/screenshot-1.webp">
Screenshots
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/ios-airports/screenshot-2-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/ios-airports/screenshot-2-w480.webp"
/>
<img
src="/images/software/projects/ios-airports/screenshot-2.webp"
alt="Radio front"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/ios-airports/screenshot-2.webp">
Screenshots
</a>
</figcaption>
</figure>

103
portfolio/pages/nl/software/projects/kanji-application.md Normal file
View File

@ -0,0 +1,103 @@
---
logosub: "Software developer"
language: "nl"
title: "Kanji flashcard Android application"
year: "2018"
date: "2018-01-01"
---
In my free time I like to learn Japanese. I am married with someone from Japan, so being able talk with her parents in their own language is nice! You also pick up much of the culture through learning the language.
I wanted a personalized way to learn <a href="https://en.wikipedia.org/wiki/Kanji" target="_blank" rel="noopener noreferrer">Kanji</a>. I keep track of the words I want to learn in a small <a href="https://sqlite.org/" target="_blank" rel="noopener noreferrer">SQLite</a> database. If I come across a Japanese word, I can enter it in the database myself, because many language learning applications give you a preset of words, usually of the <a href="https://en.wikipedia.org/wiki/J%C5%8Dy%C5%8D_kanji" target="_blank" rel="noopener noreferrer">jōyō Kanji</a>. The database can also be exported and imported to a file from the application.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/kanji-application/logo-w240.webp"
/>
<img
src="/images/software/projects/kanji-application/logo.webp"
alt="Application logo"
class="img-fluid"
/>
</figure>
---
## Tools
<a href="https://www.java.com" target="_blank" rel="noopener noreferrer">Java</a> and <a href="https://en.wikipedia.org/wiki/Android_Studio" target="_blank" rel="noopener noreferrer">Android studio</a> were used to create this application.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/kanji-application/screenshot-1-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/kanji-application/screenshot-1-w480.webp"
/>
<img
src="/images/software/projects/kanji-application/screenshot-1.webp"
alt="Screenshots flash card"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/kanji-application/screenshot-1.webp">
Screenshots flash card
</a>
</figcaption>
</figure>
## Customizability
Through user input, the difficulty of a Kanji is determined. A Kanji that is guessed wrong often will increase in difficulty and can be asked more frequently. Questioning can be done based on time and certain aspects of the Kanji can be shown or hidden. I added a dark- and light mode and the sizes of the characters can be changed.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/kanji-application/screenshot-2-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/kanji-application/screenshot-2-w480.webp"
/>
<img
src="/images/software/projects/kanji-application/screenshot-2.webp"
alt="Screenshots settings"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/kanji-application/screenshot-2.webp">
Screenshots settings
</a>
</figcaption>
</figure>
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/kanji-application/screenshot-3-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/kanji-application/screenshot-3-w480.webp"
/>
<img
src="/images/software/projects/kanji-application/screenshot-3.webp"
alt="Screenshots user input"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/kanji-application/screenshot-3.webp">
Screenshots user input
</a>
</figcaption>
</figure>

134
portfolio/pages/nl/software/projects/metroid-shooter.md Normal file
View File

@ -0,0 +1,134 @@
---
logosub: "Avans TI student, year 2"
language: "nl"
title: "Metroid Horizontal Shooter"
year: "2013"
date: "2013-01-01"
---
A simple Java 2D game using Nintendo's <a href="https://en.wikipedia.org/wiki/Metroid" target="_blank" rel="noopener noreferrer">Metroid</a> franchise sprites. This was a school project. This little game I made to practice programming with 2D graphics. It slowly gained more and more features like extra weapons and different levels, because I really enjoyed working on this project.
The point of this project was to learn sprite rendering and moving it on X- and Y-axes on the screen. It does not make use of a predefined game engine.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/metroid/MetroidScreen1-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/metroid/MetroidScreen1-w480.webp"
/>
<img
src="/images/software/projects/metroid/MetroidScreen1-w800.webp"
alt="Screenshot Bull enemies"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/metroid/MetroidScreen1.webp">
Screenshot Bull enemies
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/metroid/MetroidScreen2-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/metroid/MetroidScreen2-w480.webp"
/>
<img
src="/images/software/projects/metroid/MetroidScreen2-w800.webp"
alt="Screenshot Kihunter enemies"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/metroid/MetroidScreen2.webp">
Screenshot Kihunter enemies
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/metroid/MetroidScreen3-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/metroid/MetroidScreen3-w480.webp"
/>
<img
src="/images/software/projects/metroid/MetroidScreen3-w800.webp"
alt="Screenshot player equipment"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/metroid/MetroidScreen3.webp">
Screenshot player equipment
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/metroid/MetroidScreen4-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/metroid/MetroidScreen4-w480.webp"
/>
<img
src="/images/software/projects/metroid/MetroidScreen4-w800.webp"
alt="Screenshot level selection"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/metroid/MetroidScreen4.webp">
Screenshot level selection
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/metroid/MetroidScreen5-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/metroid/MetroidScreen5-w480.webp"
/>
<img
src="/images/software/projects/metroid/MetroidScreen5-w800.webp"
alt="Screenshot Gamet enemies"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/metroid/MetroidScreen5.webp">
Screenshot Gamet enemies
</a>
</figcaption>
</figure>

111
portfolio/pages/nl/software/projects/raspberry-pi-jukebox.md Normal file
View File

@ -0,0 +1,111 @@
---
logosub: "Hardware tweaker"
language: "nl"
title: "Raspberry Pi Jukebox"
year: "2016"
date: "2016-01-01"
---
I used a <a href="https://www.raspberrypi.org/" target="_blank" rel="noopener noreferrer">Raspberry Pi</a> to stream internet radio. <a href="https://www.python.org/" target="_blank" rel="noopener noreferrer">Python</a> and <a href="https://flask.palletsprojects.com/" target="_blank" rel="noopener noreferrer">Flask</a> were used to create a simple website interface that resided on the Raspberry Pi using the Apache web engine. This simple site had buttons to control the LEDs, the station to stream and to adjust the volume.
The LEDs were controlled using an <a href="https://www.arduino.cc/" target="_blank" rel="noopener noreferrer">Arduino</a> and a <a href="https://www.analog.com/media/en/technical-documentation/data-sheets/max7219-max7221.pdf" target="_blank" rel="noopener noreferrer">Maxim MAX7219 IC</a>.
I posted a tutorial about this long ago on Instructables: <a href="https://www.instructables.com/Raspberry-Pi-Internet-Radio-With-Flask/" target="_blank" rel="noopener noreferrer">instructables.com/Raspberry-Pi-Internet-Radio-With-Flask</a>
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/raspberry-pi-jukebox/disassembly-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/raspberry-pi-jukebox/disassembly-w480.webp"
/>
<img
src="/images/software/projects/raspberry-pi-jukebox/disassembly.webp"
alt="Jukebox disassembly"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/raspberry-pi-jukebox/disassembly.webp">
Jukebox disassembly
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/raspberry-pi-jukebox/old-interiour-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/raspberry-pi-jukebox/old-interiour-w480.webp"
/>
<img
src="/images/software/projects/raspberry-pi-jukebox/old-interiour.webp"
alt="Jukebox old interiour"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/raspberry-pi-jukebox/old-interiour.webp">
Jukebox old interiour
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/raspberry-pi-jukebox/led-matrix-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/raspberry-pi-jukebox/led-matrix-w480.webp"
/>
<img
src="/images/software/projects/raspberry-pi-jukebox/led-matrix.webp"
alt="Jukebox LED matrix"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/raspberry-pi-jukebox/led-matrix.webp">
Jukebox LED matrix
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/raspberry-pi-jukebox/fully-assembled-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/raspberry-pi-jukebox/fully-assembled-w480.webp"
/>
<img
src="/images/software/projects/raspberry-pi-jukebox/fully-assembled.webp"
alt="Jukebox fully assembled"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/raspberry-pi-jukebox/fully-assembled.webp">
Jukebox fully assembled
</a>
</figcaption>
</figure>

91
portfolio/pages/nl/software/projects/swiv-for-pi.md Normal file
View File

@ -0,0 +1,91 @@
---
logosub: "Avans TI student, year 3"
language: "nl"
title: "SWIV for Pi"
year: "2014"
date: "2014-01-01"
---
A simple vertical space shooter created for the <a href="https://www.raspberrypi.org/" target="_blank" rel="noopener noreferrer">Raspberry Pi</a>. The game is played with regular keyboard and a custom joystick setup. The game was programmed in Python using the <a href="https://www.pygame.org/" target="_blank" rel="noopener noreferrer">PyGame</a> library. This project was mainly to create small game and interface it with a custom hardware setup. The setup uses an analog joystick to control the player's helicopter. An <a href="https://en.wikipedia.org/wiki/Analog-to-digital_converter" target="_blank" rel="noopener noreferrer">ADC (Analog Digital Converter)</a> samples the analog data into digital data so that the Raspberry Pi (version 1, type B) could parse the data.
<div class="d-flex justify-content-center">
<img src="/images/software/projects/swiv-for-pi/title.webp" alt="S W I V for Pi title screen"/>
<img src="/images/software/projects/swiv-for-pi/screenshot.webp" alt="S W I V for Pi screenshot"/>
</div>
## Hardware
Simple components were placed onto a breadboard and the joystick's analog resistive data would be converted into digital data. This data would be read by the GPIO pins and used to determine how the helicopter moves over the X- and Y-axis. To help with understanding electronic logic, an oscilloscope was used.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/swiv-for-pi/breadboard-top-view-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/swiv-for-pi/breadboard-top-view-w480.webp"
/>
<img
src="/images/software/projects/swiv-for-pi/breadboard-top-view-w800.webp"
alt="Breadboard with components top view"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/swiv-for-pi/breadboard-top-view-w800.webp">
Breadboard with components top view
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/swiv-for-pi/breadboard-front-view-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/swiv-for-pi/breadboard-front-view-w480.webp"
/>
<img
src="/images/software/projects/swiv-for-pi/breadboard-front-view-w800.webp"
alt="Breadboard with components front view"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/swiv-for-pi/breadboard-front-view.webp">
Breadboard with components front view
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/swiv-for-pi/oscilloscope-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/swiv-for-pi/oscilloscope-w480.webp"
/>
<img
src="/images/software/projects/swiv-for-pi/oscilloscope-w800.webp"
alt="Breadboard with components front view"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/swiv-for-pi/oscilloscope.webp">
Oscilloscope
</a>
</figcaption>
</figure>

250
portfolio/pages/nl/software/projects/teslamaze.md Normal file
View File

@ -0,0 +1,250 @@
---
logosub: "Avans TI student, year 1"
language: "nl"
title: "TeslaMaze"
year: "2012"
date: "2012-01-01"
---
## Gaming, Woodcraft and Teamwork!
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/teslamaze/teslamaze-logo-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/teslamaze/teslamaze-logo-w480.webp"
/>
<img
src="/images/software/projects/teslamaze/teslamaze-logo.webp"
alt="TeslaMaze logo"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/teslamaze/teslamaze-logo.webp">
TeslaMaze logo
</a>
</figcaption>
</figure>
---
A team project where the player must align pipes correctly using a Wii remote. The ingame goals would then have effect on a custom built wooden tower. The game was programmed in <a href="https://www.java.com" target="_blank" rel="noopener noreferrer">Java</a>.
This project was made by four people working on both software and hardware. The game uses the <a href="https://en.wikipedia.org/wiki/Wii" target="_blank" rel="noopener noreferrer">Nintendo Wii remote</a> to get input from the player.
## Gameplay
The player must align pipes from the fictional tesla coil to "relay electricity" to a specific point in the game. The game communicates to the <a href="https://www.arduino.cc/" target="_blank" rel="noopener noreferrer">Arduino</a> to power <a href="https://en.wikipedia.org/wiki/Servomotor" target="_blank" rel="noopener noreferrer">servomotors</a> that operate three doors and an elevator. These doors were gates on the rails and the elevator was a metal spiral elevator that would move the ball to the top of the tower.
The game was complete if the player manager to bring the ball to the top of the tower, this would then turn on the plasma globe and register the time it took.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/teslamaze/gameplay-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/teslamaze/logo-w480.webp"
/>
<img
src="/images/software/projects/teslamaze/gameplay-w800.webp"
alt="TeslaMaze gameplay"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/teslamaze/gameplay.webp">
TeslaMaze gameplay
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/teslamaze/screenshot-game-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/teslamaze/screenshot-game-w480.webp"
/>
<img
src="/images/software/projects/teslamaze/screenshot-game.webp"
alt="TeslaMaze screenshot game"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/teslamaze/screenshot-game.webp">
TeslaMaze screenshot game
</a>
</figcaption>
</figure>
---
## Woodwork
The tower base is made of wood and has a metal screw elevator. A conductive metal ball has to be elevated up and then roll down three rails. One side of a rail is powered and the other is grounded. The metal ball conducts electricity to blue LED's on the rails when it passes by. Once the ball has reached the bottom of the tower within the time limit, a switch turns on the <a href="https://en.wikipedia.org/wiki/Plasma_globe" target="_blank" rel="noopener noreferrer">plasma globe</a> on the top of the tower and the game is won.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/teslamaze/elevator-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/teslamaze/elevator-w480.webp"
/>
<img
src="/images/software/projects/teslamaze/elevator.webp"
alt="TeslaMaze spiral elevator"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/teslamaze/elevator.webp">
TeslaMaze spiral elevator
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/teslamaze/rails-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/teslamaze/rails-w480.webp"
/>
<img
src="/images/software/projects/teslamaze/rails.webp"
alt="TeslaMaze rails"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/teslamaze/rails.webp">
TeslaMaze rails
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/teslamaze/tower-base-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/teslamaze/tower-base-w480.webp"
/>
<img
src="/images/software/projects/teslamaze/tower-base.webp"
alt="TeslaMaze tower base"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/teslamaze/tower-base.webp">
TeslaMaze tower base
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/teslamaze/in-progress-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/teslamaze/in-progress-w480.webp"
/>
<img
src="/images/software/projects/teslamaze/in-progress.webp"
alt="TeslaMaze within progress"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/teslamaze/in-progress.webp">
TeslaMaze within progress
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/teslamaze/render-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/teslamaze/render-w480.webp"
/>
<img
src="/images/software/projects/teslamaze/render.webp"
alt="TeslaMaze 3D render"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/teslamaze/render.webp">
TeslaMaze 3D render
</a>
</figcaption>
</figure>
---
## Lessons learnt
This was actually my favourite project to work on. It combined the talent of everyone in our team. We had a very skilled woodworker <i>(who doubled as a good project leader as well)</i> and we all were coding. This project taught me that effective team work with good group synergy, produces great results.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/teslamaze/teslamaze-final-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/teslamaze/teslamaze-final-w480.webp"
/>
<img
src="/images/software/projects/teslamaze/teslamaze-final.webp"
alt="TeslaMaze complete"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/teslamaze/teslamaze-final.webp">
TeslaMaze complete
</a>
</figcaption>
</figure>

117
portfolio/pages/nl/software/projects/wifi-extension-board.md Normal file
View File

@ -0,0 +1,117 @@
---
logosub: "Avans TI internship"
language: "nl"
title: "Wi-Fi extension board"
year: "2014"
date: "2014-01-01"
---
This project was part of my internship at Dazzletek in Breda. They no longer exist and the name "Dazzletek" now seems to belong to an American company. They created intelligent lighting control solutions and were part of Vitelec. My assignment was to create a prototype that would allow a device to communicate over <a href="https://en.wikipedia.org/wiki/Wi-Fi" target="_blank" rel="noopener noreferrer">Wi-Fi</a>. I worked with a <a href="https://en.wikipedia.org/wiki/PIC_microcontrollers" target="_blank" rel="noopener noreferrer">PIC microcontroller</a>.
I developed a software program using <a href="https://en.wikipedia.org/wiki/C_(programming_language)" target="_blank" rel="noopener noreferrer">C</a> in the OpenAT framework, but also made adjustments to the hardware prototype board. At the end of my internship the prototype was realized into an extension board for the Antares gateway. The purpose of this assignment was to provide a device which communicates over <a href="https://en.wikipedia.org/wiki/General_Packet_Radio_Service" target="_blank" rel="noopener noreferrer">GPRS</a>, with the ability to communicate that data over Wi-Fi.
Instead of using the Wi-Fi stack, I was encouraged to develop my own data transfer logic over <a href="https://en.wikipedia.org/wiki/Serial_Peripheral_Interface" target="_blank" rel="noopener noreferrer">SPI</a>, which was then read by the oscilloscope.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/dazzletek/antares-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/dazzletek/antares-w480.webp"
/>
<img
src="/images/software/projects/dazzletek/antares.webp"
alt="Dazzletek Antares gateway"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/dazzletek/antares.webp">
Dazzletek Antares gateway
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/dazzletek/oscilloscope-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/dazzletek/oscilloscope-w480.webp"
/>
<img
src="/images/software/projects/dazzletek/oscilloscope.webp"
alt="SPI readings on a Oscilloscope"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/dazzletek/oscilloscope.webp">
SPI readings on a Oscilloscope
</a>
</figcaption>
</figure>
## Technology
The WF121 by <a href="https://en.wikipedia.org/wiki/Bluegiga" target="_blank" rel="noopener noreferrer">BlueGiga</a>, which used a <a href="https://en.wikipedia.org/wiki/PIC_microcontrollers" target="_blank" rel="noopener noreferrer">PIC32 microcontroller</a>, had to be programmed to accept and transfer data to a specific <a href="https://en.wikipedia.org/wiki/Service_set_(802.11_network)#SSID" target="_blank" rel="noopener noreferrer">SSID</a>. Also the AirPrime SL6087 by <a href="https://www.sierrawireless.com/" target="_blank" rel="noopener noreferrer">Sierra Wireless</a> (now Semtech) had to be programmed to relay the data to the Wi-Fi module.
I used <a href="https://www.wireshark.org/" target="_blank" rel="noopener noreferrer">Wireshark</a>, commandline debug and an oscilloscope to monitor the datatranfers. Version control was done in <a href="https://subversion.apache.org/" target="_blank" rel="noopener noreferrer">Subversion</a>.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/dazzletek/wifi-board-prototype-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/dazzletek/wifi-board-prototype-w480.webp"
/>
<img
src="/images/software/projects/dazzletek/wifi-board-prototype.webp"
alt="Wi-Fi prototype board"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/dazzletek/wifi-board-prototype.webp">
Wi-Fi prototype board
</a>
</figcaption>
</figure>
---
Finally, all the boards had to be provided with the firmware I wrote. I soldered a little <a href="https://en.wikipedia.org/wiki/Registered_jack" target="_blank" rel="noopener noreferrer">RJ45</a> connector that would allow the PIC programmer to write to the pins on the boards.
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/dazzletek/programming-batch-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/dazzletek/programming-batch-w480.webp"
/>
<img
src="/images/software/projects/dazzletek/programming-batch.webp"
alt="Batch programming"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/dazzletek/programming-batch.webp">
Batch programming
</a>
</figcaption>
</figure>

115
portfolio/pages/nl/software/projects/windows-10-cookbook.md Normal file
View File

@ -0,0 +1,115 @@
---
logosub: "Avans TI student, year 4"
language: "nl"
title: "Windows 10 Cookbook"
year: "2015"
date: "2015-01-01"
---
This <a href="https://learn.microsoft.com/en-us/windows/uwp/get-started/universal-application-platform-guide" target="_blank" rel="noopener noreferrer">UWP</a> application was built with <a href="https://docs.microsoft.com/en-us/dotnet/csharp/" target="_blank" rel="noopener noreferrer">C#</a> and <a href="https://learn.microsoft.com/en-us/dotnet/desktop/wpf/xaml/?view=netdesktop-6.0" target="_blank" rel="noopener noreferrer">XAML</a>.
This was a school project which retrieved recipies and other data from an API. Mostly this was to learn quickly how to develop a mobile application on the Windows platform with a responsive design.
Source code can be seen on my Github page: <a href="https://github.com/PA4KEV/Win10-Cookbook" target="_blank" rel="noopener noreferrer">github.com</a>
<picture>
<source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/windows10cookbook/logo-w240.webp`} />
<source media="(min-width: 800px)" srcset={`${process.env.PUBLIC_URL}/images/projects/windows10cookbook/logo.webp`} />
<img alt="application logo" src={`${process.env.PUBLIC_URL}/images/projects/windows10cookbook/logo.webp`}/>
</picture>
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/windows-10-cookbook/logo-w240.webp"
/>
<img
src="/images/software/projects/windows-10-cookbook/logo.webp"
alt="Dazzletek Antares gateway"
class="img-fluid"
/>
</picture>
</figure>
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/windows-10-cookbook/user-interface-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/windows-10-cookbook/user-interface-w480.webp"
/>
<img
src="/images/software/projects/windows-10-cookbook/user-interface-w800.webp"
alt="User interface"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/windows-10-cookbook/user-interface.webp">
User interface
</a>
</figcaption>
</figure>
## Mockups on laptop and mobile
These are mockups on other devices, using screenshots of the application.
<picture>
<source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/windows10cookbook/laptop-mockup-w240.webp`} />
<source media="(min-width: 800px) and (max-width: 1199px)" srcset={`${process.env.PUBLIC_URL}/images/projects/windows10cookbook/laptop-mockup-w480.webp`} />
<source media="(min-width: 1200px)" srcset={`${process.env.PUBLIC_URL}/images/projects/windows10cookbook/laptop-mockup.webp`} />
<img alt="laptop mockup" src={`${process.env.PUBLIC_URL}/images/projects/windows10cookbook/laptop-mockup.webp`}/>
</picture>
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/windows-10-cookbook/laptop-mockup-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/windows-10-cookbook/laptop-mockup-w480.webp"
/>
<img
src="/images/software/projects/windows-10-cookbook/laptop-mockup.webp"
alt="Mockup on a laptop"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/windows-10-cookbook/laptop-mockup.webp">
Mockup on a laptop
</a>
</figcaption>
</figure>
---
<figure class="text-center">
<picture class="d-flex justify-content-center">
<source
media="(max-width: 510px)"
srcset="/images/software/projects/windows-10-cookbook/mobile-mockup-w240.webp"
/>
<source
media="(max-width: 850px)"
srcset="/images/software/projects/windows-10-cookbook/mobile-mockup-w480.webp"
/>
<img
src="/images/software/projects/windows-10-cookbook/mobile-mockup-w800.webp"
alt="Mockup on a laptop"
class="img-fluid"
/>
</picture>
<figcaption class="figure-caption mt-2">
<a href="/images/software/projects/windows-10-cookbook/mobile-mockup.webp">
Mockup on a smartphone and tablet
</a>
</figcaption>
</figure>

3
portfolio/site.hs
View File

@ -221,7 +221,8 @@ main = hakyll $ do
let language = lookupString "language" metadata
let lang = fromMaybe "en" language
projects <- loadAll "pages/en/software/projects/*"
projects <- loadAll $ (fromGlob ("pages/" ++ lang ++ "/software/projects/*"))
projects <- recentFirst projects
let softwareCtx =
listField "projects" (postCtx language) (return projects) <>