Grégory Zirn

PORTFOLIO

Bienvenue dans mon portfolio ! Vous y découvrirez une sélection de projets démontrant mon expertise technique et ma capacité à résoudre des problématiques complexes dans le développement de sites et d’applications web. Chaque projet met en avant des compétences en front-end et en back-end, des intégrations performantes, et des optimisations UX et SEO. Que ce soit à travers le développement de nouvelles fonctionnalités, la creation, ou encore l'optimisation et le design d'applications, j’y présente les solutions apportées à mes clients pour répondre à leurs objectifs spécifiques. Bonne visite, et n'hésitez pas à me contacter pour discuter de projets futurs !

HelloBank
HelloBank
Formulaire de souscription d'un compte bancaire chez Hellobank.
- Le formulaire se compose d’une landing page sur laquelle les données du prospect sont tout de suite récupérées pour pouvoir le relancer en cas d’abandon
- Ensuite nous récoltons plus d’information sur le prospect comme son adresse postal, son identité, sa profession puis ensuite on demande aux prospect de fournir ses pièces justificatives a l’aide d’un système d’upload avec vérification des données via une api
- Pour la partie technique, le formulaire est livrée dans une iframe, donc j’ai du faire face a des problématique lié au cross-domain pour par exemple étendre la hauteur de l’frame (chez le parent donc) quand on déroule un dropdown dans le formulaire (l’enfant)
- La stack technique était composée de : Symfony2, Jquery, twig, foundation et de Web services pour la validation des pièces justificatives.
BNP Paribas
BNP Paribas
Formulaire d'ouverture de compte BNP Paribas 9 minutes
- Le client BNP Paribas nous a sollicité afin de pouvoir se positionner sur le marché du compte bancaire en 9 minutes ! Donc c’est la première contrainte technique. Mais le formulaire reste sensiblement le meme.
- Le formulaire est a peu près identique à celui de Hellobank, donc le gain de temps est au niveau des vérifications des pièces fourni. Pour des raison de productivité nous avion récupérer le système d’upload de Hellobank
- La stack technique était composée de Symfony pour le back-end, REACT pour le front avec le framework material ui basé sur REACTJS.
Le Point.
Le Point.
Développeur/Intégrateur web
- Compétences webmastering, SEO, SEA
- AB/test pour l’abonnement (paywall) avec Kameleoon
- Gestion CMP Sourcepoint. Rgpd, bannière de cookies
- Utilisation et implémentation de PDM AT internet
- Intégrations de script partenaire. (taboola, sirdata, beops, ajout key/value pour google ads)
- Édition d’articles pour les journalistes
Tetris.
Tetris.
Jeu du tetris développé en Angular JS et Node JS
- Création d'application SPA avec AngularJS
- Configuration du routage et des vues
- Gestion de la logique métier dans les contrôleurs
- Création de services pour la communication API
- Liaison des données entre vue et modèle
- Utilisation de ng-click, ng-show, ng-repeat, ng-disabled
- Gestion des données et événements entre contrôleurs
- Animation et boucle de jeu asynchrone
- Injection des services AngularJS
- HTML5 Canvas API
Memory.
Memory.
Jeu du memory développé en React JS et Node JS
- Création de composants fonctionnels avec Hooks (useState, useEffect, useCallback)
- Gestion des états locaux et partagés entre composants
- Communication parent-enfant et réutilisation de composants
- Maîtrise des effets de bord et du cycle de vie React
- Rendu conditionnel basé sur l'état de l'application
- Création d'API RESTful, routage, middleware
- Configuration des politiques de partage de ressources
- Méthodes GET, POST, validation des données
- Création et gestion de base de données relationnelle
La maison de l'architecte.
La maison de l'architecte.
Mise en pratique d'une mise en page avec Bootstrap
- En-tête : Utilisation d'un jumbotron avec surcharge de la couleur de fond et de la marge inférieure. Au sein de ce jumbotron j'utilise la grille pour répartir le logo et le titre. Utilisation des classes pour centrer le texte et pour cacher le logo sur les smartphones
- Corps de page : Répartition des images avec la grille. Marge entre les images
- Pied de page : Une rangée et un centrage avec quelques règles css pour les boutons ronds
- Généralités sur la page : Police Bitter de google fonts pour le texte. Une couleurs de fond à #eef, et la couleur du texte à #259
La maison de l'architecture.
La maison de l'architecture.
Mise en page faisant intervenir des plugins javascript
- Barre de navigation fixée en haut avec un fond noir qui se rétracte sur les petits supports
- Un carrousel avec les indicateurs de slide, les titres et les boutons de navigation
- Pour le pied de page utilisation d'une rangée avec un centrage et des images Font Awesome
Jeu de plateau Javascript.
Jeu de plateau Javascript.
Stack technique
- HTML CSS
- Les bases de JavaScript (variables, conditions, boucles, évènements)
- La programmation orientée objet en JavaScript
- Dissocier les calculs "métier" du jeu (est-ce que le joueur a le droit d'aller sur cette case ?) avec la mise à jour de l'interface
- Séparer autant que possible les codes ayant des rôles différents dans des fichiers JavaScript différents

Disciple du Javascript
Acquis
- Apprenez à coder en Javascript
- Dynamisez vos sites web avec Javascript
- Créez un jeu de plateau tour par tour en Javascript
- Simplifiez vos développements Javascript avec JQuery
- Des applications ultra-rapides avec node.js
- Développez vos applications web avec Angular.js
- Créez une single-page app avec node.js et meteor
Intégrateur web
Acquis
- Comprendre le web
- Apprenez à créer votre site web avec HTML5 et CSS3
- Prenez en main Bootstrap
- Gérez votre code avec Git et Github
- Utilisation du framework Express.js pour la gestion des routes, des templates et des middlewares
- La communication temps réel avec socket.io
Référencement web
Acquis
- Le référencement dans le contexte du webmarketing
- Référencement naturel et référencement payant
- Les moteurs de recherche
- La pertinence et la notoriété d'une page web
- Définir des mots clés
- Lister les mots clés
- Analyser les recherches des internautes
- Repérer les mots clés des concurrents
- Présentation du contenant
- Optimisation technique du contenant
- L'unicité du contenu
- Utilisation des outils SenSEO Semrush et google adwords
- Gestion des liens entrant et sortant
Start-up
Acquis
- Les caractéristiques principales d'une start-up
- Les modèles économique des start-ups
- Le mode de fonctionnement d'une start-up
- Envisager l'échec
- L'état d'esprit d'un entrepreneur
- L'écosystème des start-ups
- S'informer et structurer sa veille
- L'immersion dans un incubateur
- Trouver, développer, tester et donner vie à une idée
- Le parcours d'un entrepreneur
Lancer son site web
Acquis
- Comprendre le web
- Apprenez à créer votre site web avec HTML5 et CSS3
- Concevez votre site web avec PHP et MySQL
- Les clés pour réussir son référencement web

Comprendre le web
Acquis
- Comprendre la notion de web au travers des représentations
- Maîtriser les notions de web, services et cloud
- Connaissances sur la création du web et ses acteurs
- Notions sur les différents langages clients/serveurs qui existent aujourd’hui sur le web
- Fonctionnement et comparaison entre les différentes base de données
- Les intérêts d’un site responsive et mobile
- Les réseaux derrière le web (serveur, IP et protocole)
- Validation de la question : « Le métier de développeur web est-il en adéquation avec mon profil personnel ?
- Le parcours pour devenir développeur informatique et quelques astuces pour accéder au saint Graal
Devenir mentor
Acquis
- Devenir mentor
- Les enjeux du mentorat
- Les devoirs du mentor
- Les outils et la formation du mentor
- Recevoir et accompagner les élèves
- Valider un projet
Le cloud d'IBM Bluemix
Acquis
- Apprenez à coder en Javascript
- Dynamisez vos sites web avec Javascript
- Des applications ultra-rapides avec node.js
- Gérez votre code avec Git et Github
- Déployez des applications dans le cloud avec IBM Bluemix

Linux
Acquis
- Les fondements de Linux
- Partitionner un disque dur
- Installer Linux dans une machine virtuelle
- Utilisation de la console
- La structure des fichiers et dossiers
- Les utilisateurs et les droits
- Editeur de texte vim
- Installer des programmes avec apt-get
- Extraire, trier et filtrer des données
- Rediriger le résultat d'une commande
- Surveiller l'activité du système
- Exécuter des programmes en arrière-plan à une heure différée
- Archiver et compresser
- La connexion SSH
- Transférer des fichiers
- Analyser le réseau et filtrer le trafic avec un pare-feu
- Compiler un programme depuis les sources
- Scripts shell
Programmer en C
Acquis
- Les bases de la programmation en C
- Les techniques avancées du langage C (programmation modulaire, pointeurs, tableaux, chaines de caractères, préprocesseur, types de variable, lire et ecrire dans un fichier et allocations dynamique de variable)
- Installation de bibliothèques
- Afficher des images
- La gestion des événements
- Ecrire du texte avec SDL_ttf
- Gestion de l'audio avec FMOD
- Les listes chaînées
- Les piles et les files
- Les tables de hachage
IBM Bluemix
Acquis
- L'environnement cloud d'IBM Bluemix (IaaS, PaaS et SaaS)
- Les services de Bluemix
- La tarification
- L'interface
- Développer un projet avec DevOps services
- Installer les outils pour utiliser Bluemix depuis chez soi en ligne de commande
- Configurer les paramètres de l'application (nombre de serveurs, mémoire) directement depuis les fichiers de l'application
- Utiliser Git avec Bluemix
- Déployer une application en ligne
- Ajouter des services à une application (Cloudant, Watson et Cloud Integration)

Node.js
Acquis
- Les atouts de node.js
- Ecouter et créer des évènements
- Fonctions de callback
- Créer des modules
- Utiliser NPM pour installer des modules
- Utilisation du framework Express.js pour la gestion des routes, des templates et des middlewares
- La communication temps réel avec socket.io
PHP et MySQL
Acquis
- Installation d'un serveur web local comprenant Apache PHP et MySQL
- Inclure des portions de page
- Les variables, conditions, boucles, fonctions et tableaux
- Transmettre des données par l'url ou par les formulaires
- Variables superglobales, sessions et cookies
- Stocker et manipuler des informations à l'aide de MySQL
- Les fonctions, dates et jointures entre tables
- Créer des images en PHP
- Les expressions régulières
- La programmation orientée objet
- Organiser son code selon l'architecture MVC
- Proteger un dossier avec un .htaccess
Javascript
Acquis
- Configuration d'un environnement de travail en ligne avec JSFiddle, JS Bin et CodePen ou en local avec un IDE comme Sublime Text, Atom et Brackets
- Les variables, conditions et boucles en javascript
- Manipuler et créer des fonctions
- Tableaux et chaînes de caractères
- Programmation orientée objet
Git
Acquis
- Effectuer des commits avec GIT
- Lire l'historique
- Se positionner sur un commit donné
- Utilisation de remotes
- Héberger les repositories sur Github
- Récupérer du code d'un autre repository
- Création de repositories
- Envoyer le code sur Github
- Récupérer des modifications
- Créer des branches
- Fusionner des branches
- Résoudre des conflits
- Identifier les auteurs des différents commits
- Ignorer des fichiers
Wordpress
Acquis
- La publication d'articles, de pages, de menus et de medias sous wordpress
- Gérer un site participatif
- Développement de thèmes et plugins
- Mise en production
- Amélioration du référencement
- Optimisation des performances (cacher les ressources et compresser les fichiers JS et CSS)
Html5 et css3
Acquis
- Maîtriser les langages HTML et CSS
- Créer des pages web en HTML et CSS
- Structurer une page web
- Transformer une maquette en page web
- Envoyer un site en ligne
JQuery
Acquis
- Sélection d'éléments en JQuery
- Modifier le contenu d'un élément
- Insérer et remplacer des éléments dans le DOM
- Gestion événementielle
- Animations et effets
- Files d'attente et timer
- Textes et images
- Formulaires et tableaux
- Communications AJAX
- Utiliser et créer des plugins
- Déboguer le code jquery
Bootstrap
Acquis
- Configurer Bootstrap
- Organisation spatiale des éléments à l'aide de la grille.
- Eléments de base: listes à puces, descriptions, tableaux, formulaires de contact, boutons, icônes et images
- Les composants intégrés: la navigation, effets typographiques, thumbnails, listes groupées, panneaux, médias, alertes et barres de progression
- Les plugins JQuery: menu déroulant, fenêtre modale, onglets, boutons, carrousel, info-bulles et Popover, effet accordéon et le Scrollspy

Alternance Développeur - SYMFONY - REACT - ANGULAR - VUE

QUI SUIS-JE ?

COMPÉTENCES

PORTFOLIO

CERTIFICATIONS