Projet Portfolio

Description - Partie 1

Afin de mettre en commun ce qui a été vu depuis le premier cours et réutiliser votre matériel de Préparation au monde professionnel, vous devez développer un site web créatif présentant les différents projet développés dans votre programme d’études ou à titre personnel (tout pays d’origine confondu). La plupart des animations de votre travail devront avoir été reproduites à partir de site web créatifs existants inspirants.

En Détails

Animation de préchargement

La page d’accueil devra présenter une animation de chargement progressif (plutôt qu’infini) créative.

Elle ne sera animée qu’en fonction du temps pour l’instant.
Une fois l’animation par timeline teminée, l’utilisateur devra être redirigé vers la page principale en utilisant le routeur:

'use client';
import { useRouter } from 'next/navigation';
// autres importations

const AnimationDuLoader = () => {

  // création du routeur (à l'intérieur de la composante)
  const router = useRouter();

  // plus tard, à la création de la timeline
  const tl = gsap.timeline({
    //autre options,
    onComplete: () => {
      router.replace('/page-principale');
    }
  });
};

Page principale

La page principale devra contenir au moins ces éléments (dans l’ordre de votre choix):

L’affichage animé de votre nom
Une courte vidéo affichée par scrubbing ou non. Veuillez y superposer des éléments animés également. Vous pouvez exporter une animation dans une scène 3d, utiliser un extrait d’une vidéo réalisée dans un autre cours, utiliser Unity Recorder et une Timeline…
Un tracé animé en SVG (utilisez Figma ou Illustrator pour le dessiner au besoin).
Une ou plusieurs façons de vous contacter (courriel, téléphone, réseaux sociaux, Behance et/ou autres…). Il est tout à fait correct d’y insérer des coordonnées fictives.
Une section animée (scrubbing ou non) dans laquelle vous présenterez une photo/vidéo ainsi que le titre de 4 projets mettant votre créativité et/ou vos talents de l’avant. Par un clic, l’utilisateur pourra naviguer vers la page dédiée au projet séléctionné. Le clic se fera à l’aide d’une balise <Link> plutôt qu’une balise <a>

import Link from 'next/link'

export default function Page() {
  return <Link href="/projets/projet-1">Carte du projet</Link>
}

Page dédiée à un projet

Cette page, affichée par un slug/index/id en utilisant un paramètre dynamique, devra faire une présentation plus détaillée du projet.

Comme la page sera affichée par un url dynamique, la structure de la page de chacun des projets devra être identique.

On devra y retrouver:

Le titre du projet
Au moins 3 photos (incluant une photo principale).
Le contexte (ce qui était demandé, ce que ça impliquait comme “technologie”)
Votre approche (quelle était votre idée/intention, ce qui rend ce projet spécial à vos yeux, etc…)
Les catégories ou mots-clés associés à ce projet (ex: design, programmation, vidéo …)
Les informations propres à chaque projet devront être récupérées depuis un fichier .js (voir Aurora-12 / Cluedo) ou .json (cours07) selon votre préférence.

Autres détails

Trouvez une façon créative et animée de présenter ces informations.
La composante ViewTransition devra permettre d’animer la transition entre les deux pages en englobant le titre et/ou la photo sur laquelle l’utilisateur a cliqué et ceux affichés sur la page dédiée. Vous pouvez simplement utiliser l’animation de déplacement par défaut.
Un lien (<Link>) devra permettre de retourner à la page principale.

Inspiration

Pour les animations de préchargement, de la section de présentation des projets et pour l’animation dans la page dédiée à chaque projet, il vous est demandé de fournir l’url et une capture d’écran d’un site pour lequel vous aurez reproduit l’animation dans votre projet.

Veuillez fournir ces inspirations de façon structurée dans un document Word que vous joindrez au fichier zip de votre projet à la remise.

Vous pouvez absolument éplucher le web à la recherche d’inspirations à reproduire ou desquelles vous inspirer: Awwwards, Dribbble, GSAP Showcase, etc…

Critères d’évaluation

Respect des contraintes de développement
Contrôle de l’animation
Clarté et organisation du code
Créativité et qualité de la séquence de chargement
Créativité et qualité de la présentation de la page principale
Qualité de la présentation des contenus (page dédiée à chaque projet)
Qualité des inpirations fournies

(un grille plus complète vous sera remise à la semaine 8)

Tutoriel - Extraction des images d’une vidéo

Télécharger ffmpeg depuis le dossier _ressources des fichiers partagés dans Teams;
Décompresser le fichier.
Copier votre vidéo dans le sous-dossier bin résultant de la décompression. Idéalement votre vidéo ne durerait que quelques secondes.
Clic-droit dans le dossier bin, puis “Ouvrir dans le Terminal”.
Exécuter la commande ./ffmpeg -i nom-fichier-video -vf "fps=30,scale=1280:-1" -q:v 2 image_%04d.jpg en modifiant les paramètres suivants:

Paramètres

nom-fichier-video: Le nom complet du fichier (incluant son extension)
fps=30: cadence en images / seconde
scale=1280:-1: 1280px de large et -1 signifique le ration sera conservé (pour déterminer la hauteur)
q:v 2: qualité de l’image, valeur de 1 à 31 (plus le nombre est élevé, plus c’est compressé)
image_%04d.jpg: nom des images à extraire, %04d insique d’insérer le numéro de l’image en utilisant un padding de 4 zéros (0001, 0002, 0003…)

Tutoriel - Préchargement des médias

Récupérer la fonction preloadMedias dans les fichiers partagés sur Teams.

Faire un tableau contenant le chemin vers les médias à précharger (vous pouvez utiliser le même que celui de la vidéo). Ex:

const urls = [
  ...Array.from(Array(300)).map(
    (_, i) =>
      "/img/video/image_" + (i + 1).toString().padStart(4, "0") + ".jpg",
  ),
  "/img/une_image.jpg",
  "/img/une_autre_image.jpg",
];

Mettre la timeline de chargement sur pause:

const tl = gsap.timeline({
  //... les autres options
  paused: true
});

Dans useGSAP, sous la déclaration de la timeline, déclarer deux variables et lancer le préchargement des médias:

let limite = 0;
let cancelled = false;

// importer preloadMedias au prélable,
// progress contient une valeur entre 0 et 1
preloadMedias(urls, (progress) => {
    console.log(progress);
    if (cancelled) return;
    limite = progress;

    // fait progresser l'animation si la partie chargée est supérieure
    // à la portion déjà jouée
    if (tl.progress() < limite) {
      tl.play();
    }
  });

Écouter l’événement "onUpdate" sur la timeline afin de l’interrompre si la limite chargée est atteinte:
```
tl.eventCallback("onUpdate", () => {
  if (tl.progress() >= limite) {
    tl.pause();
  }
});
```
Terminer useGSAP en retournant une fonction de nettoyage permettant de retirer les écouteurs d’événements:
```
return () => {
  cancelled = true;
  gsap.killTweensOf(tl);
  tl.kill();
};
```

Remise

Par Teams au début du cours 9, pondération 25%

Critère	Non démontré - (0 %)	À reprendre - (25 %)	En développement - (50 %)	Maîtrisé - (75 %)	Très bien maîtrisé - (100 %)
Respect des contraintes de développement (5 pts) Loader · Navigation · 4 projets · Route dynamique · Données · ViewTransition · Contenus demandés	Le projet est absent ou trop incomplet pour vérifier le respect des contraintes.	Plusieurs contraintes essentielles sont absentes ou non fonctionnelles. La navigation, les pages ou les données présentent des problèmes importants.	La majorité des exigences sont présentes, mais plusieurs éléments sont incomplets, incorrects ou fonctionnent de manière irrégulière.	Les principales contraintes sont respectées. Le portfolio fonctionne correctement, malgré quelques omissions ou problèmes mineurs.	Toutes les contraintes sont respectées et fonctionnent correctement. Les pages, les données, la navigation et les transitions sont intégrées avec rigueur.
Contrôle de l’animation (5 pts) GSAP · Timelines · Scrubbing · Déclenchements · Synchronisation · Fluidité · Rythme	Les animations sont absentes ou ne permettent pas d’évaluer les notions visées.	Les animations présentent des problèmes importants de fonctionnement, de déclenchement ou de synchronisation. Le mouvement est peu maîtrisé.	Les animations fonctionnent généralement, mais leur contrôle manque de précision. Le rythme, les déclenchements ou la fluidité présentent certaines faiblesses.	Les animations sont fluides et bien contrôlées. Les timelines et les techniques d’animation sont utilisées adéquatement et avec pertinence.	Les animations démontrent une excellente maîtrise du rythme, de la synchronisation et du contrôle. Les différentes techniques sont combinées avec précision et intention.
Clarté et organisation du code (3 pts) Next.js · Composantes · Responsabilités · Réutilisation · Nommage · Lisibilité · Conventions	Le code est absent ou trop incomplet pour permettre une évaluation.	Le code est difficile à comprendre. Le découpage en composantes et l’organisation présentent plusieurs problèmes importants.	Le code est généralement compréhensible, mais certaines responsabilités, répétitions ou conventions pourraient être améliorées.	Le code est clair et bien structuré. Les composantes sont pertinentes, les responsabilités bien réparties et les conventions respectées.	Le code est particulièrement cohérent, lisible et facile à faire évoluer. Le découpage est judicieux, sans duplication inutile ni surcomplexification.
Créativité et qualité de la séquence de chargement (3 pts) Originalité · Concept · Mise en scène · Rythme visuel · Qualité graphique · Transition	La séquence de chargement est absente ou ne présente aucune proposition visuelle évaluable.	La séquence est rudimentaire ou peu réfléchie. Les choix visuels et la mise en scène manquent de cohérence ou de finition.	La séquence présente une intention créative intéressante, mais la mise en scène, le rythme ou la finition limitent son impact.	La séquence est créative, cohérente et soignée. Les choix graphiques et le mouvement servent efficacement le concept.	La séquence se distingue par une mise en scène inventive, une identité forte et une excellente exploitation du mouvement et des transitions.
Créativité et qualité de la présentation de la page principale (4 pts) Direction artistique · Composition · Typographie · Vidéo · SVG · Présentation des projets · Cohérence	La page principale est absente ou sa présentation est insuffisante pour permettre une évaluation.	La page présente peu de recherche visuelle. La composition, la hiérarchie ou l’intégration des médias nuisent à la présentation.	Une direction visuelle est perceptible et certaines idées sont intéressantes, mais la composition, la cohérence ou la finition demeurent inégales.	La page principale est créative, cohérente et soignée. La composition, les médias et les animations mettent efficacement les projets en valeur.	La page principale possède une identité visuelle distinctive et aboutie. Les choix graphiques, les médias et le mouvement forment une expérience particulièrement inventive et cohérente.
Qualité de la présentation des contenus (page dédiée à chaque projet) (3 pts) Hiérarchie · Images · Contexte · Approche · Catégories · Mise en page · Animation · Lisibilité	Les pages dédiées sont absentes ou leur contenu ne permet pas une évaluation.	Les contenus sont mal présentés. La hiérarchie, les images ou la mise en page rendent les projets difficiles à comprendre.	Les informations sont accessibles, mais leur présentation manque de cohérence, de dynamisme ou de finition.	Les pages présentent clairement les projets. Les textes, les images et les animations sont bien intégrés dans une mise en page soignée et cohérente.	Les pages valorisent remarquablement les projets. La hiérarchie, les médias, la narration visuelle et les animations forment une expérience cohérente et engageante.
Qualité des inspirations fournies (2 pts) 3 références · Pertinence · URL · Captures d’écran · Correspondance · Reproduction et adaptation	Les inspirations demandées ne sont pas fournies.	Les références sont largement incomplètes, peu pertinentes ou ne correspondent pas clairement aux animations réalisées.	Les inspirations sont fournies en partie, mais leur documentation, leur pertinence ou leur correspondance avec les réalisations présentent des lacunes.	Les trois inspirations sont pertinentes et correctement documentées avec leurs URL et captures d’écran. Leur influence est clairement reconnaissable dans les animations réalisées.	Les trois inspirations sont judicieusement choisies et soigneusement documentées. Leur analyse et leur adaptation témoignent d’une excellente compréhension des animations de référence.