Project: Rival

Développement web - Projet personnel

Design, intégration et développement HTML, CSS et JS d’un site d'archive de l’ensemble de cartes “Destined Rivals”

Voir le site
Project:Rival

Qu'est-ce que Project: Rival ?

Le site de Project : Rival est une archive de cartes et de produits du même ensemble Pokémon TCG. Seuls les utilisateurs qui ont la passion de Pokémon TCG connaissent bien Destined Rivals, l’ensemble de carte de Team Rocket.

Logiciels utilisés

Langages utilisés

Utilisation de l’IA

Aucune IA générative n’a été utilisée pour réaliser ce projet ni pour préparer sa fiche.

section cartes

Les différentes sélections de cartes

Étapes:

Étape 1

1 — Survole et recherche de comparables et d’inspiration pour Project: Rival avec Google

Je recherche des comparables et des inspirations pour que ma recherche soit enrichie pour le processus de création du guide de style et de la maquette du site.

Étape 2

2 — Sélection de palette de couleur et de choix typographique sur Figma

Je poursuis la création de mon site en choisissant une palette de couleur impeccable et en choisissant deux excellentes typographies qui seront utilisées dans mes maquettes.

Étape 3

3 — Création des maquettes du site et organisation des sections dans Figma

J'ai conçu la maquette avec 4 différentes pages contenant différentes sections pour mon site web: la page d’accueil, la page des cartes, la page des produits et la page des "chase cards".

Étape 4

4 — Intégration HTML et developpement CSS du site d’archive avec VS Code

Suite à la maquette, je conçois avec du code HTML et CSS les pages du site tout en gardant une bonne organisation des sections et des classes que j’utilise pour le CSS.

Étape 5

5 — Programmation JS et ajustement responsive du site sur VS Code

Suite au CSS de base pour mon site, j’ai programmé des composantes et ajusté le responsive de mon site pour que ça fonctionne sur mobile.

Étape 6

6 - Résultat final de Project: Rival via le navigateur au choix

Maintenant que c’est tout finalisé, je peux explorer mon site sur un navigateur pour voir les types de cartes, les produits scellés et les "chase cards" du set.

Crédits:

  • Félix Lapointe : DA, design web et intégration/développement web
  • Images des cartes, des produits et autres : Google et autres médias