Hier siehst du eine Live-Demo des Entwicklerportfolios<\/a>, das du mit Next.js erstellst.<\/p>\n Du kannst auf das GitHub-Repository dieses Projekts<\/a> zugreifen, wenn du einen genaueren Blick darauf werfen m\u00f6chtest, oder du kannst diese Portfolio-Starterprojekt<\/a>-Vorlage verwenden, indem du Use this template<\/strong> > Create a new repository<\/strong> \u2014 dadurch wird der Starter-Code in ein neues Repository kopiert. Das Startprojekt enth\u00e4lt grundlegende Codes wie die Stile, einen Font Awesome CDN-Link, Bilder und die Grundstruktur.<\/p>\n Dies ist ein „Follow-along“-Tutorial. Es wird dir leichter fallen zu coden, wenn du folgendes hast:<\/p>\n Next.js<\/a> ist ein auf React basierendes Open-Source-Framework f\u00fcr JavaScript-Bibliotheken<\/a>, das f\u00fcr eine Vielzahl von Webentwicklungsprojekten eingesetzt werden kann, da es die Erstellung von serverseitig gerenderten und statischen Anwendungen vereinfacht. Es rationalisiert den Prozess, indem es die besten Funktionen von React nutzt und die Rendering-Leistung f\u00fcr ein besseres Nutzererlebnis optimiert. Einige der h\u00e4ufigsten Anwendungsf\u00e4lle f\u00fcr Next.js sind:<\/p>\n Um eine Entwicklungsumgebung f\u00fcr Next.js einzurichten, musst du zun\u00e4chst Node.js auf deinem Computer installieren<\/a>, denn mit dem Befehl Es erscheint eine Eingabeaufforderung, in der du aufgefordert wirst, einige zus\u00e4tzliche Abh\u00e4ngigkeiten zu best\u00e4tigen. Dann kannst du Wenn du ein Next.js-Projekt mit dem Befehl Je nach Konfiguration und Funktionen k\u00f6nnen noch weitere Verzeichnisse und Dateien erstellt werden, aber dies sind die wichtigsten Verzeichnisse eines Next.js-Projekts.<\/p>\n In diesem Tutorial wird alles, was wir bauen, auf der Index-Seite (unserer einseitigen Website) erscheinen, und du wirst Komponenten f\u00fcr verschiedene Bereiche wie Hero Image, das Impressum, die Projekte und andere einbauen.<\/p>\n Ein Portfolio besteht normalerweise aus Komponenten wie diesen:<\/p>\n Die Komponenten Navbar und Footer sollen auf allen Seiten erscheinen, wenn das Portfolio mehr als eine Seite hat. Dies kann in Next.js durch die Definition eines Layouts erreicht werden.<\/p>\n In Next.js ist ein Layout eine M\u00f6glichkeit, eine einheitliche Struktur f\u00fcr die Komponenten zu definieren, die auf jeder Seite einer Website erscheinen. Das Layout umfasst normalerweise Elemente wie eine Kopfzeile, ein Navigationsmen\u00fc und eine Fu\u00dfzeile, die auf allen Seiten der Website angezeigt werden.<\/p>\n Beginne damit, einen Komponentenordner im src<\/strong> (Quell)-Verzeichnis deines Next.js-Projekts anzulegen. Als N\u00e4chstes erstellst du die Komponenten Navbar und Footer, die in der Komponente Layout verwendet werden.<\/p>\n Hier ist die Komponente Navbar in Navbar.jsx<\/strong>:<\/p>\n Hier ist die Fu\u00dfzeilenkomponente in Footer.jsx:<\/strong><\/p>\n Hinweis:<\/strong> Damit die Font Awesome-Symbole funktionieren, musst du entweder Font Awesome in deinem Projekt installieren oder sein CDN nutzen. Du kannst den CDN-Link wie folgt in deine _document.js-Datei<\/strong> einf\u00fcgen:<\/p>\n Hinweis:<\/strong> Wenn du eine andere Version von Font Awesome \u00fcber das CDN verlinkst, musst du oben den entsprechenden Nachdem du alle notwendigen Komponenten f\u00fcr dein Layout erstellt hast, kannst du die Layout-Komponente selbst erstellen und diese Komponente zu deinen Seiten hinzuf\u00fcgen, indem du deinen Seiteninhalt in sie einbettest.<\/p>\n Die Layout-Komponente akzeptiert einen <code>children<\/code> prop, mit dem du auf den Inhalt deiner Next.js-Seiten zugreifen kannst.<\/p>\n Jetzt hast du erfolgreich die Layout-Komponente erstellt, die neben der Navbar und der Fu\u00dfzeile auch die children props richtig positioniert. Jetzt kannst du die Layout-Komponente zu deinen Seiten hinzuf\u00fcgen, indem du den Seiteninhalt darin einbettest. Das machst du in der Datei _app.js<\/strong>.<\/p>\n Du hast nun erfolgreich ein Layout f\u00fcr dein Entwicklerportfolio erstellt. F\u00fcr dieses Portfolio konzentrieren wir uns mehr auf Next.js und darauf, wie du deine Website auf Kinsta bereitstellst. So kannst du die Stile in der Datei styles\/globals.css<\/a> in dein eigenes Projekt kopieren. Wenn du deine Portfolio-Website im Dev-Modus startest, solltest du jetzt das Layout deiner App sehen.<\/p>\n Jetzt ist es an der Zeit, deiner Portfolio-Website den passenden Inhalt zu geben.<\/p>\n Du kannst nun einzelne Komponenten f\u00fcr jeden Bereich deines Entwicklerportfolios erstellen. Alle diese Komponenten werden in die Indexseite deines Next.js-Projekts importiert, damit sie angezeigt werden k\u00f6nnen, wenn du dein Projekt mit Die Hero-Komponente ist der erste Bereich unterhalb der Navbar, der die Aufmerksamkeit des Nutzers auf sich ziehen und ihm einen Eindruck davon vermitteln soll, worum es auf der Website oder in der Anwendung geht.<\/p>\n Im obigen Code siehst du, dass die Next.js Image Komponente<\/a> anstelle des HTML In der Komponente \u00dcber siehst du auch, dass ein einfacher Absatz \u00fcber den Entwickler und einige soziale Medien-Symbole von Font Awesome hinzugef\u00fcgt wurden, um soziale Links hinzuzuf\u00fcgen.<\/p>\n So sollte die Hero-Komponente aussehen:<\/p>\n Du kannst der Hero-Komponente weitere Inhalte hinzuf\u00fcgen, die Stile in der Datei styles\/globals.css<\/strong> anpassen oder sogar diesen Abschnitt auf deine eigene Weise neu gestalten.<\/p>\n Die \u00dcber-Komponente ist daf\u00fcr gedacht, den Lesern oder Besuchern deines Portfolios in beliebig vielen Abs\u00e4tzen mehr Informationen \u00fcber dich zu geben. Wenn du mehr \u00fcber dich selbst erz\u00e4hlen m\u00f6chtest, kannst du eine eigene „\u00dcber mich“-Seite erstellen und in diesem Abschnitt eine Schaltfl\u00e4che einf\u00fcgen, um mehr \u00fcber dich zu erfahren.<\/p>\n Der obige Code enth\u00e4lt zwei Abs\u00e4tze mit Text \u00fcber den Entwickler und ein Bild des Entwicklers. So sollte der Abschnitt „\u00dcber mich“ aussehen:<\/p>\n Du kannst die Stile jederzeit anpassen, um weitere Bilder und vieles mehr hinzuzuf\u00fcgen.<\/p>\n Die Skills-Komponente dient dazu, einige der am h\u00e4ufigsten verwendeten Technologien des Entwicklers oder Technologien, die der Entwickler in der Vergangenheit verwendet hat, zu zeigen.<\/p>\n Du kannst sie einfacher pflegen, indem du ein Array in einer externen Datei erstellst und dann in die Kompetenzkomponente importierst, so dass du eine Schleife durchlaufen kannst, anstatt \u00e4hnlichen Code zu duplizieren.<\/p>\n Im obigen Code wird f\u00fcr jede Fertigkeit eine Karte erstellt, und jede Karte enth\u00e4lt das Technologiesymbol von font-awesome und den Namen der Technologie. Du kannst auch weitere Stile hinzuf\u00fcgen und den Code anpassen, um ihn attraktiver und einzigartiger zu machen.<\/p>\n Die Projektkomponente ist einer der wichtigsten Abschnitte im Portfolio eines Entwicklers. Projekte sind ein konkreter Beweis f\u00fcr die F\u00e4higkeiten und Fertigkeiten eines Entwicklers und zeigen, dass er sein Wissen auf reale Probleme anwenden kann.<\/p>\n Jedes Projekt enth\u00e4lt eine kurze Beschreibung des Projekts, einen Link zum Quellcode (wir verwenden hier GitHub-Links<\/a>) und alle anderen Details, die du hinzuf\u00fcgen m\u00f6chtest.<\/p>\n Du kannst ein Array erstellen, das die Details zu jedem Projekt enth\u00e4lt, und es dann in deine Komponente importieren, damit du sie nicht fest eintippen musst.<\/p>\n Erstellen wir eine data.js-Datei<\/strong>, um das Array mit den Projektdaten zu speichern. Du kannst diese Datei im Komponentenordner oder im Ordner pages\/api<\/strong> ablegen. F\u00fcr diese Demo werde ich sie im Komponentenordner speichern. In diesem Array wird ein Objekt f\u00fcr jedes Projekt gespeichert, das den Projektnamen, die Beschreibung und den GitHub-Link enth\u00e4lt.<\/p>\n Du kannst nun eine Projektkomponente erstellen, die diese Daten nutzt, indem du einfach eine Schleife durchf\u00fchrst. Du kannst jede JavaScript-Iterationsmethode verwenden, aber f\u00fcr dieses Tutorial kannst du die JavaScript Im obigen Code hast du erfolgreich Wiederholungen vermieden, indem du eine Schleife durch das Array gezogen hast, um alle Projekte in der Komponente Projekte auszugeben.<\/p>\n Ein Grund f\u00fcr die Erstellung eines Entwicklerportfolios ist, dass sich potenzielle Kunden mit dir in Verbindung setzen k\u00f6nnen. Eine M\u00f6glichkeit w\u00e4re, dass sie dir eine E-Mail schicken, was wir in der Komponente Kontakt erleichtern.<\/p>\n F\u00fcge deine E-Mail-Adresse in den Du hast nun alle Komponenten f\u00fcr deine Portfolio-Anwendung erfolgreich erstellt. Der n\u00e4chste Schritt besteht darin, sie zu deiner Index-Seite hinzuzuf\u00fcgen. Navigiere zur Datei pages\/index.js<\/strong> – die standardm\u00e4\u00dfig erstellt wird – und ersetze ihren Code durch den folgenden.<\/p>\n Wenn du deine Anwendung jetzt ausf\u00fchrst, wirst du feststellen, dass eine vollst\u00e4ndige Portfolio-Website<\/a> erstellt wurde. Bevor du deine Anwendung bereitstellst, m\u00fcssen wir noch eine Abh\u00e4ngigkeit installieren. Ein Vorteil von Next.js sind die vielen Funktionen, die es mitbringt, wie z. B. dateibasiertes Routing, Bildoptimierung und vieles mehr.<\/p>\n Die Bildoptimierung wird von der Next.js-Komponente Jetzt kannst du deine Anwendung bereitstellen, und die Images funktionieren mit der vollen Optimierung, die Next.js bietet.<\/p>\n Wenn du mit deinem Portfolio zufrieden bist, in dem du deine beste Entwicklungsarbeit und wichtige Informationen pr\u00e4sentierst, m\u00f6chtest du es wahrscheinlich mit anderen teilen, oder? Wir zeigen dir, wie du das mit GitHub und der Anwendungs-Hosting-Plattform von Kinsta machen kannst.<\/p>\n Es gibt verschiedene M\u00f6glichkeiten, Codes auf GitHub zu pushen, aber f\u00fcr diesen Leitfaden wollen wir Git verwenden. Git ist in der Softwareentwicklung weit verbreitet<\/a>, weil es eine zuverl\u00e4ssige und effiziente Methode ist, um Code\u00e4nderungen zu verwalten, an Projekten zusammenzuarbeiten und den Versionsverlauf zu pflegen.<\/p>\n Du kannst deinen Code mit den folgenden Schritten auf GitHub hochladen:<\/p>\n Zuerst erstellst du ein neues Repository (wie einen lokalen Ordner, in dem du deinen Code speicherst). Dazu meldest du dich in deinem GitHub-Konto an, klickst auf das +<\/strong> in der oberen rechten Ecke des Bildschirms und w\u00e4hlst aus dem Dropdown-Men\u00fc die Option Neues Repository<\/strong>, wie in der Abbildung unten zu sehen.<\/p>\n Im n\u00e4chsten Schritt gibst du deinem Repository einen Namen, f\u00fcgst eine Beschreibung hinzu (optional) und w\u00e4hlst aus, ob dein Repository \u00f6ffentlich oder privat sein soll. Klicke dann auf Repository erstellen<\/strong>. Jetzt kannst du deinen Code in das neue GitHub-Repository pushen<\/a>.<\/p>\n Alles, was du brauchst, um deinen Code mit Git zu pushen, ist die Repository-URL, die du auf der Hauptseite des Repositorys, unter der Schaltfl\u00e4che Klonen oder Herunterladen<\/strong> oder in den Schritten findest, die nach der Erstellung eines Repositorys angezeigt werden.<\/p>\n Du kannst dich darauf vorbereiten, deinen Code zu pushen, indem du dein Terminal oder die Eingabeaufforderung \u00f6ffnest und zu dem Verzeichnis navigierst, das dein Projekt enth\u00e4lt. Verwende den folgenden Befehl, um ein lokales Git-Repository zu initialisieren:<\/p>\n F\u00fcge deinen Code mit folgendem Befehl zum lokalen Git-Repository hinzu:<\/p>\n Der obige Befehl f\u00fcgt alle Dateien im aktuellen Verzeichnis und seinen Unterverzeichnissen zum neuen Git-Repository hinzu. Jetzt kannst du deine \u00c4nderungen mit dem folgenden Befehl \u00fcbertragen:<\/p>\n Hinweis:<\/strong> Du kannst „my first commit“ durch deine eigene kurze Nachricht ersetzen, in der du die \u00c4nderungen beschreibst, die du vorgenommen hast.<\/p>\n Zum Schluss kannst du deinen Code mit den folgenden Befehlen auf GitHub ver\u00f6ffentlichen:<\/p>\n Hinweis:<\/strong> Ersetze „[repository URL]“ durch die URL deines eigenen GitHub-Repositorys.<\/p>\n Sobald du diese Schritte abgeschlossen hast, wird dein Code auf GitHub ver\u00f6ffentlicht und ist \u00fcber die URL deines Projektarchivs zug\u00e4nglich. Jetzt kannst du dein Repository auf Kinsta bereitstellen.<\/p>\n Das Deployment auf Kinsta dauert nur wenige Minuten. Beginne im My Kinsta-Dashboard<\/a>, um dich anzumelden oder dein Konto zu erstellen.<\/p>\n Anschlie\u00dfend autorisierst du Kinsta auf GitHub<\/a> in diesen kurzen Schritten:<\/p>\n Es erscheint ein Modal, in dem du das Repository ausw\u00e4hlen kannst, das du bereitstellen m\u00f6chtest.<\/p>\n Wenn du mehrere Zweige in deinem Repository hast, kannst du denjenigen ausw\u00e4hlen, den du bereitstellen m\u00f6chtest. Du kannst der Anwendung auch einen Namen geben. Vergewissere dich, dass du einen Standort f\u00fcr das Rechenzentrum<\/a> unter 24 ausw\u00e4hlst, dann erkennt Kinsta automatisch einen Startbefehl.<\/p>\n Jetzt beginnt die Bereitstellung deiner Anwendung. Innerhalb weniger Minuten erh\u00e4ltst du einen Link, \u00fcber den du auf die bereitgestellte Version deiner Anwendung zugreifen kannst. In diesem Fall lautet er: https:\/\/kinsta-developer-portfolio-ir8w8.kinsta.app\/<\/strong><\/p>\n Hinweis:<\/strong> Die automatische Bereitstellung wurde aktiviert, so dass Kinsta deine Anwendung automatisch neu bereitstellt, wenn du \u00c4nderungen an deiner Codebasis vornimmst und sie auf GitHub ver\u00f6ffentlichst.<\/p>\nAnforderungen\/Voraussetzungen<\/h2>\n
\n
Warum Next.js?<\/h2>\n
\n
\n
\n
So richtest du deine Next.js-Entwicklungsumgebung ein<\/h2>\n
npx<\/code> kannst du npm-Pakete ausf\u00fchren, ohne sie global auf deinem System installieren zu m\u00fcssen. Wenn das erledigt ist, kannst du ein Next.js-Projekt erstellen, indem du den folgenden Befehl ausf\u00fchrst:<\/p>\nnpx create-next-app@latest my-portfolio<\/code><\/pre>\nnpm run dev<\/code> ausf\u00fchren, um deine App auf localhost:3000<\/strong> verf\u00fcgbar zu machen.<\/p>\n![\"Der](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/nextjs-installation-with-options.jpg\")
npx<\/code> erstellst, wird automatisch eine Ordnerstruktur mit den folgenden Hauptverzeichnissen angelegt:<\/p>\n\n
Wie man ein responsives Entwicklerportfolio mit Next.js erstellt<\/h2>\n
\n
Definieren von Layouts in 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> Hash f\u00fcr diese Version einf\u00fcgen.<\/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![\"Bild](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/layout-component.jpg\")
Portfolio-Komponenten erstellen<\/h3>\n
npm run dev<\/code> startest.<\/p>\nDie Hero-Komponente<\/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> Tags verwendet wird, um das Bild einzuf\u00fcgen, da sie eine automatische Bildoptimierung, Gr\u00f6\u00dfen\u00e4nderung und vieles mehr erm\u00f6glicht.<\/p>\n![\"Next.js](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/hero-component.jpg\")
Die \u00dcber-Komponente<\/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![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/about-component.jpg\")
Die Skills-Komponente<\/h4>\n
![\"Skills-Komponente\"](\"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>\nDie Projektkomponente<\/h4>\n
![\"Next.js](\"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-Methode verwenden, um nach dem Import in die Projektkomponente eine Schleife durch das Daten-Array zu ziehen.<\/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>\nDie Kontaktkomponente<\/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> Tag ein, damit die Schaltfl\u00e4che eine E-Mail-Anwendung mit einer an dich gerichteten Nachricht \u00f6ffnet.<\/p>\n![\"Kontaktkomponente](\"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> \u00fcbernommen. Bevor du eine Anwendung in die Produktion \u00fcberf\u00fchrst, die die Next.js Image-Komponente verwendet, solltest du unbedingt sharp<\/a> installieren. Dazu gehst du in dein Terminal, stellst sicher, dass du dich im Verzeichnis deines Projekts befindest, und f\u00fchrst dann den folgenden Befehl aus:<\/p>\nnpm i sharp<\/code><\/pre>\nNext.js-Anwendung auf Kinsta bereitstellen<\/h2>\n
Push deinen Code auf GitHub<\/h3>\n
![\"Erstelle](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/Create-a-new-repository-on-GitHub.jpg\")
![\"Zugriff](\"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>\nDein Portfolio auf Kinsta bereitstellen<\/h3>\n
\n
![\"Erstelle](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/host-application-on-kinsta.jpg\")
![\"Automatisch](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/deploying_application_to_kinsta.gif\")
![\"Bereitstellungslink](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/deployemnt-link-on-kinsta.jpg\")