Her er en live-demo af den udviklerportef\u00f8lje<\/a>, du skal opbygge med Next.js.<\/p>\n Du kan f\u00e5 adgang til dette projekts GitHub-lager<\/a>, hvis du gerne vil se n\u00e6rmere, eller du kan bruge denne portef\u00f8lje starter projektskabelon<\/a> ved at v\u00e6lge Brug denne skabelon<\/strong> > Opret et nyt repository<\/strong> \u2013 dette vil kopiere startkoden til et nyt lager. Startprojektet indeholder grundl\u00e6ggende koder som stilarterne, et Font Awesome CDN-link, billeder og grundl\u00e6ggende struktur.<\/p>\n Dette er en “follow-along”-type tutorial. Det vil v\u00e6re lettere for dig at kode med, hvis du har:<\/p>\n Next.js<\/a> er et React-baseret open source JavaScript-biblioteksframework<\/a>, der kan bruges til en lang r\u00e6kke webudviklingsprojekter, fordi det forenkler opbygningen af server-side renderede og statiske applikationer. Det str\u00f8mliner processen ved at udnytte de bedste funktioner i React og optimere renderingsydelsen for at forbedre brugeroplevelsen. Nogle af de mest almindelige brugssituationer for Next.js omfatter bl.a:<\/p>\n For at ops\u00e6tte et udviklingsmilj\u00f8 for Next.js skal du f\u00f8rst installere Node.js<\/a> p\u00e5 din computer, fordi du vil bruge kommandoen Der vises en prompt, som beder dig om at bekr\u00e6fte nogle yderligere afh\u00e6ngigheder. Derefter kan du k\u00f8re N\u00e5r du opretter et Next.js-projekt ved hj\u00e6lp af kommandoen Der kan ogs\u00e5 genereres andre mapper og filer afh\u00e6ngigt af den specifikke konfiguration og funktioner, men dette er de centrale mapper i et grundl\u00e6ggende Next.js-projekt.<\/p>\n I denne tutorial vil alt, hvad vi bygger, blive vist p\u00e5 indekssiden (vores websted med \u00e9n side), og du vil inkludere komponenter til forskellige sektioner som f.eks. hero, om, projekter og andre.<\/p>\n En portfolio best\u00e5r typisk af komponenter som disse:<\/p>\n Navbar- og Footer-komponenterne forventes at blive vist p\u00e5 alle sider, hvis portef\u00f8ljen har mere end \u00e9n side. Dette kan opn\u00e5s i Next.js ved at definere et layout.<\/p>\n I Next.js er et layout en m\u00e5de at definere en ensartet struktur for de komponenter, der vises p\u00e5 alle sider p\u00e5 et websted. Layoutet omfatter normalt elementer som f.eks. en header, en navigationsmenu og en footer, der vises p\u00e5 tv\u00e6rs af alle sider p\u00e5 webstedet.<\/p>\n Start med at oprette en mappe med komponenter i mappen src<\/strong> (source) i dit Next.js-projekt. Derefter skal du oprette komponenterne Navbar og Footer, som skal bruges i Layout-komponenten.<\/p>\n Her er Navbar-komponenten i Navbar.jsx<\/strong>:<\/p>\n Her er Footer-komponenten i Footer.jsx:<\/strong><\/p>\n Bem\u00e6rk<\/strong>: For at Font Awesome-ikonerne kan fungere, skal du enten installere Font Awesome i dit projekt eller bruge dets CDN. Du kan tilf\u00f8je CDN-linket til din _document.js<\/strong>-fil p\u00e5 denne m\u00e5de:<\/p>\n Bem\u00e6rk:<\/strong> Hvis du linker til en anden version af Font Awesome via CDN’et, skal du bytte ind over den relevante N\u00e5r du har oprettet alle de n\u00f8dvendige komponenter til dit layout, kan du oprette selve Layout-komponenten og tilf\u00f8je denne komponent til dine sider ved at indpakke dit sideindhold i den.<\/p>\n Layout-komponenten vil acceptere en <code>children<\/code>-prop, s\u00e5 du kan f\u00e5 adgang til indholdet af dine Next.js-sider.<\/p>\n P\u00e5 dette tidspunkt har du med succes oprettet Layout-komponenten, som indeholder Navbar og Footer sammen med children-prop’erne, der er placeret korrekt. Du kan nu tilf\u00f8je Layout-komponenten til dine sider ved at indpakke sidens indhold i den. Dette g\u00f8res i filen _app.js<\/strong>.<\/p>\n Det er nu lykkedes dig at skabe et layout til din udviklerportef\u00f8lje. I denne portef\u00f8lje fokuserer vi mere p\u00e5 Next.js og p\u00e5, hvordan du udruller dit websted til Kinsta. S\u00e5 du kan kopiere stilene i filen styles\/globals.css<\/a> til dit eget projekt. Hvis du starter dit portfoliowebsted i dev-mode, b\u00f8r du nu kunne se din app’s layout.<\/p>\n Nu er det tid til at give dit portf\u00f8ljewebsted det rette indhold.<\/p>\n Du kan nu oprette individuelle komponenter til hver sektion af din udviklers portef\u00f8lje. Alle disse komponenter vil blive importeret til indekssiden i dit Next.js-projekt, s\u00e5 de kan vises, n\u00e5r du starter dit projekt med Hero-komponenten er den f\u00f8rste sektion under navigationslinjen, hvis hovedform\u00e5l er at fange brugerens opm\u00e6rksomhed og give dem en fornemmelse af, hvad webstedet eller applikationen handler om.<\/p>\n I koden ovenfor vil du bem\u00e6rke, at Next.js Image-komponenten<\/a> bruges i stedet for HTML-tagget I About-komponenten vil du ogs\u00e5 bem\u00e6rke, at der er tilf\u00f8jet et simpelt afsnit for at sige lidt om udvikleren sammen med nogle sociale ikoner fra Font Awesome for at tilf\u00f8je sociale links.<\/p>\n S\u00e5dan skal Hero-komponenten se ud:<\/p>\n Du kan tilf\u00f8je mere indhold til Hero-komponenten, justere stilene i filen styles\/globals.css<\/strong> eller endda genskabe dette afsnit p\u00e5 din egen m\u00e5de.<\/p>\n Om-komponenten er beregnet til at fort\u00e6lle l\u00e6sere eller folk, der bes\u00f8ger din portef\u00f8lje, flere oplysninger om dig i s\u00e5 mange afsnit, som du \u00f8nsker. Hvis du \u00f8nsker at fort\u00e6lle mere om dig selv, kan du oprette en dedikeret “Om mig”-side og tilf\u00f8je en knap p\u00e5 dette afsnit for at l\u00e6se mere om dig selv.<\/p>\n Koden ovenfor indeholder to afsnit med tekst om udvikleren og et billede af udvikleren. S\u00e5dan forventes det, at afsnittet Om vil se ud:<\/p>\n Du kan altid justere stilene for at tilf\u00f8je flere billeder og meget mere.<\/p>\n Komponentens f\u00e6rdigheder er beregnet til at vise nogle af udviklerens mest anvendte teknologier eller teknologier, som udvikleren tidligere har brugt.<\/p>\n Du kan g\u00f8re dette lettere at vedligeholde ved at oprette et array i en ekstern fil og derefter importere det i f\u00e6rdighedskomponenten, s\u00e5 du kan l\u00f8be igennem i stedet for at duplikerer lignende kode.<\/p>\n I koden ovenfor oprettes der et kort for hver f\u00e6rdighed, og hvert kort vil indeholde teknologi-ikonet fra font-awesome og teknologinavnet. Du kan ogs\u00e5 tilf\u00f8je flere stilarter og justere koden for at g\u00f8re den mere attraktiv og unik.<\/p>\n Projektkomponenten er en af de vigtige sektioner i en udviklers portef\u00f8lje. Projekter giver h\u00e5ndgribelige beviser for en udviklers f\u00e6rdigheder og evner og viser deres evne til at anvende deres viden p\u00e5 virkelige problemer.<\/p>\n Hvert projekt skal indeholde en kort beskrivelse af projektet, et link til dets kildekode (vi bruger GitHub<\/a>-link her) og eventuelle andre oplysninger, du \u00f8nsker at tilf\u00f8je.<\/p>\n Du kan oprette et array til at indeholde hvert projekts detaljer og derefter importere det i din komponent for at undg\u00e5 hard-coding af dem.<\/p>\n Lad os oprette en data.js<\/strong>-fil til at gemme arrayet med projektdata. Du kan gemme denne fil i komponentmappen eller i mappen pages\/api<\/strong>. I denne demo gemmer jeg den i komponentmappen. Dette array vil indeholde et objekt for hvert projekt, og objektet vil indeholde projektets navn, beskrivelse og GitHub-link.<\/p>\n Du kan nu oprette en projektkomponent for at udnytte disse data ved at sl\u00f8jfe let igennem. Du kan bruge en hvilken som helst JavaScript-iterationsmetode, men i denne vejledning kan du bruge JavaScript I koden ovenfor har du med succes undg\u00e5et gentagelser ved at l\u00f8kke gennem arrayet for at outputte alle projekter i Projects-komponenten, hvilket g\u00f8r det nemt at vedligeholde og tilf\u00f8je flere projekter.<\/p>\n En af grundene til at oprette en udviklers portef\u00f8lje er, at potentielle kunder kan kontakte dig. En m\u00e5de ville v\u00e6re, at folk kan sende dig en e-mail, hvilket vi vil g\u00f8re det lettere for dem i denne Contact-komponent.<\/p>\n Placer din e-mail-adresse i Du har nu oprettet alle komponenterne til din portef\u00f8ljeapplikation. Det n\u00e6ste skridt er at tilf\u00f8je dem til din indeksside. Naviger til filen pages\/index.js<\/strong> – som oprettes som standard – og erstat dens kode med f\u00f8lgende.<\/p>\n N\u00e5r du nu k\u00f8rer din applikation, vil du bem\u00e6rke, at der er blevet oprettet et komplet portfoliowebsted<\/a>. Lad os endelig installere en afh\u00e6ngighed, f\u00f8r vi udruller din applikation. En af fordelene ved at bruge Next.js er de mange funktioner, som den bringer til bordet, s\u00e5som filbaseret routing, billedeoptimering og meget mere.<\/p>\n Billedoptimering h\u00e5ndteres med Next.js Du kan nu implementere din applikation, og billederne vil fungere korrekt med den fulde optimering, som Next.js tilbyder.<\/p>\n N\u00e5r du er tilfreds med din portef\u00f8lje, der viser dit bedste udviklingsarbejde og vigtige oplysninger, vil du sandsynligvis gerne dele den med andre, ikke sandt? Lad os se, hvordan du g\u00f8r det ved hj\u00e6lp af GitHub og Kinsta’s Applikation Hosting-platform.<\/p>\n Der er forskellige m\u00e5der at skubbe koder til GitHub p\u00e5, men lad os bruge Git i denne vejledning. Git er meget udbredt inden for softwareudvikling<\/a>, fordi det giver en p\u00e5lidelig og effektiv m\u00e5de at administrere kode\u00e6ndringer, samarbejde om projekter og vedligeholde versionshistorik.<\/p>\n Du kan uploade din kode til GitHub ved hj\u00e6lp af f\u00f8lgende trin:<\/p>\n F\u00f8rst skal du oprette et nyt repository (ligesom en lokal mappe til at gemme din kode). Det kan du g\u00f8re ved at logge ind p\u00e5 din GitHub-konto, klikke p\u00e5 knappen +<\/strong> i \u00f8verste h\u00f8jre hj\u00f8rne af sk\u00e6rmen og v\u00e6lge New repository<\/strong> fra dropdown-menuen, som det ses p\u00e5 billedet nedenfor.<\/p>\n Det n\u00e6ste trin vil v\u00e6re at give dit repository et navn, tilf\u00f8je en beskrivelse (valgfrit) og v\u00e6lge, om du \u00f8nsker, at dit repository skal v\u00e6re offentligt eller privat. Klik derefter p\u00e5 Create repository (Opret repository)<\/strong>. Du kan nu skubbe din kode<\/a> til det nye GitHub-repository.<\/p>\n Det eneste, der er n\u00f8dvendigt for at skubbe din kode med Git, er repository-URL’en, som du kan finde p\u00e5 repositoryets hovedside, under knappen Clone eller download<\/strong> eller i de trin, der vises efter oprettelse af et repository.<\/p>\n Du kan forberede dig p\u00e5 at skubbe din kode ved at \u00e5bne din terminal eller command prompt og navigere til den mappe, der indeholder dit projekt. Brug f\u00f8lgende kommando til at initialisere et lokalt Git-repositorium:<\/p>\n Tilf\u00f8j nu din kode til det lokale Git-repositorium ved hj\u00e6lp af f\u00f8lgende kommando:<\/p>\n Ovenst\u00e5ende kommando tilf\u00f8jer alle filer i den aktuelle mappe og dens undermapper til det nye Git-repositorium: Ovenst\u00e5ende kommando tilf\u00f8jer alle filer i den aktuelle mappe og dens undermapper til det nye Git-repositorium. Du kan nu overf\u00f8re dine \u00e6ndringer ved hj\u00e6lp af f\u00f8lgende kommando:<\/p>\n Bem\u00e6rk:<\/strong> Du kan erstatte “my first commit” med din egen korte besked, der beskriver de \u00e6ndringer, du har foretaget.<\/p>\n Endelig kan du skubbe din kode til GitHub ved hj\u00e6lp af f\u00f8lgende kommandoer:<\/p>\n Bem\u00e6rk:<\/strong> S\u00f8rg for at erstatte “[repository URL]” med URL’en for dit eget GitHub-repositorium.<\/p>\n N\u00e5r du har gennemf\u00f8rt disse trin, vil din kode blive skubbet til GitHub og v\u00e6re tilg\u00e6ngelig via dit repositoriums URL. Du kan nu distribuere dit repository til Kinsta.<\/p>\n Deployment til Kinsta sker p\u00e5 f\u00e5 minutter. Start med at logge ind eller oprette din konto p\u00e5 Mit Kinsta<\/a>-dashboard.<\/p>\n Derefter skal du autorisere Kinsta p\u00e5 GitHub<\/a> i disse hurtige trin:<\/p>\n Der vises en modal, hvor du kan v\u00e6lge det repository, du \u00f8nsker at implementere.<\/p>\n Hvis du har flere filialer i dit arkiv, kan du v\u00e6lge den filial, du \u00f8nsker at implementere. Du kan ogs\u00e5 tildele et navn til denne applikation. S\u00f8rg for at v\u00e6lge en datacenterplacering<\/a> blandt de tilg\u00e6ngelige 24, og derefter vil Kinsta automatisk registrere en startkommando.<\/p>\n P\u00e5 dette tidspunkt vil din applikation begynde at blive implementeret. Inden for et par minutter vil der blive givet et link til at f\u00e5 adgang til den implementerede version af din applikation. I dette tilf\u00e6lde er det: https:\/\/kinsta-developer-portfolio-ir8w8.kinsta.app\/<\/strong><\/p>\n Bem\u00e6rk:<\/strong> Automatisk implementering blev aktiveret, s\u00e5 Kinsta genudruller automatisk din applikation, n\u00e5r du foretager \u00e6ndringer i din kodebase og skubber den til GitHub.<\/p>\nKrav\/foruds\u00e6tninger<\/h2>\n
\n
Hvorfor Next.js?<\/h2>\n
\n
\n
\n
S\u00e5dan konfigurerer du dit Next.js-udviklingsmilj\u00f8<\/h2>\n
npx<\/code> til at k\u00f8re npm-pakker uden at skulle installere dem globalt p\u00e5 dit system. N\u00e5r det er ordnet, kan du nu oprette et Next.js-projekt ved at k\u00f8re f\u00f8lgende kommando:<\/p>\nnpx create-next-app@latest my-portfolio<\/code><\/pre>\nnpm run dev<\/code> for at g\u00f8re din app tilg\u00e6ngelig p\u00e5 localhost:3000<\/strong>.<\/p>\n![\"Kode,](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/nextjs-installation-with-options.jpg\")
npx<\/code>, skaffer den automatisk en mappestruktur med f\u00f8lgende hovedkataloger:<\/p>\n\n
S\u00e5dan opbygger du en responsiv udviklerportfolio ved hj\u00e6lp af Next.js<\/h2>\n
\n
Definition af layouts 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>\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 for den p\u00e5g\u00e6ldende 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![\"billede](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/layout-component.jpg\")
Opbygning af portef\u00f8ljekomponenter<\/h3>\n
npm run dev<\/code>.<\/p>\nKomponent til helten<\/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> til at tilf\u00f8je billedet, fordi den muligg\u00f8r automatisk billedeoptimering, st\u00f8rrelses\u00e6ndring og meget mere.<\/p>\n![\"Next.js](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/hero-component.jpg\")
Om-komponenten<\/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![\"Om-komponenten](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/about-component.jpg\")
Komponent for f\u00e6rdigheder<\/h4>\n
![\"Komponent](\"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>\nKomponenten Projekter<\/h4>\n
![\"Next.js-projektkomponent](\"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-metoden til at l\u00f8be gennem datamarrayen efter import af den til projektkomponenten 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>\nKontaktkomponenten<\/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> -tagget, s\u00e5 knappen starter et e-mail-program med en besked til dig.<\/p>\n![\"Kontaktkomponent](\"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> -komponenten. Inden du udruller en applikation i produktion, der bruger Next.js Image-komponenten, anbefales det kraftigt at installere sharp<\/a>. Du kan g\u00f8re dette ved at navigere til din terminal, sikre dig, at du er i dit projekts mappe, og derefter k\u00f8re f\u00f8lgende kommando:<\/p>\nnpm i sharp<\/code><\/pre>\nS\u00e5dan implementerer du Next.js-applikation til Kinsta<\/h2>\n
Skub din kode til GitHub<\/h3>\n
![\"Opret](\"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>\nImplementer din portef\u00f8lje til Kinsta<\/h3>\n
\n
![\"Opret](\"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\")
![\"Implementeringslink](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/deployemnt-link-on-kinsta.jpg\")