Création d'un site web responsive React en utilisant CSS, HTML et React avec des graphiques et des animations 3D.
J'ai mis en place mon propre portfolio en tant que site web, où j'ai ajouté tous mes projets et expériences.
Ce projet a été initialisé avec Create React App.
Les sites web les plus impressionnants du monde utilisent des graphiques et des animations 3D pour donner vie à leur contenu.
Dans ce projet, j'ai utilisé les technologies suivantes :
- ThreeJS - une bibliothèque graphique 3D incroyablement puissante qui vous permet de rendre et d'animer des modèles 3D captivants avec facilité.
- React Three Fiber - une bibliothèque largement adoptée qui intègre ThreeJS dans React, vous permettant de créer des graphiques 3D époustouflants tout en exploitant le plein potentiel des capacités de React.
- TailwindCSS - un cadre de style CSS très populaire, axé sur l'utilité, qui vous permet de créer des sites web visuellement époustouflants avec un minimum d'effort.
- Framer Motion - la bibliothèque de référence pour ajouter des animations captivantes à vos sites Web React, pour donner vie à vos créations et les rendre vraiment remarquables.
- Mettre en œuvre les meilleures pratiques de l'industrie, en rendant le code réutilisable et évolutif grâce à des techniques telles que les composants d'ordre supérieur (HOC) et des techniques telles que Suspense pour afficher un contenu de secours en attendant que ses composants enfants aient fini de se charger.
- Veiller à ce que le site web présente une réactivité optimale sur tous les appareils, offrant ainsi une expérience utilisateur transparente.
- Intégrer un formulaire de courrier électronique fonctionnel sur le site web, permettant aux visiteurs de vous contacter facilement, améliorant ainsi l'engagement et l'interactivité de l'utilisateur.
Pour installer les dépendences de cette application exécuter npm install
.
Dans le répertoire de l'application, vous pouvez exécuter :
Exécute l'application en mode développement.
Ouvrir http://localhost:3000 pour la voir dans le navigateur.
La page se rechargera lorsque vous ferez des changements. Vous pouvez également voir les erreurs de lint dans la console.
Exécute le test runner en mode watch interactif.
Voir la section exécuter les tests pour plus d'informations.
Construit l'application pour la production dans le dossier build
.
Il intègre correctement React en mode production et optimise la construction pour obtenir les meilleures performances.
Le build est minifié et les noms de fichiers incluent les hashs.\N- L'application est prête à être déployée.
Voir la section déploiement pour plus d'informations.