crypt0nik / groupie-tracker

Ynov Sophia Modern Groupie Tracker B1 informatique

GROUPIE TRACK®
ARTHUR CHESSÉ
アーサー・シェセ

GroupieTracker consiste à recevoir une API donnée et à manipuler les données qu'elle contient afin de créer un site affichant différentes informations.

Mon Groupie Tracker prône la simplicité et est composé de trois grandes sections s'adaptant à l'écran automatiquement.
Ces trois sections vont être présentées ci-dessous.

- First Section

La landing page recouvre tout l'écran et permet d'avoir une première approche du projet. Elle est embellie par deux polices d'écriture choisies minutieusement, et un texte en minuscules qui suit beaucoup les dernières tendances actuelles, tout comme mon prénom en kanji japonais.

Une cassette survole les textes et nous plonge directement dans le monde de la musique 🎵
Elle peut être cliquée, ce qui conduira l'utilisateur à la troisième section. (Voir Third Section)

- Second Section

La deuxième section va être la section dédiée à la recherche. Elle est composée d'un input au milieu de l'écran permettant de rechercher un nom d'artiste, de groupe, une date de création ou un membre d'un quelconque groupe.
Au clic, elle est ornée d'un effet qui consiste à agrandir son outline en suivant un motif de couleur allant du orange au blanc.

En bas de l'écran, un bouton cliquable "Afficher" permet de faire apparaître les différents filtres.

• Filtre de création
  

Le filtre de création offre la possibilité de rechercher sous forme de "range", c'est-à-dire sous forme de plage de données, un intervalle entre la date de création de l'artiste et 2015. En bougeant le curseur, on adapte la valeur minimum de recherche.

• Filtre du premier Album
  

Le filtre du premier album offre la possibilité de rechercher, tout comme le filtre de création, mais en cherchant la date de création du premier album.

• Filtre de location de concert
  

Le filtre de location permet, sous forme de bouton, d'y présenter toutes les locations possibles et de rechercher où un artiste ou un groupe se représente ou s'est representé en concert.

• Filtre de membres
  

Le filtre de membre permet de trier par membres les groupes/artistes.

- Third Section

La troisième section représente les différents artistes, triés par la recherche ou non suivant le choix de l'utilisateur. Le design en perspective est sous forme de scroll horizontal où on peut défiler les différents artistes/groupes, qui disparaissent dans un lecteur CD au nom de GroupieTrack®

Les différents artistes/groupes sont représentés sous forme carrée signifiant la pochette de l'album, et sont également représentés sous forme ronde sortant à moitié de la pochette signifiant le CD et tournant à l'infini pour donner un côté dynamique à la page.

• Page Artist :

À travers ma page Artist, j'ai voulu, comme dans tout le reste du site, rester sur un design simple, moderne et agréable à l'œil. Je me suis basé sur plusieurs maquettes que j'ai créées. Elle se compose de deux parties :

La partie gauche possède le nom du site, le nom de l'artiste qui bouge de gauche à droite et inversement suivant une courbe en bézier, ce qui donne des mouvements non coordonnés. Certains titres sont en gris pour faire ressortir le nom de l'artiste.
On retrouve également sur le côté gauche un design d'album en 3D avec dessus l'image de l'artiste/groupe qui s'adapte et à l'intérieur un CD à l'effigie de l'artiste/groupe en mouvement également pour donner le côté dynamique de la page. En bas de la page se trouvent mes crédits.

La partie droite regroupe tout le reste de l'API, c'est-à-dire le nom de l'artiste, la date de création, la date du premier album et la liste des membres.
En bas du côté droit de la page, on a une barre de recherche permettant de rechercher n'importe quel artiste/groupe, membre ou date de création.