Bonjour, je suis intégrateur et développeur Front-End. Bienvenue sur mon portfolio !
Passionné, mon objectif est d’intégrer une équipe dédiée au Web, en agence ou chez un annonceur et mettre à profit mon expérience de la création de sites marchands ou non.
Polyvalent, autonome avec un très bon relationnel et esprit d’analyse et de synthèse, je mets en place des solutions techniques adaptées pour donner vie à toutes les idées créatives, dans le respect des standards du web et avec le souci du détail et un rendu fidèle au design.
Ce site web est un espace dédié à vous faire découvrir mon parcours professionnel, vous y trouverez tous les détails concernant mes études, les stages et postes que j'ai pu occuper, sans oublier les différents projets réalisés.
N'oubliez pas de me suivre sur les réseaux sociaux pour tout supplément d'information et bonne visite à tous!
Bac+3 (validé).
ENSA (Ecole Nationale des Sciences Appliquées).
- Discipline: Sciences et Techniques de l'Ingénieur.
- Filière: Ingénierie du Logiciel.
- Mention: Très Bien.
DELF B2 (Diplôme des Etudes de la Langue Française - Niveau B2).
Diplôme de Technicien Spécialisé en Techniques de Développement Informatique (obtenu).
ISGI (Institut Spécialisé de Gestion et d’Informatique).
Diplôme de Technicien Spécialisé en Techniques des Réseaux Informatiques (obtenu).
ISGI (Institut Spécialisé de Gestion et d’Informatique).
Certificats CISCO: CCNA1 - CCNA2 - CCNA3 - CCNA4.
Baccalauréat en Sciences Expérimentales.
Développeur Front-End
Freelance.
Développeur Front-End / Intégrateur web :
- Programmation des interfaces utilisateur pour les applications et sites web (maitrise des langages HTML5, CSS3, et JavaScript).
- Conception et optimisation des pages web (aspect artistique & technique).
- Gestion de l’accessibilité, la lisibilité, et de la responsivité mobile tout en respectant les normes du W3C.
- Veiller au bon référencement des pages web (code « SEO-friendly »).
- Veiller à la compatibilité des sites web avec les différents navigateurs.
Design graphique / web design :
- Prise en charge de l’identité visuelle du site web (maitrise des logiciels graphiques : Photoshop, Illustrator, In design, …).
- Réalisation des Chartes graphiques propres à chaque projet à partir des représentations « Wireframe » respectives (police des caractères, palettes des couleurs, design des logos, …).
- Maquettes, prototypes.
- Logos, guide de style.
- Image de couverture, bannières, illustrations.
- Brochures prospectus.
Développeur Front-End / Web designer – Rattaché au responsable
online / e-commerce.
Web Media Interactive
Tanger - Maroc.
Conception, mise en oeuvre, et maintient des portails web de contenu pour différents clients. Découpage des maquettes, réalisation de prototypes, et préparation des visuelles. Collaboration avec d’autres développeurs Front-End / Back-End pour la maintenance, l’intégration, et le développement des sites e-commerce pour différents clients. Refonte de l’identité visuelle et technique des sites web vitrines des agences partenaires (intégration des logos, bannières, animations, images des couvertures, menus de navigation, responsivité mobile, …). Intégration des pages événementielles, pages de voeux, et templates pour plusieurs clients. En équipe, création d’interfaces d’administration, intégration et refonte de certaines plateformes clients. Mises à jour ponctuelles de divers sites. Maintenance statique du site web de l’Entreprise (optimisation des ressources et des temps de chargements, correction des bugs, et prise en charge du référencement SEO, …).
Stage en Entreprise au sein de HARD SOFT DEVELOPEMENT.
Tanger - Maroc.
Analyse et conception d'un logiciel de gestion d'hôpital: H.M.S(Hospital Management Service).
- Outil de développement : XAMPP (PHP, MySQL, Apache).
- Framework web : LARAVEL (Architecture MVC).
Stage en Entreprise au sein de DESIGN INFO MEDIA(SSII)
Tanger - Maroc.
Conception d'une application de gestion de commandes (client/serveur): S Manager.
- Langage de programmation : C#.
- Environnement de développement : Microsoft Visual Studio.
- SGBD : Microsoft SQL Server.
Stage en entreprise au sein de l'Agence MOULAY ELHASSAN de la Banque Populaire
Tétouan - Maroc.
Création et restauration d’images système. Assistance technique des utilisateurs internes (à distance) – Systèmes d’exploitation Microsoft. Gestion du parc téléphonique de l’Agence (intervention en cas de dysfonctionnement système, problèmes réseau, …). Gestion de la sécurité (sauvegarde, pare-feu, antivirus, …).
"Movie Station" est une bibliothèque cinématographique en ligne qui regroupe des fiches d'informations sur tous vos films favoris.
- Découvrez les nouveautés du moment.
- Parcourez les listes des films les plus populaires.
- Recherchez les films qui vous intriguent ou que vous regarderez plus tard.
Techniques & outils de développements utilisés :
API: AJAX (XmlHttpRequest), Fetch API.
HTML5, CSS3, JavaScript (ES6/ES9).
"Just Wait" est un modèle conçu pour être implémenté dans vos projets en cours de construction.
Le Template utilise un compte à rebours dynamique qui expose le temps restant avant la concrétisation de votre projet avenir.
Techniques & outils de développements utilisés :
HTML5, CSS3, JavaScript (ES6/ES9).
"Autotype Effect" est un modèle d'animation en temps réel à appliquer aux titres de vos sites web.
Ajoutez aux contenus textuels de vos pages web l'effet "machine à écrire" qui permet de visualiser les mots se former comme s'ils étaient tapés au clavier.
Techniques & outils de développements utilisés :
HTML5, CSS3, JavaScript (ES6/ES9).
"Boost the Numbers" est un template d'animation croissante automatique de statistiques numériques.
Ajoutez cet effet pour afficher vos abonnements dans les réseaux sociaux par exemple ou avec d'autres statistiques.
Techniques & outils de développements utilisés :
HTML5, CSS3, JavaScript (ES6/ES9).
"Line Slide" est un modèle de slider horizontal utilisé pour exposer une série de vignettes graphiques (ex. portraits, logo, ...).
Les éléments chargés vont défiler automatiquement dans la liste.
Techniques & outils de développements utilisés :
HTML5, CSS3, JavaScript (ES6/ES9).
"Modernav" est un modèle de barre de navigaton principale à intégrer dans vos projets web.
Modernav est un template responsif présenté sous 2 formes: Horizontal(PC,TV), "side menu" Vertical(Tablette, Smartphone).
Techniques & outils de développements utilisés :
HTML5, CSS3, JavaScript (ES6/ES9).
Template interactif de la page d'accueil d'un projet qui me tient à coeur: "Japan Fusion".
Japan Fusion est un site web documentatif qui parle de la culture nippone dans tous ses états (culture japonaise, news, cinéma, anime etc).
Le projet "Japan Fusion" est actuellement en cours de finalisation.
Techniques & outils de développements utilisés :
HTML5, CSS3, JavaScript (ES6/ES9).
Réalisation pour un client d'un site web à aspect documentatif traitant de la thématique des "politiques d'acquisitions et préservation des ressources numériques".
Je me suis permis de partager ici une copie représentative du projet final en remplaçant toutes informations sur le client par mon profil personnel (pour des raisons de confidentialité).
Techniques & outils de développements utilisés :
HTML5, CSS3, JavaScript (ES6/ES9).
Bucket-List Online mets à votre disposition un pense-bête interactif, simple et intuitif.
Matérialisée par un simple formulaire à idées numérique, l’interface web de Bucket-List Online vous offre la liberté d’ajouter une infinité de « tâches à faire » via une zone de texte. La liste alors obtenue peut-être altérée à tout moment en supprimant ou en marquant les tâches achevées.
Bucket-List Online est un site web responsif, accessible aussi par les autres supports multimédias (TV, Smartphones, tablette tactile).
Techniques & outils de développements utilisés :
ReactJs.
Node.js(Sass, npm).
HTML5, CSS3, JavaScript (ES6).
Le défie du clavier est un jeu en ligne qui – comme son nom l’indique – génère des mots aléatoires à taper au clavier le plus vite possible.
- Commencer une nouvelle partie pour charger la liste de mots à taper.
- Chaque mot doit être copié à l’identique avant la fin du « timer ».
- Un menu de difficulté ainsi qu’un gestionnaire d'« High Score » sont de la partie pour plus de challenge.
Techniques & outils de développements utilisés :
Node.js(Sass, npm).
HTML5, CSS3, JavaScript (ES6).
Classynav est un Template qui permet d’implémenter un menu de navigation dynamique.
Bénéficiant d’un désigne contemporain et polyvalent, la conception de ce nouveau modèle en fait la combinaison parfaite que ce soit pour la version bureau, Mobil ou autres, assurant ainsi une responsivité absolue en accordant la permutation vers un aspect plus orienté Mobil et tablette.
Traits & caractéristiques :
Utilisation des menus simples et déroulants.
Inclut une barre de recherche et 2 menus d’authentification.
Un menu vertical de type hamburger prend la relève pour assurer la responsivité mobil.
Smooth Slider est le Template de choix qui conviendra à tous vos projets multimédias.
Déposez aisément vos images quelles que soient leurs résolutions, modifiez le texte qui décrit chaque panorama, et profitez du résultat!
Souple et efficace, ce modèle sera parfait pour tous vos besoins de production.
Traits & Caractéristiques:
- Navigation manuelle à l'aide des flèches directionnelles.
- Navigation automatique hors focus sur le slider. Le diaporama reste figé si le curseur reste sur l'image.
- 10 images sont chargées par défaut.
Il s’agit d’un site web dynamique construit à l’aide du langage PHP, sa mission principale conssiste à simplifier et automatiser le fonctionnement des activités exercées au sein d’un hôpital.
Le logiciel a pour but de diriger diverses actions, tel:
L’inscription des patients.
La consultation et mise à jour des listes des patients et personnels.
La rédaction des comptes-rendus et des bilans des soins.
L’affectation des patients à leurs chambres respectives.
Le tout encadrer par un système d’authentification sécurisé où chaque membre du personnel n’aura accès qu’a ses propres section dans le site.
Plateformes et outils de développement utilisés:
Outil de développement : XAMPP ( PHP, MySQL, Apache ).
Framework web : LARAVEL (Architecture MVC).
Le projet S manager s’inscrit dans le contexte de l’amélioration de l’efficacité opérationnelle de l’activité de vente du matériel informatique, et vise à mettre en place un nouvel outil métier. Ce nouvel outil permet de fluidifier et gérer le fonctionnement de cette activité en prenant en charge l’ensemble du périmètre fonctionnel.
Il aura aussi pour but de faciliter les opérations de vente. De plus, la mise en place de ce nouvel outil permet d’utiliser une technologie plus actuelle, plus fiable et plus cohérente.
S Manager vise à partager les objectifs suivants :
Faciliter, fluidifier et sécuriser le traitement des commandes.
Offrir un haut niveau de service à l’ensemble des intervenants.
S’appuyer sur des technologies récentes, véritables standards techniques.