Développement Web avec React et TailwindCSS 2025 (+ animations de mouvement dans l'image)

1. Intro: Bonjour, et bienvenue dans ce cours où vous apprendrez à créer des composants réutilisables avec React et Tailwind CSS Après avoir suivi ce cours, vous serez en mesure de créer des composants que vous pourrez réutiliser dans le cadre de vos projets Vous n'aurez donc pas à réinventer la roue chaque fois que vous créerez un nouveau site Web Cela m'a fait gagner beaucoup de temps avec ces composants, et il est très facile de les adapter à la conception de la page murale, ce qui accélère et facilite la progression de la création d'un site Web. Nous aborderons les composants de la barre de navigation, sections à propos, les sections du portfolio, les sections de contact , ainsi que les animations avec le mouvement du cadreur J'expliquerai comment ces animations fonctionnent et comment vous pouvez les utiliser pour vos propres composants Nous utiliserons Talwin CSS, un premier framework CSS utilitaire qui rend le style des sites Web rapide, flexible et hautement personnalisable Au lieu d'écrire de longs fichiers CSS, nous utiliserons de petites classes utilitaires réutilisables pour styliser directement les composants, ce qui rendra le développement plus rapide et plus efficace et garantira que notre interface utilisateur est totalement réactive sur tous les appareils. Nous créerons des composants réutilisables, qui sont éléments d' interface utilisateur que nous pouvons utiliser plusieurs fois sur différents projets. 2. IntroTEMPLATE: Dans notre IDE, nous allons ouvrir un terminal. Dans ce terminal, nous allons coller cette commande. APX crée l' étape suivante au plus tard. Au lieu de mon projet, nous pouvons faire juste un point car nous sommes déjà dans un dossier qui s' appelle Death Portfolio pour moi. Si nous voulons également créer un dossier pour vous, vous pouvez y mettre le nom du dossier. Maintenant, vous allez également faire le TypeScript et l'ESLint. Nous allons entrer et il nous posera quelques questions. Nous aimerions utiliser le vent arrière. Nous n'avons pas besoin de répertoire source. Nous aimerions utiliser un routeur, pas de turbopack, pas Il va maintenant installer les dépendances. Cela prendra une minute. Dans notre dossier, nous allons cliquer dessus et nous allons créer un nouveau dossier. Nous nommerons les composants de ce dossier. Et nous y enregistrerons nos sections en tant que page d'accueil, barre de navigation, etc. Je peux commencer à y créer les composants. Commençons par la barre de navigation. Ensuite, nous pouvons continuer avec Hero Contact, Footer, Key Matrix, l'animation du logo, services de portfolio et Stack Chaque fois que nous créons une exportation de notre composant, nous modifierons une application en DSX par point de page Actuellement sur cette page, DTSX est le prochain modèle Dogs. Si nous allons dans le terminal et que nous exécutons Command NPM run Dev t denor, cela ouvrira Local Host 3,000 Et si nous ouvrons Local Host 3,000, nous pourrons y voir notre page. Actuellement, il n'y a que le modèle NextGS. Nous allons créer lentement ces composants, puis nous les y ajouterons à la place de ce modèle. Et nous pouvons le mettre dans ce que l' on appelle des fragments vides. Et il y aura des ajouts, Navbar, etc. Mais pour cela plus tard, nous devrons d'abord créer les composants. Chaque fois que nous souhaitons ajouter le composant lui-même, nous devons créer son exportation, et je créerai la const d'exportation, Navbar Maintenant, je vais devoir y retourner, l'enregistrer, et nous reviendrons à la page, et nous commencerons à taper la technologie de la barre de navigation Nous y avons la recommandation de l'importer à partir des composants. Nous allons entrer, nous allons fermer la technologie, et maintenant tout ce que nous allons écrire dans notre barre de navigation sera affiché sur notre page, et vous pouvez maintenant le voir dans le coin supérieur gauche, même si c'est vraiment presque invisible Et comme ça, nous ajouterons tous les composants un par un. 3. NavbarTEMPLATEnocode: Commençons maintenant par coder la barre de navigation. Nous devrons importer les dépendances requises. Next Jz lie les composants pour la navigation côté client, réagit et utilise State Hook pour la gestion des états, et les icônes des icônes de la bibliothèque React Icônes Nous pouvons voir que cette bibliothèque d'icônes React nous montre une erreur. C'est parce que cette bibliothèque n'est pas installée. Copions-en le nom, ouvrons un terminal, faisons NPM I et y collons le nom de la bibliothèque Maintenant, nous allons appuyer sur Entrée pour installer la bibliothèque, et quand nous reviendrons à notre composant, il n'affichera plus d'erreur. Comme nous utilisons use state, qui est une fonctionnalité du site client, nous devrons définir ce composant comme use client pour indiquer que ce composant s' affiche sur le site client. Nous allons continuer à définir un tableau de liens de navigation avec le titre et le chemin de chaque lien. Cela permettra de garder les éléments de navigation organisés et facilitera l' ajout de nouveaux liens chaque fois que nous le souhaiterons. Nous pouvons maintenant accéder directement au composant Navbar. Ce que nous devons faire, c'est initialiser l' état du menu de navigation mobile Ce NAF sera un boolin permettant de savoir si le menu mobile est ouvert ou fermé, et Set NAF sera une fonction permettant de mettre à jour l'état du Dévotement, cela sera réglé sur des chutes. Nous déclarerons ensuite une fonction permettant d'activer ou de fermer la navigation mobile, et elle définira le NAF à une valeur différente de celle qu'il sera Ainsi, chaque fois que vous cliquerez sur le bouton, la valeur sera modifiée, et nous l'utiliserons ensuite sur notre élément pour fermer et ouvrir le menu Nous créons également une fonction de fermeture du NAF, qui sera utilisée chaque fois que vous cliquerez sur le lien pour nous assurer que notre navigation se En retour, au lieu de fragments vides, nous allons commencer par DIF. Pour les cours, nous utiliserons l'indice Z 250. Nous utiliserons une position fixe, ce qui signifie que chaque fois que nous ferons défiler la barre de navigation, la disposition Flexbox, afin que nous puissions utiliser centre de justification pour centrer les éléments de navigation Nous définirons la largeur en entier, le texte en blanc et la police en gras. Ensuite, nous allons créer un identifiant pour la navigation sur le bureau. Pour la navigation sur le bureau, nous utiliserons également une bordure et la définirons pour qu'elle soit blanche avec une opacité de 0,2 Ensuite, nous allons créer une marge à partir du haut et un flou de fond car lorsque nous ferons défiler la page, nous aimerions que notre barre de navigation soit bien visible Faisons également en sorte qu'il soit arrondi avant Excel, y ajoutant des radios de bordure. Sur l'écran mobile, cela sera masqué et sur l'écran moyen et supérieur, il sera affiché de manière flexible. Encore une fois, parce que nous aimerions centrer les éléments avec le centre des éléments et justifier centre horizontalement et verticalement. Nous y ajouterons de la literie et nous fixerons également une largeur maximale à 400 pixels. Si vous ajoutez d'autres éléments à votre barre de navigation, vous pouvez l'augmenter. Ensuite, vous allez configurer Mito pour qu'il le centre également. Maintenant, si vous y ajoutez quelque chose et que vous l'enregistrez, vous pouvez voir notre barre de navigation sur la page Mais pour n'y ajouter que quelques lettres, cartographions les éléments et ajoutons-les là. Avant de les cartographier, nous allons créer une liste non ordonnée pour eux. Cette liste non ordonnée utilisera une mise en page flexible du livre et une ligne flexible Cela signifie que les objets seront placés l'un à côté de l'autre. Nous allons à nouveau en ajouter quelques en attente et SpaceX huit. Cela signifie qu'il y aura un certain écart entre tous les éléments horizontalement. Pour la cartographie, nous utiliserons la carte à points de Nablns. Et nous utiliserons un lien qui sera le nom de chaque élément de cette carte et de cet index. À l'intérieur d'une liste ordonnée et de ce mappage, nous allons créer l' élément de liste avec un index clé, Reactive utilise cette clé pour optimiser les performances de rendu, puis nous assignons l'index du tableau en tant que clé Dans cet élément de liste, nous ajouterons une balise link avec hrefsetlin point Pav que nous avons dans Cela signifie qu'une fois que nous aurons ajouté des identifiants à nos autres sections, nous arriverons à la section souhaitée. Et puis un nom de classe dans lequel nous allons transformer son texte en blanc avec une opacité de 0,5 Cela signifie que lorsque nous survolerons les éléments de notre liste, nous verrons lequel nous survolons actuellement ensuite la transition avec une durée définie sur 300 et ralentissez pour rendre cette animation de survol plus fluide De plus, vous pouvez maintenant voir sur notre page que nous avons la mise en page avec la navigation, mais qu'il n'y a aucun élément. Ce que nous devons faire, c'est accéder au titre du point de lien que nous avons dans notre tableau. Lions le titre, enregistrons-le, et nous pouvons maintenant voir que notre barre de navigation est sur la page Nous pouvons nous déplacer ci-dessous et coder la version mobile de cette barre de navigation. Nous allons y créer un div et ajouter à cette fonction DIF onclick Cette fonction OnClick que nous allons ajouter est Toggle NAF, qui signifie que chaque fois que vous cliquez sur ce div, elle exécute cette Nous avons et dans cette fonction tognav, vous pouvez voir qu'elle modifiera la variable NAF Cela signifie que chaque fois que nous cliquons sur ce div, l'état du NAF passe à vrai ou à faux Nous allons maintenant utiliser ce qu'on appelle un opérateur ternaire. Nous vérifierons la valeur de notre NAF, et si elle est vraie, il exécutera cette icône fermée en plan, et au cas où elle serait fausse, quelle est la valeur par défaut, nous verrons icône de menu sur notre mobile Sauvegardons-le maintenant. Et je vais également changer la mise en page pour une version mobile. Vous pouvez maintenant voir l'icône de notre menu. Et si je clique dessus, vous pouvez voir comment il est modifié pour passer et revenir au menu Hamburger Nous ajouterons un nouveau DIV, et à ce div, nous ajouterons un nom de classe, et à l'intérieur de ce signe dollar entre accolades, nous utiliserons un autre opérateur Turner Si notre variable NP est vraie, nous définirons la traduction X zéro, et si elle est fausse, nous définirons la traduction négative X complète. Cela signifie que nous allons déplacer nos éléments de menu vers l'extérieur et les faire revenir sur l'écran. Les autres classes que nous ajouterons ont une position fixe à gauche et en haut à zéro. Nous réglerons la largeur à pleine et la hauteur à pleine. Fond noir avec une opacité de 0,9, transformation de transformation et de transition et une durée de 300 pour l'animation elle-même. Nous allons l'enregistrer maintenant et nous pouvons le tester. Et tu peux voir comment ça bouge. Bien sûr, il nous manque toujours des éléments, mais nous allons les ajouter maintenant. Nous pouvons laisser cette navigation ouverte, et à l'intérieur, nous pouvons commencer à ajouter les éléments. Comme précédemment, nous devons créer une liste non ordonnée et nous ajouterons la disposition Flexbox avec Flex Direction Colum afin que nos éléments de liste soient placés les uns en dessous Nous les centrerons verticalement et horizontalement, et nous utiliserons l'espace par huit. Cela signifie que nous allons créer un espace vertical entre eux. Nous y avons également réglé la hauteur deux fois complète. Comme auparavant, vous pouvez simplement copier-coller ceci. Nous ajouterons ce mappage sur le tableau Nablks avec Link étant le nom de l'élément actuel et l' index étant la position Ensuite, nous utiliserons cet index dans la clé. Après avoir créé la balise Link, nous y définirons le chemin du point Hf toolink et le titre du point Link pour le nom de l'élément de navigation Nous allons maintenant l'enregistrer et nous pouvons le voir sur notre page. Nous modifions également leur fonction « on click » pour fermer la navigation. Cliquons, par exemple, sur le portfolio. Avec cela, nous pouvons encapsuler le composant Navbar. 4. Navbar 1: Tout d'abord, le point d'index CSS, je vais incarner la technologie, mettre cette police et aussi y mettre cet arrière-plan Pour la première barre de navigation, nous devons importer l'état américain, puis le plan AI se fermer et le menu contextuel depuis Gons AI Ensuite, j'utiliserai un logo. Pour l'instant, je vais utiliser, par exemple, cette photo de profil que j' ai dans mon actif. Vous pouvez le télécharger depuis Git et j'importerai également lien depuis la bibliothèque React Scroll que nous avons installée. Toutes les barres de navigation auront quelque chose en commande, savoir cette variable d'état. Nous déclarons leur variable d'état, NAF, et sa fonction setNAF selon laquelle la fonction SED NAF mettra à jour l'état NAF Ensuite, nous avons leur gestionnaire de fonction NAF, et cette fonction sera chargée d'y faire varier la valeur de L'état par défaut sera faux. Cela signifie que nous utiliserons un opérateur de retournement, et en cas de fausse position, le menu s'affichera. Sur la position réelle, nous allons terminer un aperçu. Cela signifie que lorsque la navigation sera ouverte , l'icône passera du menu à la fermeture. De plus, nous veillons à ce que cela ne soit visible que sur l'écran du mobile. Cela signifie que nous allons afficher le bloc. Et chaque fois que cela dépasse l'écran moyen, il sera masqué. Nous allons définir une couleur pour ces icônes avec un niveau de texte 300 et nous la fixerons à droite et en haut. Ce sera donc dans le coin supérieur droit. De plus, si vous avez un indice Z plus élevé, ces icônes ne tomberont ces icônes ne en dessous d'aucun autre élément. Maintenant, je vais afficher l'arrière-plan de la barre de navigation, puis le créer avec Full, corriger également, et le placer en haut et à gauche à zéro. Réglez le texte en blanc, faites également apparaître une ombre autour d'une barre suffisante, et avec cette flexion d'affichage, je pourrai justifier entre et autour. Justifier entre les deux signifie que nous aurons un espacement égal entre nos éléments sur un écran mobile, et une fois que nous aurons atteint l'écran le plus grand et plus, nous aurons la justification. Cela signifie qu'il y aura un espacement uniforme autour de nos éléments Ensuite, nous le centrerons verticalement avec le centre de l'article, et nous y fixerons également une certaine hauteur. Ensuite, nous ajouterons un logo qui servira de texte d'ancrage, et pour notre logo, j'y mettrai également une image et une technologie H one. Pour le texte d'ancrage, je vais à nouveau utiliser disposition Flexbox et le centrer horizontalement et verticalement Pour l'image, je vais utiliser le centrage avec MMO Do. Je vais utiliser ce rayon de bordure, un peu de pédalage vertical. Mon logo sera l' image que j'y ai importée, et je vais y définir une certaine largeur. Pour H one tech, je vais y installer Jado et compagnie Je vais utiliser cette technologie de rupture, elle figurera donc sur la deuxième ligne et le logo ressemblera d'une manière ou d'une autre à ceci. Mais bien sûr, si vous avez votre propre logo, supprimez simplement celui-ci en H. Vous pouvez y mettre la source de votre logo, et je garderais tout de même texte d'ancrage car vous pouvez alors saisir le Hf et cela peut vous rediriger vers la page d'accueil, par exemple. Passons maintenant à la liste non ordonnée. Aujourd'hui, nous utiliserons le mode masqué sur les écrans mobiles, car nous ne le diffuserons que sur un écran moyen et supérieur. Et pour la liste désordonnée elle-même, nous allons définir le pointeur du curseur Ainsi, chaque fois que nous survolons les éléments de notre liste, nous avons le pointeur Ensuite, nous définirons la note du texte à 400 pour que les éléments de notre liste soient la couleur. Nous allons créer un écart, et nous allons également le centrer à nouveau comme ceci. Chacun des éléments de la liste contiendra cette balise de lien, et cette balise de lien est importée depuis le React Scroll. Chaque fois que vous cliquerez sur ce lien, il vous fera défiler doucement jusqu' au hf que vous y avez défini. La différence entre ce lien et la balise d'ancrage est que ce lien utilise un peu plus d'attributs. Nous devons en définir deux, qui sont essentiellement le HRF. Ensuite, nous définirons les paramètres spy, smooth , through, offset et duration. Vous y définirez les valeurs, la durée du défilement fluide. Vous allez maintenant le faire pour tous les liens, puis nous ajouterons ce bouton pour me contacter. Nous l'ajouterons à la fin car avant ce bouton, il y aura toujours la section avec la liste non ordonnée pour la navigation mobile Nous allons ajouter la bordure à notre bouton, le mettre en blanc, l'arrondir complètement, puis simplement définir le rembourrage horizontal et vertical De plus, nous allons définir une marge à droite car sur l'écran du mobile, il y aura l'icône sur le côté droit. Ensuite, nous remettrons cette marge à zéro sur l'écran moyen et au-dessus. Et l'écran moyen est également le point où la navigation s'interrompra, et elle passera à la version de bureau ou à la version mobile. Et enfin, la navigation sur écran mobile. Encore une fois, nous utiliserons l'opérateur turner dans ce div et il clôturera la liste murale non ordonnée Dans ce div, l'opérateur du retourneur, nous allons commencer par un crochet bouclé, sorte que les styles changeront en fonction de cette valeur Sur la première position, ce sera la vraie position et la seconde sera fausse. Lorsque cet état de variable sera faux, nous l'exécuterons et il sera fixé à -100 % Cela signifie qu'il sera en dehors de notre écran. Lorsque cela sera vrai, nous définirons ces valeurs. Nous pouvons réellement le déclencher pour que vous puissiez le voir. Et vous pouvez également y voir comment nous définissons la largeur à remplir, comment nous définissons cet arrière-plan en fonction de cette durée. Cela signifie que lorsque nous cliquons sur le bouton, il glissera comme ça, ou il changera également la position de -100 % à zéro gauche Ensuite, nous utiliserons leurs 100 premiers pixels. Cela signifie que nous aurons de l'espace pour notre navigation. De plus, nous utiliserons leur position fixe, de sorte que tout cela restera avec nous lorsque nous ferons défiler la page Nous utiliserons une couleur de texte et un indice Z plus élevé. Au cas où il y aurait d'autres éléments sur notre page avec également un index Z défini, celui-ci doit toujours être au top. Pour une liste ordonnée, elle est essentiellement copiée de ce que vous pouvez y voir, mais elle est un peu mise à jour. Nous avons là les caresses, la taille du texte et l'en-tête du texte avec le texte pour Excel, marge vers la gauche, l'index de réglage et le pointeur du curseur 5. Navbar 2: La navigation utilisera à nouveau ce défilement réactif pour un défilement fluide, ainsi que ces icônes et pour utiliser l'état. Ensuite, comme je l'ai expliqué dans la première navigation, vous utiliserez cette variable d'état et cette fonction qui la définira. Encore une fois, pour changer les icônes sur l' écran mobile et sur l'écran plus grand et au-dessus ou sur l'écran moyen et au-dessus, nous utiliserons ce div avec cet opérateur de tour, et il y a la fonction de clic qui déclenchera celui-ci et elle changera d'état chaque fois que nous cliquerons sur cette icône de menu ou sur cette icône fermée. Je l'ai déjà expliqué, au cas où vous sauteriez la première barre de navigation, revenez-y et au début, je vous l'expliquerai Le creux principal de notre barre de navigation n'aura qu'un rembourrage vertical sur quatre, et il sera également centré avec Mix Auto Ensuite, nous aurons la liste non ordonnée, et cette liste non ordonnée sera masquée sur l'écran du mobile et sera à nouveau affichée sur l'écran moyen et au-dessus Nous allons définir la largeur 2 complète, et nous allons définir cette classe de verre que je viens de vous montrer en CSS à points d'index. Nous avons également défini une hauteur fixe de 96 pixels, toile de fond Bler dont nous n'avons pas réellement besoin car nous utilisons l'effet de classe. Car cette radio frontalière est la même, mélangez-la à 400 pixels, et comme nous avons le centrage là, nous n'en avons pas besoin dans le man Div, alors nous avons une justification entre les deux Cela signifie qu'avec ces drapeaux d'affichage, nous aurons régulièrement espacé les éléments de notre liste Au centre de l'élément, cela signifie que nous le centrons verticalement, que nous le remplissons horizontalement et que le texte est classé à 100 Nous changeons donc la couleur du texte. Pour chacun des éléments de notre liste, nous définissons la literie et le pointeur du curseur. Ainsi, lorsque nous survolerons l'élément de la liste, cela changera également le curseur Et puis pour le lien, comme dans la première barre NAF, nous avons la bibliothèque Smooth Scroll Nous en utilisons donc deux. Cela signifie où cela nous redirigera. Ensuite, avec le décalage et la durée de Spymooth, nous définissons à quoi devrait ressembler le défilement fluide Vous pouvez jouer avec la durée, afin de trouver votre point idéal pour la rapidité du défilement fluide. Un autre élément intéressant que nous allons ajouter à cette liste désordonnée ou à cette navigation est un diviseur Entre tous ces éléments de liste, je vais mettre un div avec cette colonne, et j'y mettrai un texte violet 500, donc cela changera la couleur et aussi le poids de la police. Ensuite, je vais prendre ce div et je le mettrai entre les autres éléments de la liste, et cela créera une barre de navigation comme celle-ci Nous devons également résoudre une navigation sur écran mobile pour notre barre de navigation , car nous devons la rendre réactive Et oui, nous allons à nouveau ajouter cet opérateur tertiaire à divi , et il ressemblera Nous aurons l'icône sur la droite, et lorsque nous cliquerons dessus, les éléments de la liste s' introduiront facilement en changeant de position de -100 à gauche à zéro Encore une fois, nous allons définir ceci. La couleur d'arrière-plan sera supprimée au bout d'un certain temps, nous allons la corriger pour qu'elle soit utilisée en haut à gauche avec l'index supérieur complet et une certaine couleur de texte. En quatrième position, nous utiliserons, encore une fois, fixé à gauche -100 Lorsque cela deviendra vrai, il exécutera cette première position. Ensuite, lorsque la première position sera exécutée et qu'elle changera de position, cette liste non ordonnée sera affichée En utilisant ces longueurs, nous pouvons simplement copier à partir de la liste non ordonnée précédente, mais nous n'utiliserons plus ce diviseur 6. Navbar 3: Snap Bar sera créée un peu différemment car nous ne définirons pas le lien par lien, mais nous utiliserons cette constante pour les liens, puis nous chargerons tous les liens, puis nous utiliserons cette constante. Et avec JavaScript, nous allons afficher lien par lien. Ce qu'il faut changer, c'est cette icône de fermeture et de menu de plan, l'état de React, bien sûr, puis la variable d'état. Que nous avons utilisé dans les deux barres de navigation précédentes. Nous allons maintenant créer cette constante avec des liens. Nous y insérerons les éléments. Donc, chaque fois que nous aurons un nom et un lien, j'utiliserai ce service à domicile à propos de et de contact. style, je vais appliquer pour le div principal sera, encore une fois, la largeur de l'ombre à fond sur un écran plus grand, nous augmenterons le rembourrage horizontal, définirons une position fixe et la fixerons en haut et à gauche à zéro Nous allons définir un arrière-plan avec une opacité de 0,2. Nous utiliserons la flexion de l'écran pour aligner les éléments au centre et pour laisser de l'espace entre les éléments, en définissant un rembourrage vertical et un rembourrage horizontal Le premier élément que nous ajouterons sera notre logo. Pour le logo, J Do, nous allons définir un boulon de police, des voitures, un pointeur, un flex d'affichage, afin de pouvoir le centrer verticalement. De plus, pour la technologie H one, nous allons augmenter la taille du texte que nous venons d'utiliser. Nous allons maintenant utiliser le soulignement et définir la décoration sur le violet 400, et c'est ainsi que nous allons décorer notre logo. Ensuite, nous définirons la couleur du texte, et lorsque nous survolerons notre logo, il affichera le texte gris 500 Cela signifie qu'il affichera un gris plus foncé que celui que nous avions initialement défini. Vous allez maintenant utiliser le div avec les icônes et avec l'opérateur Turner qui travaillera sur cette fonction onclick, Handle knife Chaque fois que nous cliquons sur cette icône, sur ce menu ou sur le bouton de fermeture, cette fonction est appelée «   couteau à manche » et l' état de la variable NAF est modifié Nous allons définir la taille du texte. De plus, nous allons définir la position absolue et la fixer à droite et en haut. Ensuite, nous utiliserons le pointeur Carz, et sur un écran plus grand et au-dessus, nous masquerons ces icônes, et sur l'écran du mobile, elles seront affichées Nous pouvons donc y mettre un bloc. Ensuite, il y a l'opérateur de virage, la vraie position et la fausse position. Force le défaut sur l'écran du mobile. Il affichera donc l'icône du menu. Nous y définirons également la taille. Ensuite, nous arrivons à la partie intéressante. Dans cette liste non ordonnée, nous allons définir ce style Et à la fin de la classe CSS, nous disons également que si cette variable de navigation ou cette variable SNAP est vraie, elle utilisera le top 20. Cela signifie qu'il placera la position en haut. Et au cas où ce serait faux, il fixera la position du haut à -500 pixels Il prendra donc cette liste murale désordonnée et la placera en dehors de notre écran Maintenant, vous pouvez voir que je change l' écran en écran mobile. Et chaque fois que je clique sur l'icône du menu, cela modifie les paramètres et le fait passer des 500 premiers pixels aux 20 ou 5 meilleures RAM Vous pouvez voir comment il glisse depuis le haut. Bien entendu, vous pouvez également le faire du côté gauche ou du côté droit. Je vais maintenant le laisser par le haut. Vous pouvez modifier les valeurs de la façon dont cela se déplace avec cette durée. De plus, j'utilise ici cet EN et ce transitionnel, donc cela déclenchera tous les éléments qu'il contient. Ensuite, nous avons la largeur totale de l'ensemble de literie, de gauche à zéro, arrière-plans, et encore une fois, le centrage des articles, le réglage des valeurs un peu, mais il n'y a rien très intéressant à parcourir Qu'est-ce qui s' y passe ? Voilà, cette partie utilise la fonction de carte, et cette fonction de carte itère sur un tableau appelé liens que nous y avons défini Ensuite, nous avons un argument, et c'est le lien, et nous utilisons le nom de la valeur du lien ou le nom du champ et le champ de lien ou le lien de valeur. Nous avons là, donc ce nom et ce lien. La première itération concerne donc cette page d'accueil avec ce lien, deuxième itération concerne le service avec ce lien, troisième concerne ce lien et 40 concerne le contact avec ce Cela signifie que nous n'avons pas besoin de répéter notre code, mais il le bouclera simplement et affichera tout ce que nous avons dans les liens constants. Et puis c'est ce à quoi nous sommes habitués avec les barres SNAP précédentes. Nous avons un élément de liste, et à l'intérieur de cet élément de liste, il y a une balise d'ancrage. Bien entendu, si vous voulez une navigation fluide avec Scron, vous suffira d' y placer la bibliothèque, et au lieu d'une balise d'ancrage, vous y mettrez un lien, mais je garderai la balise d'ancrage pour le moment Nous définirons les styles ici et là. Ensuite, nous avons l' attribut clé qui permet d'identifier chaque élément de la liste. Et la dernière chose que nous ajouterons sera le code «   contactez-moi » pour passer à l'action. Donc, dans cette division, nous allons mettre H un et deux DIF ou deux soulignements qui se trouveront sous cette rubrique contactez-moi Pour terminer, commençons par les soulignements. En fait, nous allons définir la largeur du premier soulignement pour le violet. Je vais définir une largeur supérieure à celle du second. Je vais changer les couleurs. Je vais également prendre la tête. Bien entendu, si vous voulez la ligne du ticker, vous pouvez en utiliser deux, par exemple Et pour le titre, nous utilisons du texte en gros caractères. Nous l'augmentons sur grand écran et au-dessus. Nous utilisons une épaisseur de police plus élevée lors de l'effet de survol, nous utiliserons cette note de texte à 500 au lieu de 200 initialement, et nous allons également définir le pointeur curst Cette transition, nous n'en avons pas besoin pour le moment, encore une chose pour que cela fonctionne mieux, nous allons changer ce div en tag d'ancrage. Nous allons régler le HRF. Donc, en fait, c'est vraiment un appel à l'action. Ainsi, chaque fois que nous cliquerons dessus, cela nous redirigera vers l' endroit où nous le définirons. Maintenant que nous pouvons le voir sur l'écran Mable, nous devons mettre à jour un peu ce bouton Contactez-moi, afin de l'ajouter à notre architecte et à notre classe Ensuite, nous nous fondons sur la droite. Der plus d'espace, il recommandera donc d'y faire un peu d'espacement, et je choisirai cette valeur 14. C'est sympa. Et n'oubliez pas. Donc, sur un écran plus grand ou peut-être un écran moyen ou supérieur, nous remettrons la marge à zéro. Sauvegardez-le, et testons-le. J'ai donc la page. Je vais l'augmenter. Et vous pouvez voir que cela fonctionne sur un écran plus grand, mais peut-être sur un écran moyen. Disons cela à partir d' un écran plus grand. Sauvegardez-le. Je change donc simplement cette valeur de moyenne à plus grande et maintenant testons-la. Nous avons donc un grand écran. C'est très bien Et sur écran mobile, c'est très bien aussi. Et ce sera le cas même pour la dernière barre de navigation. Voyons comment cela fonctionne. 7. STACKredub: Le composant stack, nous le ferons dans les ports. Si vous n'avez pas encore ces bibliothèques, ouvrez un terminal, utilisez NPM, I, et copiez ces bibliothèques Par exemple, cet observateur d' intersection React. Que nous utiliserons pour que l' animation réapparaisse pour obtenir en utilisant la vue lorsque nous ferons défiler la page vers le haut ou vers le bas, cette animation de pile réapparaîtra Puis le mouvement du cadreur. Encore une fois, si vous ne l' avez pas encore, suffit de NPM, moi et mettez-le là, icônes de réaction. Nous pouvons également y mettre. Cela signifie que nous aurons accès à ces bibliothèques avec les icônes que nous utiliserons pour notre pile. Maintenant, nous allons entrer et installer les bibliothèques, je les ai déjà, mais je peux tout simplement recommencer. Maintenant, avant de définir le composant de pile, nous allons y créer un tableau d'éléments de pile avec des éléments de pile. Et là, pour chaque article, nous aurons un identifiant, puis un nom. La première sera le cadreur, puis l'icône, la première icône sera le cadreur avec une taille allant jusqu'à 100 Ensuite, pour ce qui est de la couleur, je peux m'asseoir là pour l'instant en texte vert 200, puis nous pouvons mettre leur virgule et le coller là autant de fois que nous le voulons Je vais mettre à jour les noms et les icônes. J'ai également sélectionné des icônes différentes pour les quatre autres icônes car il y avait des icônes réservées Nous allons maintenant utiliser Framer Figma, React Note, Mongo Di B Ensuite, nous allons passer en dessous, et là nous allons commencer à définir des variantes d'animation pour les éléments de la pile. Je vais commencer Cs variance ou item variance. Et là, je mettrai une variante pour hidden, qui prendra le numéro d'index. Là, l'opacité sera nulle et pour X, nous prendrons le reste de l'indice, et si c'est zéro, alors il sera de -100 position vraie et en position de force, il sera C'est ce qu'on appelle Turner Operator. Nous ferons ainsi en sorte que les éléments de la pile partent de gauche et de droite selon que c' est vrai ou faux. Ensuite, ci-dessous, nous en aurons un autre qui sera appelé visible, et pour celui-ci, nous réglerons l'opacité à un, x à zéro et passerons à la durée trois J'ai commencé par le mauvais décomposer pour en faire une à Carl. Remplaçons-le par le carré, et ci-dessous, nous pouvons commencer à définir le composant de la pile lui-même. À l'intérieur, nous allons commencer par configurer les commandes d'animation. Je vais rétablir les commandes constantes, et j'utiliserai l'animation. Ensuite, nous allons configurer l'observateur d' intersection. Cela signifie que nous allons maintenant régler le problème, nous l'y importons. Et avec cela, cette animation réapparaîtra lorsque nous ramènerons ce composant dans notre fenêtre d'affichage Là, je vais faire une constante, et j'utiliserai le ref et in view pour utiliser in view. À l'intérieur, je vais faire le seuil 2.1. Ensuite, je vais continuer à définir le crochet d'effet Use pour déclencher l'animation en fonction de l'état de la vue. Je vais utiliser l' effet puis à l'intérieur, je vais le conditionner, et si c'est le cas, nous ferons des contrôles qui commencent par visible. Et si ce n'est pas visible, je vais faire des contrôles qui commenceront par être masqués. Quelles sont ces deux variantes d' articles ? Ensuite, nous y dirons que cet effet s'exécutera chaque fois que les contrôles seront en vue, les dépendances changeront. Cela signifie qu'il déclenchera le démarrage de l'animation lorsque les composants seront visibles, et qu'il arrêtera également l'animation lorsqu'elle sortira de la vue. Là, nous allons créer une balise de section. Et dans cette balise de section, nous allons commencer par Div et laissez-moi vous expliquer pourquoi je fais le Div supplémentaire et ne le fais pas dans la section. Pour ce div, je souhaite définir un poids maximum. Pour l'instant, nous faisons quelque chose comme 250 pixels parce que nous voulons simplement que ce soit vertical, pas horizontal, mais nous pouvons également l'ajuster ultérieurement, le changer en horizontal et le configurer pour mélanger Oddo avec le texte au centre Nous avons donc ce centre. Pour la section. Si je veux mettre un arrière-plan spécial pour la section, peut-être un dégradé linéaire, je pourrais le faire là, et ce sera sur toute la largeur. Par exemple, arrière-plan sur fond blanc. Nous devons y mettre du contenu. Et permettez-moi d' y mettre du contenu et de mettre leur arrière-plan en vert. Vous allez maintenant voir les différences. Si je vais sur notre page, vous pouvez voir que le fond blanc cette balise de section d'emballage occupe toute la largeur et que le contenu que je souhaite utiliser avec ce fond vert se trouve à l'intérieur, et il a ce poids maximum que j'ai fixé à 250 pixels et que je l'ai centré. Si je veux le faire dans la section d'emballage, il faudra la section murale et le fond réel que je souhaite avoir ressemblera à ceci. Permettez-moi alors de l'utiliser comme ça. Pour l'instant, débarrassons-nous des arrière-plans. Là, je peux commencer par le titre deux. Dans cette deuxième rubrique, je vais mettre ma pile. Ci-dessous, je vais faire une plongée. Et dans ce div, je vais itérer sur les éléments de la pile Dans cette itération d' éléments de pile, je vais faire une division de mouvement. Et avant de commencer à faire ce div, je vais juste styliser le titre et le div qui l'enveloppe. Pour ma pile, j' utiliserai le texte sept, Excel, le texte gris, 200, le boulon de police et une marge vers le bas. Pour ce div, je vais simplement utiliser disposition en grille et passer à huit par défaut. Il n'y en aura qu'un seul sur le réseau. Cela signifie que tous ces écarts de mouvement seront placés les uns en dessous des autres et qu'ils se trouveront dans une seule colonne Voyons à quoi cela ressemblera. Mettons simplement le mouvement div dans l'ID du point d'index. Pour la valeur clé, puis pour la valeur personnalisée, nous allons mettre un index. Dans un premier temps, cela sera masqué. Et, bien sûr, pas l'identifiant de l'index, mais l' identifiant du point de l'article. Ensuite, nous allons animer deux contrôles, puis des variantes aux variantes d'éléments et pour un nom de classe, nous définirons le fond blanc à 0,1 opacité Nous allons continuer avec la disposition de la boîte flexible et centrer avec le centre de justification et les éléments à centrer horizontalement et verticalement Ensuite, flex raw, ce qui signifie que les éléments situés à l'intérieur du rigide seront côte à côte. Ensuite, nous utiliserons un Excel arrondi, une ombre large, un peu de literie. Et sur Her, nous pouvons simplement faire de l'ombre à Excel. Maintenant, dans ce mouvement dip, nous allons créer un div pour l'icône. Nous y ferons une icône en forme de point. Nous pouvons y ajouter un peu de classe, et à l'intérieur, je vais faire leur marge vers bas et le signe du dollar avec la couleur du point m. Cela signifie qu'il y définira nom de classe de la couleur du point de l'article, et nous y avons défini le texte vert 200. Ensuite, nous avons là l' icône elle-même, et ci-dessous, nous allons faire le texte où nous allons afficher le nom du point de l'article. Là, je vais faire du texte blanc avec une opacité de 0,2, du texte trois Excel Transformez et faites pivoter de 90 degrés. Maintenant, pour ce qui est de la plongée qui termine cette itération, je vais mettre la référence à Rev Cela signifie que cela permet à notre animation savoir quand ce conteneur est visible à l'écran Nous pouvons voir l' animation, comment elle se déroule. Il y a juste une chose que je dois corriger. nous manque T pour effectuer notre rotation de -90 degrés et je vais l'actualiser Vous pouvez voir comment fonctionne l' animation, et ce sera tout pour ce composant de pile. 8. ServicesTEMPLATEnocode: Composant de services, nous allons créer à l'intérieur du composant un ensemble d'objets de service contenant les informations sur chaque service que nous aimerions offrir. Chaque objet aura une propriété d'identifiant, de titre et de description. Faisons leurs services constants. Et à l'intérieur, nous pouvons faire le premier élément où nous définirons l'identifiant, puis le titre et aussi la description. Maintenant, je vais ajouter d'autres services, et au final, le tableau ressemblera à ceci. En retour, au lieu des fragments vides, nous créerons une balise de section, et à l'intérieur de la section, nous ajouterons d'autres éléments. Pour la section elle-même, nous classerons le nom du texte blanc et le PY 20. Pour y avoir une couche verticale, nous allons ajouter une division, et nous y ajouterons des classes de vent arrière avec conteneur, et nous mélangerons Auto pour le centrage et la disposition Flexbox pour utiliser la direction flexible Colum pour placer nos articles les uns en dessous des autres Sur un écran moyen et supérieur, nous y définirons la ligne de direction du flex. Cela signifie que les objets seront placés l'un à côté de l'autre. Ensuite, nous ajouterons deux divs. L'un portera sur le titre des services et le second sur les éléments de notre gamme. Le premier jour, les classes d'écran moyen au-dessus utiliseront un quart de largeur, la touche droite sera réglée sur huit, marge vers le bas sera réglée sur 12 et sur l'écran moyen, nous remettrons cette marge du bas à zéro À l'intérieur, nous allons faire le deuxième titre avec les services et nous y définirons du texte, six fichiers Excel, une police supplémentaire, position adhésive et le top 20. Quelle est la position dans laquelle vous aimeriez le placer. Que signifie « position collante » ? Cela signifie que chaque fois que nous faisons défiler la page, l'en-tête des services défile avec nous. Nous ajouterons un autre div, et nous resterons là pour un écran moyen et au-dessus d'une largeur de 75 %. À l'intérieur, nous allons commencer à cartographier la gamme de services. Là, l'article sera servi. Nous n'avons pas besoin d' utiliser l'index car nous utiliserons l'ID de service comme clé. Et pour le nom de la classe, nous utiliserons la marge inférieure à 16 et disposition flexbox pour utiliser le début des éléments , car nous aimerions y aligner nos éléments Ensuite, nous ajouterons deux autres difs. L'un servira à contenir le numéro, qui sera l'identifiant, et le second à contenir les deux autres champs, le titre et la description. Pour le premier dif, nous utiliserons boulon de police couleur de grade 300, du texte Excel de cinq et une marge allant de droite à six Pour la deuxième division, nous n'avons rien à faire. Dans le premier div, nous ajouterons également un numéro de point de service. Maintenant, si nous voulons l'enregistrer, vous pouvez voir que nous avons leurs numéros pour tous nos services. Ce qui reste, c'est que dans la deuxième division, nous ajouterons les deux autres champs, puis la section ressemblera à ceci. Pour le titre 3, nous avons défini le titre du point de service, et pour la technologie du paragraphe, nous avons défini leur description du point de service. Pour le titre, nous ajoutons également du texte dans Excel, boulon de police et une marge inférieure. Ce que nous devons également faire, c'est prendre ce tableau et le mettre en dehors de la définition du composant car nous voulons éviter de le recréer à chaque rendu. Maintenant, voici à quoi ressembleront ces services sur d'autres appareils, et ce sera tout pour ce composant. 9. PortfolioTemplateCODE: Nous allons d'abord activer les fonctionnalités côté client avec use client. Ensuite, nous allons importer React et utiliser State Hook avec l'effet d'utilisation Hook. Ensuite, nous allons importer l'image à partir de l'image suivante. Nous allons importer les images du projet à partir du dossier Assets que nous allons afficher. Je vais créer des projets const, et pour chaque projet, je vais créer un identifiant Je vais créer ici, je vais créer un titre, je vais créer une courte description, et je vais également mettre l'image. Maintenant, ci-dessous, je vais ajouter d'autres projets, et cela ressemblera à ceci. J'utiliserai trois projets dans le volet portefeuille. J'initialiserai l'état des projets sélectionnés en passant au premier projet Nous allons donc faire des projets et être les premiers dans le tableau avec zéro. Ce sera la variable d'état, et avec elle, nous la définirons. Maintenant, nous pouvons passer directement au retour. Là, nous allons commencer par la section. Dans celui-ci, nous pouvons faire l'identification du portefeuille. Dans un nom de classe, nous allons faire du PY 32 et du texte en blanc. Dans cette section, nous allons commencer par le titre deux. titre deux contiendra le titre des projets sélectionnés. Nous pouvons placer les projets dans une technologie Spen au cas où nous souhaiterions y ajouter une couleur différente De plus, pour le style du titre deux, nous allons au texte six Excel, boulon de police et la marge du bas à dix. dessous de cette deuxième rubrique, nous allons cartographier le tableau du projet pour créer les éléments du projet. Je vais faire des projets point Map. Le nom de l'élément dans l' itération sera project. Là, nous pouvons ouvrir notre recherche dans ce div, nous allons définir une clé comme identifiant de point du projet. Nous allons définir la fonction OnClick. fonction Onclick sera le réglage de la variable d' état Nous y définirons le projet sélectionné. Pour projeter. Nous allons maintenant faire des cours de fin de gamme. s'agira du curseur, du pointeur, de la marge vers le bas et du groupe. Nous allons continuer à afficher le projet ici. Nous allons faire la technologie des paragraphes avec le point du projet ici. Nous allons maintenant y ajouter un style, et ce sera une couleur de texte différente. Le texte est également grand et la marge vers le bas, et en dessous, nous pouvons continuer avec le titre trois. Ce titre trois contiendra le titre du projet à point. Le style que nous y ajouterons sera un Excel sans texte, groupe de polices semi-boulons, notre texte gris, 400, couleurs de transition, une durée, 300, et nous allons le faire encore une chose. Remettons là des guillemets avec les bretelles bouclées. Parce qu'à l'intérieur, nous allons vérifier si ce projet est celui sélectionné, et si oui, nous allons afficher la couleur différente du texte. Faisons en sorte que l' ID de point du projet sélectionné soit égal à la vérification de l'identifiant du projet, opérateur Turner , et dans le cas contraire, nous ferons le texte gris 200 dans le cas contraire, nous ne ferons rien. La fausse position sera donc vide. Nous utiliserons des couleurs de transition car elles permettront une transition fluide, spécifiquement pour les propriétés liées aux couleurs. Cependant, comme nous utilisons ce groupe, ce sera pratique. Maintenant, nous pouvons déjà voir sur notre page que nous arrivons quelque part, et nous allons maintenant continuer à afficher la ligne de séparation au cas où le projet serait sélectionné Nous nous occupons de leur condition. Donc, ce projet, point ID est égal à l'identifiant du projet, essentiellement le même que celui que nous avons utilisé là-bas, mais nous n'avons pas besoin d' utiliser un opérateur de tournage. Nous ne ferons que du rendu conditionnel. Donc, au cas où cela serait vrai, nous afficherons un DIV vide. Et à ce div, nous ajouterons la classe border bottom two avec border grey 200 et aussi la marge verticale MI à quatre. Nous pouvons voir sur notre page que nous avons sélectionné le premier projet qui s'y trouve. Si je mets le deuxième ou le troisième, il bougera. Un autre rendu conditionnel que nous allons faire, nous pouvons donc simplement le copier-coller il figurera sur la description du projet. Si le projet est sélectionné, nous vous montrerons la description du projet. Je vais simplement ouvrir ce dif, y mettre la description du projet par point, et je vais changer cette balise div en balise de paragraphe De plus, je vais ajouter des classes un peu différentes. Je n'ai pas besoin de la frontière. J'ajouterai du texte gris, 400, une transition de toute durée, 500 et un assouplissement pour que l'affichage soit fluide. Nous allons maintenant faire défiler la page en haut de cette déclaration, et là, dans la section, nous allons créer un div et nous allons enrouler ce div autour de ce mappage. Maintenant, pour ce div, nous allons ajouter quelques classes. Commençons par une largeur maximale de sept Excel, puis mélangeons Audio, px quatre, ça devrait être tout pour le moment. Nous allons nous déplacer vers le bas et en dessous de cette division. Nous y mettrons une balise d'image à l'intérieur de cette balise d'image. Nous définirons la source pour le projet sélectionné point mag point SRS. Pour tous, nous choisirons le titre à point du projet sélectionné. Pour le nom de la classe, nous allons l'arrondir, Excel, ombre large, opacité de transition, durée 500 et ceci pour créer une animation fluide De plus, nous réglerons la largeur à 800 et la hauteur à 450. Nous allons le sauvegarder. Maintenant , ça devrait aller. Maintenant, nous devons jouer un peu avec les différences. Permettez-moi d'ajouter le div supplémentaire pour regrouper les informations de projet que nous y avons créées. Passons maintenant à la deuxième division. Nous ajouterons des classes de disposition en grille, et sur grand écran, nous utiliserons deux appels de grille avec Gap 212. Maintenant, cela devrait prendre cette division, et bien sûr, la fin de la deuxième division que nous allons mettre ci-dessous. Maintenant sur la page, tout ira bien. Maintenant, nous allons également formater le code. Vous verrez mieux la structure de la division. Cela devrait aller encore plus loin. Cela devrait également aller encore plus loin, nous allons le déplacer, et cela devrait aller. Nous commençons donc la section technique et nous poursuivons avec le DIF. Dans ce div, nous avons un div qui contient les informations du projet ainsi que l'image avec le projet lui-même. 10. PortfolioCODE: Une section de portefeuille, nous allons commencer par les importations, puis nous continuerons à créer une constante de projet. Dans cette constante, nous chargerons nos projets, puis nous les passerons en revue et les afficherons dans nos cartes que nous coderons Pour les projets, je mettrai leur identifiant. Pour le premier, il y en aura un. Ensuite, je mettrai leur titre, puis leur catégorie. Et le dernier sera la source de l'image. Pour le premier projet, il ne s' agira que de celui-ci. Maintenant, je vais faire le coma, et je vais le copier encore trois fois parce que j'ai les quatre projets je vais afficher au total, ou je vais simplement mettre à jour les identifiants. Je vais mettre à jour la source de l'image du projet. Maintenant, je vais trouver une description, et je vais utiliser ces quatre sites Web que j'ai trouvés sur Framer dans notre composant fonctionnel, puis dans le retour, nous supprimerons ces fragments vides, et nous allons commencer par la section Et pour cette section, nous allons définir BY sur 16. Nous avons donc un peu de rembourrage par le haut et aussi par le bas. Ensuite, à l'intérieur, nous poursuivrons la cartographie de nos projets. Faisons leurs projets à la carte des points. Index du projet, et à l'intérieur, nous allons commencer par le mouvement Div. Passons maintenant au début, et là nous allons importer le mouvement à partir d'une image ou d'un mouvement. Maintenant, nous allons utiliser motion div et maintenant nous allons utiliser motion Div. Dans ce motion div, nous allons mettre tout le contenu. Nous allons maintenant définir la première technologie de démarrage de Motion Div et y définir la clé comme identifiant de point du projet. Nous allons maintenant définir le nom de la classe. Nous utiliserons une bordure avec une bordure blanche d'opacité de 0,2, puis une disposition flexbox avec une colonne de direction flexible qui signifie que les éléments situés à l'intérieur cette profondeur seront placés les uns Ensuite, nous allons poursuivre sur un écran moyen le test de conversion Nous allons faire du flex raw. Cela signifie que les éléments seront côte à côte. Nous y mettrons le texte en blanc, et nous y mettrons également un Excel arrondi. Faisons Tree Excel. Maintenant, nous pouvons déjà voir quelque chose sur notre page. Ensuite, nous allons continuer avec arrière-plan dont nous allons définir le dégradé à droite, et nous allons définir ses couleurs à partir de deux. Maintenant, comme il s'agit de certains codes que j'ai définis dans Figma plus tôt, je vais simplement les copier-coller et cela devrait créer une couleur grisâtre. Nous y ferons de la literie. Ensuite, nous y définirons la justification entre les deux. Cela signifie que nous aurons un espacement uniforme entre nos éléments dans cette différence , de la marge au bas des éléments Pour le moment également, nous allons définir la largeur. Définissons une largeur initiale sur l'écran du mobile. Il y aura 300 pixels, et sur un écran moyen ou supérieur, utilisons quelque chose comme 1 100 pixels, mais nous pourrons ajuster ces valeurs ultérieurement Nous pouvons enfin voir la forme de nos cartes. Nous voudrons que cela soit collé sur le dessus. Utilisons un verre autocollant avec le top 28. Cela signifie que lorsque nous ferons défiler la page, ces objets se colleront les uns sur les autres, ce qui créera l'effet d' empilement de cartes Maintenant, si nous passons à la section d'emballage, nous pouvons y mettre un récipient et un mix auto. Cela signifie que nos projets seront centrés. Si je mets quelque chose comme hauteur principale à 300 viewporteit, je pourrai faire défiler ma page vers le bas Et vous pouvez voir qu'il y a la première carte, et je fais défiler la page vers le bas, elles se superposent. Ensuite, comme cela fonctionnera il y aura une autre section, et ce composant du portfolio sortira simplement de la fenêtre d'affichage, donc nous ne le verrons pas Et lorsque nous ferons défiler la page vers le haut, nous verrons à nouveau toutes les cartes les unes en dessous des autres Je vais maintenant définir leur état initial de notre animation. Cela signifie que nous allons commencer par zéro d'opacité. Cela signifie que les éléments commenceront de manière invisible et que ce Y sera également inférieur de 50 pixels à sa position finale. Pour la prochaine, ce sera pendant la vue, et celle-ci est la définition de l' animation lorsque les éléments apparaîtront. Là, nous allons régler l'opacité à un et Y à zéro. Ensuite, ce sera la transition. Cela signifie que la durée sera pour nous d'une demi-seconde et que le délai sera indexé par 0,2. Cela signifie qu'il y aura un certain retard dans l'animation, ce qui signifie que tous les éléments ne seront pas affichés sur notre page, mais avec l'index, cela sera plus retardé. quoi cela ressemblera, c'est que la première carte sera affichée en premier , puis que le reste de la carte affichera lentement après celle-ci, car cela créera cet effet de vague lorsque le premier élément sera affiché, puis lentement, tous les autres éléments seront également affichés. Maintenant, nous allons également définir un port d'affichage que nous définirons une fois True. Cela signifie que cette animation se déclenchera une fois que l'élément sera visible. Ce sera pour la définition de la motion. Nous allons commencer par analyser la technologie du paragraphe contenue dans cette balise de paragraphe, nous aurons une catégorie de points du projet. Ci-dessous, ce sera le titre deux. Il y aura un point sur le titre du projet. Ensuite, nous aurons une liste ordonnée à l'intérieur de cette liste non ordonnée Nous aurons un élément de liste, et à l'intérieur de ces éléments de liste, nous aurons des puces. Ce que nous avons réalisé avec le projet se trouve dans la section « technologie des paragraphes » dans notre liste Je vais améliorer l'expérience utilisateur de 40 %. Pour la catégorie de projet, je vais faire quelque chose comme du texte en gris, 200, puis du texte en petit. Pour le titre du projet, je vais créer du texte dans Excel, en police, les deux, et sur un écran moyen, nous pouvons l' augmenter en texte pour Excel. Pour la liste désordonnée, nous allons faire un espace Y deux. Cela signifie que tous ces points sont séparés par un certain espacement et non par des arches empilées les unes sur les Pour l'élément de liste, je vais faire une mise en page flexible et des éléments à centrer. Et puis à côté de ce point, je vais créer une icône de réaction. Nous pouvons vérifier les contours de l'IA. Pour cette icône, nous utiliserons React Icones AI. Laissez-moi faire des icônes NPM I React. Maintenant, si nous faisons cette vérification, nous avons cette option pour cette bibliothèque. Je vais entrer. De cette façon, il sera importé. Maintenant, si je le sauvegarde, cela fonctionnera. Sur notre page, nous avons cette icône, et nous allons ajouter le nom de la classe avec 25 de largeur et 25 de hauteur et le texte Emerald 400. Maintenant, regardons la page. Nous ne l'avons pas augmenté, mais voici quelques valeurs que vous pouvez augmenter au cas où vous souhaiteriez augmenter ce contrôle. Je vais le laisser comme ça. Et je vais également y placer cet élément de liste X quatre . Je vais prendre cet élément de liste, et je vais le coller deux fois de plus. Ensuite, pour améliorer l'expérience utilisateur, je vais simplement le remplacer par un autre texte. Nous pouvons améliorer la vitesse latérale de 50 %. Et pour le dernier, le trafic mobile a augmenté de 35 %. Bien entendu, voici quelques exemples de valeurs qui peuvent s'y trouver. Et aussi, actuellement, nous l' avons codé en dur. Ce que nous pouvons faire, c'est y créer un nouveau champ. Je vais faire le point 0.1. Ensuite, je vais le copier, le coller, faire le point 0.2 et trois. Ensuite, je vais l'utiliser même avec la virgule, et je pourrai l'appliquer à d'autres projets Ensuite, je vais prendre ces valeurs. Mets-le là. Et aussi ce point. Et même le dernier. Et au cours de l'itération, je vais faire le projet bullet 0.1, coller pour les autres, faire le bullet 0.2 et trois Et maintenant, par exemple, si c'est pour le quatrième projet, je vais le remplacer par quelque chose de aléatoire. Sur notre page, vous pouvez voir que nous l'avons bien compris, mais juste pour le premier, nous avons une valeur différente. Nous avons maintenant un problème avec la première carte. Est-ce que j'ai oublié quelque chose ? Oui, j'oublie d'y mettre les valeurs. Permettez-moi de le dire comme ça, de le sauvegarder. Et nous allons continuer ci-dessous la liste non ordonnée avec l'image Et pour cette image, nous allons définir la source du projet, source de l'image, puis nous allons mettre le titre du projet en point, puis nous allons mettre 500 en hauteur, nous en mettrons 300 et au nom de la classe, nous mettrons un point arrondi en gros. Maintenant, nous allons le sauvegarder. Vous pouvez voir à quoi ressemblent nos fiches de projet et quelques mesures que nous devrions prendre. La première est que nous devons prendre la valeur arrondie de même valeur que celle que nous avons dans le mouvement div. Nous utilisons leur arbre Excel. Cela signifie que nous le mettrons également pour la photo. n'y a alors aucun problème dans cette rangée de flexibilité moyenne qui devrait être comme ça. Il y a un problème où il manque un div. cette ligne flexible, nous voulons maintenant avoir un div pour le texte, Sur cette ligne flexible, nous voulons maintenant avoir un div pour le texte, puis l' élément image fonctionne bien tout seul car il sera placé sur le côté droit. Comme il s'agit d'une ligne flexible, cela signifie que si nous voulons mettre ce texte dans un div et me laisser également y faire un onglet. Ces deux éléments seront côte à côte, et sur un écran mobile, et sur un écran mobile, ils seront placés l'un en dessous de l'autre avec cette colonne de direction flexible. Ce que nous pouvons maintenant faire dans ce div qui contient les informations de notre projet, nous allons y placer un espace allant de Y à quatre. Ensuite, si nous voulons entrer dans cette division de mouvement d'emballage, j'y mettrais un espace de X à quatre. Et je ferais même leur space y26. Maintenant, si nous allons vérifier la page, nous devrons augmenter la marge vers le bas. Maintenant, augmentons ce chiffre à 24. Nous passerons également à cette division de mouvement et nous mettrons le Mx Auto. Maintenant, elle est centrée et nous pouvons maintenant tester notre section portfolio, et lorsque nous faisons défiler la page vers le bas, elles se chevauchent Ce sera pour la section du portfolio. 11. LogoAnimationTEMPLATEnocode: Pour l'animation du logo, nous déclarerons d' abord utiliser le client pour ce composant, car nous aurons leurs mises à jour dynamiques du QI pour l'animation infinie du logo. Nous allons poursuivre les importations. Lors des importations, nous allons importer l'image à partir de l'image suivante, puis le mouvement à partir du cadre ou du mouvement et en dessous les images des actifs. Si vous n'avez pas encore la bibliothèque d'images ou de mouvements, vous allez ouvrir le terminal et exécuter NpMiFramr Alors ça marchera. Nous allons continuer avec la création d'un tableau qui s' appellera images inside, nous aurons la source et la source de l' image importée que nous avons là, qui ne sera que le nom du logo. J'ai déjà mangé Figma. Maintenant, j'ai l'uremi pour que cela puisse être corrigé. Dans l'animation du logo, nous commencerons par un div et à ce div, nous ajouterons un rembourrage vertical à huit, arrière-plan que nous pourrons modifier ultérieurement ou mettre à jour pour adapter notre design Nous y avons également défini l' opacité à 0,8, ce qui signifie que nous n'avons pas nécessairement besoin d'appliquer l'opacité de 0,1 à notre couleur Nous allons continuer avec un autre div et ce div aura une classe de container et mix auto pour le centrer. Ensuite, à l'intérieur, il y en aura une autre , avec une classe de débordement masquée et une autre classe qui créera l'effet selon animation de notre logo s'estompe depuis la gauche et réapparaîtra à l'écran sur la droite avec le réglage d'un transparent Vous verrez l'effet juste après avoir ajouté les éléments eux-mêmes. À l'intérieur de ce div, nous allons ajouter un div de mouvement pour l'animation. Nous y définirons quelques classes favorables pour la mise en page Flexbox, écart à 14, le flex à aucun et la literie à droite jusqu'à Nous allons ajouter l' animation pour traduire X -50 % afin de définir les propriétés de l' animation Cela signifie que cette propriété d'animation déplacera le contenu horizontalement et que -50 % signifie qu'il se déplacera vers la gauche sur la moitié de sa largeur, ce qui créera un effet de défilement continu lorsqu'elle est combinée la répétition infinie de la propriété de transition que nous avons juste en la propriété de transition que nous avons juste Nous y avons également fixé la durée à 35. Maintenant, comme mentionné, la répétition à l' infini est linéaire et de type boucle de répétition. Peut-être vous demandez-vous également pourquoi nous avons autant d'éléments et d' éléments dupliqués dans notre gamme d'images. C'est parce que nous avons besoin de nos logos, d'une largeur spécifique. S'il n'y a que quatre objets, nous ne pouvons pas rendre cette boucle infinie car elle ne sera réservée qu' aux objets qui circulent et il semblerait qu'il n'en manque que quelques. C'est pourquoi nous pouvons simplement dupliquer ces éléments, disons, deux fois, et cela créera cette animation en boucle infinie. Si vous avez autant de logos que vous souhaitez saisir dans cette animation de logo, vous n'avez pas besoin de le dupliquer. À l'intérieur, nous effectuerons le mappage sur le tableau d'images, où l'image est l'élément actuel du tableau et l'index sa position. Ensuite, nous ajouterons la balise image, et nous définirons la clé comme index, source comme point source d'image, Alt comme point d'image ancien que nous avons dans notre tableau. Et aussi de la hauteur jusqu'à la salissure. Nous allons l'enregistrer et nous verrons que le composant fonctionne désormais. Vous pouvez également y voir le transparent de gauche à droite et voir comment cela donne l' impression que l'animation s'estompe vers la gauche et apparaît lentement depuis le côté droit Pour vérifier cette réactivité, en gros, il n'y a pas grand-chose à vérifier Sur le petit écran, il affichera simplement moins de logos en même temps. 12. KeyMetricsTEMPLATEnocode: Nous allons maintenant passer à la matrice des clés. Nous allons commencer par déclarer utiliser le client pour indiquer que ce composant utilisera les fonctionnalités du site client. Ensuite, nous importerons React et Motion, puis utiliserons et visualiserons depuis la bibliothèque de mouvements Framer Et nous allons définir un tableau d'objets métriques, chacun contenant des informations sur une métrique spécifique. Et à l'intérieur, nous commencerons par le premier élément qui aura un identifiant, une valeur, une étiquette et une description. Maintenant, je vais ajouter quelques éléments métriques supplémentaires. Tu peux t'inspirer. J'ai plus de cinq ans d'expérience, plus de 50 projets terminés, 50 projets terminés, puis la qualité du code et les commentaires sur Github Dans le composant Kemetric, nous allons commencer par créer une référence que nous utiliserons dans View Hook Nous allons créer une référence à l'aide du hook react use rep qui sera attaché à l'élément de section La référence est saisie en tant qu'élément HTM, car elle sera utilisée sur la balise de section valeur initiale est nulle car la référence n'a encore été attachée à aucun élément, et cette référence sera utilisée avec le hook using view pour détecter le moment où la section entre dans la fenêtre d'affichage Ensuite, nous utiliserons le hook using view pour déterminer si le composant se trouve dans la fenêtre d'affichage Nous utiliserons l'arbitre et une fois il tombera. La référence est la référence à l'élément que nous voulons observer et une fois fausse, cela signifie que nous allons configurer que le crochet suivra en permanence la visibilité de l'élément. En retour, nous allons créer une section dédiée aux mouvements. Nous y définirons l'état initial de ref à ref qui sera invisible et 50 pixels en dessous. Animate utilisera un opérateur de tour et vérifiera si cela est vrai dans la vue Il définira la visibilité ou l'opacité à un et à l'état final Et si c'est faux, il le définira sur invisible, avec une opacité nulle, et encore une fois, sur 50 pixels en dessous. La durée de l'animation sera de 0,8 seconde, et les classes sont container et mixdo pour centrer le conteneur parce que le conteneur a une certaine largeur, puis un décor de mariage et du texte en blanc Ajoutera le mouvement H deux pour l'utiliser comme titre de métrique clé. L'état initial sera égal à zéro et Y à 20. Animate utilisera à nouveau l'opérateur Turno en position réelle visible en position forcée invisible, transition avec un délai de 0,2 seconde et une durée de 0,6 Pour les noms de classe, nous allons définir la taille du texte sur six Excel, police sur le gras et la marge sur les 12 derniers. Nous allons continuer avec une autre profondeur qui utilisera une disposition en grille. Nous allons définir les colonnes de la grille pour le moyen et le grand écran. Et nous y fixerons également un écart de huit. Il y a donc un certain écart entre les éléments. À l'intérieur, nous allons commencer par le mappage du tableau matriciel. métrique sera le nom de l'élément et indexera la position. Nous allons créer le disque de mouvement, et la clé sera l'identifiant du point métrique. Nous allons définir l'état initial, et aussi, encore une fois, nous allons définir l'animation, où nous utiliserons l' opérateur Turner, comme avant, car nous aimerions déclencher cette animation encore et encore chaque fois que nous l' aurons dans la fenêtre d'affichage Transition Pour que toutes les métriques soient affichées à un moment différent, nous ajouterons également une nouvelle valeur d'indice, et nous la multiplierons. Cela signifie que chaque indice aura une valeur plus élevée, ce qui créera un effet de vague où le premier indice sera affiché plus rapidement que le précédent. De plus, il utilisera une disposition flexbox avec un volume de direction flexible pour placer les éléments les uns en dessous des autres Ensuite, nous allons créer le titre trois. Dans cette troisième rubrique, nous allons afficher la valeur du point métrique. Nous allons définir l'animation et la transition initiales exactement comme je l' ai indiqué dans le Div ci-dessus Et les noms des classes, nous y définirons pour notre valeur métrique un texte de cinq Excel, boulon de police et un peu de couleur. Nous avons également défini les deux derniers de la marge. dessous de ce titre, nous allons passer à la motion B pour la technologie des paragraphes. Nous y définirons une étiquette à points métriques. Encore une fois, nous allons définir l' animation et la transition initiales, et les noms des classes seront le texte Excel, la police semi-volt et la marge inférieure deux Ensuite, nous allons créer un autre point de mouvement B pour la balise de paragraphe qui contiendra la description du point métrique. Nous pouvons simplement le copier-coller et modifier les classes de vent arrière pour Text Gray 400, et ce sera pour nos indicateurs clés 13. FooterTEMPLATEnocode: Pour le composant de pied de page, nous allons importer ces icônes depuis la bibliothèque d'icônes React Nous allons définir le tableau, le tableau de liens sociaux que nous allons afficher dans notre futer et nous allons définir ce tableau en dehors du composant, car le définir à l'intérieur du composant signifie qu'il est recréé à chaque rendu Ses données statiques ne dépendent pas accessoires ou de l'état des composants, nous pouvons donc les laisser là Dans ce texte de pied de page, nous allons créer des noms de classe relatifs car nous utiliserons des éléments positionnés en position absolue Nous allons effectuer un remplissage vertical à huit, une largeur maximale à 1 200 pixels, centrer avec Mix auto et régler rembourrage horizontal sur, puis nous créerons un div Et à l'intérieur de ce div, nous allons créer trois autres divs. Ces trois divs seront vides. Le div qui enveloppe ces trois sera en position absolue. Nous utiliserons l'encart zéro et le trop-plein sera masqué. L'encart zéro mettra les quatre côtés à zéro. Sur un écran moyen, nous allons le masquer car nous allons afficher un div de position absolue différent qui contiendra ces éléments de style ou de design pour l'écran mobile. Comment fonctionnent ces différentiels, c'est qu'ils sont positionnés en haut et à gauche Ensuite, ils ont une largeur et une hauteur différentes. Ensuite, ils ont une couleur différente ou ils peuvent avoir une couleur différente. Alors le premier est un cercle, le second, et le troisième est simplement arrondi. Ils peuvent alors avoir une opacité différente et la translation déplacera le div de 50 % verticalement et horizontalement Je vais copier-coller ceci, en fait, ce sera la version de bureau, et la première était mobile parce que maintenant nous la cachons et sur écran moyen et supérieur, nous l'affichons sous forme de bloc. Il a les mêmes classes, mais nous y définissons différentes positions, différentes largeurs, différentes hauteurs, puis nous pouvons également définir une opacité différente, etc. Ci-dessous, vous allez créer un autre creux avec une classe relative, un index de dix et du texte au centre avec également une marge du haut à huit. À l'intérieur, nous allons créer une étiquette de titre avec John Doe. Comme John Doe a un prénom et un nom de famille très courts, vous pouvez peut-être y mettre simplement votre nom de famille ou votre prénom. Cela dépend vraiment de. Nous allons masquer et à partir de l'écran moyen, nous l'afficherons à nouveau. Nous allons définir le texte sur dix RAM. En taille moyenne ou grande, nous augmenterons la taille du texte. Nous allons définir le texte en gras trouvé sur blanc et l'opacité sur dix Ce texte ne devrait pas non plus être visible. Je sais que la taille du texte est énorme, mais elle devrait en supporter tout le poids. Et nous diminuons l'opacité. Nous sommes donc légèrement visibles. Pour l'écran mobile, nous allons le refaire, mais je vais utiliser la technologie de rupture pour mettre John et Doe sur une autre ligne. Ce que je pourrais aussi faire, c'est simplement diminuer la taille du texte. Nous allons continuer avec une autre division qui organisera les réseaux sociaux. Nous allons définir la marge par le haut, la disposition de la boîte flexible sur un écran plus petit, nous y définirons la justification entre les deux Cela signifie que nous n'aurons aucun espacement entre les éléments. Sinon, nous utiliserons le centre Justify et le centre de l'article pour centrer les éléments horizontalement et verticalement. Nous y définirons un certain écart, puis après ce point d'arrêt, nous définirons la colonne de direction de flexion Cela signifie que les éléments seront placés les uns en dessous des autres. Nous y définirons la technologie des paragraphes avec tous droits réservés, et nous définirons le texte avec une note de 200 Ensuite, nous créerons une liste ordonnée avec Flexbox Layout, Gap 25 et Flex Wrap Cela signifie que si les articles dépassent la ligne, ils seront enroulés en dessous. À l'intérieur, nous cartographierons les liens sociaux, notre tableau, nous le créerons là. Et là, nous structurons l'icône et l' étiquette HRF dans notre tableau Cela signifie que désormais, au lieu d'avoir à écrire une icône ou une étiquette HRF à point sur les liens sociaux dans la fonction, nous pouvons accéder directement à icône et à l'étiquette Hf en tant que variables individuelles Nous allons créer un pont d' ancrage et définir l'étiquette clé HRF comme étiquette de zone Hf comme étiquette, et le nom de la classe, nous définirons le texte gris 200, la disposition de la boîte flexible, centre des éléments et le centre de justification pour centrer cette largeur et cette hauteur verticalement et horizontalement sur dix, l' arrondir au complet, et au survol, nous ferons du texte gris 100 avec À l'intérieur, nous allons créer une technologie d'icônes avec une taille définie à 30. Voici à quoi ressemblera notre pied de page au final, et nous pouvons également vérifier la réactivité Et maintenant, nous pouvons ajuster les couleurs, opacité de chaque élément et modifier le design selon nos besoins 14. ContactTEMPLATEnocode: Nous allons commencer par déclarer ce composant comme client d'utilisation pour les effets de survol interactifs, les animations déclenchées par port ou les animations de mouvements d' images Nous importons également le mouvement à partir d'un cadre ou d'un mouvement. Si vous n'avez pas encore cette bibliothèque, ouvrez un terminal, faites NPM I frame motion, entrer, et que nous l'installons Juste à côté du composant , nous allons commencer par une section. Et à cette section, nous ajouterons l' identifiant du contact, et pour les classes, nous ajouterons un espacement vertical à 32 caractères blancs, et nous allons faire en sorte que cette largeur maximale soit de 1 200 pixels avec un Mito pour la centrer Nous y ajouterons également un rembourrage vertical à quatre. Nous allons commencer par le premier mouvement dip. Ce mouvement dip débutera de manière invisible à 20 pixels en dessous de la position finale. Pendant que cela sera visible, il s'animera jusqu'à une position entièrement visible et finale L'animation prendra 0,8 seconde, nous allons donc régler la durée à 0,8 pour effectuer la transition. Cela ne s'animera qu'une seule fois lors du défilement dans la vue. Cela signifie que nous définirons la fenêtre une fois vraie. Pour le nom de la classe, nous allons définir une disposition en grille, et sur grand écran, nous utiliserons deux colonnes de grille et nous fixerons l'écart à 16. Dans ce mouvement dip, nous allons créer un autre div. Et pour les éléments à l'intérieur, nous utiliserons l'espace Y 12. Cela signifie qu'il y aura un certain espacement entre eux. Nous allons créer un mouvement H deux, où nous allons définir les animations. Nous allons commencer par l'initiale. Cela commencera de manière invisible et 20 pixels à gauche de la position finale. Pendant que cela sera visible, nous le rendrons visible, et pour la transition, nous réglerons l' animation pour qu'elle et pour la transition, dure 0,6 seconde avec un délai de 0,2 seconde. Pour les classes, nous allons définir la taille du texte sur sept Excel, police sur les deux et le gris du texte sur 300. À l'intérieur, nous saisirons leur titre « get in touch » et le mot tactile que nous mettrons dans le Spenex pour le mot tactile et la balise span, nous ajouterons une couleur de texte différente Je vais maintenant y mettre le texte gris 500. Nous allons passer à une autre division de motion. Ce mouvement div débutera avec une opacité nulle. Cela signifie qu'il démarrera de manière invisible et qu'il restera 20 pixels à gauche de la position finale. Pendant que cela sera visible, nous allons le rendre visible en réglant opacité sur un et pour la transition, cela prendra à nouveau 0,6 seconde avec un délai de 0,4 Pour les classes finales, nous utiliserons la couche huit, arrondirons à Excel et l'espacerons Y huit. Cela signifie que nous allons à nouveau créer de l'espace entre les éléments que nous aurons présents dans ce motion diff Et ce que nous y aurons, essentiellement les coordonnées, et la première portera sur le numéro de téléphone portable. Nous aurons leur technologie de paragraphe de téléphone et leur technologie d'ancrage du numéro lui-même. Pour le div, nous utiliserons à nouveau l'espace par deux pour avoir leur espacement entre la technologie du paragraphe et la technologie d'ancrage Nous définirons la taille et couleur du texte pour la technologie du paragraphe, puis pour la technologie Anchor, nous réglerons HF sur le nombre réel des classes. Nous ajouterons du texte à Excel, un semi-bot téléphonique, une couleur différente au survol et une durée de transition de 300 Également une disposition Flexbox avec des éléments pour centrer et Gap 22 Ensuite, nous avons également le Spentek car nous aimerions ajouter une flèche à côté de ce numéro à des fins de style Nous pouvons y définir une couleur pour la flèche, et ce sera tout. Ci-dessous, nous allons continuer avec une autre division. Dans cette section, nous conserverons le courrier électronique. Ce sera essentiellement le même style que celui que nous avions sur le mobile, mais nous remplacerons également HRF par Mail et par e-mail lui-même, ce qui déclenchera l'e-mail Lorsque quelqu'un clique sur le lien de l' e-mail, celui-ci s'ouvre, par exemple, sur Windows Outlook pour lui avec la possibilité de nous écrire un e-mail. Il y a vraiment les mêmes classes de queue que le téléphone, donc je ne les reparlerai pas. Passons au div suivant avec l'adresse, et il y a le tag de paragraphe avec le bureau et l'adresse réelle. Pour l'adresse, nous utilisons également le style du texte Excel, et l'interligne détendue définit l'espacement entre les lignes de texte Ci-dessous, nous aurons un autre div commençant par Opacity zéro et X 20 comme les divs précédents. Cela signifie invisible et dans une position différente. Pendant que vous êtes en vue, cela sera visible et en position finale, la transition prendra 0,6 seconde avec un délai de 0,6. Et pour les noms de classes, nous allons définir la largeur sur toute la hauteur jusqu'à hauteur moyenne totale de 400 pixels arrondie à Excel et le trop-plein masqué Je n'ai aucun contenu en dehors de cette division. Ce div contiendra l' iframe avec Google Map, où nous définirons la position de notre adresse Dans cette source iframe, nous allons mettre cette URL Google Maps Nous réglerons la largeur et la hauteur à 100 % pour régler la largeur et la hauteur totales du conteneur. Pour le style, nous utiliserons la bordure zéro pour supprimer la bordure de l' iframe Et nous allons également autoriser plein écran pour activer le mode plein écran. Le chargement du laser signifie que nous chargerons paresseusement le cadre ee pour de meilleures performances. Ce ne sont que les attributs que nous devons définir dans notre technologie iframe Voici à quoi ressemblera notre section de contact. Nous pouvons également vérifier la réactivité. Le voilà sur ordinateur de bureau, petite tablette ou iPhone. Là, je vais appuyer sur Actualiser pour voir l'animation et pour le composant de contact, ce sera tout. 15. HeroChangingColorsSTARTER: Dans la définition du composant, initialisons une valeur de mouvement avec la première couleur du tableau de couleurs supérieur Ensuite, nous allons accéder à la première et nous avons créé cette constante de couleur car nous allons l' utiliser maintenant dans use effect hook et ce sera le point de départ de notre animation couleur. Nous allons créer leur couleur animée avec la palette de couleurs supérieure et nous y mettrons facilement en place pour faciliter l'entrée. Durée également jusqu'à dix. Là, nous pouvons modifier la vitesse de l'animation. répétition se fera à l' infini et le type de répétition sera le miroir. Cela signifie que l'animation change de direction à chaque cycle. En gros, il s'agit d'une transition en douceur entre les couleurs. Maintenant, nous devons également ajouter le tableau de dépendances et nous laisserons ce tableau de dépendances vide. Qu'est-ce que cela signifie ? Cela signifie que cet effet ne s' exécutera qu'une seule fois lors du montage de ce composant. Si je mets là, par exemple, une entrée et que cette entrée sera modifiée, elle s'exécutera à chaque modification de l'entrée, juste pour le contexte, mais nous laisserons cette entrée vide. Nous pouvons également continuer à créer des modèles de mouvement pour les propriétés CSS dynamiques et créer un arrière-plan dégradé radial qui changera la couleur. Faisons la constante et appelons-la image de fond. Là, nous utiliserons un modèle de mouvement. Nous allons faire en arrière, gradient radial, 125%. Encore une fois, c'est quelque chose que j' ai déjà préparé dans Figma avec des couleurs à 50 % et 0 % Maintenant, je vais ajouter le signe du dollar en couleur. Cela signifie que je vais y mettre la couleur. C'est là que j'ai créé. Je vais terminer avec la dernière citation, gardez-la. Et maintenant, dans mon image d'arrière-plan, je vais utiliser un modèle de mouvement avec ce dégradé radial. Cela va changer la couleur là-bas. Vous pouvez y imaginer ce code pour la couleur, puis il sera remplacé par ce code de couleur. Et au lieu de cette couleur, il n'y aura que ces codes couleurs. Et le changement des codes couleurs se fait par cet effet d'usage. Ci-dessous, vous allez créer un style de bordure qui changera de couleur que nous utiliserons pour notre bouton. Nommons cette bordure. Utilisez un modèle de mouvement. Encore une fois, entre guillemets, un pixel solide, encore une fois, avec la couleur. Enfin, nous allons également créer une ombre qui changera de couleur. Box shadow, utilisez un modèle de mouvement, un guillemet B, zéro pixel, quatre pixels et 24 pixels à nouveau avec la couleur parce que nous voulons changer de couleur, nous devons donc la mettre là. Sinon, bien sûr, il pourrait également y avoir quelque chose comme ça. Nous avons tout préparé et nous pouvons commencer en retour. Nous allons créer cette balise de section et pas seulement la balise de section , mais aussi une technologie de section animée. Dans cette balise de section animée, nous allons définir un style, et nous y mettrons l'image de fond. Ensuite, nous définirons également des noms de classes où nous placerons les classes de talent Nous utiliserons la classe relative car nous y trouverons des éléments absolus. Ensuite, nous allons continuer avec la mise en page en grille. Nous allons mettre Mnight à l'écran. Nous veillons donc à ce que cette section prenne toute la hauteur de la fenêtre Ensuite, nous continuerons à masquer le débordement du centre pour nous assurer qu'aucun contenu ne sorte de notre section Ensuite, nous allons régler le rembourrage à quatre pour définir le rembourrage horizontal, PY 24 pour définir le rembourrage vertical Et nous pouvons également définir le texte gris sur 200. Maintenant, au fur et à mesure que nous l'enregistrons, vous pouvez voir la couleur changer dans notre section uro. Vous pouvez maintenant voir toutes les couleurs que j'y ai définies. Là, nous allons créer di dans cette baisse, nous utiliserons un indice Z jusqu'à dix. Nous allons définir une disposition de boîte flexible, une direction de flexion, colonne pour avoir des éléments les uns en dessous des autres, et nous allons placer les éléments au centre Dans ce plongeon, nous pouvons commencer par y coder le contenu qui se trouvera à côté de notre photo de profil avec notre nom, quelques informations de base, etc. Je vais commencer par le tag Spen, et je fixerai la marge inférieure à 1,5 Bloc intégré, qu' est-ce qu'un bloc intégré, est une propriété CSS qui permettra à l'élément de s'aligner sur le texte, tout en se comportant comme un élément de bloc qui nous permettra de définir la largeur, la hauteur et le pédalage Nous allons compléter cet arrondi. Nous allons définir le niveau de fond à 600 avec une opacité de 0,5. Nous l'enracinons avec 50. Ensuite, nous allons définir des concerts de pédalage, un rembourrage horizontal, un PI, un rembourrage vertical, et aussi Dans le cadre de la technologie Spen, nous écrirons « open for work ». Bien sûr, vous pouvez le modifier, et cela ressemblera à ceci. Pour l'instant, bien sûr, nous allons ajouter plus de contenu, donc cela aura plus de sens. Continuons avec le premier H, et la messagerie instantanée sera élevée. Ci-dessous, nous allons en faire une autre en H, et en théorie, cela devrait être faisable dans une phrase en H, mais elle définira des classes différentes pour la première phrase et différentes pour la seconde Là, je vais juste définir le texte en blanc avec une opacité de 0,4, le texte sept Excel, la police, noir. Ce sera tout. Peut-être pourrions-nous ensuite suivre quelques cours et les mettre dans la division au-dessus de ces deux rubriques. Pour le nom John D, je mettrai une largeur maximale de trois Excel. Vous pouvez le modifier en fonction de votre nom. Je vais régler le dégradé d'arrière-plan en bas à droite. Du blanc au gris 400. Cela créera un dégradé de couleur pour le texte. Nous devons également faire du texte du clip BG pour que ce dégradé de couleur soit visible. Et maintenant, je vais continuer à styliser en ligne ci-dessous. Je vais également améliorer le formatage du code. Je peux peut-être encore y mettre un cours pour que tu puisses le voir. Je vais utiliser leur police noire. Cela signifie que c'est le poids de police maximal que nous pouvons obtenir. Vous pouvez également y voir que le poids de la police est réglé sur 900, en tête serrée pour réduire l'espacement des lettres Je vais maintenant passer à la ligne suivante. Là, je vais faire du texte transparent. Alors peut-être que sur l'écran moyen ci-dessus, je peux toujours augmenter la taille du texte. Faisons le texte. Sept Excel. Maintenant, nous pouvons également voir comment la couleur du texte est dégradée. Nous pouvons maintenant passer en dessous de notre nom avec le div. Et à l'intérieur de ce div, nous allons mettre une balise image. Et dans cette balise d'image, nous allons commencer par la source qui sera une photo de profil puis qui sera une photo de profil. Ensuite, la largeur, que nous allons définir pour l'instant à 250 pour la rendre un peu plus petite. Peut-être, pour être honnête, nous n'avons même pas besoin de ce div, alors supprimons-le, remettons-le en place. Ensuite, en dessous de cette photo, nous allons continuer avec un autre div. Cette section contiendra quelques petites informations nous concernant. Je vais mettre une mise en page flexbox. Avec fond blanc et opacité de 0,1. Je vais y mettre de l'ombre, du rembourrage, arrondir trois Excel pour augmenter le rayon de la bordure, justifier le centre et les éléments au centre pour centrer les éléments horizontalement et verticalement Espacez X deux, pour y faire un certain espacement horizontal, et je vais aussi faire leur marge vers le bas Je vais continuer dans cette division. Je vais y mettre une image, et j'y mettrai la source, j'ai importée en tant qu'objet, alors, je peux juste faire un objet. Avec, je devrai définir quelque chose de petit comme 30, car il devrait s'agir essentiellement d'une icône et d'un nom de classe arrondi à Excel et axodo Peut-être qu'il devrait y avoir une icône représentant la silhouette du client ou un chèque. Dans la version de travail de ce portfolio, j'y mettais cet objet et je l'y laissais, puis j'ai commencé à l'aimer un peu. Je vais donc le laisser également là et y mettre l' icône que vous souhaitez. Maintenant, nous aimerions le coller deux fois de plus. dessous de ces images, je vais créer une balise de paragraphe avec A plus de clients satisfaits pour ce paragraphe, j'ajouterai une police medium, et c'est tout. Je vais continuer avec une balise de paragraphe, et j'y écrirai un développeur Full Stack basé à Amsterdam avec plus de cinq ans d'expérience. J'y donnerai également quelques cours. Ce que je vais utiliser, c'est MI, donc une marge verticale à six, un poids maximum pour Excel, et sur un écran moyen, nous pouvons augmenter la taille du texte trop grande. Vous pouvez mettre à jour cette largeur maximale, fonction de ce que vous allez y mettre. Nous pouvons également en faire de grandes. À l'heure actuelle, Excel est probablement le meilleur choix. Continuons avec le bouton. Ci-dessous, nous allons créer un bouton de mouvement. À l'intérieur, nous allons faire l'icône de la flèche FI, non ? On peut fermer ça. Nous y ajouterons simplement quelques noms de classes. Mais d'abord, nous allons styliser le bouton de mouvement. À l'intérieur de ce motif animé, nous ajouterons un style, et comme dans la balise de section principale, nous placerons la bordure et l'ombre de la boîte Vous pouvez maintenant voir le bouton et il changera également de couleur, comme notre arrière-plan. Ce que nous y trouvons également, c'est le survol sauvage et pendant que nous allons le survoler, nous fixerons une échelle à 1,0 15 Cela signifie que nous allons l'augmenter un peu pendant que vous tapez. Donc, pendant que nous cliquons sur ce bouton, nous diminuerons un peu l'échelle. Nous avons également des noms de classes, une disposition flexible avec une largeur adaptée, qui définiront la largeur des éléments en fonction de leur contenu, et cela rendra notre élément aussi blanc que nécessaire pour contenir le contenu interne Donc, dans ce bouton, nous allons écrire du contenu. Vous pouvez voir comment la largeur va augmenter. Continuons avec les cours. Nous allons placer les articles au centre, un peu d'écart, aussi les arrondir complètement, en payant X et PY à quatre et deux. Nous allons maintenant y mettre le texte lui-même, et nous pouvons y mettre, par exemple, télécharger le CV. Et pour la flèche, je vais peut-être quitter les cours pour le moment et les laisser tels quels. Maintenant, vérifions le div. Je pense que nous devrions prendre cette décision de clore le premier dif. En gros, en dessous de l'objectif heureux, nous n'aurons qu' une seule étiquette de fermeture dif Le second qui était là, nous allons le couper, et nous allons le coller sous ce bouton, enregistrer, et ça devrait aller. Maintenant, nous pouvons également utiliser ce bouton de mouvement avec cette balise de paragraphe, appuyer sur Tab, et le code sera stylisé comme suit. Si vous utilisez Prader, cela devrait être encore plus facile Avec cette extension, vous pouvez formater votre code très facilement. Je ne l'utilise pas maintenant uniquement à des fins de didacticiel. 16. ContactTempl: Section contact, nous allons entrer dans le div principal, mettre une classe de PY à 16, y définir une largeur maximale. Utilisons 1 200 pixels et centrons le tout avec un ordre de mixage. Pour cette division, il contiendra le texte avec notre adresse e-mail et également un appel à l'action, comme entrer en contact. Nous allons placer les éléments de mise en page Flexbox au centre et les justifier au centre pour les centrer verticalement et horizontalement Nous allons également mettre le volume de direction de flexion, et sur un écran moyen, nous allons placer la ligne de direction de flexion. Ensuite, à l'intérieur, nous allons créer un autre div pour séparer l'action à froid de l'adresse réelle. Nous y mettrons la section. Nous allons créer une technologie de rubrique 2, et nous y mettrons pour entrer. Et nous pouvons toucher à la taxe Spen. Pour la touche Spen tax, nous ajouterons un peu de couleur par la suite Mettons maintenant le texte gris 400. Pour le titre deux lui-même, nous allons le faire sur écran moyen, texte sept Excel. Texte pour Excel sur police d'écran mobile, la fois marge jusqu'au dix inférieur et texte blanc avec une opacité de 0,5 Vous pouvez maintenant le voir sur notre page. Ci-dessous, nous allons continuer avec la technologie d'ancrage, et dans cette technologie d'ancrage, nous aurons notre e-mail, qui se trouvera sur dow.com Je peux le dire comme ça et là, pour Anchorteg, je vais créer une classe Et dans ce cours, j'utiliserai également sur écran moyen du texte sur sept fichiers Excel. Sur mobile, texte pour Excel, police, texte semi-gras sur blanc, souligné avec un peu de décoration. Pour l'instant, utilisons le gris 400. Ensuite, nous en décorerons deux et soulignerons le set quatre, et sur Her, nous changerons la décoration en gris 200 Nous utiliserons également la transition et la durée 300. Sauvegardons-le. Maintenant, sur notre page, vous pouvez voir quand je vais le survoler, comment le soulignement change ou la décoration Ce que nous ajouterons également à cette étiquette d'ancrage est le HRF, et le HRF sera envoyé par courrier Nous aurons toujours le formulaire pour remplir l'e-mail avec un message et le faire fonctionner L'utilisateur pourra donc nous envoyer un e-mail via un formulaire, et là, nous créerons un autre DIV. Dans ce div, nous aurons une classe de texte blanc avec une opacité de 0,5, marge allant du haut à 12, et maintenant nous aurons leur téléphone avec le numéro et l'adresse Cela signifie que nous allons faire un autre div pour le téléphone. Là, nous allons créer un paragraphe de texte avec le téléphone. Et aussi une étiquette d'ancrage avec le numéro de téléphone réel. Disons quelque chose comme +99 078-897-9999 . Sauvegardons-le. Dans la technologie Anchor, nous ferons le HRF, et dans le HRF, nous mettrons ce numéro de téléphone sans les espacements et nous pouvons également nous occuper Cela signifie que pour le DIV, ce sera la marge inférieure des huit, pour le téléphone. Ce sera du texte sur l'arc et la marge du bas. Pour la balise d'ancrage, il s' agira d'un texte vers Excel, demi-boulon pour téléphone, d'un soulignement, décoration, grade 400, d'une décoration deux. Soulignez le set quatre sur sa décoration grise 400, transition et durée 300. Nous pouvons maintenant le mettre sur une autre ligne et également cette balise d'ancrage ci-dessous. Maintenant, en dessous de ce df, nous allons en créer un autre. Nous y créerons une pile de paragraphes avec office. Nous allons le copier et le coller encore trois fois. Ensuite, nous mettrons Street. Nous y mettrons Berlin et l' Allemagne pour le nom de la classe, nous pouvons mettre un boulon de police. Nous y placerons le texte en grand et la marge du bas à huit. Regardons-le sur notre page. Passons maintenant au formulaire. Cela signifie que nous devons descendre en dessous de ce div. Nous allons créer une technologie de formulaire. Et dans cette technologie de formulaire, nous allons créer un autre div qui sera là pour les entrées, puis un autre qui sera là pour le message d'entrée, puis un troisième qui sera là pour le bouton. Maintenant, pour le formulaire, nous allons ajouter des classes, et nous allons commencer par une largeur maximale de 1 200 pixels, Mx, auto, flex, flex wrap, et justifier entre les deux. Mais avec justify between, cela signifie qu'il y aura un espacement égal entre ces trois divs Passons maintenant aux divs. Pour le premier, nous ajouterons la largeur à 50 %, l'espace Y à six. Et à l'intérieur, nous allons mettre un div qui contiendra l'entrée de largeur de l'étiquette, et nous le copierons parce que second div contiendra également l'étiquette et l'entrée. Dans l'étiquette, nous aurons un e-mail, et dans le second, nous aurons le sujet. Pour la saisie, fermons également la technologie comme ceci. Et commençons par donner un style à ces étiquettes pour l'étiquette. Le style sera bloc d'affichage, texte trop petit, étang à moyen, et texte gris 300 avec marge inférieure, deux, et également HTML pour les e-mails. Nous pouvons simplement copier cette ligne et la mettre là, changer en sujet. Et le HTML 4 sera également sujet. Maintenant, pour ce qui est de la saisie, nous allons également mettre notre type d'identifiant e-mail, également un espace réservé à email.com Cela sera également nécessaire. Et pour le nom de la classe, nous y ajouterons le Bedding X Four complet, mariage y23, fond transparent Bordure et bordure blanches avec une opacité de 0,2, arrondissez-les en grand et concentrez-vous pour ne pas en souligner. L'accent est mis sur le Ring two et l' accent sur le ring gray 200. Nous pouvons maintenant tester l'entrée. En gros, il suffit de copier-coller cette entrée et de changer ce type en texte. Remplacez cet identifiant par un espace réservé, nous allons indiquer de quoi il s' agit . Passons maintenant à la deuxième division. Pour le deuxième div, nous mettrons leur nom de classe avec to full. Sur écran moyen, nous mettrons la largeur à 50 %. La marge à partir du haut sera de six, et sur un écran moyen, nous remettrons cette marge à zéro. À l'intérieur de ce div, nous allons mettre l'étiquette du message. Dans cette étiquette, nous allons mettre une classe de bloc, le texte en petit, polices en moyen, le texte en gris 300 et la marge en bas. Et aussi pour cette étiquette, nous mettrons le code HTML quatre, et ce sera pour le message. En dessous de cette étiquette, nous allons mettre une zone de texte. Et pour cette zone de texte, nous allons en faire des lignes de message d'identification 28. Cela signifie que par défaut, il sera affiché sur notre page avec huit lignes. Maintenant tu peux le voir. Nous le rendrons également obligatoire. Nous mettrons l'espace réservé à votre message ici. Et maintenant c'est l'heure des cours. Nous allons mettre la largeur au maximum, en ajoutant X à quatre, PAR 23, fond transparent. Bordure blanche avec une opacité de 0,2, arrondie, large, contour net, aucun, et anneau de focalisation deux avec anneau de mise au point gris, 300 ou 200, comme nous le faisions auparavant Maintenant, c'est mieux. Regardons la page. Nous devons faire un certain espacement entre ces deux différences. Faisons-le, et faisons-le en réglant cette largeur à 48 % pour celui-ci, et également à 48 % pour celui-ci. Maintenant, si nous allons vérifier la page, elle ressemblera à ceci, ce qui, à mon avis, est très bien. Maintenant, il ne reste plus qu'à appuyer sur le bouton. Cela signifie qu'il y a en bas. Nous allons faire le tag du bas. Nous pouvons simplement y saisir cette ligne. Pour le style du DIF, ce sera la largeur complète sur l' écran moyen, ce sera la largeur Encore une fois, utilisons cette marge de 48 % par le haut. Sur le support moyen, la marge du haut sera de quatre et le texte de droite sur le support également. Nous allons maintenant styliser le bouton lui-même, et nous allons également l'ajouter au type de bouton à soumettre. Comme nous utilisons ce formulaire pour le nom de classe, nous allons mettre le bloc en ligne. Largeur et hauteur jusqu'à 16, fond transparent. Donc, frontière. Permettez-moi d'utiliser Border Gray 400. Et Text Gray 400. C'est donc de la même couleur. Ensuite, j'opterai pour une police moyenne, arrondie, grande. Sur Her, je vais changer le fond en gris 700 oHer le texte sera changé en blanc transition et la durée 300 sont terminées, nous créons donc une animation fluide et transformons et réduisons son échelle à un sur cinq. Maintenant, si vous l'enregistrez et que nous allons essayer de survoler ce bouton, vous pouvez voir l'échelle changer un peu, couleur, ainsi que la couleur de la flèche Maintenant, si vous souhaitez que ce formulaire de contact fonctionne, nous devons ajouter une méthode et la configurer pour qu'elle soit publiée. Passons à cette page, appuyez sur DogTFpour slash Login. Ensuite, nous nous inscrirons, cliquez sur Créer ici. Mettez-y un nom et mettez-y le fuseau horaire, copiez ce point de terminaison. Nous allons donc ajouter leur action. Et dans cette action, nous allons mettre ce point de terminaison que nous obtiendrons de GetFormTio et nous pouvons également y mettre l'ID du Et en regardant notre section, nous devrons également y changer depuis le centre de justification pour justifier entre les deux. Voici quoi ressemblera le formulaire de contact. Nous allons maintenant essayer sa réactivité. Nous pouvons voir que nous avons un problème à ce sujet. Passons à notre code et définissons cette largeur ou cette taille à partir de la taille moyenne. De plus, je vais le mettre là, qui fonctionne déjà. Mettons-y également toute la largeur. Mettons-y également la literie X à 12. Copions maintenant ceci et allons-y pour envoyer un message. On peut le mettre là. Nous pouvons également le mettre sur le bouton, et ce sera pour la section contact.