Aller au contenu

Portfolio Planification

Quoi faire

  • 1. Création du dépôt git sur GitHub : nommé portfolio-tonprenom-tonnomdefamille
    Il doit être privé pour le moment.
    Veuillez inviter Marie-Michelle Ouellet (kid-synthetique) et Lora Boisvert (flora0510) en tant que collaboratrices de votre dépôt.

    Ce dépôt devra contenir un README.md formaté en Markdown qui contient :

    • le nom du projet en titre principal Portfolio de TON-NOM
    • un lien vers ton fichier Figma
      ⚠️ Donne accès uniquement à tes 2 enseignantes (pas en public) — voir consigne 3
    • un lien vers ton tableau Trello ou GitHub Project
      ⚠️ Donne accès uniquement à tes 2 enseignantes (pas en public) — voir consigne 4
    • le choix du type de navigation parmi tes projets (voir consigne 6)
    • le choix de ta composante Vue.js (voir consigne 7)
  • 2. Recherche d’inspirations

  • 3. Création d’un moodboard avec vos choix finaux (idéalement avec Figma) :

    • Inspirations (images et liens cliquables vers vos sites d’inspiration)
    • Éléments de UI (boutons, menus, etc.)
    • Palette de couleurs
    • Typographie choisie (idéalement une seule typo avec différentes graisses, maximum 2 typos)

    💡 Conseil : choisissez judicieusement un template de moodboard.
    Il doit être propre et complet, contenir toutes les informations demandées, avec des images alignées et espacées régulièrement. Laissez une marge intérieure par rapport au bord du cadre extérieur.

  • 4. Créer un tableau Trello ou GitHub Project avec les tâches à réaliser pour le projet entier.
    Il doit contenir 3 colonnes : À faire, En cours, Complété.
  • 5. Ajouter dans votre Calendrier Outlook les différentes remises des 2 cours (Web 5 et Préparation au milieu de travail).
  • 6. Choisir un type de navigation dans vos projets présentés :
    carrousel, multipage, fenêtre modale (popup), ou autres (inspirez-vous !).
  • 7. Choisir le type de composant Vue.js que vous voulez intégrer dans votre portfolio.
    Voici quelques exemples :

Exemples de composantes Vue.js

  1. Filtre dynamique de projets

    • Une section « Mes projets » avec boutons pour filtrer (ex. Tout, Web, Design graphique, Vidéo).
    • Vue gère le filtrage en affichant/masquant les bons projets.
    • ➕ Effet professionnel, démontre la gestion de données dynamiques.

  2. Galerie interactive / Carrousel / Lightbox

    • Miniatures cliquables ouvrant une version agrandie avec navigation (suivant/précédent).
    • Peut aussi servir pour montrer des captures d’écran.
    • ➕ Très visuel, valorise les travaux.

  3. Témoignages en carrousel

    • Bloc avec quelques témoignages (enseignants, collègues, clients fictifs ou réels).
    • Navigation automatique ou manuelle.
    • ➕ Simple mais démontre la gestion d’un tableau de données + rendu dynamique.

  4. Compteur de compétences animées

    • Exemple : HTML (90%), CSS (80%), JS (60%) → barres de progression animées.
    • Vue gère l’état des compétences sous forme d’objets.
    • ➕ Bon moyen de relier design et données.

  5. Widget de disponibilité

    • Bouton type « Disponible pour un stage à partir de mars 2026 ».
    • L’état est géré par une variable booléenne en Vue.
    • ➕ Donne un côté vivant et utile au portfolio.

  6. Timeline interactive

    • Ligne du temps des expériences (scolaires ou projets marquants).
    • Vue gère un tableau d’items (année + description).
    • ➕ Format réutilisable, met en valeur le cheminement.

  7. Dark mode / Light mode toggle

    • Un switch pour passer du mode sombre au mode clair.
    • Vue gère l’état et applique une classe CSS.
    • ➕ Moderne et simple à réaliser.

  8. Formulaire de contact validé en direct

    • Formulaire (nom, email, message).
    • Vue gère la validation en temps réel.
    • ➕ Montre compréhension des formulaires et réactivité.

Remise

Date

📅 Mercredi 17 septembre, avant le cours

Où remettre

  • Dans le Devoir de Web 5 sur Teams

Quoi remettre

  • Lien vers ton repo GitHub privé avec le README.md completé. ⚠️Donne accès uniquement à tes 2 enseignantes (kid-synthetique et flora0510).
  • Lien vers ton fichier Figma (moodboard). ⚠️Donne accès uniquement à tes 2 enseignantes (via leur courriel cmontmorency).
  • Un fichier PDF exporté du moodboard (nommé nom-prenom-portfolio-moodboard.pdf).
  • Lien vers ton tableau Trello ou GitHub Project. ⚠️ Donne accès uniquement à tes 2 enseignantes (via leur courriel cmontmorency).
  • Captures d’écran prouvant que tu as ajouté toutes les dates de remise dans ton calendrier Outlook (nommé nom-prenom-portfolio-calendrier.pdf ou .png ou .jpg)