Voici une d\u00e9monstration en direct du portefolio de d\u00e9veloppeur<\/a> que vous allez construire avec Next.js.<\/p>\n Vous pouvez acc\u00e9der au d\u00e9p\u00f4t GitHub de ce projet<\/a> si vous souhaitez l’examiner de plus pr\u00e8s, ou vous pouvez utiliser ce mod\u00e8le de projet de d\u00e9marrage de portfolio<\/a> en s\u00e9lectionnant Utiliser ce mod\u00e8le<\/strong> > Cr\u00e9er un nouveau d\u00e9p\u00f4t<\/strong> – cela copiera le code de d\u00e9marrage dans un nouveau d\u00e9p\u00f4t. Le projet de d\u00e9marrage contient des codes de base comme les styles, un lien CDN Font Awesome, des images et une structure de base.<\/p>\n Il s’agit d’un tutoriel de type \u00ab follow-along \u00bb. Il sera plus facile pour vous de coder si vous avez :<\/p>\n Next.js<\/a> est un framework de biblioth\u00e8que JavaScript<\/a> open source bas\u00e9 sur React qui peut \u00eatre utilis\u00e9 pour un large \u00e9ventail de projets de d\u00e9veloppement web, car il simplifie la construction d’applications rendues et statiques c\u00f4t\u00e9 serveur. Il rationalise le processus en tirant parti des meilleures fonctionnalit\u00e9s de React et en optimisant les performances de rendu pour une meilleure exp\u00e9rience utilisateur. Voici quelques-uns des cas d’utilisation les plus courants de Next.js :<\/p>\n Pour mettre en place un environnement de d\u00e9veloppement pour Next.js, installez d’abord Node.js<\/a> sur votre ordinateur, car vous utiliserez la commande Une invite appara\u00eetra pour vous demander de confirmer certaines d\u00e9pendances suppl\u00e9mentaires. Ensuite, vous pouvez lancer Lorsque vous cr\u00e9ez un projet Next.js en utilisant la commande D’autres r\u00e9pertoires et fichiers peuvent \u00e9galement \u00eatre g\u00e9n\u00e9r\u00e9s en fonction de la configuration et des fonctionnalit\u00e9s sp\u00e9cifiques, mais il s’agit des r\u00e9pertoires principaux d’un projet Next.js de base.<\/p>\n Pour ce tutoriel, tout ce que nous construisons appara\u00eetra sur la page d’index (notre site web \u00e0 une page), et vous inclurez des composants pour diverses sections comme le h\u00e9ros, \u00e0 propos, projets, et autres.<\/p>\n Un portfolio est g\u00e9n\u00e9ralement constitu\u00e9 de composants tels que ceux-ci :<\/p>\n Les composants Navbar et Footer doivent appara\u00eetre sur toutes les pages si le portfolio a plus d’une page. Ceci peut \u00eatre r\u00e9alis\u00e9 dans Next.js en d\u00e9finissant une mise en page.<\/p>\n Dans Next.js, une mise en page est un moyen de d\u00e9finir une structure coh\u00e9rente pour les composants qui apparaissent sur chaque page d’un site web. La mise en page comprend g\u00e9n\u00e9ralement des \u00e9l\u00e9ments tels qu’un en-t\u00eate, un menu de navigation et un pied de page affich\u00e9s sur toutes les pages du site.<\/p>\n Commencez par cr\u00e9er un dossier components dans le r\u00e9pertoire src<\/strong> (source) de votre projet Next.js. Ensuite, cr\u00e9ez les composants Navbar et Footer qui seront utilis\u00e9s dans le composant Layout.<\/p>\n Voici le composant Navbar dans Navbar.jsx<\/strong>:<\/p>\n Voici le composant Footer dans Footer.jsx<\/strong>:<\/p>\n Remarque :<\/strong> pour que les ic\u00f4nes Font Awesome fonctionnent, vous devez soit installer Font Awesome dans votre projet, soit utiliser son CDN. Vous pouvez ajouter le lien CDN \u00e0 votre fichier _document.js<\/strong> comme ceci :<\/p>\n Remarque :<\/strong> Si vous ajoutez un lien vers une version diff\u00e9rente de Font Awesome via le CDN, vous devrez remplacer le hash Apr\u00e8s avoir cr\u00e9\u00e9 tous les composants n\u00e9cessaires \u00e0 votre mise en page, vous pouvez cr\u00e9er le composant Layout lui-m\u00eame et l’ajouter \u00e0 vos pages en y int\u00e9grant le contenu de votre page.<\/p>\n Le composant Layout acceptera une propri\u00e9t\u00e9 <code>children<\/code>, vous permettant d’acc\u00e9der au contenu de vos pages Next.js.<\/p>\n \u00c0 ce stade, vous avez cr\u00e9\u00e9 avec succ\u00e8s le composant Layout qui contient la barre de navigation et le pied de page avec les accessoires children positionn\u00e9s correctement. Vous pouvez maintenant ajouter le composant Layout \u00e0 vos pages en y int\u00e9grant le contenu de la page. Cela se fera dans le fichier _app.js<\/strong>.<\/p>\n Vous avez maintenant r\u00e9ussi \u00e0 cr\u00e9er une mise en page pour votre portfolio de d\u00e9veloppeur. Pour ce portfolio, nous nous concentrons davantage sur Next.js et sur la mani\u00e8re de d\u00e9ployer votre site web sur Kinsta. Vous pouvez donc copier les styles du fichier styles\/globals.css<\/a> dans votre propre projet. Si vous lancez votre site web de portfolio en mode dev, vous devriez maintenant voir la mise en page de votre application.<\/p>\n Il est maintenant temps de donner \u00e0 votre site web de portfolio le contenu appropri\u00e9.<\/p>\n Vous pouvez maintenant cr\u00e9er des composants individuels pour chaque section du portfolio de votre d\u00e9veloppeur. Tous ces composants seront import\u00e9s dans la page d’index de votre projet Next.js, afin qu’ils puissent s’afficher lorsque vous lancez votre projet avec Le composant Hero est la premi\u00e8re section en dessous de la barre de navigation, dont le but principal est de capter l’attention de l’utilisateur et de lui donner une id\u00e9e de ce qu’est le site web ou l’application.<\/p>\n Dans le code ci-dessus, vous remarquerez que le composant Next.js Image<\/a> est utilis\u00e9 \u00e0 la place de la balise HTML Dans le composant About, vous remarquerez \u00e9galement qu’un simple paragraphe pour en dire un peu plus sur le d\u00e9veloppeur a \u00e9t\u00e9 ajout\u00e9 ainsi que quelques ic\u00f4nes sociales de Font Awesome pour ajouter des liens sociaux.<\/p>\n Voici \u00e0 quoi devrait ressembler le composant Hero :<\/p>\n Vous pouvez ajouter du contenu au composant Hero, modifier les styles dans le fichier styles\/globals.css<\/strong> ou m\u00eame recr\u00e9er cette section \u00e0 votre mani\u00e8re.<\/p>\n Le composant About est destin\u00e9 \u00e0 donner aux lecteurs ou aux personnes qui visitent votre portfolio plus d’informations sur vous, dans autant de paragraphes que vous le souhaitez. Si vous souhaitez en dire plus sur vous-m\u00eame, vous pouvez cr\u00e9er une page d\u00e9di\u00e9e \u00ab \u00c0 propos de moi \u00bb et ajouter un bouton dans cette section pour en savoir plus sur vous.<\/p>\n Le code ci-dessus contient deux paragraphes de texte sur le d\u00e9veloppeur et une image de celui-ci. C’est \u00e0 cela que devrait ressembler la section \u00ab \u00c0 propos \u00bb :<\/p>\n Vous pouvez toujours modifier les styles pour ajouter d’autres images et bien d’autres choses encore.<\/p>\n Le composant \u00ab comp\u00e9tences \u00bb est destin\u00e9 \u00e0 montrer certaines des technologies les plus utilis\u00e9es par le d\u00e9veloppeur ou des technologies qu’il a utilis\u00e9es dans le pass\u00e9.<\/p>\n Vous pouvez faciliter la maintenance de ce composant en cr\u00e9ant un tableau dans un fichier externe, puis en l’important dans le composant \u00ab skills \u00bb, ce qui vous permet de le parcourir en boucle au lieu de dupliquer un code similaire.<\/p>\n Dans le code ci-dessus, une carte est cr\u00e9\u00e9e pour chaque comp\u00e9tence, et chaque carte contient l’ic\u00f4ne de la technologie de font-awesome et le nom de la technologie. Vous pouvez \u00e9galement ajouter d’autres styles et modifier le code pour le rendre plus attrayant et unique.<\/p>\n Le volet \u00ab projets \u00bb est l’une des sections les plus importantes du portfolio d’un d\u00e9veloppeur. Les projets fournissent des preuves tangibles des comp\u00e9tences et des aptitudes d’un d\u00e9veloppeur et mettent en \u00e9vidence sa capacit\u00e9 \u00e0 appliquer ses connaissances \u00e0 des probl\u00e8mes concrets.<\/p>\n Chaque projet comprendra une br\u00e8ve description du projet, un lien vers son code source (nous utilisons ici des liens GitHub<\/a>) et tout autre d\u00e9tail que vous souhaitez ajouter.<\/p>\n Vous pouvez cr\u00e9er un tableau pour contenir les d\u00e9tails de chaque projet, puis l’importer dans votre composant pour \u00e9viter de les coder en dur.<\/p>\n Cr\u00e9ons un fichier data.js<\/strong> pour stocker le tableau des donn\u00e9es du projet. Vous pouvez stocker ce fichier dans le dossier du composant ou dans le dossier pages\/api<\/strong>. Pour cette d\u00e9mo, je le stockerai dans le dossier components. Ce tableau contiendra un objet pour chaque projet, et l’objet contiendra le nom du projet, la description, et le lien GitHub.<\/p>\n Vous pouvez maintenant cr\u00e9er un composant de projet pour utiliser ces donn\u00e9es en bouclant facilement. Vous pouvez utiliser n’importe quelle m\u00e9thode d’it\u00e9ration JavaScript, mais pour ce tutoriel, vous pouvez utiliser la m\u00e9thode JavaScript Dans le code ci-dessus, vous avez r\u00e9ussi \u00e0 \u00e9viter les r\u00e9p\u00e9titions en parcourant en boucle le tableau pour sortir tous les projets dans le composant Projets, ce qui facilite la maintenance et l’ajout de nouveaux projets.<\/p>\n L’une des raisons de cr\u00e9er un portfolio de d\u00e9veloppeur est de permettre aux clients potentiels de vous contacter. L’un des moyens serait que les gens vous envoient un courriel, ce que nous allons faciliter dans le composant Contact.<\/p>\n Placez votre e-mail dans la balise Vous avez maintenant cr\u00e9\u00e9 tous les composants de votre application de portfolio. L’\u00e9tape suivante consiste \u00e0 les ajouter \u00e0 votre page d’index. Naviguez jusqu’au fichier pages\/index.js<\/strong> – qui est cr\u00e9\u00e9 par d\u00e9faut – et remplacez son code par le suivant.<\/p>\n Lorsque vous lancerez votre application, vous remarquerez qu’un site web<\/a> complet a \u00e9t\u00e9 cr\u00e9\u00e9. Enfin, avant de d\u00e9ployer votre application, installons une d\u00e9pendance. L’un des avantages de l’utilisation de Next.js r\u00e9side dans les nombreuses fonctionnalit\u00e9s qu’il apporte, telles que le routage bas\u00e9 sur les fichiers, l’optimisation des images, et bien d’autres encore.<\/p>\n L’optimisation des images est g\u00e9r\u00e9e par le composant Next.js Vous pouvez maintenant d\u00e9ployer votre application, et les images fonctionneront correctement avec l’optimisation compl\u00e8te que Next.js fournit.<\/p>\n Une fois que vous serez satisfait de votre portfolio, qui pr\u00e9sente vos meilleurs travaux de d\u00e9veloppement et des informations cl\u00e9s, vous voudrez probablement le partager avec d’autres, n’est-ce pas ? Voyons comment le faire en utilisant GitHub et la plateforme d’h\u00e9bergement d’applications de Kinsta.<\/p>\n Il existe plusieurs fa\u00e7ons de pousser des codes vers GitHub, mais utilisons Git pour ce tutoriel. Git est largement utilis\u00e9 dans le d\u00e9veloppement de logiciels<\/a> parce qu’il fournit un moyen fiable et efficace de g\u00e9rer les modifications de code, de collaborer sur des projets et de maintenir l’historique des versions.<\/p>\n Vous pouvez t\u00e9l\u00e9verser votre code sur GitHub en suivant les \u00e9tapes suivantes :<\/p>\n Tout d’abord, cr\u00e9ez un nouveau d\u00e9p\u00f4t (tout comme un dossier local pour stocker votre code). Vous pouvez le faire en vous connectant \u00e0 votre compte GitHub, en cliquant sur le bouton +<\/strong> dans le coin sup\u00e9rieur droit de l’\u00e9cran et en s\u00e9lectionnant Nouveau d\u00e9p\u00f4t<\/strong> dans le menu d\u00e9roulant, comme le montre l’image ci-dessous.<\/p>\n L’\u00e9tape suivante consiste \u00e0 donner un nom \u00e0 votre d\u00e9p\u00f4t, \u00e0 ajouter une description (facultative) et \u00e0 choisir si vous souhaitez que votre d\u00e9p\u00f4t soit public ou priv\u00e9. Cliquez ensuite sur Cr\u00e9er un d\u00e9p\u00f4t<\/strong>. Vous pouvez maintenant pousser votre code<\/a> vers le nouveau d\u00e9p\u00f4t GitHub.<\/p>\n Tout ce qui est n\u00e9cessaire pour pousser votre code avec Git est l’URL du d\u00e9p\u00f4t, que vous pouvez trouver sur la page principale du d\u00e9p\u00f4t, sous le bouton Cloner ou t\u00e9l\u00e9charger<\/strong>, ou dans les \u00e9tapes qui apparaissent apr\u00e8s la cr\u00e9ation d’un d\u00e9p\u00f4t.<\/p>\n Vous pouvez vous pr\u00e9parer \u00e0 pousser votre code en ouvrant votre terminal ou une invite de commande et en naviguant jusqu’au r\u00e9pertoire qui contient votre projet. Utilisez la commande suivante pour initialiser un d\u00e9p\u00f4t Git local :<\/p>\n Ajoutez maintenant votre code au d\u00e9p\u00f4t Git local \u00e0 l’aide de la commande suivante :<\/p>\n La commande ci-dessus ajoute tous les fichiers du r\u00e9pertoire actuel et de ses sous-r\u00e9pertoires au nouveau d\u00e9p\u00f4t Git. Vous pouvez maintenant valider vos modifications \u00e0 l’aide de la commande suivante :<\/p>\n Remarque :<\/strong> vous pouvez remplacer \u00ab my first commit \u00bb par votre propre message d\u00e9crivant bri\u00e8vement les modifications que vous avez apport\u00e9es.<\/p>\n Enfin, poussez votre code sur GitHub \u00e0 l’aide des commandes suivantes :<\/p>\n Remarque :<\/strong> veillez \u00e0 remplacer \u00ab [repository URL] \u00bb par l’URL de votre propre d\u00e9p\u00f4t GitHub.<\/p>\n Une fois ces \u00e9tapes termin\u00e9es, votre code sera pouss\u00e9 sur GitHub et accessible via l’URL de votre d\u00e9p\u00f4t. Vous pouvez maintenant d\u00e9ployer votre d\u00e9p\u00f4t sur Kinsta.<\/p>\n Le d\u00e9ploiement sur Kinsta se fait en quelques minutes. Commencez par le tableau de bord My Kinsta<\/a> pour vous connecter ou cr\u00e9er votre compte.<\/p>\n Ensuite, vous autoriserez Kinsta sur GitHub<\/a> en suivant ces \u00e9tapes rapides :<\/p>\n Une fen\u00eatre modale appara\u00eet dans laquelle vous pouvez s\u00e9lectionner le r\u00e9f\u00e9rentiel que vous souhaitez d\u00e9ployer.<\/p>\n Si vous avez plusieurs branches dans votre d\u00e9p\u00f4t, vous pouvez s\u00e9lectionner celle que vous souhaitez d\u00e9ployer. Vous pouvez \u00e9galement attribuer un nom \u00e0 cette application. Assurez-vous de s\u00e9lectionner un emplacement de centre de donn\u00e9es<\/a> parmi les 24 disponibles, puis Kinsta d\u00e9tectera automatiquement une commande de d\u00e9marrage.<\/p>\n \u00c0 ce stade, votre application commencera \u00e0 se d\u00e9ployer. Dans quelques minutes, un lien sera fourni pour acc\u00e9der \u00e0 la version d\u00e9ploy\u00e9e de votre application. Dans le cas pr\u00e9sent, il s’agit de : https:\/\/kinsta-developer-portfolio-ir8w8.kinsta.app\/<\/strong><\/p>\n Note :<\/strong> Le d\u00e9ploiement automatique a \u00e9t\u00e9 activ\u00e9, de sorte que Kinsta red\u00e9ploie automatiquement votre application chaque fois que vous apportez des modifications \u00e0 votre base de code et que vous la poussez sur GitHub.<\/p>\nExigences\/Pr\u00e9requis<\/h2>\n
\n
Pourquoi Next.js ?<\/h2>\n
\n
\n
\n
Comment configurer votre environnement de d\u00e9veloppement Next.js<\/h2>\n
npx<\/code> pour ex\u00e9cuter les paquets npm sans avoir \u00e0 les installer globalement sur votre syst\u00e8me. Une fois que cela est fait, vous pouvez maintenant cr\u00e9er un projet Next.js en ex\u00e9cutant la commande suivante :<\/p>\nnpx create-next-app@latest my-portfolio<\/code><\/pre>\nnpm run dev<\/code> pour rendre votre application disponible sur localhost:3000<\/strong>.<\/p>\n![\"Cr\u00e9ation](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/nextjs-installation-with-options.jpg\")
npx<\/code>, il cr\u00e9e automatiquement une structure de dossiers avec les r\u00e9pertoires principaux suivants :<\/p>\n\n
Comment construire un portfolio de d\u00e9veloppeur responsive en utilisant Next.js<\/h2>\n
\n
D\u00e9finir des mises en page dans Next.js<\/h3>\n
\/\/ components\/Navbar.jsx\n\nimport Link from \"next\/link\";\n\nconst Navbar = () => {\n return (\n <div className=\"nav-container\">\n <div className=\"logo\">\n <Link href=\"\/\">\n Joe's Portfolio\n <\/Link>\n <\/div>\n <a href=\"\" className=\"cta-btn\">Resume<\/a>\n <\/div>\n )\n}\n\nexport default Navbar;<\/code><\/pre>\n\/\/ components\/Footer.jsx\n\nconst Footer = () => {\n return (\n <>\n <hr\/>\n <div className=\"footer-container\">\n <p>\n © {new Date().getFullYear()} Joel's Portfolio\n <\/p>\n <div className=\"social_icons\">\n <a\n href=\"https:\/\/twitter.com\/olawanle_joel\"\n aria-label=\"Twitter\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <i className=\"fa-brands fa-twitter\"><\/i>\n <\/a>\n <a\n href=\"https:\/\/github.com\/olawanlejoel\"\n aria-label=\"GitHub\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <i className=\"fa-brands fa-github\"><\/i>\n <\/a>\n <a\n href=\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\"\n aria-label=\"LinkedIn\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <i className=\"fa-brands fa-linkedin\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n <\/>\n )\n}\n\nexport default Footer;<\/code><\/pre>\n\/\/ pages\/_document.js\n\nimport { Html, Head, Main, NextScript } from 'next\/document';\n\nexport default function Document() {\n return (\n <Html lang=\"en\">\n <Head>\n <meta charSet=\"utf-8\" \/>\n <link\n rel=\"stylesheet\"\n href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.2.1\/css\/all.min.css\"\n integrity=\"sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf\/nwasF0nqhPay5w\/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==\"\n crossorigin=\"anonymous\"\n referrerpolicy=\"no-referrer\"\n \/>\n <\/Head>\n <body>\n <Main \/>\n <NextScript \/>\n <\/body>\n <\/Html>\n );\n}<\/code><\/pre>\nintegrity<\/code> par le hash appropri\u00e9 pour cette version.<\/p>\n\/\/ components\/Layout.jsx\n\nimport Navbar from '.\/navbar';\nimport Footer from '.\/footer';\n\nconst Layout = ({ children }) => {\n return (\n <>\n <Navbar \/>\n <main>{children}<\/main>\n <Footer \/>\n <\/>\n )\n}\n\nexport default Layout;<\/code><\/pre>\n\/\/ pages\/_app.js\n\nimport '@\/styles\/globals.css';\nimport Layout from '..\/components\/layout';\n\nexport default function App({ Component, pageProps }) {\n return (\n <Layout>\n <Component {...pageProps} \/>\n <\/Layout>\n );\n}<\/code><\/pre>\n![\"Composant](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/layout-component.jpg\")
Cr\u00e9ation de composants de portfolio<\/h3>\n
npm run dev<\/code>.<\/p>\nLe composant Hero<\/h4>\n
\/\/ components\/Hero.jsx\n\nimport Image from \"next\/image\";\n\nconst Hero = () => {\n return (\n <div className=\"hero-container\">\n <Image src='\/images\/profile.jpeg' className=\"profile-img\" width={300} height={300} alt=\"Joe's personal headshot\" \/>\n <div className=\"hero-text\">\n <h1>Hey, I'm Joe \ud83d\udc4b<\/h1>\n <p>\n I'm a software developer based in Lagos, Nigeria. I specialize in building (and occasionally designing)\n exceptional websites, applications, and everything in between.\n <\/p>\n <div className=\"social-icons\">\n <a\n href=\"https:\/\/twitter.com\/olawanle_joel\"\n aria-label=\"Twitter\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <i className=\"fa-brands fa-twitter\"><\/i>\n <\/a>\n <a\n href=\"https:\/\/github.com\/olawanlejoel\"\n aria-label=\"GitHub\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <i className=\"fa-brands fa-github\"><\/i>\n <\/a>\n <a\n href=\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\"\n aria-label=\"LinkedIn\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <i className=\"fa-brands fa-linkedin\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n )\n}\n\nexport default Hero;<\/code><\/pre>\nimg<\/code> pour ajouter l’image, car il permet l’optimisation automatique de l’image, son redimensionnement et bien d’autres choses encore.<\/p>\n![\"Composant](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/hero-component.jpg\")
Le composant About<\/h4>\n
\/\/ components\/About.jsx\n\nimport Image from \"next\/image\";\n\nconst About = () => {\n return (\n <div className=\"about-container\">\n <h2>About Me<\/h2>\n <div className=\"flex-about\">\n <div className=\"about-text\">\n <p>\n As a developer, I have always been passionate about creating elegant and effective solutions to\n complex problems. I have a strong foundation in software development, with a focus on web\n technologies such as HTML, CSS, and JavaScript. I enjoy working on both the front-end and\n back-end of applications, and I am always looking for ways to optimize performance, improve user\n experience, and ensure the highest level of code quality.\n <\/p>\n <p>Throughout my career, I have worked on a wide range of projects, from simple static websites to\n complex enterprise-level applications. I am experienced in working with a variety of development\n tools and frameworks, including React, Angular, Vue.js, Node.js, and Laravel. I am always eager\n to learn and explore new technologies, and I am constantly seeking out opportunities to improve\n my skills and knowledge.<\/p>\n <\/div>\n <div className=\"about-img\">\n <Image src='\/images\/about.jpeg' className=\"profile-img\" width={300} height={500}\/>\n <\/div>\n <\/div>\n <\/div>\n )\n}\n\nexport default About;<\/code><\/pre>\n![\"Composant](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/about-component.jpg\")
Le composant Skills<\/h4>\n
![\"Composant](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/skills-component.jpg\")
\/\/ components\/Skills.jsx\n\nconst Skills = () => {\n return (\n <div className=\"skills-container\">\n <h2>Skills<\/h2>\n <div className=\"grid-skills\">\n <div className=\"skill-card html\">\n <i className=\"fa-brands fa-html5 html-icon\"><\/i>\n <p>HTML<\/p>\n <\/div>\n <div className=\"skill-card css\">\n <i className=\"fa-brands fa-css3-alt css-icon\"><\/i>\n <p>CSS<\/p>\n <\/div>\n <div className=\"skill-card js\">\n <i className=\"fa-brands fa-js-square js-icon\"><\/i>\n <p>JavaScript<\/p>\n <\/div>\n <div className=\"skill-card react\">\n <i className=\"fa-brands fa-react react-icon\"><\/i>\n <p>React<\/p>\n <\/div>\n <div className=\"skill-card node\">\n <i className=\"fa-brands fa-node-js node-icon\"><\/i>\n <p>Node<\/p>\n <\/div>\n <div className=\"skill-card python\">\n <i className=\"fa-brands fa-python python-icon\"><\/i>\n <p>Python<\/p>\n <\/div>\n <\/div>\n <\/div>\n )\n}\n\nexport default Skills;<\/code><\/pre>\nLe composant Projects<\/h4>\n
![\"Composant](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/projects-component.jpg\")
\/\/ components\/data.js\n\nexport const projectData = [\n {\n id: 1,\n title: 'Todo List App',\n description:\n 'A simple Todo List App built with JavaScript. All datas are stored in localstorage. It helps users check list out their plans and tick as they do them.',\n gitHubLink: 'https:\/\/github.com\/olawanlejoel\/Todo-List-App',\n },\n {\n id: 2,\n title: 'Books Library App',\n description:\n 'A simple Book Library App built with JavaScript. It helps readers have a good list of books they are either currently reading or have finished reading.',\n gitHubLink: 'https:\/\/github.com\/olawanlejoel\/Book-Library',\n },\n {\n id: 3,\n title: 'Quotes Generator',\n description:\n 'Helps you generate quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards.',\n gitHubLink: 'https:\/\/github.com\/olawanlejoel\/random-quote-generator',\n },\n {\n id: 4,\n title: 'Password Generator',\n description:\n 'Helps you generates random passwords, you can select what you want your password to entail and also you can copy generated password to clipboard.',\n gitHubLink: 'https:\/\/github.com\/olawanlejoel\/Password-Generator',\n },\n {\n id: 5,\n title: 'Twitter UI Clone',\n description:\n 'Simple Twitter UI clone built with TailwindCSS and Vue Js. This covers only the homepage of Twitter UI. This is cool to get started with TailwindCSS as it helps understand basic concepts.',\n gitHubLink: 'https:\/\/github.com\/olawanlejoel\/TwitterUI-clone',\n },\n];<\/code><\/pre>\nmap()<\/code> array pour boucler le tableau de donn\u00e9es apr\u00e8s l’avoir import\u00e9 dans le composant Projects.<\/p>\n\/\/ components\/Projects.jsx\n\nimport { projectData } from '.\/data.js';\n\nconst Projects = () => {\n return (\n <div className=\"projects-container\">\n <h2>Projects<\/h2>\n <div className=\"projects-grid\">\n {projectData && projectData.map((project) => (\n <div className=\"project-card\" key={project.id}>\n <div className=\"project-header\">\n <i className=\"fa-regular fa-folder-open folder-icon\"><\/i>\n <div className=\"small-icons\">\n <a href={project.gitHubLink}><i className=\"fa-brands fa-github\"><\/i><\/a>\n <\/div>\n <\/div>\n <h3>{project.title}<\/h3>\n <p>{project.description}<\/p>\n <\/div>\n ))\n }\n <\/div>\n <\/div>\n )\n}\n\nexport default Projects;<\/code><\/pre>\nLe composant Contact<\/h4>\n
\/\/ components\/Contact.jsx\n\nconst Contact = () => {\n return (\n <div className=\"contact-container\">\n <h2>Get In Touch<\/h2>\n <p>If you want us to work together, have any questions or want me to speak at your event, my inbox is always open. Whether I just want to say hi, I'll try my best to get back to you! Cheers!<\/p>\n <a href=\"mailto:example@kinsta.com\" className='cta-btn'>Say Hello<\/a>\n <\/div>\n )\n}\n\nexport default Contact;<\/code><\/pre>\na<\/code> afin que le bouton lance une application de messagerie avec un message qui vous est adress\u00e9.<\/p>\n![\"Composant](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/contact-component.jpg\")
\/\/ pages\/index.js\n\nimport Hero from '@\/components\/Hero';\nimport About from '@\/components\/About';\nimport Skills from '@\/components\/Skills';\nimport Projects from '@\/components\/Projects';\nimport Contact from '@\/components\/Contact';\n\nimport Head from 'next\/head';\n\nconst Home = () => {\n return (\n <>\n <Head>\n <title>Joel's Portfolio<\/title>\n <meta name=\"description\" content=\"Joel's Portfolio\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n <link rel=\"icon\" href=\"\/favicon.ico\" \/>\n <\/Head>\n <div>\n <Hero \/>\n <About \/>\n <Skills \/>\n <Projects \/>\n <Contact \/>\n <\/div>\n <\/>\n );\n};\n\nexport default Home;<\/code><\/pre>\nImage<\/code>. Avant de d\u00e9ployer une application en production qui utilise le composant Next.js Image, il est fortement recommand\u00e9 d’installer sharp<\/a>. Vous pouvez le faire en naviguant vers votre terminal, en vous assurant que vous \u00eates dans le r\u00e9pertoire de votre projet, et en lan\u00e7ant la commande suivante :<\/p>\nnpm i sharp<\/code><\/pre>\nComment d\u00e9ployer l’application Next.js sur Kinsta<\/h2>\n
Pousser votre code sur GitHub<\/h3>\n
![\"Cr\u00e9er](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/Create-a-new-repository-on-GitHub.jpg\")
![\"Acc\u00e9der](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/how-to-get-repository-URL.jpg\")
git init<\/code><\/pre>\ngit add .<\/code><\/pre>\ngit commit -m \"my first commit\"<\/code><\/pre>\n\ngit remote add origin [repository URL]\ngit push -u origin master<\/code><\/pre>\nD\u00e9ployer votre portfolio sur Kinsta<\/h3>\n
\n
![\"Cr\u00e9er](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/host-application-on-kinsta.jpg\")
![\"D\u00e9tecter](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/deploying_application_to_kinsta.gif\")
![\"Lien](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/deployemnt-link-on-kinsta.jpg\")