Introduction

C'est quoi?

• Exploration des événements : Le site web offre une plateforme intuitive pour découvrir les événements à venir à Katchow, qu'il s'agisse de festivals, de concerts, d'expositions ou d'activités communautaires.

• Détails détaillés : Chaque événement est accompagné de détails détaillés, y compris des descriptions, des horaires, des emplacements et des liens pour en savoir plus.

• Technologies utilisées : Le site web a été développé en utilisant les dernières technologies pour assurer une expérience utilisateur optimale. Nous avons utilisé Next.js comme framework JavaScript côté client, offrant une performance et une réactivité supérieures. De plus, nous avons intégré Framer Motion pour des animations fluides et attrayantes qui donnent vie à l'interface utilisateur.

Objectif initial

Réaliser une application web avec la Framework Next.JS, intégrer un CMS et une bibliothèque d'animation.

• Nextjs

  Pour le développement front-end, pour les optimisations OOTB qu'il procure.

• Framer Motion

  Pour les intéractions et les animations.

• StoryBlok

  Un CMS headless pour la gestion du texte et des images du site.

• Spline3D

  Pour l'élément 3D de la page principal.

Est-ce que j'ai atteint mon objectif?

Je pense que j'ai plutot bien atteint mon objectif. J'aurais voulus avoir plus plusieur type d'intéraction, drag et clique. J'ai essayer mais je n'ai pas eu assez de temps pour bien explorer.

Prototypes

J'ai fait un prototypes d'animation et une ébauche de maquette que j'ai changer au fur et à mesure que j'avancais.

• Maquette

  J'ai fait ma maquette sur Figma, c'était très efficace pour visualiser des idées et faire des changements.

• Animation

  Pour le prototypes d'animation, j'ai chercher des animations sur le web et j'ai essayer de les reproduires du mieux que je pouvais.

Démonstration...

• Défis

  Pattern de composition

  Next.Js est un framework qui enveloppe React.Js, donc pour composer un site Web avec Next.Js il faut des composant soit "Serveur", soit "Client". Chacun de ces composants ont des utilités différentes et précises.

  

  
  
  

  Le défi était de bien comprendre la composition des et l'enbriquement des composants. Je ne voulais pas que mon site soit trop lourd lors du "build". Il fallait donc que je choisisse bien quelles composants devaient être "Serveur" et lesquels devaient être "Client".

  
  

  Dans cette exemple, j'ai un composant "Serveur" qui est le RootLayout de la page. Il est le parent de tout les composants de la page. Il recoit dans ces "props" les "children" qui sont les composants de la page. On peut aussi voir que on passe les "children" dans le composant "SmoothScroll" qui lui est client.

  

  Serveur

  
  
  

  Un des défis était de bien organiser mes composants pour ne pas envoyer Le composant "SmoothScroll" qui est lui "Client" rendra toute la page et tout le contenue au client, ce qui n'est pas efficace

  

  Client

• Truc cool!

  L'animation de la page des événements était très intéressante à conceptualiser et à réaliser. Le concept est plutôt simple à comprendre : il y a une balise canevas dans la page qui dessine une image à chaque fois que l'utilisateur fait défiler la page. C'est comme une longue feuille de sprite que l'on défile en fonction de la position du défilement de l'utilisateur.

  
  

  Avec le hook 'useScroll' de Framer Motion, on peut savoir où l'utilisateur est rendu dans la page ou, dans mon cas, où il est rendu dans un conteneur. De plus, avec le hook 'useMotionValueEvent', on peut mettre une sorte d'écouteur d'événement sur le hook 'useScroll' pour savoir quand la valeur du 'scrollYProgress' change et appeler la fonction pour dessiner l'image et mettre à jour l'utilisateur où il est rendu ou dans les images.

  

  scrollYProgress: Valeur du scroll dans le container.
  
  target: Le container dans lequel on veut savoir ou l'utilisateur est rendu.
  
  drawImageOnCanvas: Fonction qui dessine l'image sur le canvas.
  
  setCurrentStep: Fonction qui update l'étape dans laquelle l'utilisateur est rendu.

• Création

  La majorité de mes assets sont prise de Pexels. Je les ai retoucher par la suite sur Photoshop pour les images et Premier pour les vidéos

  

  J'ai créer cet élément 3D avec Spline3D. C'était très intéressant à faire. Je l'ai aussi animer avec les outils d'animation de Sàpline3D.

  

  J'ai créer cet élément 3D avec Spline3D. C'était très intéressant à faire. Je l'ai aussi animer avec les outils d'animation de Spline3D.

Réflexions finales

Points forts

• Créativité Développée : L'une des grandes forces que j'ai découvertes durant le projet est ma capacité à penser de manière créative et à générer des idées pour résoudre les problèmes.

• Résilience : J'ai aussi remarqué ma capacité à persévérer face aux difficultés et à surmonter les obstacles rencontrés dans le processus d'apprentissage.

• Curiosité : J'ai aussi remarqué que j'ai fait preuve d'une soif de connaissances et d'un désir constant de découvrir de nouveaux sujets et d'essayer de nouvelles choses.

Points faibles

• Structure : Parfois, il était difficile de maintenir une structure cohérente dans l'apprentissage en solo, ce qui peut entraîner une dispersion des efforts.

• Auto-Évaluation : Il était peut être difficile de s'évaluer de manière objective dans ses progrès et de déterminer les domaines où des améliorations sont nécessaires.

• Motivation : Il était difficile de maintenir une motivation constante peut être un défi, surtout lorsqu'il n'y a pas de pression externe ou de feedback immédiat.

Pistes d'améliorations

• Établir des Objectifs Clairs : Définir des objectifs spécifiques et mesurables pour chaque session d'apprentissage afin de maintenir le focus et la motivation.

• Créer une Routine : Établir une routine quotidienne ou hebdomadaire pour l'apprentissage, en dédiant des plages horaires régulières à cet effet.

• Pratiquer la Rétroaction : Demander des retours d'expérience à des mentors, des enseignants ou des pairs pour identifier les points forts et les axes d'amélioration.

Conclusion

Bilan de Formation en TIM