À l'IUT, on doit faire en trois jours un site basé sur le storytelling et des animations, que ce soit au scroll, au hover... Les équipes sont composées de 3 personnes: un développeur et deux multimédias. Le sujet est libre, mais il doit raconter une histoire. Mon équipe est partie sur un voyage spatial, en utilisant notre cher astronaute français Thomas Pesquet en guise de référence.
- Romain Leblond (MMI3 Web)
- Ferdinand Saniez (MMI3 Mul)
- Omar Abounayme (MMI3 Mul)
J'adore React et Next, mais pour un single page sans interactivité, c'est overkill. C'est la raison pour laquelle j'utilise plutôt du HTML pur avec un peu de tailwind et motion-one pour les animations.
Motion-one c'est une librairie beaucoup plus légère que GSAP
Il suffit de run npm i ou yarn i ou pnpm i pour installer les dépendances
Puis ensuite, npm run dev ou yarn dev ou pnpm dev à la racine du projet, qui utilise Vite. Une URL va s'afficher dans le terminal, il suffira simplement de l'ouvrir et vous arriverez sur la landing page qui comporte trois sections (header, la section avec la sonde Voyager & histoire de l'aérospatial)
Node: 20+ (même si les versions antérieures devraient suffir) Navigateur: Chrome 120+ Définition: 1920x1080
Le projet n'est pas vraiment fini par manque de communication dans le groupe, par erreurs de prise de décisions (technologies) et organisation dans le concept de base. Les MUL ont surestimé mes compétences et ont pris des décisions qui ont influencé le concept du projet, c'est pourquoi j'ai dû adapter à mort le concept en choses dont je suis capable. Je n'avais jamais utilisé Motion-One, disons que j'ai l'habitude de faire des projets en React + framer-motion avec une approche déclarative et des animations plus raisonnables
Have fun!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent