{"id":558,"date":"2026-03-22T15:37:36","date_gmt":"2026-03-22T19:37:36","guid":{"rendered":"https:\/\/glozanov.dectim.ca\/phase_zero\/?page_id=558"},"modified":"2026-05-12T07:44:44","modified_gmt":"2026-05-12T11:44:44","slug":"fiche-portfoliogeorge","status":"publish","type":"page","link":"https:\/\/glozanov.dectim.ca\/phase_zero\/fiche-portfoliogeorge\/","title":{"rendered":"Fiche portfolio(george)"},"content":{"rendered":"\n
\"\"<\/span>
\n
\n
\n
\n

SportTim<\/h1>\n\n\n\n

Par George Lozanov<\/h3>\n\n\n\n

Projet scolaire<\/p>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n

Figma<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n

VS Code<\/p>\n<\/div>\n\n\n\n

\n
\n
\"\"<\/figure>\n\n\n\n

HTML<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\"\"<\/figure>\n\n\n\n

CSS<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\"\"<\/figure>\n\n\n\n

JavaScript<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n\n\n\n
\n

<\/h4>\n<\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n
\n
\n
\n

Moodboard<\/strong><\/h2>\n\n\n\n

Pour commencer le projet, j\u2019ai cr\u00e9\u00e9 un moodboard qui rassemble les couleurs, typographies et inspirations pour le site MMA. Cela m\u2019a permis de d\u00e9finir l\u2019ambiance g\u00e9n\u00e9rale et de guider mes choix graphiques tout au long du projet.<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n

Wireframe<\/strong><\/h2>\n\n\n\n

Ensuite, selon le gabarit de wireframe donn\u00e9 par la professeure sur Figma, cela m’a permis de r\u00e9fl\u00e9chir sur la structure pour organiser les sections, la navigation et l\u2019emplacement des contenus avant de passer \u00e0 la maquette.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n

Maquette<\/strong><\/h2>\n\n\n\n

Par apr\u00e8s,j\u2019ai transform\u00e9 le wireframe en maquette compl\u00e8te sur Figma, en appliquant les couleurs et typographies d\u00e9finies dans le moodboard. Cette \u00e9tape vise a pr\u00e9par\u00e9 l\u2019int\u00e9gration du site final.<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n

Code HTML,CSS et JS<\/strong><\/h2>\n\n\n\n

J\u2019ai d\u00e9velopp\u00e9 la page d\u2019accueil plus les deux autres pages en HTML, en respectant la structure pr\u00e9vue dans le wireframe. Ensuite, avec le CSS, j\u2019ai appliqu\u00e9 les couleurs, polices et styles du moodboard et maquette pour que le site soit agr\u00e9able et coh\u00e9rent visuellement avec le sport MMA. Pour finir, j\u2019ai ajout\u00e9 des interactions avec JavaScript comme la modale pour chaque membre de l’\u00e9quipe pour qu’ils soient cliquables.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n

Site complet<\/strong><\/h2>\n\n\n\n

Le site final est fonctionnel, avec toutes les sections, couleurs et interactions pr\u00e9vues. Les trois pages sont navigables facilement. Voici une petite vid\u00e9o pour montrer le site final.<\/p>\n<\/div>\n\n\n\n

\n
\n