En udviklerportefølje er en samling af arbejdsprøver og projekter, der viser dine færdigheder og erfaringer. En stærk portefølje adskiller dig fra andre kandidater, når du søger job. Men ikke kun det: En portefølje kan også være et værdifuldt redskab til at skabe netværk, holde styr på din læring og etablere dig selv som ekspert på området.
I denne vejledning lærer du, hvordan du opbygger en udviklerportefølje ved hjælp af Next.js og distribuerer den direkte fra dit GitHub-repositorium til Kinstas platform for applikationshosting, som giver dig et gratis .kinsta.app-domæne, så du hurtigt kan få dit arbejde i luften.
Her er en live-demo af den udviklerportefølje, du skal opbygge med Next.js.
Du kan få adgang til dette projekts GitHub-lager, hvis du gerne vil se nærmere, eller du kan bruge denne portefølje starter projektskabelon ved at vælge Brug denne skabelon > Opret et nyt repository – dette vil kopiere startkoden til et nyt lager. Startprojektet indeholder grundlæggende koder som stilarterne, et Font Awesome CDN-link, billeder og grundlæggende struktur.
Krav/forudsætninger
Dette er en “follow-along”-type tutorial. Det vil være lettere for dig at kode med, hvis du har:
- Grundlæggende kendskab til HTML, CSS og JavaScript
- En smule kendskab til React og måske Next.js
- Node.js og npm (Node Package Manager) eller yarn installeret på din computer
Hvorfor Next.js?
Next.js er et React-baseret open source JavaScript-biblioteksframework, der kan bruges til en lang række webudviklingsprojekter, fordi det forenkler opbygningen af server-side renderede og statiske applikationer. Det strømliner 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:
- Bygning af statiske websteder: Next.js kan bygge statiske websites, der er hurtige, nemme at implementere og kræver minimal vedligeholdelse, som f.eks. det udviklerportfoliowebsite, vi vil bygge i løbet af denne vejledning.
- Opbygning af dynamiske websteder: Next.js giver dig mulighed for at oprette dynamiske websteder, der kan ændre indholdet baseret på brugerinteraktioner eller datahentning på serversiden.
- Opbygning af e-handelswebsteder: Next.js er velegnet til at bygge e-handelswebsteder, der kræver server-side rendering for at forbedre SEO og ydeevne.
- Opbygning af progressive webapplikationer (PWA’er): Next.js understøtter oprettelsen af PWA’er, som er webapplikationer, der fungerer som native apps og kan installeres på en brugers enhed.
Sådan konfigurerer du dit Next.js-udviklingsmiljø
For at opsætte et udviklingsmiljø for Next.js skal du først installere Node.js på din computer, fordi du vil bruge kommandoen npx til at køre npm-pakker uden at skulle installere dem globalt på dit system. Når det er ordnet, kan du nu oprette et Next.js-projekt ved at køre følgende kommando:
npx create-next-app@latest my-portfolioDer vises en prompt, som beder dig om at bekræfte nogle yderligere afhængigheder. Derefter kan du køre npm run dev for at gøre din app tilgængelig på localhost:3000.
Når du opretter et Next.js-projekt ved hjælp af kommandoen npx, skaffer den automatisk en mappestruktur med følgende hovedkataloger:
- pages: Denne mappe indeholder applikationens sider, som automatisk videresendes på baggrund af deres filnavn. F.eks. vil pages/index.js være startsiden, mens pages/about.js vil være om-siden.
- public: Denne mappe indeholder statiske filer, der kan serveres direkte, f.eks. billeder, skrifttyper og andre aktiver.
- components: Denne mappe er valgfri og indeholder genanvendelige brugergrænsefladekomponenter, der kan bruges i hele programmet.
- styles: Denne mappe er også valgfri og indeholder globale stilarter, der kan anvendes i hele programmet.
Der kan også genereres andre mapper og filer afhængigt af den specifikke konfiguration og funktioner, men dette er de centrale mapper i et grundlæggende Next.js-projekt.
I denne tutorial vil alt, hvad vi bygger, blive vist på indekssiden (vores websted med én side), og du vil inkludere komponenter til forskellige sektioner som f.eks. hero, om, projekter og andre.
Sådan opbygger du en responsiv udviklerportfolio ved hjælp af Next.js
En portfolio består typisk af komponenter som disse:
- Navbar-komponent
- Hero-komponent
- Om-komponent
- Komponent med færdigheder
- Komponent til projekter
- Kontakt komponent
- Footer-komponent
Navbar- og Footer-komponenterne forventes at blive vist på alle sider, hvis porteføljen har mere end én side. Dette kan opnås i Next.js ved at definere et layout.
Definition af layouts i Next.js
I Next.js er et layout en måde at definere en ensartet struktur for de komponenter, der vises på alle sider på et websted. Layoutet omfatter normalt elementer som f.eks. en header, en navigationsmenu og en footer, der vises på tværs af alle sider på webstedet.
Start med at oprette en mappe med komponenter i mappen src (source) i dit Next.js-projekt. Derefter skal du oprette komponenterne Navbar og Footer, som skal bruges i Layout-komponenten.
Her er Navbar-komponenten i Navbar.jsx:
// components/Navbar.jsx
import Link from "next/link";
const Navbar = () => {
return (
<div className="nav-container">
<div className="logo">
<Link href="/">
Joe's Portfolio
</Link>
</div>
<a href="" className="cta-btn">Resume</a>
</div>
)
}
export default Navbar;Her er Footer-komponenten i Footer.jsx:
// components/Footer.jsx
const Footer = () => {
return (
<>
<hr/>
<div className="footer-container">
<p>
© {new Date().getFullYear()} Joel's Portfolio
</p>
<div className="social_icons">
<a
href="https://twitter.com/olawanle_joel"
aria-label="Twitter"
target="_blank"
rel="noopener noreferrer"
>
<i className="fa-brands fa-twitter"></i>
</a>
<a
href="https://github.com/olawanlejoel"
aria-label="GitHub"
target="_blank"
rel="noopener noreferrer"
>
<i className="fa-brands fa-github"></i>
</a>
<a
href="https://www.linkedin.com/in/olawanlejoel/"
aria-label="LinkedIn"
target="_blank"
rel="noopener noreferrer"
>
<i className="fa-brands fa-linkedin"></i>
</a>
</div>
</div>
</>
)
}
export default Footer;Bemærk: For at Font Awesome-ikonerne kan fungere, skal du enten installere Font Awesome i dit projekt eller bruge dets CDN. Du kan tilføje CDN-linket til din _document.js-fil på denne måde:
// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
return (
<Html lang="en">
<Head>
<meta charSet="utf-8" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}Bemærk: Hvis du linker til en anden version af Font Awesome via CDN’et, skal du bytte ind over den relevante integrity hash for den pågældende version.
Når du har oprettet alle de nødvendige komponenter til dit layout, kan du oprette selve Layout-komponenten og tilføje denne komponent til dine sider ved at indpakke dit sideindhold i den.
Layout-komponenten vil acceptere en <code>children</code>-prop, så du kan få adgang til indholdet af dine Next.js-sider.
// components/Layout.jsx
import Navbar from './navbar';
import Footer from './footer';
const Layout = ({ children }) => {
return (
<>
<Navbar />
<main>{children}</main>
<Footer />
</>
)
}
export default Layout;På 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øje Layout-komponenten til dine sider ved at indpakke sidens indhold i den. Dette gøres i filen _app.js.
// pages/_app.js
import '@/styles/globals.css';
import Layout from '../components/layout';
export default function App({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}Det er nu lykkedes dig at skabe et layout til din udviklerportefølje. I denne portefølje fokuserer vi mere på Next.js og på, hvordan du udruller dit websted til Kinsta. Så du kan kopiere stilene i filen styles/globals.css til dit eget projekt. Hvis du starter dit portfoliowebsted i dev-mode, bør du nu kunne se din app’s layout.
Nu er det tid til at give dit portføljewebsted det rette indhold.
Opbygning af porteføljekomponenter
Du kan nu oprette individuelle komponenter til hver sektion af din udviklers portefølje. Alle disse komponenter vil blive importeret til indekssiden i dit Next.js-projekt, så de kan vises, når du starter dit projekt med npm run dev.
Komponent til helten
Hero-komponenten er den første sektion under navigationslinjen, hvis hovedformål er at fange brugerens opmærksomhed og give dem en fornemmelse af, hvad webstedet eller applikationen handler om.
// components/Hero.jsx
import Image from "next/image";
const Hero = () => {
return (
<div className="hero-container">
<Image src='/images/profile.jpeg' className="profile-img" width={300} height={300} alt="Joe's personal headshot" />
<div className="hero-text">
<h1>Hey, I'm Joe 👋</h1>
<p>
I'm a software developer based in Lagos, Nigeria. I specialize in building (and occasionally designing)
exceptional websites, applications, and everything in between.
</p>
<div className="social-icons">
<a
href="https://twitter.com/olawanle_joel"
aria-label="Twitter"
target="_blank"
rel="noopener noreferrer"
>
<i className="fa-brands fa-twitter"></i>
</a>
<a
href="https://github.com/olawanlejoel"
aria-label="GitHub"
target="_blank"
rel="noopener noreferrer"
>
<i className="fa-brands fa-github"></i>
</a>
<a
href="https://www.linkedin.com/in/olawanlejoel/"
aria-label="LinkedIn"
target="_blank"
rel="noopener noreferrer"
>
<i className="fa-brands fa-linkedin"></i>
</a>
</div>
</div>
</div>
)
}
export default Hero;I koden ovenfor vil du bemærke, at Next.js Image-komponenten bruges i stedet for HTML-tagget img til at tilføje billedet, fordi den muliggør automatisk billedeoptimering, størrelsesændring og meget mere.
I About-komponenten vil du også bemærke, at der er tilføjet et simpelt afsnit for at sige lidt om udvikleren sammen med nogle sociale ikoner fra Font Awesome for at tilføje sociale links.
Sådan skal Hero-komponenten se ud:
Du kan tilføje mere indhold til Hero-komponenten, justere stilene i filen styles/globals.css eller endda genskabe dette afsnit på din egen måde.
Om-komponenten
Om-komponenten er beregnet til at fortælle læsere eller folk, der besøger din portefølje, flere oplysninger om dig i så mange afsnit, som du ønsker. Hvis du ønsker at fortælle mere om dig selv, kan du oprette en dedikeret “Om mig”-side og tilføje en knap på dette afsnit for at læse mere om dig selv.
// components/About.jsx
import Image from "next/image";
const About = () => {
return (
<div className="about-container">
<h2>About Me</h2>
<div className="flex-about">
<div className="about-text">
<p>
As a developer, I have always been passionate about creating elegant and effective solutions to
complex problems. I have a strong foundation in software development, with a focus on web
technologies such as HTML, CSS, and JavaScript. I enjoy working on both the front-end and
back-end of applications, and I am always looking for ways to optimize performance, improve user
experience, and ensure the highest level of code quality.
</p>
<p>Throughout my career, I have worked on a wide range of projects, from simple static websites to
complex enterprise-level applications. I am experienced in working with a variety of development
tools and frameworks, including React, Angular, Vue.js, Node.js, and Laravel. I am always eager
to learn and explore new technologies, and I am constantly seeking out opportunities to improve
my skills and knowledge.</p>
</div>
<div className="about-img">
<Image src='/images/about.jpeg' className="profile-img" width={300} height={500}/>
</div>
</div>
</div>
)
}
export default About;Koden ovenfor indeholder to afsnit med tekst om udvikleren og et billede af udvikleren. Sådan forventes det, at afsnittet Om vil se ud:
Du kan altid justere stilene for at tilføje flere billeder og meget mere.
Komponent for færdigheder
Komponentens færdigheder er beregnet til at vise nogle af udviklerens mest anvendte teknologier eller teknologier, som udvikleren tidligere har brugt.
Du kan gøre dette lettere at vedligeholde ved at oprette et array i en ekstern fil og derefter importere det i færdighedskomponenten, så du kan løbe igennem i stedet for at duplikerer lignende kode.
// components/Skills.jsx
const Skills = () => {
return (
<div className="skills-container">
<h2>Skills</h2>
<div className="grid-skills">
<div className="skill-card html">
<i className="fa-brands fa-html5 html-icon"></i>
<p>HTML</p>
</div>
<div className="skill-card css">
<i className="fa-brands fa-css3-alt css-icon"></i>
<p>CSS</p>
</div>
<div className="skill-card js">
<i className="fa-brands fa-js-square js-icon"></i>
<p>JavaScript</p>
</div>
<div className="skill-card react">
<i className="fa-brands fa-react react-icon"></i>
<p>React</p>
</div>
<div className="skill-card node">
<i className="fa-brands fa-node-js node-icon"></i>
<p>Node</p>
</div>
<div className="skill-card python">
<i className="fa-brands fa-python python-icon"></i>
<p>Python</p>
</div>
</div>
</div>
)
}
export default Skills;I koden ovenfor oprettes der et kort for hver færdighed, og hvert kort vil indeholde teknologi-ikonet fra font-awesome og teknologinavnet. Du kan også tilføje flere stilarter og justere koden for at gøre den mere attraktiv og unik.
Komponenten Projekter
Projektkomponenten er en af de vigtige sektioner i en udviklers portefølje. Projekter giver håndgribelige beviser for en udviklers færdigheder og evner og viser deres evne til at anvende deres viden på virkelige problemer.
Hvert projekt skal indeholde en kort beskrivelse af projektet, et link til dets kildekode (vi bruger GitHub-link her) og eventuelle andre oplysninger, du ønsker at tilføje.
Du kan oprette et array til at indeholde hvert projekts detaljer og derefter importere det i din komponent for at undgå hard-coding af dem.
Lad os oprette en data.js-fil til at gemme arrayet med projektdata. Du kan gemme denne fil i komponentmappen eller i mappen pages/api. 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.
// components/data.js
export const projectData = [
{
id: 1,
title: 'Todo List App',
description:
'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.',
gitHubLink: 'https://github.com/olawanlejoel/Todo-List-App',
},
{
id: 2,
title: 'Books Library App',
description:
'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.',
gitHubLink: 'https://github.com/olawanlejoel/Book-Library',
},
{
id: 3,
title: 'Quotes Generator',
description:
'Helps you generate quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards.',
gitHubLink: 'https://github.com/olawanlejoel/random-quote-generator',
},
{
id: 4,
title: 'Password Generator',
description:
'Helps you generates random passwords, you can select what you want your password to entail and also you can copy generated password to clipboard.',
gitHubLink: 'https://github.com/olawanlejoel/Password-Generator',
},
{
id: 5,
title: 'Twitter UI Clone',
description:
'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.',
gitHubLink: 'https://github.com/olawanlejoel/TwitterUI-clone',
},
];Du kan nu oprette en projektkomponent for at udnytte disse data ved at sløjfe let igennem. Du kan bruge en hvilken som helst JavaScript-iterationsmetode, men i denne vejledning kan du bruge JavaScript map() array-metoden til at løbe gennem datamarrayen efter import af den til projektkomponenten Projects.
// components/Projects.jsx
import { projectData } from './data.js';
const Projects = () => {
return (
<div className="projects-container">
<h2>Projects</h2>
<div className="projects-grid">
{projectData && projectData.map((project) => (
<div className="project-card" key={project.id}>
<div className="project-header">
<i className="fa-regular fa-folder-open folder-icon"></i>
<div className="small-icons">
<a href={project.gitHubLink}><i className="fa-brands fa-github"></i></a>
</div>
</div>
<h3>{project.title}</h3>
<p>{project.description}</p>
</div>
))
}
</div>
</div>
)
}
export default Projects;I koden ovenfor har du med succes undgået gentagelser ved at løkke gennem arrayet for at outputte alle projekter i Projects-komponenten, hvilket gør det nemt at vedligeholde og tilføje flere projekter.
Kontaktkomponenten
En af grundene til at oprette en udviklers portefølje er, at potentielle kunder kan kontakte dig. En måde ville være, at folk kan sende dig en e-mail, hvilket vi vil gøre det lettere for dem i denne Contact-komponent.
// components/Contact.jsx
const Contact = () => {
return (
<div className="contact-container">
<h2>Get In Touch</h2>
<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>
<a href="mailto:[email protected]" className='cta-btn'>Say Hello</a>
</div>
)
}
export default Contact;Placer din e-mail-adresse i a -tagget, så knappen starter et e-mail-program med en besked til dig.
Du har nu oprettet alle komponenterne til din porteføljeapplikation. Det næste skridt er at tilføje dem til din indeksside. Naviger til filen pages/index.js – som oprettes som standard – og erstat dens kode med følgende.
// pages/index.js
import Hero from '@/components/Hero';
import About from '@/components/About';
import Skills from '@/components/Skills';
import Projects from '@/components/Projects';
import Contact from '@/components/Contact';
import Head from 'next/head';
const Home = () => {
return (
<>
<Head>
<title>Joel's Portfolio</title>
<meta name="description" content="Joel's Portfolio" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<div>
<Hero />
<About />
<Skills />
<Projects />
<Contact />
</div>
</>
);
};
export default Home;Når du nu kører din applikation, vil du bemærke, at der er blevet oprettet et komplet portfoliowebsted. Lad os endelig installere en afhængighed, før vi udruller din applikation. En af fordelene ved at bruge Next.js er de mange funktioner, som den bringer til bordet, såsom filbaseret routing, billedeoptimering og meget mere.
Billedoptimering håndteres med Next.js Image -komponenten. Inden du udruller en applikation i produktion, der bruger Next.js Image-komponenten, anbefales det kraftigt at installere sharp. Du kan gøre dette ved at navigere til din terminal, sikre dig, at du er i dit projekts mappe, og derefter køre følgende kommando:
npm i sharpDu kan nu implementere din applikation, og billederne vil fungere korrekt med den fulde optimering, som Next.js tilbyder.
Sådan implementerer du Next.js-applikation til Kinsta
Når du er tilfreds med din portefølje, der viser dit bedste udviklingsarbejde og vigtige oplysninger, vil du sandsynligvis gerne dele den med andre, ikke sandt? Lad os se, hvordan du gør det ved hjælp af GitHub og Kinsta’s Applikation Hosting-platform.
Skub din kode til GitHub
Der er forskellige måder at skubbe koder til GitHub på, men lad os bruge Git i denne vejledning. Git er meget udbredt inden for softwareudvikling, fordi det giver en pålidelig og effektiv måde at administrere kodeændringer, samarbejde om projekter og vedligeholde versionshistorik.
Du kan uploade din kode til GitHub ved hjælp af følgende trin:
Først skal du oprette et nyt repository (ligesom en lokal mappe til at gemme din kode). Det kan du gøre ved at logge ind på din GitHub-konto, klikke på knappen + i øverste højre hjørne af skærmen og vælge New repository fra dropdown-menuen, som det ses på billedet nedenfor.
Det næste trin vil være at give dit repository et navn, tilføje en beskrivelse (valgfrit) og vælge, om du ønsker, at dit repository skal være offentligt eller privat. Klik derefter på Create repository (Opret repository). Du kan nu skubbe din kode til det nye GitHub-repository.
Det eneste, der er nødvendigt for at skubbe din kode med Git, er repository-URL’en, som du kan finde på repositoryets hovedside, under knappen Clone eller download eller i de trin, der vises efter oprettelse af et repository.
Du kan forberede dig på at skubbe din kode ved at åbne din terminal eller command prompt og navigere til den mappe, der indeholder dit projekt. Brug følgende kommando til at initialisere et lokalt Git-repositorium:
git initTilføj nu din kode til det lokale Git-repositorium ved hjælp af følgende kommando:
git add .Ovenstående kommando tilføjer alle filer i den aktuelle mappe og dens undermapper til det nye Git-repositorium: Ovenstående kommando tilføjer alle filer i den aktuelle mappe og dens undermapper til det nye Git-repositorium. Du kan nu overføre dine ændringer ved hjælp af følgende kommando:
git commit -m "my first commit"Bemærk: Du kan erstatte “my first commit” med din egen korte besked, der beskriver de ændringer, du har foretaget.
Endelig kan du skubbe din kode til GitHub ved hjælp af følgende kommandoer:
git remote add origin [repository URL]
git push -u origin masterBemærk: Sørg for at erstatte “[repository URL]” med URL’en for dit eget GitHub-repositorium.
Når du har gennemført disse trin, vil din kode blive skubbet til GitHub og være tilgængelig via dit repositoriums URL. Du kan nu distribuere dit repository til Kinsta.
Implementer din portefølje til Kinsta
Deployment til Kinsta sker på få minutter. Start med at logge ind eller oprette din konto på Mit Kinsta-dashboard.
Derefter skal du autorisere Kinsta på GitHub i disse hurtige trin:
- Klik på Applikationer på venstre sidepanel
- Klik på Tilføj tjeneste
- Klik på Applikation i rullemenuen, fordi du vil distribuere en Next.js-applikation til Kinsta.
Der vises en modal, hvor du kan vælge det repository, du ønsker at implementere.
Hvis du har flere filialer i dit arkiv, kan du vælge den filial, du ønsker at implementere. Du kan også tildele et navn til denne applikation. Sørg for at vælge en datacenterplacering blandt de tilgængelige 25, og derefter vil Kinsta automatisk registrere en startkommando.
På dette tidspunkt vil din applikation begynde at blive implementeret. Inden for et par minutter vil der blive givet et link til at få adgang til den implementerede version af din applikation. I dette tilfælde er det: https://kinsta-developer-portfolio-ir8w8.kinsta.app/
Bemærk: Automatisk implementering blev aktiveret, så Kinsta genudruller automatisk din applikation, når du foretager ændringer i din kodebase og skubber den til GitHub.
Oversigt
Der er flere grunde til, at udviklere bør overveje at bruge Next.js til deres webprojekter. For det første giver den optimeret ydeevne out-of-the-box med funktioner som pre-fetching og kodeopdeling, der hjælper med at reducere sideindlæsningstiden. For det andet giver den en velkendt udviklingsoplevelse for React-udviklere, idet den understøtter populære værktøjer som stilede komponenter og de nyeste React-funktioner.
Kinsta giver støtte til forskellige implementeringsmuligheder for Next.js, herunder traditionel serverbaseret hosting og moderne serverløse platforme. Dette giver udviklere mulighed for at vælge den implementeringsmulighed, der passer bedst til deres behov, samtidig med at de kan drage fordel af frameworkets optimeringer af ydeevnen og andre fordele.
I denne tutorial har du lært trin for trin, hvordan du opbygger et responsivt porteføljesite ved hjælp af Next.js og derefter distribuerer det til Kinsta.
Du kan prøve Kinstas Application Hosting gratis, og hvis du kan lide det, kan du vælge vores Hobby Tier-plan, der starter ved 7 USD/måned.
Nu er det din tur til at udfordre dig selv: Tilføj flere funktioner til dit nyudviklede portfoliowebsted! Her er et par ideer til at få din kreative juice til at flyde: tilføj flere sider med detaljerede oplysninger, integrer en blog med MDX, implementer noget animation. Del dine projekter og erfaringer i kommentarerne nedenfor!
Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 200 technical articles majorly around JavaScript and it's frameworks.
Skriv et svar