Portfolio van Jop Molenaar

Who am I?

Hello I am Jop, 21 years old and recently finished my study Communication and Multi-Media Design on the HvA, with honor.

I am a very enthusiastic and driven front-end developer who loves to learn new things and improve myself. My main focus is optimising UX with logic and the posibilities given by the web, prioritising accessibility and implementing pixel perfect design. I can work individually but I also worked many times in a team and I like helping eachother and making something together.

Besides that, I am a very disciplined, calm and nice guy that has a great passion for calisthenics. A sport that requires a lot of patience, perseverance, vision and flexibility, something I also try show in my work ethic.

Me in the mountains, climbing a rock with a big backpack and smiling at the camera under a blue sky.

Holding a planche, a power move where you hold your body horizontal on the ground by leaning forward on your shoulders while your feet are off the ground. The background is a messy room.

Me standing on a mountain with a lot of mountains far in the background. The sky is blue with some clouds.

Me chilling on the couch with my mobile in my hand, wearing a black tank top and blue elephant trousers.

A shot from above where you can see me cutting garlic while I am cooking in a colorfull kitchen.

Experience

My experience as someone who recently graduated is mainly from school projects and internships. But that doesn't mean I don't know how a companies workflow works, what is expected and how to reach the end goal.

During my internships I worked on projects for big clients like Peakz Padel, Patientenfederatie, OBA and many more. I did not only fix bugs, I implemented features, created components in a way the client could build their own pages, optimised the user experience and focused on implementing pixel perfect design. All that in an agile environment where we worked in a team consisting of developers, designers and project managers. This resulted in a lot of happy clients, learnings and experience.

In recent projects I worked with Craft CMS, Vue.js/Nuxt, CSS, JavaScript, Twig and Git. But I like to experiment with new techniques and because of my base knowledge of HTML, CSS and JavaScript, I tend to learn and adapt to other frameworks or templating languages quite fast.

For more information visit my LinkedIn!

Skills

HTML
CSS/SASS
JS
PHP & SQL
C++
nodeJs
UI/UX
service workers
Vue.js/Nuxt
Craft CMS
Twig
CI/CD pipelines
Scrum

Discipline
Stress-resistant
Driven
Trustworthy
Positive
Self-reliant

Projects

IoT check-in system for the HvA (Team)

At the end of the 9 weeks we had an expo where we won the `Best business opportunity` out of all projects from all minors and masters at the HBO-ICT.

We made an Internet of Things check-in system that consists out of an embedded system and a web environment for a real client from the HvA. We used a Raspberry Pi 4, esp32, a display, a camera to read the details from the student card and a NFC reader to make checking in and out fast after the first time you have registered your student card. On the website the teachers could link devices to events by linking the event with the mac address of the device. They could see upcoming, open and closed events, they could link student to events, they could see which student is/was present or not at the event, and we build some more nice UX features to meet the users needs. The client was very enthusiastic and was planning to use the device next school year.
Skills used:
- PHP & MySQL
- C++
- HTML, CSS & Javascript
- Scrum
CSS only UFO

This project was about learning and discovering the true power of CSS by only using css selectors and no Javascript to see what you can do with it nowadays. I wanted to make a cockpit of an UFO that has working buttons, a working joystick and that you can move through space with different speeds all with css only (accept the js needed for the range input). Be aware that the animation of the UFO moving through space is pretty heavy for your machine, so I advice you to watch it at least on a decent laptop.
Skills used:
- CSS
- Github repo
10 years of CSS day

This website is made in a hackathon where we competed against other groups. The judges were Peter Paul Koch and Krijn Hoetmer. Ultimately, our team won the hackathon, earning free tickets to CSS Day along with another group.

We created a website featuring data from the past 10 years of CSS Day for its 10th anniversary. This project was developed during a 3.5-day hackathon where we competed against other groups. Our website had to be accessible and needed to have progressive enhancement. The judges were Peter Paul Koch and Krijn Hoetmer. Ultimately, our team won the hackathon, earning free tickets to CSS Day along with another group.
Skills used:
- accessible html
- CSS
- Javascript
- Github repo
Chat PWA

In this project which involved using APIs, and discovering features of the web you didn't know before, I made a chat app like WhatsApp and other messaging apps. I build the application with node.js, Javascript, Liquid and css. I used server-sent events to let the receiver get the texts, idle detection to know if the user is active or not and I worked with service workers to be able to install the PWA and to use the push notifications api to send notifications to the user if he is not online. I tried some experimental things during this project and one of them is that I did not set up a database. I stored the messages on the server in the beginning. After a while I used fs to store them in a json file instead of the server. But render, the service where I have put my webapp online, resets the content of these files when the server restarts. And because I didn't wanted to set up a database, I thought of something different. I made a private github repository, generated an access token, and now I store and get the data from my own github api/database.
Skills used:
- Service workers
- Node.js
- Javascript & CSS
- Liquid
- Github repo
Social Network Simulator

I made this project together with two other people for a client named ResponsibleIT, a research group based at the HvA. They were researching the behavior of social networks and wanted a simulator to demonstrate why and how content bubbles are created.

They had already built this simulator in Python, using the logic and formulas behind their research, but it didn’t work well, and the UI and UX were almost non-existent. Our job was to implement this logic with webtechnology in a website with an intuitive user interface so that users would more easily understand what was happening.

In the end, we created a simulator where the user can build their own social environment and click Play to see the simulation in action. At first, it was hard to understand what you were looking at. To fix this, we implemented several APIs to give faces to the people in the network and added a phone interface with real posts that users can like, along with other interactive options, all within a user interface that feels familiar. We built this without a framework, using only HTML, CSS, and object-oriented JavaScript (something we specifically wanted to learn).

We completed the project in five weeks and had three client meetings. The client was very impressed and happy with the result. They even wanted to use it as a foundation for future feature implementations.

What I learned the most was how to work with a client who had a clear vision for the result, while still giving us the freedom to apply our own expertise to create something truly valuable. And I also learned how we could use Object Oriented Programming to our advantage while using vanilla JavaScript.
Skills used:
- Advanced JavaScript
- For a client
- Object oriented programming
- Github repo
Web Alert

Web Alert is a project I created to graduate from my CMD studies at the HvA. The project focuses on better protecting elderly people against online scams and giving them more self-confidence when using digital devices.

The idea to research and build something in this area came from my own experiences, my social circle, and news articles about the problem. Because I’m already quite technical, I wanted to approach this project differently and step out of my comfort zone. Normally, I would start programming as soon as I had an idea, but that often costs a lot of time in the end. For this project, I went to the elderly, explored ways to research this group, and documented everything. Using different research methods gave me multiple insights.

Some key insights were: A tool that automatically checks for scams is something they want, most of them don’t like change and asking for help feels trustworthy and is something they already do.

These insights led me to the idea of building a tool that helps them in a way they recognize from the offline world, instead of trying to teach them something new.

This led me to build a web extension that they or their family members can install with just one click. It checks whether a domain is safe by using the check.veiliginternetten.nl API and the politie.nl API. If the site is unsafe, the user receives advice on what to do, and they can also send the information via email to someone they trust.

Because web extensions don’t work on mobile phones, I created a website where users can fill in a short form with four questions. At the end of the form, they receive a link with a few extra steps to add a shortcut to their device. This shortcut lets them ask for help within two clicks and provide more information about what they see, resulting in better advice.

I tested this product multiple times throughout different stages of the prototype. This resulted in a very effective process and a happy user in the end. The feeling that they can ask for help at any time, while also being able to see if a website is safe or not, gives them more self-confidence when using digital devices.
Skills used:
- UX research
- web extensions
- User testing
- Github repo