Portfolio de Personnage

Ce projet a été réalisé dans le cadre du cours IFT1005 à l'Université de Montréal. Il s'agit d'un site web interactif et attrayant présentant un portfolio de personnage fictif ou réel. Ce projet vise à mettre en pratique les concepts de base du développement web en respectant les bonnes pratiques de design.

Auteurs

• Josué Mongan
  GitHub : Josh012006
• Kuzatw
  GitHub : kuzatw

Description

Le site se compose de quatre pages principales :

1. Page d’accueil

   • Présente le personnage avec une image interactive en forme de pentagone et une courte biographie.
   • Une barre de navigation intuitive est incluse, accessible depuis toutes les pages.

2. Page Compétences

   • Cette page agit comme un CV, mettant en valeur les compétences du personnage avec des listes ordonnées et non ordonnées, du texte stylisé et un alignement soigné.

3. Page Galerie

   • Une galerie de photos illustrant le personnage et ses aventures.
   • Les images incluent des bordures variées, des effets d’ombre, et des interactions au survol.

4. Page Contact

   • Contient des informations de contact interactives avec des liens cliquables.
   • Des sprites CSS redirigent vers des plateformes externes, et un SVG animé ajoute une touche dynamique.

Technologies Utilisées

• HTML5
  Structuration des pages et mise en place des fonctionnalités interactives (ImageMap, navigation).
• CSS3
  Design et animations (gradients, styles interactifs, SVG animés).

Fonctionnalités Clés

• Design Responsive : Un design simple qui pour le moment marche seuelment sur grands écrans comme c'est un projet initiateur. Le CSS est fait de telle manière que la responsivité soit facilement implémentable.
• ImageMap : L'image du personnage redirige vers une page dédiée grâce à une zone cliquable en forme de pentagone.
• Animations CSS : Un SVG animé avec des mouvements horizontaux infinis et des changements de couleur périodiques.
• Barre de Navigation Interactive : Couleurs changeantes au survol et après clic.
• Effets d'Image : Ombres et bordures dynamiques sur les images de la galerie.

Prérequis

• Navigateur : Compatible avec Google Chrome.
• Dossier de Projet :
  • 4 fichiers HTML (index.html, competences.html, galerie.html, contact.html)
  • 1 fichier CSS (styles.css)
  • Un dossier assets contenant toutes les images et ressources SVG.

Comment Lancer le Projet

1. Clonez ce dépôt :

   git clone https://github.com/Josh012006/Projet1-IFT1005.git
   

Hébergement

Mon coéquipier et moi avons également hébergé le projet sur Vercel: https://julien-laroche.vercel.app/ Ne manquez pas d'y faire un tour et de laisser une étoile si vous avez aimé.