mockup-sega-timesports

Tim esports

Projet scolaire | Intégration web

Tester le site

Un résumé

Le but du projet était d'intégrer un site web pour un site esports nommé Tim Esports. Celui-ci présente leurs jeux les plus populaires ainsi que les différents avantages offerts aux membres. C'est donc un site avec plusieurs pages : accueil, nos jeux et une page pour chaque jeu.

Informations

Créateur du projet

Rito José Blandon Pinzon

Logiciels utilisés

Vs code, Figma

Compétences utilisés

Intégration web

Démo du projet

Création de la maquette

Le design du site nous avait été fourni par les professeurs et nous n'avions qu'à intégrer la maquette.

De maquette à intégration

Pour commencer ce projet, j'ai directement intégré la page d'accueil. C'est un projet que j'ai réalisé au début de mon parcours en technique, donc il n'est pas parfait et illustre bien comment mon approche de travail a évolué. J'ai veillé à structurer les fichiers et les différents documents de la manière la plus claire possible pour rendre le HTML et le CSS plus compréhensibles.

image-integration
image-integration
image-integration
image-integration
Image en grand

Exemple de fonctionnalitées

image-code

Script Main

image-code

Exemple forms

image-code

Exemple forms(suite)

image-code

Intégration forms

image-code

Intégration forms(suite)

Image en grand

Compétences acquises

Introduction des positions absolute et relative
Ce projet est l'un des premiers projets scolaires où j'ai utilisé les positions absolues, que ce soit pour le héros ou pour le hover des cartes de jeu.
Animations de hover
Ce projet m'a également permis d'expérimenter différentes animations de hover, comme le scaling ou le contenu des cartes qui se révèlent grâce à un gradient. C'est donc un projet où j'ai beaucoup expérimenté pour découvrir de nouvelles choses.
Expérimentation
Durant ce projet, comme j'avais du temps, j'ai décidé d'expérimenter de nouvelles choses, comme intégrer un swiper avant que les professeurs ne nous montrent la composante, ou encore intégrer un menu burger avec un menu mobile. J'ai également pris le temps de créer une page pour tous les jeux, mais je me suis rendu compte, en suivant le cours de WordPress, que c'était beaucoup plus facile de faire cela en PHP.
Animations
C'est également le premier projet où j'ai créé un semblant de scrolling et où j'ai ajouté une animation sur le h1 du héro qui se déclenche lors du chargement de la page.