Jean-Marc Möckel
Main

PROJECTS

Masterpiece Collection

Because I’m continuously growing and expanding my knowledge, my projects represent my acquired skills. I love building them in my spare time to gather practical experience and knowledge me and my team mates can benefit from.

Portfolio Website
PORTFOLIO WEBSITE

My personal portfolio site that shows my experience and skills. Furthermore you get a closer look on who I am. It's all crafted by myself. From the idea, over the design and development to the DevOps part. This site was a great teacher in terms of deployment and how to setup a proper CI/CD Pipeline in combination with a Linux Server. I also learned a lot more about Docker and Docker Compose and shifted from just a user of docker containers to a builder of own docker images and how to compose them. I wouldn't call myself a Docker expert yet, but I'm progressing more and more.

NEXT.JS
DOCKER
MATERIAL UI
GITHUB ACTIONS
LINUX
Decision Finder
DECISION FINDER

This is a tool that implements the WEIGHTED AVERAGE DECISION MATRIX, which was invented to help with making decisions, especially when they're tougher. I've used it for my own decisions in the past and thought it would be a great idea to provide a lean application here on my website that implements it. Interactively you'll be guided through each step to collect all the necessary data that makes up the decision. After all your result will be calculated based on the Weighted Average Decision Matrix concepts.

REACT
MATERIAL UI
TYPESCRIPT
REACT CONTEXT
PREVIEW
Password Generator
PASSWORD GENERATOR

This is my first challenge on frontenmentor.io. The purpose of this one was to get my hands dirty with Vue.js for the first time to expand my knowledge. I have decided to not use any css-libraries like tailwind. It has made a lot of fun and I've learned many different things. Check out the readme file in the github repo to get more detailed informations about the project itself and my learnings / challenges.

VUE.JS
SCSS
Dev Jobs Web App
DEV JOBS WEB APP

This is another cool challenge from frontendmentor.io. The purpose with this one was to build a more complex Vuejs app and connect it to a backend. In my case it's a CMS that exposes a GraphQL API. So it was also a great opportunity to sharepen my GraphQL skills as well. I've also implemented some new features on my own. Check the README file in the GitHub repository to read more on that.

VUEJS
VUEX
VUE-ROUTER
GRAPHQL
VITE
Mockwizard (NPM Package)
MOCKWIZARD (NPM PACKAGE)

A npm package I've built myself, that helps developers to create mocked data of many different kinds very easily. It's a great way for me to manifest my OOP skills in typescript and to incorporate some design patterns like Factory and Facade. Furthermore the whole package is developed with TDD (Test Driven Development). On the other side this project helped me to make the development workflow more professional with Github.

TYPESCRIPT
OOP
NPM
Link Sharing App
LINK SHARING APP

Another cool challenge from frontendmentor.io where I've built a fullstack application that helps users to create, read, update and delete links for their social media profiles. It has also an authentication flow integrated and a cool preview mode. I've also added an automatic link generation to allow users to share their profile with others. It is all hosted on Vercel including the CI/CD pipeline and the Postgres database. For more details checkout the Github repository linked below!

NEXT.JS
TYPESCRIPT
PRISMA
POSTGRES
TAILWIND
VERCEL

ABOUT

WHOAMI

To live a fullfilled live there's a lot to it. You'll get more detailed informations about myself in this section. You also find my resume in here if you want to go deeper.

I don't believe just in talent. Consistency, focused work and perseverance beats everything.

- Jean-Marc Möckel -

I’m living in the beautiful city of Muenster in Germany with my wife and our little dog. When I started to discover programming and computer science it felt like revealing a secret. I immediately got hooked from the first lines of code I’ve ever written. It is the ultimate channel for me to express my creativity and to leverage my joy of logical thinking.

As a huge believer that every human has at least one determination, I know that creating and building things is mine. That’s the reason why I don’t hesitate to expand my knowledge on a daily basis. It’s just a natural thing for me.


When I’m not surrounding myself with programming or computer science I love to train CrossFit 3-4 times a week to keep my body and mind fit. Keeping my health on top is essential for me to perform on a high level. So I also enjoy to cook my own food. It’s another way to express creativity.

Reading non-fiction books is a habit that sticks with me for many years. It has opened my mind and shaped the way how I see life. I also see it as a workout for my brain to discover new ways to improve everything around me. One of my most recommended books is „Atomic Habits“ by James Clear which had a huge impact on my way to become a successful self-taught developer.

Acquiring knowledge is one thing. Pass it on another. For me being a developer is not only about writing clean code. It’s a responsibility to pass the knowledge on to others the more experienced we become. Therefore it’s also essential for me to help my team mates with my experiences and to learn from them as well because nobody can know it all.

SKILLS

Current Stack

Learning new tools is as essential as sharpening my current ones. I love to work with the full stack (Frontend + Backend), but my strength is in Frontend Development.

Skills Diagram 01/2022
Essential Skills

HTML5 & CSS3

Javascript (ES6+)

Typescript

React & React Native

Node JS

MongoDB

Agile Development

Redux

GraphQL

Git

NPM & Yarn

Next JS

Material UI

Adobe XD

Jest

Firebase

BLOG

Featured Posts

One of the best channels for me to share my thoughts and helping the developer community is to write blog posts. Writing has always made a lot of fun for me.

How I Landed My First Developer Job Without Writing A Single Application

Photo by Roman Synkevych on Unsplash

How I Landed My First Developer Job Without Writing A Single Application

2020-04-23

Recapturing my one year journey of becoming a developer and how I landed my first job without applying for it. This post turned out to be a massive inspiration for many other developers out there…

Healthy Habits - How To Become a Better Developer and Live a Happier Life

Photo by Prophsee Journals on Unsplash

Healthy Habits - How To Become a Better Developer and Live a Happier Life

2021-04-12

In this post I share my experience in improving other areas of life like healthy nutrition, meditating, stress management and much more where you can benefit from as a coder and a human…

React Best Practices – Tips for Writing Better React Code in 2022

Placeholder

React Best Practices – Tips for Writing Better React Code in 2022

2022-02-03

Compact guide of all best practices I've encountered over the last two years by using React on a daily basis in my day job and in my own side projects...

CONTACT

Let's talk

Feel free to reach out and drop me a quick line. Just click on one of the icons below.

© Copyright 2023 Jean-Marc Möckel. All rights reserved