Mes projets
développement web & programmation

Le développement web ?

Le développement web représente pour moi un univers sans limites, où toutes idées les plus farfelues peuvent prendre vie. C'est un monde qui change régulièrement et sans cesse stimulant, ce qui le rend constamment captivant. Je souhaite devenir une développeuse qui pense avant tout aux besoins des utilisateurs, tels qu'à travers l'accessibilité, un domaine dont on est beaucoup sensibilisé. De mon année de terminale à ma deuxième année de BUT MMI, j'ai eu l'occasion de concrétiser de nombreux projets, mettant en pratique les théories enseignées ainsi que celles acquises en autonomie.

(Cliquez sur les images pour accéder au projet)

Exposition virtuelle

L'artiste Rosa Bonheur

Nous connaissons en majorité des artistes hommes, mais souvent, les femmes sont oubliés. C'est pourquoi notre projet consiste à mettre en lumière les femmes artistes. Rosa Bonheur en fait partie, peintre animalière, elle fut très connue à son époque, mais très vite oubliée aujourd'hui.

projet exposition

Objectif

L'objectif est de réaliser un site intégrant un système de réservation, un site bilingue et qu'il soit avant tout informatif pour les clients. Nous devions aussi créer une API REST et en faire appel pour le backoffice et la réalisation de statistique sur le nombre de nos visiteurs.

Équipe de six

Janvier 2024 - Mars 2024

(Projet Scolaire) BUT MMI 2 - Semestre 4

Logiciels

Figma

HTML

CSS

SCSS

JS

ReactJS

NextJS

TypeScript

API REST

PHP

Phpmyadmin

Github Desktop

Notion

Opquast

Softskills

Autonomie
Autodidacte
Travail d'équipe
Gestion de projet
Organisation

Projet en image

Un peu de réflexion

Compétences développées

Maquette UI/UX sur Figma.
Intégration de la maquette du site de réservation en bilingue
Communication avec les membres de l'équipe dans le codage (github)
Gestion de projet (COPIL)
Réalisation d'un backoffice en ReactJS
Réalisation d'une API REST
Hébergement d'un site internet

Problèmes et solutions

Être organisé, c'était le challenge qui m'a suivi tout le long du projet. Entre les cours, les horaires chargés, les activités extra-scolaires et le peu de temps pour le réaliser. Il m'a fallu me réaliser un planning et me fixer des objectifs à tenir chaque semaine. Étant la première fois que je code en ReactJS, je ne connaissais pas encore mes capacités, j'ai donc dû apprendre de moi-même.

Mon bilan

C'est un projet stimulant qui m'a permis de rapidement progresser et d'apprendre de nouvelles choses. J'ai beaucoup appris en travaillant en équipe de 6, séparer en parcours développement web et création numérique. Chacun avait besoin de l'un et de l'autre et je pense que nous avions très bien communiqué pour s'entraider au mieux.

Espace Numérique de Travail

Refonte d'un ENT

En tant qu'étudiants, nous avons tous accès à un espace numérique de travail. Un endroit où l'on peut retrouver nos cours, notre emploi du temps, nos notes ou bien nos absences. Nous avons ainsi imaginé et codé un nouvel ENT.

projet ent

Objectif

Dans un contexte d'expérience utilisateur. L'objectif est de réaliser un espace numérique de travail dont l'utilisateur est au centre de notre attention. Il faut ainsi faire attention à l'organisation de la page et des fonctionnalités les plus utiles. Ainsi, pour le réaliser, nous avons effectué des interviews et des tests utilisateurs, réalisé un audit de notre ENT actuel, faire des maquettes UI/UX et enfin le codage. Tout cela en suivant la méthode SCRUM à travers des outils de collaboration sur Notion et Github.

Équipe de quatre

Décembre 2023 - Janvier 2024

(Projet Scolaire) BUT MMI 2 - Semestre 3

Logiciels

Figma

HTML

CSS

JS

PHP

Phpmyadmin

Github Desktop

Notion

Opquast

Softskills

Autonomie
Autodidacte
Travail d'équipe
Gestion de projet
Organisation

Projet en image

Un peu de réflexion

Compétences développées

Interview utilisateur concernant son ENT.
Maquette UI/UX sur Figma.
Tests utilisateurs de notre maquette
Communication avec les membres de l'équipe dans le codage (github)
Méthode SCRUM
Renforcement des compétences en PHP
Hébergement d'un site internet

Problèmes et solutions

Il était nécessaire de se coordonner et de s'organiser au sein de l'équipe. En effet, lorsqu'il n'y avait pas assez de communication, il nous arrivait qu'il y ait des quiproquos. Par exemple, le fait de coder sur une même page web en même temps, ce qui causait régulièrement des "colisions" sur github. Toutefois, nous avons rapidement appris de nos erreurs en créant un tableau notion, dans le but de nous répartir les tâches avec des status "En cours, Pas commencé, Terminé...".

Mon bilan

Il s'agit aujourd'hui du projet le plus ambitieux que j'ai pu réaliser. Ce projet m'a permis de me surpasser en PHP et de réellement maîtriser les bases. En effet, nous avons utilisé PHP dans une très grande majorité et manié une grande base de données de 23 tables. De plus, au niveau du travail collaboratif, il s'agissait d'une expérience très enrichissante, puisque je sais maintenant comment travailler avec d'autres personnes, comment s'organiser pour éviter de réaliser les mêmes erreurs et être encore plus efficace pour la prochaine fois.

Portfolio

Présentation de mes compétences et mes passions

Quoi de mieux qu'un portfolio pour vous montrer tous mes projets. Dans l'objectif de montrer mes compétences, j'ai ainsi réalisé un Portfolio qui me ressemble et dans mon univers. Étant une développeuse créative et technique, j'ai voulu allier les deux. Notamment à travers de nombreuses animations mais aussi des petites illustrations que j'ai réalisées sur Figma.

projet portfolio

Objectif

Dans l'objectif de montrer mes compétences, il fallait se mettre à la place d'un visiteur quelconque. Il fallait que mon site soit accessible, soit concis et rapide à parcourir. Le plus difficile c'était : "Est-ce qu'à la fin de la navigation, l'utilisateur a compris qui je suis ? ce que je fais ? de quoi je suis capable de faire ? Voilà les enjeux que je me suis posés."

Seule

Septembre - Décembre 2023

(Projet Scolaire) BUT MMI 2 - Semestre 3

Logiciels

Figma

HTML

CSS

JS

GSAP

Github Desktop

Opquast

Softskills

Autonomie
Gestion du temps
Empathie (se mettre à la place de l'utilisateur)

Compétences développées

Maquette site internet Figma
Hébergement d'un site internet

Mon bilan

J'ai dû réaliser beaucoup de maquettes afin d'en arriver à ce résultat. En effet, j'avais la difficulté de transmettre qui j'étais à travers un design. Toutefois, je suis très fière du résultat, puisque je pense que le design que je transmets me représente bien à travers des petites illustrations. J'aime les choses simples et visuelles. Au niveau du codage, j'ai tenté la méthode "Mobile First", toutefois, il m'arrivait de reprendre mes vieilles habitudes dans certaines pages en commençant par le desktop, ce qui me ralentissait beaucoup pour la responsivité à la fin. Mais c'est dans ce projet que j'ai pris conscience de l'importance du Mobile First et qu'il est très bénéfique !

Dataviz

La 6ème extinction des espèces

Dans un contexte où l'activité humaine prend de plus en plus d’ampleur, de nombreuses espèces sont menacées d'extinction.

projet dataviz

Objectif

Dans le but de représenter ce danger touchant actuellement notre monde, nous avons choisi de valoriser un jeu de données issu de la base de données du Muséum National d’Histoire naturelle. L’objectif est de rendre ces données accessibles au grand public à travers des graphiques interactifs. Le site de Dataviz

Équipe de deux

Septembre - Novembre 2023

(Projet scolaire) BUT MMI 2 - Semestre 3

Langages et logiciels

HTML

CSS

JS

gsap.js (librairie js)

d3.js (librairie js)

Github Desktop

Softskills

Travail d'équipe
Autonomie
Autodidacte
Gestion de projet

Projet en image

Un peu de réflexion

Compétences développées

Maquette de page web sur le logiciel Figma.
Manipulation d’un jeu de données avec des fichiers JSON.
Graphiques interactifs à partir de données en D3.js et en JS.
Page mention légale.

Problèmes et solutions

Étant l’un des premiers projets collaboratifs dans le développement web, il a fallu apprendre à coder ensemble. Nous avons ainsi décidé d’utiliser github. Cependant, nous avons remarqué que nos méthodes d’utilisation de Github n’étaient pas les bonnes. Ce qui ralentissait grandement notre productivité.

Nous nous sommes donc tournés vers nos professeurs qui nous ont expliqué le fonctionnement de github, avec par exemple, github Desktop ou des plugins tels que GitGraph sur visual studio code.

Mon bilan

C’est un projet qui m’a beaucoup plu, malgré le peu de temps pour la réalisation du projet. Je suis fière du travail que notre duo a apporté. Nous avons réussi à communiquer, à s’organiser et à s’entraider pour mener à bien le projet.

Référencement

Réflexion d'une meilleure SEO

Dans le web, l'importance de se démarquer des autres sites web est primordiale dans lequel le référencement entre en jeu. Nous avons choisi d’analyser des sites dans un univers de décoration mignon.

projet referencement

Objectif

L’objectif est de réaliser une stratégie de référencement afin que les navigateurs le mettent en avant. Il était donc nécessaire de s'intéresser à la concurrence, analyser les mots-clés, les liens, trouver un nom de domaine adapté et un contenu permettant d’être valorisé et d’être mis en avant dans des snippets. Pour en savoir plus sur notre maquette Figma.

Équipe de deux

Septembre - Octobre 2023

(Projet scolaire) BUT MMI 2 - Semestre 3

Technologies SEO

Figma

Plugin SeoQuake

Plugin OpenSEO

whois - inpi - trends - keyworkshitter - ubersuggest - copy.ai (Ce sont des sites internet)

Softskills

Travail d'équipe
Analyse
Esprit de synthèse
Esprit critique

Projet en image

Un peu de réflexion

Compétences développées

Développer une stratégie de référencement.
Utilisation de l’IA avec les meilleurs prompts à utiliser.
Être critique sur les meilleurs mots clés à choisir.

Mon bilan

C’est un projet que je trouve très intéressant, surtout que le monde du référencement est un domaine où il faut régulièrement s'informer, puisque les techniques d’aujourd’hui pourraient être obsolètes ou que les algorithmes de recherches peuvent être changés.

Jardins Vivants

Un stage dans une association de permaculture

L'un des enjeux de ce monde est de combattre la surconsommation et les méthodes de cultivation qui pourrissent nos sols. Jardins vivants est une association de permaculture qui n’avait pas de présence en ligne.

projet stage Jardins vivants

Objectif

Dans l’objectif de faire connaître l’association et de diffuser leurs valeurs, j’ai créé leur site web de zéro et en suivant les différentes étapes de création d’un site internet. N’hésitez pas à découvrir mon rapport de stage pour en connaître plus sur mes méthodes. Mon rapport de stage.

Seule

2 semaines - Juillet 2023

(Projet Scolaire) BUT MMI 1 - Semestre 2

Logiciels

Figma

Wordpress

Notion

Softskills

Autonomie
Autodidacte
Gestion de projet
Travail d’équipe
Communication
Adaptabilité

Projet en image

Un peu de réflexion

Compétences développées

Maquette du site web, Wireframe.
Gestion de projet du tout le site web avec les différentes étapes.
Organisation Notion.
Communication avec les membres de l’association.
Héberger un site Wordpress et processus des étapes dans l'obtention d'un hébergeur OVH.

Problèmes et solutions

Suivre un planning a été le plus dur. En effet, il était nécessaire de l’adapter très régulièrement, puisque des tâches que je pensais rapides, étaient en réalités très longues.
J'ai réalisé une maquette Figma en m'adaptant à un design que je pourrais accomplir sur Wordpress avec le plugin Elementor. Cependant, à cause d'un problème d'hébergement, cela m'a contraint à adapter le projet sur Wordpress sans utiliser de plugin.

Mon bilan

C’est le projet le plus challengeant de toute ma première année de BUT MMI. En effet, ce projet a regroupé l’ensemble des compétences que j’ai acquises et pour les mettre en pratique, à travers la gestion de projet, les étapes de réalisation d’un site web, l’UI, l’UX, le contenu multimédia, …

Projet Cioyen

Le relais des animaux, un refuge animalier

Depuis plusieurs années, le nombre d’animaux abandonnés en France est grandissant. C’est un sujet qui a retenu notre attention au sein de notre équipe, nous motivant à contribuer dans un projet citoyen pour apporter notre soutien.

projet citoyen

Objectif

Le projet consiste à redorer l’image d’une association avec peu de présence en ligne. Le Relais des Animaux est une association qui vient en aide aux animaux dans des refuges en attendant qu’ils soient adoptés. Nous avons ainsi décidé de les contacter. Bien qu’ils ne nous aient pas répondu, nous avons conçu un site internet sur Wordpress et réalisé une stratégie de communication.

Équipe de cinq

Février - Juin 2023

(Projet Scolaire) BUT MMI 1 - Semestre 2

Logiciels

Figma

Wordpress

Notion

Softskills

Autonomie
Travail d'équipe
Gestion de projet
Organisation

Projet en image

Compétences développées

Maquette Figma pour du Wordpress.
Produire un site web à partir de Wordpress.
Héberger un site web Wordpress.
Communication & organisation sur Notion entre les différents membres de l’équipe.
Utilisation de plugins Wordpress.
Communication autour de l'association.

Problèmes et solutions

Dès le départ, nous avions prévu les éventuels problèmes qui pourraient surgir, ce qui nous a permis d’éviter des problèmes majeurs. Par exemple, travailler sur un même site Wordpress, nous a paru compliqué au début. Toutefois, nous avons créé un tableau sur Notion, permettant de répartir nos tâches en fonction de nos rôles (intégratrice, rédacteur…) pour éviter les conflits lorsque l’on travaille en même temps.

Mon bilan

C’est un projet qui a duré tout un semestre et dont la finalité me satisfait pleinement. Il est très complet et a permis de mettre à profit toutes les compétences acquises. J’ai apprécié travailler en équipe sur du WordPress mais aussi en autonomie. C’est un logiciel dont je pense être compétente aujourd'hui. Nous avons pu accomplir l’ensemble des tâches qui nous ont été demandées en avance. J’ai beaucoup apprécié travailler en équipe tout le long, nous avons su communiquer, s’organiser en fonction de nos points forts mais aussi travailler ensemble dans la bonne humeur.

Res'Art

Un site de réservation d'oeuvre d'art

Une de mes passions dans la vie c’est l’art, le design, le dessin… Bref, tout ce qui est créatif. J’ai donc sauté sur l’occasion du projet “Resaweb” de créer un site de réservation autour de l’univers de l’art. D’où le nom : Res’Art.

projet resaweb

Objectif

L’objectif est de réaliser un site de réservation permettant aux utilisateurs de commander une ou plusieurs œuvres d’art via un formulaire de réservation.

Seule

Février - Juin 2023

(Projet Scolaire) BUT MMI 1 - Semestre 2

Technologies

HTML

CSS

JS

PHP

SQL

PhpMyAdmin

Opquast (Site internet pour l'accessibilité)

Softskills

Autonomie
Autodidacte
Appliqué
Patience

Compétences développées

Héberger un site web.
Produire et intégrer un site web.
Manipuler une base de données.
Manipuler des données avec PHP.
Réalisation d’un slider en JS.
Accessibilité (opquast).

Problèmes et solutions

J’ai pris beaucoup trop de temps sur le design de ma page principale. Je n’étais jamais satisfaite et je recommençais souvent le design. Cela m’a fait perdre du temps pour la réalisation du back-end du site. Lorsque je me suis rendu compte que je passais tout mon temps sur l’intégration, la solution était de passer à la suite même si le design ne me plaisait pas et que je pourrais revenir plus tard. Ce problème me permet aujourd’hui de prendre conscience qu’il est nécessaire de ne pas rester fixé sur une seule chose tout le long, mais plutôt de savoir quand passer à autre chose.

Mon bilan

C’est un projet qui a été très enrichissant dans le développement web front/back end. En effet, c’est grâce à ce projet que j’ai eu un déclic et que j’ai véritablement compris le fonctionnement de PHP, SQL et des bases de données en général. Res’art est un challenge qui réunit l’ensemble des compétences apprises depuis le début d’année de MMI (cf. Technologies).

Portrait-Chinois

Découvrez qui je suis...

Quoi de mieux qu’un Portrait-Chinois en sept analogies à travers lesquelles vous me connaîtrez de manière originale.

projet portrait chinois

Objectif

Le projet consiste à mettre en valeur des analogies sur un site mettant en pratique mes compétences acquises en première année en BUT MMI. La particularité est que les données utilisées sont sous un format JSON.

Seule

Septembre - Décembre 2022

(Projet Scolaire) BUT MMI 1 - Semestre 1

Technologies

HTML

CSS

JS

JSON

Softskills

Autonomie
Créativité

Compétences développées

Héberger un site web.
Produire et intégrer un site web.
Manipuler des fichiers JSON.

Mon bilan

C’est un projet que j’ai trouvé amusant à faire. Le fait de mettre en valeur les analogies permet à la fois de mettre en avant ma créativité mais aussi mes compétences techniques pour y arriver.

Portfolio-V1

Mon tout premier portfolio

Rentrer en BUT MMI était mon premier vœu. N’ayant pas encore décidé réellement de ce que je souhaitais faire plus tard, le BUT MMI me permettrait de m’ouvrir à l’ensemble du monde du multimédia, à travers le développement web, le marketing, le design et l’audiovisuelle.

projet portfolio 1

Objectif

L’objectif est de réaliser un portfolio où je montre l’ensemble des projets que j’ai réalisés lors de mes années de lycée, dans l’objectif de rentrer en BUT MMI.

Seule

Janvier - Avril 2022

Projet personnelle

Technologies

HTML

CSS

JS

Figma

Wordpress

Softskills

Autodidacte

Compétences développées

Héberger un site web.
Réaliser des maquettes sur Figma.
Intégration sur Wordpress.

Mon bilan

Un projet qui m’a demandé du temps, puisqu’il s’agissait de la première fois où je me mettais réellement dans du code. Une expérience enrichissante qui m’a permis d’acquérir des notions, m’ayant aidé pour mes années de BUT MMI.

Shifumi

Pierre, feuille ciseaux !

En plus du shifumi, j’ai réalisé de nombreux défis Javascript dont celui-là, pour en apprendre les bases.

projet shifumi

Objectif

L’objectif est de pouvoir jouer au shifumi avec un ordinateur.

Seule

Décembre 2021

(Projet Scolaire) Terminale

Technologies

HTML

CSS

JS

Softskills

Autodidacte

Compétences développées

Programmation d’un jeu.
Les conditions en Javascript.