Joost FroonFreelance Frontend web developer

ReactTypeScriptgraphQLTailwindcssstyled componentsJavaScriptApolloJestCSSSASSCypressGatsbyStorybookdataLayerWebpackYarnWorkspacesEmotionGITGitLabHTMLJiraUXReduxNextjsBitbucket

04-10-1987Zevenaar, Gelderland, The NetherlandsDutch / English0640565968 joostfroon@gmail.com

Beslist.nl (10-2023 | current)

Frontend, Lead

After the lead frontend developer left, I was asked to return to Beslist.nl, where I had previously worked in 2022. In addition to introducing new features, I played a key role in the redesign of the main website, ensuring a more user-friendly and modern interface. I was also responsible for facilitating communication between the UX/SEO team and the development team. I established a new team dynamic that ensured we maintained proper code standards and approached infrastructure changes as a collective effort.

ReactTypeScriptJestApolloSASSdataLayerUX

Plein.nl (09-2023 | current)

Frontend

At plein.nl, I joined as a frontend developer with a dual focus: introducing frontend tests and overhauling the existing codebase. This involved transitioning away from JQuery, Handlebars, and Moment.js in favor of plain JavaScript. Taking charge of a new project, I led the transition to a tech stack comprising Tailwind CSS, Twig, and plain JavaScript. The goal was to craft a modern and intuitive shopfront for a forthcoming sub-brand within the plein.nl ecosystem.

VueTailwindcssTwigJavaScript

Four Digits (03-2023 | 09-2023)

Frontend, FullStack, Lead

At Four Digits, I worked on a Next.js project that involved developing a website with multiple languages and multiple sites using React server components. Next.js is a popular React-based framework for building server-side rendered (SSR) web applications, which allows for improved performance, SEO, and UX. My main task was to implement a multi-language and multi-site functionality that supported multiple languages, countries and domains, while also sharing code and resources across the different sites. Additionally, I utilized the latest features of Next.js such as React server components to improve performance and make development easier by enabling components to be rendered on the server.

ReactTypeScriptNextjsTailwindcss

Beslist.nl (04-2022 | 01-2023)

Frontend

Beslist.nl is a popular website that provides product comparisons, attracting more than 400,000 daily visitors. As part of the development team, I was responsible for implementing the product overview and landing pages. This involved configuring the Apollo server and styling the components, with a strong emphasis on optimizing the Core Web Vitals for better Google ranking. By focusing on user experience and performance, we aimed to provide a seamless and efficient shopping experience for our users. We aimed for a 100% test coverage.

ReactTypeScriptJestApolloSASSdataLayerUX

Acato (01-2022 | 03-2023)

Frontend

During my time at Acato, I had the privilege of contributing to the development of NL Design Systems, a component library designed specifically for government websites with high accessibility requirements. The library was built using Storybook, a popular tool for building UI components in isolation. As part of this project, I was responsible for creating and integrating various components into the new Den Haag main domain website. The website was developed using Wordpress and featured a block-based editing system. To ensure seamless integration, I used my expertise in web development to ensure that the components adhered to the required accessibility standards and worked flawlessly within the website's existing infrastructure. Overall, my contributions to NL Design Systems and the Den Haag website helped to improve the user experience and accessibility of the website, while also showcasing my skills in component-based development and integration.

ReactStorybookWordpressSASSPHP

Automotivated (10-2021 | 12-2021)

FullStack

For Automotivated I helped create a boilerplate for car dealer websites. Every component is overridable via the Gatsby themes function. That way we created a boilerplate that is out of the box a fully functioning webapp and has the option to override or shadow every component.

ReactGatsbystyled componentsgraphQLStrapiYarn WorkspacesUX

Emico (07-2020 | 10-2021)

Frontend

I worked on various E-commerce PWA websites, all with a headless Magento backend and an Apollo React frontend.

ReactApolloEmotiongraphQLTypeScript

Fabrique (06-2021 | 07-2021)

Frontend

Fabrique was building a website for one of their clients, a digital exhibition for art pieces. It was my job to build the frontend with Nunchucks templating that the backenders connect with their Django backend. Gsap for scroll animations. One requirement was that the website meets the WCAG 2.0 Level AA requirements.

SASSJavaScriptNunchucks templatingGsap

Hipex (11-2019 | 03-2020)

FullStack

For Hipex we made a statically built website with Markdown files as a backend via Netlify CMS.

ReactGatsbygraphQLstyled componentsNetlifyCMS

Terberg Leasing (07-2018 | 07-2019)

Frontend

During the process of creating the new justlease.nl website, I was asked to join the project team to use the same codebase to create a similar website for another Terberg Leasing label, called ‘plus’. I used the created tech stack to set up a new website for ‘plus’ using React, Styled-components, redux and lots of other modern tools. Currently, I am also involved in creating new features in the shared ReactJS library for both the Justlease and the Plus websites.

ReactReduxstyled componentsStorybookTypeScriptCypressJest

Four Digits (03-2019 | 06-2019)

Frontend

Four Digits is rebuilding the management tool for one of their big clients. A huge system in which employees of the social work company can log and note all their work, comments and administration. I was asked to help create all frontend (Django) templates, Sass stylesheets and javascript. Creating reusable components the backenders on the project are able to keep using in the years to come.

SASSCypressWebpackDjango templatingJavaScript

Goed idee media (10-2018 | 12-2018)

FullStack

This summer, I took some time to dive deep into this system called GatsbyJS. It’s a static site generator for React components with GraphQL data fetching. It’s a very interesting way of building websites, and a solution for many performance problems. I’ve created a new website for goedideemedia.nl and investigating other options of connecting this way of building websites to our existing projects in KeystoneJS.

graphQLGatsbystyled components

Justlease.nl (Terberg Leasing) (05-2018 | 12-2018)

Frontend

While work was being done in creating a new website for Justlease.nl, I joined the scrum team to maintain the currently active Wordpress website. As the progress on the new website was slow, there was a lot of work done in the Wordpress website as well, updating the editing experience for the marketing team to Advanced Custom Fields and upgrading the frontend to Twig templates powered by Timber. Creating new layouts and updating many style elements, as we were testing parts of the new designs in this current website.

WordpressTimberTwigACFSASSKnockoutJS

Goed idee media (2017)

FullStack

Together with my colleague Laurens, we’ve dug deep in KeystoneJS to try and use it as our CMS of choice. KeystoneJS allows us to write Javascript templates, in React, that can be rendered by the server as well. One code to rule them all. We’ve managed to create a page-router that can work with dynamic slugs and other features to turn KeystoneJS, normally just a NodeJS/MongoDB platform, into a real CMS.

ReactCMS developmentMongoDB

DTC Media (now PowerKraut) (2016)

Frontend

DTC Media needed some help updating many of their shtml templates because of new laws in automotive. As experienced automotive developers, we were happy to help our colleagues.

SASSshtml

Ab Mulder BV (2016)

FullStack

For Ab Mulder BV I created a small KeystoneJS application (hosted on heroku) for managing their webshop data. I've created a Mongo model which can be edited by KeystoneJS, and outputs as JSON via Express.

CMS developmentAPIsExpressMongoDBUX

Autobedrijf Wijnne (2016)

FullStack

Wijnne is a local cardealer I've helped to redesign their website, from concept to release. Wijnne.nl is a full featured website offering many services to the enduser, smart user routings, a business to business login and is fully managable by Wijnne via the driving CMS.

CMS developmentLESSMustache

Avira GmbH (2016)

Frontend

For Avira (the virusscanner company) I've created the templates from scratch for their redesigned E-mail security control panel. Using Styleguide.js, I've exported all styles as documentation for the (Django) developers to use. Also created E-mail templates using Foundation Email.

HTMLLESSGrunt

eBay / Nieuweautokopen.nl, (2016)

Frontend

For eBay we created a landingpage for generating private lease leads. I've created the layout using ReactJS and LESS. Using JSON to create the car data and Redux to set the app state (configuration of the car).

ReactLESSJSONReactBootstrapRedux

DCDW (2015 | 2016)

FullStack

Paul de Vries is an authority in the automotive. With his personal blog DCDW.nl he shares his thoughts about the automotive industry. I've created his wordpress blog and added a WooCommerce shop to sell his books and more.

WordpressWooCommerceLESSHTML

ViaLora.nl (2015)

Frontend

ViaLora.nl is a travel agency who wanted to boost their conversion by updating their design. After years of making new features for this website, the design has turned into a mess and I was asked to help clean it up. We moved a lot of the pink (they really like pink) into blue, to emphasise call to actions, focussed on USP's and contact information. ViaLora.nl was created in Symphony PHP.

UXHTMLCSSRedesign

Kunstbedrijf Arnhem (2015)

Frontend

I implemented the new design for Kunstbedrijfarnhem.nl into a fully responsive website. Making everything retina proof with webfonts and scalable images. I used LESS to preprocess my CSS and Mustache to turn the PHP data into HTML templates. Some parts of the website are rendered in ReactJS.

HTMLLESSMustacheReact

AutoBedrijf Boks (2015)

Frontend

Autobedrijf Boks is a big car dealer in Apeldoorn, upgrading their website design. I created their new website with Bootstrap and Mustache, getting external car data and reviews over multiple API's. I used mobile proof slideshows to enlarge the mobile shopping experience. The search is made in BackboneJS with Handlebars templating.

HTMLLESSCSS animationsMustachejQueryBackboneAPIs

Ab Mulder BV (2015)

Concept, Frontend

Ab Mulder BV is a multi location car dealer in the east of Netherlands. We created a completely new responsive website. I started with a wireframe and functional design. Gathering all of the clients wishes into different needed screens. This was turned into a design by our partner at Dezzign, by my supervision. The site was made with Bootstrap, Less, Mustache templates, BackboneJS, Handlebars, and fonticons. There is a strong focus on the navigation flow. Every page leads to another. The entire website encourages the user to contact Ab Mulder BV.

ConceptWireframingHTMLLESSSEOMustache

Box Consultants (2014)

Concept, Frontend

Box Consultants asked me to renew their multi-lingual website. Together with Dezzign I created a very clean and businessy design, very suited for their work. A fully responsive website with Mustache filled with multi-lingual codes.

HTMLLESSMustacheMultilanguageConcept

We-R Parts (2014)

Frontend

Selling parts for asian cars, We-R Parts is a big playing in the area. We've created a dutch, english and german version of the same website for them. Behind the login screen, users can search their products database via a BackboneJS search engine.

HTMLLESSMultilanguageMustache

Bandshirt.nl (2013)

Frontend

For Bandshirt.nl I've created the stylesheets, early adapting the ways of Responsive web design. I've used media queries to determine if I should load Retina or plain images. Adding an iconfont Bandshirt.nl offers a stunning mobile look.

HTMLLESSResponsiveRetina

Nieuweautokopen.nl (2013)

Frontend

For a couple of months, I've regularly tested the usability and User Experience of Nieuweautokopen.nl's main website. The constantly changing website was only being managed functionally, so it was up to me to keep an eye on the website keeping usable. Regularly I combined my notes into improvement plans for the development team.

UsabilityUX