Kasa
- Kasa est une plateforme web qui permet aux particuliers de louer leur appartement.
- Date projet : Juillet 2022
- Répertoire Github du projet : Cliquez ici !
- J'ai créé ce projet avec React Js. Les pages ont été implémentée par mes soins à partir des maquettes Figma. Comme sur tous mes projets, j'ai porté une attention particulière aux détails. J'ai implémenté un composant Gallery pour le carrousel, avec une pagination et des menus déroulants pour afficher/cacher les détails concernant les locations.
- J'ai découpé l'application en composants indépendants pour améliorer la maintenance et la lisibilité du code.
- J'ai géré l'état en local avec le hook d'état "useState"
- J'ai également utilisé un affichage conditionnel pour afficher ou masquer différents éléments.
- Stack technique : HTML, SCSS, Jsx, React, Git.
Kasa
- Kasa est une plateforme web qui permet aux particuliers de louer leur appartement.
- Date projet : Juillet 2022
- Répertoire Github du projet : Cliquez ici !
- J'ai créé ce projet avec React Js. Les pages ont été implémentée par mes soins à partir des maquettes Figma. Comme sur tous mes projets, j'ai porté une attention particulière aux détails. J'ai implémenté un composant Gallery pour le carrousel, avec une pagination et des menus déroulants pour afficher/cacher les détails concernant les locations.
- J'ai découpé l'application en composants indépendants pour améliorer la maintenance et la lisibilité du code.
- J'ai géré l'état en local avec le hook d'état "useState"
- J'ai également utilisé un affichage conditionnel pour afficher ou masquer différents éléments.
- Stack technique : HTML, SCSS, Jsx, React, Git.
Kasa
- Kasa est une plateforme web qui permet aux particuliers de louer leur appartement.
- Date projet : Juillet 2022
- Répertoire Github du projet : Cliquez ici !
- J'ai créé ce projet avec React Js. Les pages ont été implémentée par mes soins à partir des maquettes Figma. Comme sur tous mes projets, j'ai porté une attention particulière aux détails. J'ai implémenté un composant Gallery pour le carrousel, avec une pagination et des menus déroulants pour afficher/cacher les détails concernant les locations.
- J'ai découpé l'application en composants indépendants pour améliorer la maintenance et la lisibilité du code.
- J'ai géré l'état en local avec le hook d'état "useState"
- J'ai également utilisé un affichage conditionnel pour afficher ou masquer différents éléments.
- Stack technique : HTML, SCSS, Jsx, React, Git.
Fisheye
- FishEye est un site web qui permet aux photographes indépendants de présenter leurs meilleurs travaux.
- Date projet : Janvier 2022
- Page Github du projet : Cliquez ici !
- Répertoire Github du projet : Cliquez ici !
- Dans ce projet, j'ai implémenté une lightbox permettant de faire défiler les photos et videos des photographes depuis leur page personnelle. J'ai implémenté des contrôles personnalisés pour la lecture des vidéos. Cette lightbox m'a donné pas mal de fil à retordre, notamment au niveau de la gestion des événements, mais je n'ai rien lâché et j'ai fièrement atteint le résultat souhaité. La lightbox est opérationnelle !
- Stack technique : HTML, SCSS, JavaScript vanilla, Git.
Fisheye
- FishEye est un site web qui permet aux photographes indépendants de présenter leurs meilleurs travaux.
- Date projet : Janvier 2022
- Page Github du projet : Cliquez ici !
- Répertoire Github du projet : Cliquez ici !
- Dans ce projet, j'ai implémenté une lightbox permettant de faire défiler les photos et videos des photographes depuis leur page personnelle. J'ai implémenté des contrôles personnalisés pour la lecture des vidéos. Cette lightbox m'a donné pas mal de fil à retordre, notamment au niveau de la gestion des événements, mais je n'ai rien lâché et j'ai fièrement atteint le résultat souhaité. La lightbox est opérationnelle !
- Stack technique : HTML, SCSS, JavaScript vanilla, Git.
Fisheye
- FishEye est un site web qui permet aux photographes indépendants de présenter leurs meilleurs travaux.
- Date projet : Janvier 2022
- Page Github du projet : Cliquez ici !
- Répertoire Github du projet : Cliquez ici !
- Dans ce projet, j'ai implémenté une lightbox permettant de faire défiler les photos et videos des photographes depuis leur page personnelle. J'ai implémenté des contrôles personnalisés pour la lecture des vidéos. Cette lightbox m'a donné pas mal de fil à retordre, notamment au niveau de la gestion des événements, mais je n'ai rien lâché et j'ai fièrement atteint le résultat souhaité. La lightbox est opérationnelle !
- Stack technique : HTML, SCSS, JavaScript vanilla, Git.
Fisheye
- FishEye est un site web qui permet aux photographes indépendants de présenter leurs meilleurs travaux.
- Date projet : Janvier 2022
- Page Github du projet : Cliquez ici !
- Répertoire Github du projet : Cliquez ici !
- Dans ce projet, j'ai implémenté une lightbox permettant de faire défiler les photos et videos des photographes depuis leur page personnelle. J'ai implémenté des contrôles personnalisés pour la lecture des vidéos. Cette lightbox m'a donné pas mal de fil à retordre, notamment au niveau de la gestion des événements, mais je n'ai rien lâché et j'ai fièrement atteint le résultat souhaité. La lightbox est opérationnelle !
- Stack technique : HTML, SCSS, JavaScript vanilla, Git.
GameOn
- GameOn est un site web qui permet aux joueurs de s'inscrire à des des tournois de jeux vidéo.
- Date projet : Décembre 2021
- Page Github du projet : Cliquez ici !
- Répertoire Github du projet : Cliquez ici !
- Dans ce projet, j'ai implémenté un formulaire d'inscription avec validation des différents champs et affichage de messages d'erreurs via JavaScript. Pour le champ 'âge', j'ai également ajouté que celui-ci soit supérieur ou égal à 18 ans. A la validation du formulaire, une seconde modale s'ouvre pour confirmer à l'utilisateur son inscription.
- Stack technique : HTML, CSS, JavaScript vanilla, Git.
GameOn
- GameOn est un site web qui permet aux joueurs de s'inscrire à des des tournois de jeux vidéo.
- Date projet : Décembre 2021
- Page Github du projet : Cliquez ici !
- Répertoire Github du projet : Cliquez ici !
- Dans ce projet, j'ai implémenté un formulaire d'inscription avec validation des différents champs et affichage de messages d'erreurs via JavaScript. Pour le champ 'âge', j'ai également ajouté que celui-ci soit supérieur ou égal à 18 ans. A la validation du formulaire, une seconde modale s'ouvre pour confirmer à l'utilisateur son inscription.
- Stack technique : HTML, CSS, JavaScript vanilla, Git.
GameOn
- GameOn est un site web qui permet aux joueurs de s'inscrire à des des tournois de jeux vidéo.
- Date projet : Décembre 2021
- Page Github du projet : Cliquez ici !
- Répertoire Github du projet : Cliquez ici !
- Dans ce projet, j'ai implémenté un formulaire d'inscription avec validation des différents champs et affichage de messages d'erreurs via JavaScript. Pour le champ 'âge', j'ai également ajouté que celui-ci soit supérieur ou égal à 18 ans. A la validation du formulaire, une seconde modale s'ouvre pour confirmer à l'utilisateur son inscription.
- Stack technique : HTML, CSS, JavaScript vanilla, Git.
Ohmyfood
- Ohmyfood est une application permettant aux clients de réserver en ligne leur menu dans un restaurant de leur choix.
- Date projet : Octobre 2021
- Page Github du projet : Cliquez ici !
- Répertoire Github du projet : Cliquez ici !
- Un loading spinner nous fait patienter le temps du chargement de la page. Au clic sur une des cartes restaurant, une page s'ouvre affichant un menu choisi par le restaurant.
- Ce projet m'a permis d'intégrer plusieurs animations comme le remplissage des coeurs au survol, la coche verte qui apparaît au survol des plats du menu, l'affichage progressif des plats à l'arrivée sur la page de menu, ainsi que le loader d'attante pendant le chargement.
- Le site est entièrement responsive et a été développé en mobile first.
- Stack technique : HTML, SCSS, Git.
Ohmyfood
- Ohmyfood est une application permettant aux clients de réserver en ligne leur menu dans un restaurant de leur choix.
- Date projet : Octobre 2021
- Page Github du projet : Cliquez ici !
- Répertoire Github du projet : Cliquez ici !
- Un loading spinner nous fait patienter le temps du chargement de la page. Au clic sur une des cartes restaurant, une page s'ouvre affichant un menu choisi par le restaurant.
- Ce projet m'a permis d'intégrer plusieurs animations comme le remplissage des coeurs au survol, la coche verte qui apparaît au survol des plats du menu, l'affichage progressif des plats à l'arrivée sur la page de menu, ainsi que le loader d'attante pendant le chargement.
- Le site est entièrement responsive et a été développé en mobile first.
- Stack technique : HTML, SCSS, Git.
Réservia
- Réservia permet de trouver un hébergement et des activités dans la ville de son choix..
- Date projet : Septembre 2021
- Page Github du projet : Cliquez ici !
- Répertoire Github du projet : Cliquez ici !
- Ce projet m'a permis d'intégrer plusieurs animations. Comme sur tous mes projets, j'ai apporté une attention particulière aux détails.
- Le site est entièrement responsive et a été développé en mobile first.
- Stack technique : HTML, CSS, Git.
Réservia
- Réservia permet detrouver un hébergement et des activités dans la ville de son choix..
- Date projet : Septembre 2021
- Page Github du projet : Cliquez ici !
- Répertoire Github du projet : Cliquez ici !
- Ce projet m'a permis d'intégrer plusieurs animations. Comme sur tous mes projets, j'ai apporté une attention particulière aux détails.
- Le site est entièrement responsive et a été développé en mobile first.
- Stack technique : HTML, CSS, Git.
Hrnet
- Hrnet est une application de gestion des employés, destinée au service RH des entreprises.
- Date projet : Janvier 2023
- Répertoire Github du projet : Cliquez ici !
- Lien vers le package npm créé et publié pour la modale : Cliquez ici !
- Migration d’une application Jquery vers React.
- J'ai créé et publié un package Npm pour le composant modale. J'ai implémenté entièrement tous les composants et les autres fonctionnalités (carrousel, dropdown menu, pagination, select, table, form)
- J'ai utilisé la librairie "react-datepicker" pour le composant sélecteur de dates
- J'ai testé la performance de l'application avec Lighthouse.
- J'ai documenté le code avec Jsdoc, et typé les props proptypes.
- Stack technique : HTML, CSS, Jsx, React, Git, Lighthouse, Npm.
Hrnet
- Hrnet est une application de gestion des employés, destinée au service RH des entreprises.
- Date projet : Janvier 2023
- Répertoire Github du projet : Cliquez ici !
- Lien vers le package npm créé et publié pour la modale : Cliquez ici !
- Migration d’une application Jquery vers React.
- J'ai créé et publié un package Npm pour le composant modale. J'ai implémenté entièrement tous les composants et les autres fonctionnalités (carrousel, dropdown menu, pagination, select, table, form)
- J'ai utilisé la librairie "react-datepicker" pour le composant sélecteur de dates
- J'ai testé la performance de l'application avec Lighthouse.
- J'ai documenté le code avec Jsdoc, et typé les props proptypes.
- Stack technique : HTML, CSS, Jsx, React, Git, Lighthouse, Npm.
Hrnet
- Hrnet est une application de gestion des employés, destinée au service RH des entreprises.
- Date projet : Janvier 2023
- Répertoire Github du projet : Cliquez ici !
- Lien vers le package npm créé et publié pour la modale : Cliquez ici !
- Migration d’une application Jquery vers React.
- J'ai créé et publié un package Npm pour le composant modale. J'ai implémenté entièrement tous les composants et les autres fonctionnalités (carrousel, dropdown menu, pagination, select, table, form)
- J'ai utilisé la librairie "react-datepicker" pour le composant sélecteur de dates
- J'ai testé la performance de l'application avec Lighthouse.
- J'ai documenté le code avec Jsdoc, et typé les props proptypes.
- Stack technique : HTML, CSS, Jsx, React, Git, Lighthouse, Npm.
Hrnet
- Hrnet est une application de gestion des employés, destinée au service RH des entreprises.
- Date projet : Janvier 2023
- Répertoire Github du projet : Cliquez ici !
- Lien vers le package npm créé et publié pour la modale : Cliquez ici !
- Migration d’une application Jquery vers React.
- J'ai créé et publié un package Npm pour le composant modale. J'ai implémenté entièrement tous les composants et les autres fonctionnalités (carrousel, dropdown menu, pagination, select, table, form)
- J'ai utilisé la librairie "react-datepicker" pour le composant sélecteur de dates
- J'ai testé la performance de l'application avec Lighthouse.
- J'ai documenté le code avec Jsdoc, et typé les props proptypes.
- Stack technique : HTML, CSS, Jsx, React, Git, Lighthouse, Npm.
REACT JS Github repos search directory
- Ce projet est un annuaire permettant de rechercher des repos sur Github. Les données sont récupérées directement via l'API de Github.
- Date projet : Mai 2021
- URL Github du projet : Cliquez ici !
-
Pour ce projet, j'ai utilisé des composants sous forme de fonctions avec les hooks.
J'ai réalisé l'intégration statique avec HTML et SCSS. J'ai également eu la curiosité d'appréhender le framework Semantic UI React, pour découvrir un peu ses possibilités et son fonctionnement.
REACT JS blog Du Tac au Tech
- Un template de blog réalisé avec React Js.
- Date projet : Mai 2021
- URL Github du projet : Cliquez ici !
- L'intégration a été réalisée avec HTML et SCSS
Le blog est réalisé avec React JS. Création de routes avec NavLink, React Router, Switch et Route. J'ai également prévu la page 404. - Les données sont récupérées avec Axios via une API. Un loader s'affiche pendant le chargement des données.
- J'ai utilisé la librairie DOMPurify pour la protection contre les attaques XSS.
- Le visiteur a la possibilité de trier les articles par catégorie et d'afficher un seul article au clic sur celui-ci.
- Plus de captures d'écran sont disponible sur le README du dépôt Github.
REACT JS To Do List v2
- Une autre To Do List réalisée avec React Js.
- Date projet : Mai 2021
- URL Github du projet : Cliquez ici !
- L'intégration a été réalisée avec HTML et SCSS
Le projet est réalisé avec React JS. J'ai mis en place un champ contrôlé sur l'input.
REACT JS - Currency converter
- Ce convertisseur de devises m'a permis de mettre en pratique les connaissances acquises lors de ma formation React JS chez O'Clock (formation suivie pendant 1 mois à temps plein via les replays des cours).
- Date projet : Mai 2021
- URL Github du projet : Cliquez ici !
-
React JS est une bibliothèque vraiment géniale, très puissante et pratique. Elle permet de réaliser des projets à la fois fabuleux et/ou complexes tout en étant optimisés. J'ai hâte de continuer à travailler avec React pour découvrir ses possibilités.
Pour ce projet, j'ai créé certains composants sous forme de classes, afin de travailler les différentes syntaxes possibles de React. Ceci me permettra de comprendre le code de projets qui pourraient utiliser des classes et non des fonctions.
Ce convertisseur m'a permis de mieux appréhender notamment le fonctionnement des props et des states. J'ai entièrement réalisé l'intégration statique avec HTML et SCSS, en utilisant les variables Sass sur tout le projet, afin de rendre celui-ci plus facile à maintenir et évolutif.
REACT JS - Currency converter
- Ce convertisseur de devises m'a permis de mettre en pratique les connaissances acquises lors de ma formation React JS chez O'Clock (formation suivie pendant 1 mois à temps plein via les replays des cours).
- Date projet : Mai 2021
- URL Github du projet : Cliquez ici !
-
React JS est une bibliothèque vraiment géniale, très puissante et pratique. Elle permet de réaliser des projets à la fois fabuleux et/ou complexes tout en étant optimisés. J'ai hâte de continuer à travailler avec React pour découvrir ses possibilités.
Pour ce projet, j'ai créé certains composants sous forme de classes, afin de travailler les différentes syntaxes possibles de React. Ceci me permettra de comprendre le code de projets qui pourraient utiliser des classes et non des fonctions.
Ce convertisseur m'a permis de mieux appréhender notamment le fonctionnement des props et des states. J'ai entièrement réalisé l'intégration statique avec HTML et SCSS, en utilisant les variables Sass sur tout le projet, afin de rendre celui-ci plus facile à maintenir et évolutif.
REACT JS - Recette de gâteau au chocolat
- Cette délicieuse recette de gâteau au chocolat est un projet personnel réalisé avec React JS
- Date projet : Mai 2021
- URL Github du projet : Cliquez ici !
-
Je suis gourmande et j'adore le chocolat ! Donc quoi de mieux que de créer une recette de gâteau au chocolat... Bon j'avoue, j'ai un peu bavé en regardant la photo, mais cela ne m'a pas empêché de travailler.
J'ai utilisé des composants fonctionnels et j'ai également créé un sous-composant pour l'affichage d'un ingrédient.
J'ai entièrement réalisé l'intégration statique avec HTML et SCSS, en utilisant les variables Sass sur tout le projet, afin de rendre celui-ci plus facile à maintenir et évolutif.
O'Stella
- O'Stella est un site ayant pour thème l'astronomie. Il a été réalisé en fin de formation 'Développeur web et web mobile', formation intensive (735h) au sein de l'école O'Clock, labellisée 'Grande école du numérique'.
- Date projet : 13 janvier au 09 février 2021
- URL du projet : www.ostella.live
- Lien vers la vidéo de présentation du projet sur You tube: O'Stella
-
Une équipe de 5 développeurs entièrement autonome, en mode agile.
J'ai participé au projet de A à Z, de l'élaboration du cahier des charges au développement complet.
Stack technique : HTML, SCSS, PHP, MySQL, Wordpress. Image du jour via l'Api de la NASA, cartes du ciel via l'Api Skymap.
En tant que premier projet en autonomie, le développement n'a pas été facile, nous avons dû prendre en compte les contraintes de travailler en équipe et dû résoudre les nombreux bugs rencontrés. Mais, la bonne humeur et l'entraide l'ont emporté et nous avons été fiers d'aller jusqu'au bout et de présenter notre projet en vidéo à la fin de la formation !
O'Stella
- O'Stella est un site ayant pour thème l'astronomie. Il a été réalisé en fin de formation 'Développeur web et web mobile', formation intensive (735h) au sein de l'école O'Clock, labellisée 'Grande école du numérique'.
- Date projet : 13 janvier au 09 février 2021
- URL du projet : www.ostella.live
- Lien vers la vidéo de présentation du projet sur You tube: O'Stella
-
Une équipe de 5 développeurs entièrement autonome, en mode agile.
J'ai participé au projet de A à Z, de l'élaboration du cahier des charges au développement complet.
Stack technique : HTML, SCSS, PHP, MySQL, Wordpress. Image du jour via l'Api de la NASA, cartes du ciel via l'Api Skymap.
En tant que premier projet en autonomie, le développement n'a pas été facile, nous avons dû prendre en compte les contraintes de travailler en équipe et dû résoudre les nombreux bugs rencontrés. Mais, la bonne humeur et l'entraide l'ont emporté et nous avons été fiers d'aller jusqu'au bout et de présenter notre projet en vidéo à la fin de la formation !
O'Stella
- O'Stella est un site ayant pour thème l'astronomie. Il a été réalisé en fin de formation 'Développeur web et web mobile', formation intensive (735h) au sein de l'école O'Clock, labellisée 'Grande école du numérique'.
- Date projet : 13 janvier au 09 février 2021
- URL du projet : www.ostella.live
- Lien vers la vidéo de présentation du projet sur You tube: O'Stella
-
Une équipe de 5 développeurs entièrement autonome, en mode agile.
J'ai participé au projet de A à Z, de l'élaboration du cahier des charges au développement complet.
Stack technique : HTML, SCSS, PHP, MySQL, Wordpress. Image du jour via l'Api de la NASA, cartes du ciel via l'Api Skymap.
En tant que premier projet en autonomie, le développement n'a pas été facile, nous avons dû prendre en compte les contraintes de travailler en équipe et dû résoudre les nombreux bugs rencontrés. Mais, la bonne humeur et l'entraide l'ont emporté et nous avons été fiers d'aller jusqu'au bout et de présenter notre projet en vidéo à la fin de la formation !
O'Stella
- O'Stella est un site ayant pour thème l'astronomie. Il a été réalisé en fin de formation 'Développeur web et web mobile', formation intensive (735h) au sein de l'école O'Clock, labellisée 'Grande école du numérique'.
- Date projet : 13 janvier au 09 février 2021
- URL du projet : www.ostella.live
- Lien vers la vidéo de présentation du projet sur You tube: O'Stella
-
Une équipe de 5 développeurs entièrement autonome, en mode agile.
J'ai participé au projet de A à Z, de l'élaboration du cahier des charges au développement complet.
Stack technique : HTML, SCSS, PHP, MySQL, Wordpress. Image du jour via l'Api de la NASA, cartes du ciel via l'Api Skymap.
En tant que premier projet en autonomie, le développement n'a pas été facile, nous avons dû prendre en compte les contraintes de travailler en équipe et dû résoudre les nombreux bugs rencontrés. Mais, la bonne humeur et l'entraide l'ont emporté et nous avons été fiers d'aller jusqu'au bout et de présenter notre projet en vidéo à la fin de la formation !
VPS multiserveurs Minecraft
- Ce serveur Minecraft est un projet personnel réalisé pour mon fils
- Date projet : Mars 2021
- Mon fils adore jouer à Minecraft avec ses copains alors j'ai décidé de lui créer un serveur Minecraft privé. J'ai donc installé et de configuré un hébergement VPS avec un serveur Apache. J'ai considéré plusieurs aspects concernant la sécurité comme le paramétrage d'un autre utilisateur pour MySQL, l'utilisation du SSH pour la connexion avec la désactivation des mots de passe. Le paramétrage d'IPTABLES qui n'a pas été évident mais avec un peu de persévérance, je m'en suis sortie haut la main.
J'ai ensuite installé et paramétré plusieurs serveurs Minecraft ainsi que le proxy Waterfall qui permet de basculer d'un serveur à l'autre avec une simple commande dans le jeu.
Installer tous ces serveurs m'a donné du fil à retordre, mais l'envie de réussir et le plaisir de voir mon fils et ses copains ravis est bien plus fort que tout !
Contact
Vous souhaitez me contacter ? C'est par ici ! Merci et à bientôt.
Adresse :
64310 Saint Pée sur Nivelle
Email :
sylvie.canongia.dev@gmail.com
Tél :
+33 6 50 70 60 08