Jphindev’s Portfolio

Portfolio réalisé avec

Github

Qui suis-je ?

Je m’appelle

Jean-Philippe Herfeld

et je suis développeur web junior.

Après ma formation de développeur web qui a démarré ma reconversion professionnelle, je continue à me former de façon autonome sur de nouveaux langages que je mets en pratique via des projets personnels.

J’aime les distributions Linux, la logique React couplée avec Next et les animations CSS.

Outre les compétences présentées au-dessus, je sais également utiliser les langages PHP/MySQL, Node/Express et mettre en place un SEO.

Je suis curieux de tout et aime les challenges qu’offre la vie.

Ma maxime du moment:

" C’est dans la contrainte que nait l’inspiration. "

J’écris, anime et enregistre des sessions JDR, la dernière se déroule dans l’univers des backrooms.

Rigoureux et méthodique, j’aime avoir des projets sans bugs optimisés SEO et résultats enrichis.

Rigoureux et méthodique, j’aime avoir des projets sans bugs optimisés SEO et résultats enrichis.

moi assis dans l'herbe avec un ordinateur

Un site doit être responsive, dynamique et inclusif en le rendant le plus accessible possible.

Mon CV, ma skill map et ma page Github sont consultables ici:

Skills

Github

Projets réalisés

MyBalatro, companion app du jeu Balatro

php

MySQL

Javascript

Site

Mission

Créer une companion app pour le jeu Balatro

Contraintes

Utilisation des langages PHP/MySQL

Problématiques rencontrées

Gestion de la sauvegarde d'objets débloqués : Utilisation d'une entrée en JSON dans la base de données MySQL afin d'ajouter des données dans le tableau de sauvegarde.

Compétences acquises

Formulaire de connexion et d'inscription en PHP
Gestion d'une sauvegarde utilisateur dans la base de données
Requêtes SQL pour communiquer avec la base de données
Respect de la charte graphique du jeu vidéo

Jeu de réflexe en JavaScript

html

CSS

Javascript

Github

Site

Mission

Créer un jeu avec du JavaScript et des animations CSS

Contraintes

Utilisation des langages html, CSS et Javascript seuls

Problématiques rencontrées

Gestion des addeventlisteners imbriqués qui s'activaient en boucle: résolu grâce à un systéme de sauvegarde en localstorage qui permet le reset des écouteurs.

Compétences acquises

Animations CSS
Maîtrise de la portée des addeventlisteners
Difficulté progressive
Changement dynamique du pointeur de la souris

Front-end JS d’un site portfolio

html

CSS

Javascript

Github

Mission

Créer le front-end dynamique d'un site portfolio d'une architecte d'intérieur

Contraintes

Utilisation des langages html, CSS et Javascript seuls

Problématiques rencontrées

Gestion du token d'authentification : Pour autoriser l'ajout d’un nouveau travail, il fallait enregistrer le token dans un sessionstorage puis le déclarer dans le header de la requête lors du fetch post.

Compétences acquises

Création de fenêtres modales
Communication avec un back-end
Requêtes vers une API
Respect de la maquette Figma

Debug et optimisation d'un site

SEO

Lighhouse

WAVE

Github

Site

Mission

Débuguer et optimiser un site web pour le rendre plus rapide, plus performant et mieux référencé grâce au SEO

Contraintes

Avoir un score Lighthouse supérieur à 95% pour desktop et mobile

Problématiques rencontrées

Avoir un bon score lighthouse pour mobile: Résolu grâce à l’utilisation de la propriété srcset afin de charger des images plus petites pour l'affichage mobile.

Compétences acquises

SEO, résultats enrichis et metadonnées
Mesure des performances du site avec l'outil Lighthouse
Rendre le site plus inclusif grâce à l'outil d'accessibilité WAVE
Écrire un rapport d'optimisation

Front-end React et Sass d'un site

React

Sass

Github

Site

Mission

Créer le front-end d'un site de location immobilière

Contraintes

Utiliser React JS et un langage Scss pour le style

Problématiques rencontrées

Avoir des animations fluide pour les collapses: Résolu en changeant progressivment la taille de la div et la révélation du texte par l'utilisation de keyframes.

Compétences acquises

Logique des composants React
Spécificités du langage Scss
Création d'un carousel
Création de collapse via des animations CSS

Back-end Express et MongoDB

Node

Express

MongoDB

Github

Mission

Créer le back-end d'un site de notation de livres

Contraintes

Utiliser Express JS et une base de données MongoDB

Problématiques rencontrées

Gestion de la sauvegarde d'images: Résolu en utilisant les middlewares Multer et sharp afin de sauvegarder des images optimisées.

Compétences acquises

Logique serveur, routes, middleware et controller
Opérations CRUD
Sécurisation de la base de données
Authentification et connexion via token

Ressources

En plus des cours de la plateforme OpenClassrooms, voici les sites ou vidéos qui m’ont aidé et m’aident à me former. Les explications y sont claires et permettent de progresser plus facilement sur certains concepts.

Pierre Giraud

Son cours m'a fait aimé JavaScript, même si c’est un peu trop détaillé parfois.

Site

École du web

J'ai particulièrment aimé les vidéos sur le CSS et notamment le langage Sass (Scss).

Site

Code Concept

Pour moi la meilleure explication de React qui existe.

Site

ByteGrad

Je n'aurais jamais pu faire ce portfolio sans ses explications sur Next 14.

Site

Contact

Mes compétences vous intéressent et vous souhaitez me contacter ?

Vous pouvez le faire via ma page LinkedIn ou tout simplement par mail.

jphindev@gmail.com

Recommandations

Zakaria

Eddouh

le 20/06/2024

LkdIn

(Commentaire d'évaluation du Projet Javascript Sophie Bluel) Jean-Philippe a effectué une présentation remarquable dans le délai imparti, répondant avec précision aux questions et démontrant une expertise parfaite dans le projet. Toutes mes remarques ont été prises en compte de manière satisfaisante. (Publié avec l'autorisation de l'auteur)

Jordi

C

le 20/06/2024

LkdIn

(Commentaire d'évaluation du Projet Debug et Optimisation) Bel historique Git (une cinquantaine de commits, messages de commit clairs). L'élève est allé bien au dela de l'attendu sur l'accessibilité : avec notamment par exemple l'ajout de la navigation au tab sur l'écran. Les scores obtenus après optimisation sont excellents. Discours très très complet pendant la soutenance, je tiens à la signaler car c'est assez rare que la présentation soit aussi complète. (Publié avec l'autorisation de l'auteur)

Roland

Niokhor Faye

le 20/06/2024

LkdIn

(Commentaire d'évaluation du Projet Backend) Excellente soutenance : la posture était professionnelle, les explications claires et le temps imparti bien respecté. L'aspect sécurité a bien été utilisé aussi. Jean-Philippe a fait preuve de professionnalisme et a acquis les compétences évaluées. (Publié avec l'autorisation de l'auteur)

Hanh

Nguyen

le 24/06/2024

LkdIn

J'adore ton site, il est superbe ! C'est génial de voir à quel point tu mets du coeur dans tout ce que tu entreprends. C'est vraiment un plaisir d'être ta collègue de promo ! Tu es toujours prêt à aider les copains, super consciencieux et tu maitrises parfaitement ce que tu fais. Merci d'être un si bon camarade !

Nelly

Bise

le 25/06/2024

LkdIn

Au cours de notre formation, j'ai eu l'occasion de constater à quel point Jean-Philippe s'engage pleinement dans tout ce qu'il entreprend. Il ne se contente jamais du minimum attendu, il va toujours au-delà pour offrir un meilleur service. Je n'ai aucun doute que Jean-Philippe continuera à exceller dans tout ce qu'il entreprend. Je lui souhaite beaucoup de succès dans sa nouvelle carrière.

Séverine

Carré

le 08/07/2024

LkdIn

(Commentaire d'évaluation du Portfolio) Lors de cette soutenance finale, vous avez su démontrer votre implication et votre professionnalisme. Vous avez scrupuleusement respecté les exigences du cahier des charges. Chaque élément demandé a été abordé avec précision et minutie, témoignant de votre capacité à suivre des directives tout en apportant une touche personnelle à votre travail. Le portfolio présenté est non seulement fonctionnel mais aussi esthétiquement plaisant, reflétant un bon équilibre entre design et fonctionnalité. Votre portfolio est une vitrine de vos compétences techniques. Vous avez utilisé des technologies modernes et pertinentes, démontrant ainsi votre capacité à rester à jour avec les évolutions du secteur. Votre présentation a été particulièrement remarquable. Vous savez captiver votre audience. Votre discours était bien structuré, chaque section de votre portfolio étant expliquée avec des détails pertinents et convaincants. Vous avez su mettre en valeur vos compétences acquises tout au long de votre formation, illustrant chacune avec des exemples concrets de projets réalisés. Il est évident que vous continuerez à progresser avec succès dans votre carrière de développeur web. Je vous souhaite beaucoup de succès dans vos futures entreprises et je suis convaincue que vous apporterez une contribution significative à toute équipe ou projet auquel vous participerez. (Publié avec l'autorisation de l'autrice)