H\u00e4r \u00e4r en live-demo av den utvecklar-portfolio<\/a>\u00a0som du kommer att bygga med Next.js.<\/p>\n Du kan f\u00e5 \u00e5tkomst till detta projekts GitHub-kodf\u00f6rr\u00e5d<\/a> om du vill ta en n\u00e4rmare titt, eller anv\u00e4nda denna portfolio starter project<\/a> mall genom att v\u00e4lja Anv\u00e4nd denna mall<\/strong> > Skapa ett nytt kodf\u00f6rr\u00e5d<\/strong> \u2014 detta kommer att kopiera startkoden till ett nytt arkiv. Startprojektet inneh\u00e5ller grundl\u00e4ggande koder som stilar, en Font Awesome CDN-l\u00e4nk, bilder och grundl\u00e4ggande struktur.<\/p>\n Det h\u00e4r \u00e4r en handledning av typen ”h\u00e4ng med”. Det blir l\u00e4ttare f\u00f6r dig att koda medan du l\u00e4ser om du har:<\/p>\n Next.js<\/a> \u00e4r ett React-baserat JavaScript-biblioteksramverk<\/a> med \u00f6ppen k\u00e4llkod. Det kan dessutom anv\u00e4ndas f\u00f6r ett brett spektrum av webbutvecklings-projekt eftersom det f\u00f6renklar byggandet av renderade och statiska applikationer p\u00e5 serversidan. Next.js effektiviserar processen genom att utnyttja de b\u00e4sta funktionerna i React och optimera renderings-prestanda f\u00f6r f\u00f6rb\u00e4ttrad anv\u00e4ndarupplevelse. N\u00e5gra av de vanligaste anv\u00e4ndningsomr\u00e5dena f\u00f6r Next.js \u00e4r f\u00f6ljande:<\/p>\n F\u00f6r att s\u00e4tta upp en utvecklingsmilj\u00f6 f\u00f6r Next.js s\u00e5 ska du f\u00f6rst installera Node.js<\/a> p\u00e5 din dator. Du kommer n\u00e4mligen att anv\u00e4nda kommandot En prompt kommer sedan att dyka upp och be dig att bekr\u00e4fta n\u00e5gra ytterligare beroenden. D\u00e4refter s\u00e5 kan du k\u00f6ra N\u00e4r du skapar ett Next.js-projekt med kommandot Du kan dessutom generera andra kataloger och filer beroende p\u00e5 den specifika konfigurationen och funktionerna. Detta \u00e4r dock de centrala katalogerna i ett grundl\u00e4ggande Next.js-projekt.<\/p>\n I den h\u00e4r handledningen s\u00e5 kommer allt som vi bygger att visas p\u00e5 index-sidan (v\u00e5r webbsida med en sida). Du kommer dessutom att inkludera komponenter f\u00f6r olika sektioner som hj\u00e4lten, om, projekt och andra.<\/p>\n En portfolio best\u00e5r vanligtvis av komponenter som dessa:<\/p>\n Komponenterna Navbar och Footer f\u00f6rv\u00e4ntas visas p\u00e5 alla sidor om portfolion har mer \u00e4n en sida. Detta kan exempelvis uppn\u00e5s i Next.js genom att definiera en layout.<\/p>\n I Next.js s\u00e5 \u00e4r en layout ett s\u00e4tt att definiera en konsekvent struktur f\u00f6r de komponenter som visas p\u00e5 varje sida p\u00e5 en webbplats. Layouten inkluderar vanligtvis element som exempelvis en rubrik, en navigeringsmeny och en sidfot som visas p\u00e5 alla sidor p\u00e5 webbplatsen.<\/p>\n B\u00f6rja med att skapa en komponentmapp i mappen src<\/strong> (source) i ditt Next.js-projekt. Skapa sedan komponenterna Navbar och Footer som kommer att anv\u00e4ndas i komponenten Layout.<\/p>\n H\u00e4r \u00e4r Navbar-komponenten i Navbar.jsx<\/strong>:<\/p>\n H\u00e4r \u00e4r komponenten Footer i Footer.jsx<\/strong>:<\/p>\n Observera:<\/strong> F\u00f6r att Font Awesome-ikoner ska fungera s\u00e5 m\u00e5ste du antingen installera Font Awesome i ditt projekt eller anv\u00e4nda dess CDN. Du kan l\u00e4gga till CDN-l\u00e4nken i din _document.js<\/strong>-fil s\u00e5 h\u00e4r:<\/p>\n Obs:<\/strong> Om du l\u00e4nkar in en annan version av Font Awesome via CDN s\u00e5 m\u00e5ste du byta in ovanf\u00f6r l\u00e4mplig N\u00e4r du har skapat alla n\u00f6dv\u00e4ndiga komponenter f\u00f6r din layout s\u00e5 kan du sedan skapa sj\u00e4lva Layout-komponenten. L\u00e4gg d\u00e4refter till den h\u00e4r komponenten p\u00e5 dina sidor genom att omsluta sidans inneh\u00e5ll i den.<\/p>\n Layoutkomponenten kommer sedan att acceptera en <code>children<\/code> prop. Som ett resultat s\u00e5 kan du f\u00e5 tillg\u00e5ng till inneh\u00e5llet i dina Next.js-sidor.<\/p>\n Nu har du lyckats att skapa Layout-komponenten som inneh\u00e5ller navigeringsf\u00e4ltet och sidfoten tillsammans med children-propsen som \u00e4r korrekt placerade. Du kan d\u00e4refter l\u00e4gga till Layout-komponenten p\u00e5 dina sidor genom att svepa in sidans inneh\u00e5ll i den. Detta g\u00f6rs i filen _app.js<\/strong>.<\/p>\n Nu har du skapat en layout f\u00f6r din utvecklar-portfolio. F\u00f6r den h\u00e4r portfolion s\u00e5 fokuserar vi mer p\u00e5 Next.js och hur du distribuerar din webbplats till Kinsta. Du kan allts\u00e5 kopiera stilarna i filen styles\/globals.css<\/a> till ditt eget projekt. Om du startar din portfolio-webbplats i utvecklings-l\u00e4ge s\u00e5 b\u00f6r du nu se din app-layout.<\/p>\n Nu \u00e4r det dags att ge din portfolio-webbplats ett l\u00e4mpligt inneh\u00e5ll.<\/p>\n Du kan nu skapa individuella komponenter f\u00f6r varje avsnitt i din utvecklares portfolio. Alla dessa komponenter kommer sedan att importeras till indexsidan i ditt Next.js-projekt. Som ett resultat s\u00e5 kan de visas n\u00e4r du startar ditt projekt med Komponenten Hero \u00e4r den f\u00f6rsta sektionen under navigeringsf\u00e4ltet. Huvudsyftet \u00e4r att f\u00e5nga anv\u00e4ndarens uppm\u00e4rksamhet och ge dem en k\u00e4nsla av vad webbplatsen eller applikationen handlar om.<\/p>\n I koden ovan s\u00e5 m\u00e4rker du att Next.js Image-komponenten<\/a> anv\u00e4nds ist\u00e4llet f\u00f6r HTML-taggen I komponenten About s\u00e5 m\u00e4rker du \u00e4ven att ett enkelt stycke f\u00f6r att s\u00e4ga lite om utvecklaren har lagts till. Det lades dessutom till n\u00e5gra sociala ikoner fr\u00e5n Font Awesome f\u00f6r att l\u00e4gga till sociala l\u00e4nkar.<\/p>\n S\u00e5 h\u00e4r ska Hero-komponenten se ut:<\/p>\n Du kan l\u00e4gga till mer inneh\u00e5ll till Hero-komponenten, \u00e4ndra stilarna i filen styles\/globals.css<\/strong> och dessutom \u00e5terskapa det h\u00e4r avsnittet p\u00e5 ditt eget s\u00e4tt.<\/p>\n Komponenten About \u00e4r avsedd att ge l\u00e4sare eller personer som bes\u00f6ker din portfolio mer information om dig i s\u00e5 m\u00e5nga stycken som du vill. Om du vill ber\u00e4tta mer om dig sj\u00e4lv s\u00e5 kan du skapa en s\u00e4rskild sida ”Om mig” och l\u00e4gga till en knapp i denna sektion f\u00f6r att l\u00e4sa mer om dig sj\u00e4lv.<\/p>\n Koden ovan inneh\u00e5ller tv\u00e5 stycken text om utvecklaren och en bild p\u00e5 utvecklaren. S\u00e5 h\u00e4r f\u00f6rv\u00e4ntas avsnittet Om se ut:<\/p>\n Du kan alltid finjustera stilarna f\u00f6r att l\u00e4gga till fler bilder och mycket mer.<\/p>\n Denna komponent \u00e4r avsedd att visa n\u00e5gra av utvecklarens mest anv\u00e4nda tekniker eller tekniker som utvecklaren har anv\u00e4nt tidigare.<\/p>\n Du kan g\u00f6ra detta enklare att underh\u00e5lla genom att skapa en matris i en extern fil och sedan importera den till f\u00e4rdighets-komponenten. Du kan sedan slinga dig igenom i st\u00e4llet f\u00f6r att duplicera en liknande kod.<\/p>\n I koden ovan s\u00e5 skapas ett kort f\u00f6r varje f\u00e4rdighet. Varje kort kommer sedan att inneh\u00e5lla teknik-ikonen fr\u00e5n font-awesome och teknik-namnet. Du kan dessutom l\u00e4gga till fler stilar och finjustera koden f\u00f6r att g\u00f6ra den mer attraktiv och unik.<\/p>\n Projects-komponenten \u00e4r en av de viktiga sektionerna i en utvecklares portfolio. Projekten ger konkreta bevis p\u00e5 en utvecklares f\u00e4rdigheter och f\u00f6rm\u00e5gor och visar dessutom hans eller hennes f\u00f6rm\u00e5ga att till\u00e4mpa sina kunskaper p\u00e5 verkliga problem.<\/p>\n Varje projekt kommer att inneh\u00e5lla en kort beskrivning av projektet, en l\u00e4nk till k\u00e4llkoden (vi anv\u00e4nder GitHub<\/a>-l\u00e4nkar h\u00e4r) och andra detaljer som du vill l\u00e4gga till.<\/p>\n Du kan skapa en matris som inkluderar varje projekts detaljer och sedan importera den till din komponent f\u00f6r att undvika h\u00e5rd-kodning av dem.<\/p>\n L\u00e5t oss skapa en data.js<\/strong>-fil f\u00f6r att lagra matrisen med projektdata. Du kan lagra den h\u00e4r filen i komponent-mappen eller i mappen pages\/api<\/strong>. F\u00f6r den h\u00e4r demonstrationen s\u00e5 kommer jag att lagra den i komponent-mappen. Den h\u00e4r matrisen kommer att inneh\u00e5lla ett objekt f\u00f6r varje projekt, och objektet kommer att inneh\u00e5lla projektets namn, beskrivning och GitHub-l\u00e4nk.<\/p>\n Du kan nu skapa en projekt-komponent f\u00f6r att anv\u00e4nda dessa data genom att enkelt slinga dig igenom. Det fungerar med vilken JavaScript-iterationsmetod som helst. F\u00f6r den h\u00e4r handledningen s\u00e5 kan du dock anv\u00e4nda JavaScript I koden ovan s\u00e5 har du framg\u00e5ngsrikt undvikit upprepning genom att loopa genom matrisen f\u00f6r att mata ut alla projekt i Projects-komponenten. Som ett resultat s\u00e5 blir det enkelt att underh\u00e5lla och l\u00e4gga till fler projekt.<\/p>\n En anledning till att skapa en utvecklar-portfolio \u00e4r att potentiella kunder ska kunna kontakta dig. Ett s\u00e4tt \u00e4r exempelvis att skicka ett e-postmeddelanden till dig, vilket vi kommer att underl\u00e4tta i komponenten Contact.<\/p>\n Placera din e-postadress i Du har nu skapat alla komponenter f\u00f6r din portfolio-till\u00e4mpning. N\u00e4sta steg \u00e4r att l\u00e4gga till dem p\u00e5 din indexsida. Navigera till filen pages\/index.js<\/strong> – som skapas som standard – och ers\u00e4tt koden med f\u00f6ljande.<\/p>\n N\u00e4r du nu k\u00f6r din applikation s\u00e5 kommer du att m\u00e4rka att en fullst\u00e4ndig portfolio-webbplats<\/a> har skapats. Slutligen, innan du distribuerar din applikation, s\u00e5 ska vi installera ett beroende. En f\u00f6rdel med att anv\u00e4nda Next.js \u00e4r de m\u00e5nga funktioner som erbjuds. Detta inkluderar exempelvis filbaserad routing, bildoptimering och mycket mer.<\/p>\n Bildoptimering hanteras med Next.js-komponenten Du kan nu distribuera din applikation s\u00e5 kommer bilderna att fungera korrekt med den fullst\u00e4ndiga optimeringen som Next.js tillhandah\u00e5ller.<\/p>\n N\u00e4r du \u00e4r n\u00f6jd med din portfolio som visar upp ditt b\u00e4sta utvecklingsarbete och viktig information s\u00e5 vill du f\u00f6rmodligen dela den med andra, eller hur? L\u00e5t oss se hur du g\u00f6r detta med GitHub och Kinsta’s plattform f\u00f6r applikationshosting.<\/p>\n Det finns olika s\u00e4tt att pusha koder till GitHub. L\u00e5t oss dock anv\u00e4nda Git f\u00f6r den h\u00e4r handledningen. Git anv\u00e4nds ofta inom programvaruutveckling<\/a> eftersom det \u00e4r ett p\u00e5litligt och effektivt s\u00e4tt att hantera kod\u00e4ndringar, samarbeta i projekt och uppr\u00e4tth\u00e5lla versionshistorik.<\/p>\n Du kan ladda upp din kod till GitHub med hj\u00e4lp av f\u00f6ljande steg:<\/p>\n F\u00f6rst s\u00e5 skapar du ett nytt arkiv (precis som en lokal mapp f\u00f6r att lagra din kod). Du g\u00f6r detta genom att logga in p\u00e5 ditt GitHub-konto, klicka p\u00e5 +<\/strong>-knappen i det \u00f6vre h\u00f6gra h\u00f6rnet av sk\u00e4rmen och v\u00e4lja Nytt arkiv<\/strong> fr\u00e5n rullgardinsmenyn, som du ser i bilden nedan.<\/p>\n N\u00e4sta steg \u00e4r att ge ditt arkiv ett namn, l\u00e4gga till en beskrivning (valfritt) och v\u00e4lja om du vill att ditt arkiv ska vara offentligt eller privat. Klicka sedan p\u00e5 Skapa ett arkiv<\/strong>. Du kan nu skicka din kod till det nya GitHub-arkivet.<\/p>\n Allt som kr\u00e4vs f\u00f6r att pusha din kod med Git \u00e4r webbadressen till arkivet, som du hittar p\u00e5 arkivets huvudsida, under knappen Klona eller ladda ner<\/strong>. De visas dessutom i de steg som visas efter att du skapat ett arkiv.<\/p>\n Du kan f\u00f6rbereda dig f\u00f6r att pusha din kod genom att \u00f6ppna din terminal eller kommando-tolk och navigera till katalogen som inneh\u00e5ller ditt projekt. Anv\u00e4nd f\u00f6ljande kommando f\u00f6r att initiera ett lokalt Git-arkiv:<\/p>\n L\u00e4gg nu till din kod i det lokala Git-arkivet med f\u00f6ljande kommando:<\/p>\n Ovanst\u00e5ende kommando l\u00e4gger till alla filer i den aktuella katalogen och dess underkataloger till det nya Git-arkivet. Du kan sedan bekr\u00e4fta dina \u00e4ndringar med f\u00f6ljande kommando:<\/p>\n Obs:<\/strong> Du kan ers\u00e4tta ”my first commit” med ditt eget korta meddelande som beskriver de \u00e4ndringar som du har gjort.<\/p>\n Slutligen s\u00e5 kan du skicka din kod till GitHub med f\u00f6ljande kommandon:<\/p>\n Observera:<\/strong> Se till att du ers\u00e4tter ”[repository URL]” med webbadressen f\u00f6r ditt eget GitHub-arkiv.<\/p>\n N\u00e4r du har slutf\u00f6rt dessa steg s\u00e5 kommer din kod att skickas till GitHub och bli tillg\u00e4nglig via webbadressen f\u00f6r ditt arkiv. Du kan nu distribuera ditt arkiv till Kinsta.<\/p>\n Distribueringen till Kinsta sker p\u00e5 endast n\u00e5gra minuter. B\u00f6rja med att logga in eller skapa ditt konto p\u00e5 instrumentpanelen MyKinsta<\/a>.<\/p>\n D\u00e4refter s\u00e5 godk\u00e4nner du Kinsta p\u00e5 GitHub<\/a> i dessa snabba steg:<\/p>\n En modal visas d\u00e4r du kan v\u00e4lja det arkiv som du vill distribuera.<\/p>\n Om du har flera grenar i ditt arkiv s\u00e5 kan du v\u00e4lja den gren som du vill distribuera. Du kan dessutom ge applikationen ett namn. Se till att du v\u00e4ljer en datacenterplats<\/a> bland de tillg\u00e4ngliga 24. D\u00e4refter s\u00e5 kommer Kinsta automatiskt att uppt\u00e4cka ett startkommando.<\/p>\n Vid den h\u00e4r tidpunkten s\u00e5 kommer din applikation att b\u00f6rja distribueras. Inom n\u00e5gra minuter s\u00e5 kommer en l\u00e4nk att tillhandah\u00e5llas f\u00f6r att komma \u00e5t den distribuerade versionen av din applikation. I det h\u00e4r fallet s\u00e5 \u00e4r l\u00e4nken: https:\/\/kinsta-developer-portfolio-ir8w8.kinsta.app\/<\/strong><\/p>\n Obs:<\/strong> Automatisk distribuering var aktiverad, s\u00e5 Kinsta distribuerar automatiskt om din applikation n\u00e4r du g\u00f6r \u00e4ndringar i din kodbas och skickar den till GitHub.<\/p>\n\n Det finns flera sk\u00e4l till varf\u00f6r utvecklare b\u00f6r \u00f6verv\u00e4ga att anv\u00e4nda Next.js f\u00f6r sina webbprojekt. Det skapar exempelvis en optimerad prestanda direkt fr\u00e5n start, med funktioner som pre-fetching och koduppdelning som bidrar till att minska sidladdningstiderna. Ut\u00f6ver detta s\u00e5 skapas dessutom en v\u00e4lbekant utvecklingsupplevelse f\u00f6r React-utvecklare, med st\u00f6d f\u00f6r popul\u00e4ra verktyg som stiliserade komponenter och de senaste React-funktionerna.<\/p>\n Kinsta erbjuder st\u00f6d f\u00f6r olika distribuerings-alternativ f\u00f6r Next.js, inklusive traditionell serverbaserad hosting och moderna serverl\u00f6sa plattformar. Som ett resultat s\u00e5 blir det m\u00f6jligt f\u00f6r utvecklare att v\u00e4lja det distribuerings-alternativ som passar b\u00e4st f\u00f6r deras behov och samtidigt dra nytta av ramverkets prestandaoptimeringar och andra f\u00f6rdelar.<\/p>\n I den h\u00e4r handledningen s\u00e5 har du steg f\u00f6r steg l\u00e4rt dig hur du bygger en responsiv portfolio-sida med Next.js och hur du distribuerar den till Kinsta.<\/p>\n Du kan prova Kinsta’s Applikationshosting kostnadsfritt.<\/a> Om du gillar den s\u00e5 kan du v\u00e4lja v\u00e5r Hobby Niv\u00e5<\/a>-plan som b\u00f6rjar p\u00e5 7 dollar\/m\u00e5nad<\/strong>.<\/p>\n Nu \u00e4r det din tur att utmana dig sj\u00e4lv: l\u00e4gg till fler funktioner p\u00e5 din nyutvecklade portfolio-webbplats! H\u00e4r \u00e4r n\u00e5gra id\u00e9er f\u00f6r att f\u00e5 din kreativa juice att fl\u00f6da: l\u00e4gg till fler sidor med detaljerad information, integrera en blogg med MDX, implementera lite animation. Dela med dig av dina projekt och erfarenheter i kommentarerna nedan!<\/p>\n","protected":false},"excerpt":{"rendered":" En utvecklar-portfolio \u00e4r en samling arbetsprover och projekt som visar upp dina f\u00e4rdigheter och erfarenheter. En stark portfolio skiljer dig exempelvis fr\u00e5n andra kandidater n\u00e4r du …<\/p>\n","protected":false},"author":287,"featured_media":51052,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[783],"class_list":["post-51051","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-javascript-ramverk"],"yoast_head":"\nKrav\/f\u00f6ruts\u00e4ttningar<\/h2>\n
\n
Varf\u00f6r Next.js?<\/h2>\n
\n
\n
\n
S\u00e5 h\u00e4r st\u00e4ller du in din Next.js-utvecklingsmilj\u00f6<\/h2>\n
npx<\/code> f\u00f6r att k\u00f6ra npm-paket utan att beh\u00f6va installera dem globalt p\u00e5 ditt system. N\u00e4r detta \u00e4r klart s\u00e5 kan du sedan skapa ett Next.js-projekt genom att d\u00e4refter k\u00f6ra f\u00f6ljande kommando:<\/p>\nnpx create-next-app@latest my-portfolio<\/code><\/pre>\nnpm run dev<\/code> f\u00f6r att g\u00f6ra din app tillg\u00e4nglig p\u00e5 localhost:3000<\/strong>.<\/p>\n![\"Skapa](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/nextjs-installation-with-options.jpg\")
npx<\/code> s\u00e5 skapas en mappstruktur automatiskt med f\u00f6ljande huvudkataloger:<\/p>\n\n
Hur man bygger en responsiv utvecklar-portfolio med Next.js<\/h2>\n
\n
Definiera layouter i 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>\nL\u00e4gg till CDN-l\u00e4nken<\/h3>\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\u00f6r den versionen.<\/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>\nL\u00e4gg till Layout-komponenten<\/h3>\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![\"Komponent](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/layout-component.jpg\")
Att bygga portfolio-komponenter<\/h3>\n
npm run dev<\/code>.<\/p>\nKomponenten 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>\nNext.js Image-komponenten anv\u00e4nds ist\u00e4llet f\u00f6r HTML-taggen<\/h3>\n
img<\/code> f\u00f6r att l\u00e4gga till bilden. Den m\u00f6jligg\u00f6r n\u00e4mligen automatisk bildoptimering, storleks\u00e4ndring och mycket annat.<\/p>\n![\"Hero-komponenten\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/hero-component.jpg\")
Komponenten 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![\"Komponenten](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/about-component.jpg\")
Komponenten Skills<\/h4>\n
![\"\"<yoastmark\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/skills-component.jpg\")
<\/p>\n\/\/ 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>\nEtt kort f\u00f6r varje f\u00e4rdighet<\/h3>\n
Projects-komponenten<\/h4>\n
![\"Projects-komponenten\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/projects-component.jpg\")
Skapa en data.js-fil<\/h3>\n
\/\/ 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>\nSkapa en projekt-komponent<\/h3>\n
map()<\/code> matris-metoden f\u00f6r att slinga dig genom data-matrisen efter att du har importerat den till projekt-komponenten.<\/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>\nContact-komponenten<\/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>-taggen s\u00e5 att knappen startar ett e-postprogram med ett meddelande till dig.<\/p>\n![\"Contact-komponenten\"](\"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>. Innan du distribuerar en applikation som anv\u00e4nder Next.js Image-komponenten s\u00e5 rekommenderas det starkt att du installerar sharp<\/a>. Du kan g\u00f6ra detta genom att navigera till din terminal, se till att du befinner dig i projekt-katalogen och sedan k\u00f6ra f\u00f6ljande kommando:<\/p>\nnpm i sharp<\/code><\/pre>\nS\u00e5 h\u00e4r distribuerar du Next.js-applikationen till Kinsta<\/h2>\n
Skicka din kod till GitHub<\/h3>\n
![\"Skapa](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/Create-a-new-repository-on-GitHub.jpg\")
![\"F\u00e5](\"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>\nDistribuera din portfolio till Kinsta<\/h3>\n
\n
![\"Skapa](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/host-application-on-kinsta.jpg\")
![\"Automatisk](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/deploying_application_to_kinsta.gif\")
![\"L\u00e4nk](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/deployemnt-link-on-kinsta.jpg\")
Sammanfattning<\/h2>\n