Portofolio by Joris Raymaekers, full stack developer

My Projects .

Goudster

Commercial website for the beer brand Goudster

live website github

Main Features

(complete list in github readme)

Full project: from design in adobeXD, build in NodeJS (Express) to deployment on private server
Compliance: age consent modal on page load, GDPR compliant forms
Map with Google Maps API
Newsletter signup and contact form e-mail handling via Mailgun API

Catacamp

Full stack web app for listing campsites in Catalonia

Try it

Guest - Guest123!

live website github

Main Features

(complete list in github readme)

Built with MongoDb, Express, NodeJS and Bootstrap 4
CSS: grid layout, card design, generic dark/light gradient, image zoom effect
JS: toggle password visibility in forms, copy url to clipboard and tooltip
Models: users, campgrounds, comments with user data association
User authentication: PassportJS Authentication
Password reset with email confirmation (Mailgun API)
Flash messages for user feedback with Connect-flash

Travel Site

Fully responsive front-end website built to practice with SASS/JS file architecture, BEM naming conventions, icon sprites, Gulp, Webpack and the deployment process.

live website github

Main Features

(complete list in github readme)

JS/JQUERY: sticky header on scroll, animated hamburger menu, full screen modal, reveal elements on scroll (Waypoints), lazy loading images (LazySizes), smooth scrolling to page section
CSS: column layout with floats and flexbox
HTML: responsive images with data-srcset attributes

Todo App

Single Page todo-app with custom JSON API

live website github

Main Features

(complete list in github readme)

controller: Nodejs (Express), model: MongoDb & Mongoose
AJAX with jQUERY
taskrunner: gulp (nodemon+browserSync; minification, autoprefixer, babel)

Cooking React

Basic front-end react app for recipes

live website github

Main Features

(complete list in github readme)

Create react-app in Nodejs with localStorage
Recipes can be searched/added/edited/deleted
The changes made in the edit section immediately show up in the recipe list section

Github Highlights .

Check out my code for some other interesting projects

PWA Users

Basic progressive web app with Google Workbox that fetches user data form the placeholder API.

code on github

Auth with JSON Web Tokens

Basic app with JWT authorization. There are three different servers: authServer handles authorization, the other two are for API related requests.

code on github

Codepen Highlights .

Check out my profile on CODEPEN for front-end and javascript mini-projects

Collections include: form validation, AJAX with Axios, filtering DOM elements, unit testing and css animations

visit my profile

My Skills .

The projects above are a good reflection of what I can do for you but to sum it all up here is a list of my skills:

Front-end

HTML5, CSS3, SASS,

Bootstrap, Semantic UI,

Javascript ES6, TypeScript

jQuery, React (hooks)

Build tools: Gulp, Webpack, Parcel

Prototyping in AdobeXd

Basic image editing (GIMP)

Back-end

NodeJs, Express,

AJAX (Fetch API, Axios), REST API's,

JWT, PassportJs,

MongoDb, MySQL

Deployment: VPS (Ubuntu, Nginx), Netlify

Domain setup and management

SSH

Teamwork

Source control: Git, Github

SCRUM, Agile

Trello

Other

Linux CLI

Wordpress management

Polyglot with excellent communication and documentation skills

I am a self-taught developer. Some material I used and recommend:

For most of my development I rely on a windows machine with Visual Studio Code and Git Bash. I'd also been working with Linux Mint for a couple of years prior to learning web development and that is a good way to get familiar with the command line and Ubuntu-based servers.
My go-to hosting providers are Digital Ocean (VPS) and Versio (Wordpress), plus Netlify for automated deployment of front-end apps.
Learn Javascript with the book written by Marijn Haverbeke: Eloquent Javascript: A modern introduction to programming
Udemy courses: 'The Web Developer Bootcamp' and 'The Advanced Web Development Bootcamp' by Colt Steele. Some of the material may be outdated but dealing with outdated packages and unexpected errors without the help of an instructor is a good learning experience.
Learning React: see official docs Thinking in React and Web Dev Simplified by Kyle Cook
For problem solving, inspiration and references use stack overflow, css-tricks.com and Mozilla Developers Network(MDN). Discover front-end design tricks on youtube with Gary Simon (Coursera) and Kevin Powell. For computer science related video's see Computerphile. Engineer Man also has excellent back-end and general programming video's. Finally, Coding Tech will keep you up-to-date with tech conferences from all around the world.