Een developerportfolio is een verzameling voorbeelden van je werk en projecten die je vaardigheden en ervaring laten zien. Een sterk portfolio onderscheidt je van andere kandidaten bij het zoeken naar een baan. Maar dat niet alleen: een portfolio kan ook een waardevolle tool zijn bij het netwerken, het bijhouden van je leerervaringen, en jezelf neerzetten als deskundige.
In deze tutorial leer je hoe je een developerportfolio bouwt met Next.js en direct vanuit je GitHub repository deployt op Kinsta’s Applicatie Hosting platform, dat een gratis .kinsta.app domein biedt om je werk snel live te krijgen.
Hier is een live demo van het developerportfolio dat je gaat bouwen met Next.js.
Je hebt toegang tot de GitHub repository van dit project als je het beter wilt bekijken, of je kunt deze portfolio starterproject template gebruiken door Use this template > Create a new repository te selecteren – dit kopieert de startercode naar een nieuwe repository. Het starterproject bevat basiscodes zoals de stijlen, een Font Awesome CDN link, afbeeldingen en een basisstructuur.
Vereisten/voorwaarden
Dit is een “follow-along” type tutorial. Het zal gemakkelijker voor je zijn om mee te coderen als je beschikt over:
- Basiskennis van HTML, CSS en JavaScript
- Een beetje kennis van React en misschien Next.js
- Een installatie van Node.js en npm (Node Package Manager) of yarn op je computer
Waarom Next.js?
Next.js is een op React gebaseerd open source JavaScript library framework dat gebruikt kan worden voor een breed scala aan webontwikkelingsprojecten, omdat het het bouwen van aan server-side gerenderde en statische applicaties vereenvoudigt. Het stroomlijnt het proces door de beste features van React te benutten en de renderprestaties te optimaliseren voor een betere gebruikerservaring. Een paar van de meest voorkomende use cases voor Next.js zijn:
- Het bouwen van statische websites: Next.js kan statische websites bouwen die snel en gemakkelijk te deployen zijn en minimaal onderhoud vereisen, zoals de website met het developerportfolio die we in deze tutorial zullen bouwen.
- Dynamische websites bouwen: Met Next.js kun je dynamische websites maken die van content kunnen veranderen op basis van gebruikersinteracties of server-side datafetching.
- Het bouwen van e-commerce websites: Next.js is zeer geschikt voor het bouwen van e-commerce websites die server-side rendering nodig hebben voor betere SEO en prestaties.
- Het bouwen van progressieve webtoepassingen (PWA’s): Next.js ondersteunt het maken van PWA’s, dat zijn webapplicaties die functioneren als native apps en geïnstalleerd kunnen worden op het apparaat van een gebruiker.
Zo zet je je Next.js ontwikkelomgeving op
Om een ontwikkelomgeving voor Next.js op te zetten, installeer je eerst Node.js op je computer, want je zult het commando npx gebruiken om npm pakketten uit te voeren zonder ze globaal op je systeem te hoeven installeren. Als dat geregeld is, kun je nu een Next.js project aanmaken door het volgende commando uit te voeren:
npx create-next-app@latest my-portfolioEr verschijnt een prompt die je vraagt om enkele extra dependencies te bevestigen. Vervolgens kun je npm run dev uitvoeren om je app beschikbaar te maken op localhost:3000.
Wanneer je een Next.js project aanmaakt met het commando npx, wordt automatisch een mappenstructuur gemaakt met de volgende hoofdmappen:
- pages: Deze map bevat de pagina’s van de applicatie, die automatisch gerouteerd worden op basis van hun bestandsnaam. Bijvoorbeeld, pages/index.js is de startpagina, terwijl pages/about.js de about pagina is.
- public: Deze map bevat statische bestanden die direct geleverd kunnen worden, zoals afbeeldingen, lettertypen en andere assets.
- components: Deze map is optioneel en bevat herbruikbare UI componenten die in de hele applicatie gebruikt kunnen worden.
- styles: Deze map is ook optioneel en bevat globale stijlen die in de hele applicatie kunnen worden toegepast.
Andere mappen en bestanden kunnen ook worden aangemaakt, afhankelijk van de specifieke configuratie en mogelijkheden, maar dit zijn de coremappen van een basic Next.js project.
Voor deze tutorial zal alles wat we bouwen verschijnen op de indexpagina (onze website met één pagina), en je zult componenten opnemen voor verschillende secties zoals de hero, about, projecten, en overige.
Hoe je een responsieve developerportfolio bouwt met Next.js
Een portfolio bestaat meestal uit deze componenten:
- Navbar component
- Hero component
- About component
- Skills component
- Projects component
- Contact component
- Footer component
Van de Navbar en Footer componenten wordt verwacht dat ze op alle pagina’s verschijnen als het portfolio meer dan één pagina heeft. Dit kan in Next.js worden bereikt door een layout te definiëren.
Layouts definiëren in Next.js
In Next.js is een layout een manier om een consistente structuur te definiëren voor de componenten die op elke pagina van een website verschijnen. De layout bevat gewoonlijk elementen als een header, navigatiemenu en footer die op alle pagina’s van de site worden weergegeven.
Begin met het maken van een components map in de src (bron) map van je Next.js project. Maak vervolgens de Navbar en Footer componenten die binnen de Layout component zullen worden gebruikt.
Hier zie je de Navbar component in 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;Dit is de Footer component in 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;Opmerking: Om de Font Awesome pictogrammen te laten werken, moet je Font Awesome in je project installeren of het CDN ervan gebruiken. Je kunt de CDN link als volgt aan je _document.js bestand toevoegen:
// 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>
);
}Opmerking: Als je een andere versie van Font Awesome via het CDN koppelt, moet je boven de juiste integrity hash voor die release inwisselen.
Nadat je alle benodigde componenten voor je layout hebt gemaakt, kun je het Layout component zelf maken en dit component aan je pagina’s toevoegen door je paginacontent erin te wrappen.
De Layout component accepteert een <code>children</code> prop, waarmee je toegang hebt tot de content van je Next.js pagina’s.
// components/Layout.jsx
import Navbar from './navbar';
import Footer from './footer';
const Layout = ({ children }) => {
return (
<>
<Navbar />
<main>{children}</main>
<Footer />
</>
)
}
export default Layout;Nu heb je met succes de Layout component gemaakt die de Navbar en Footer bevat naast de goed gepositioneerde children props. Je kunt de Layout component nu aan je pagina’s toevoegen door de paginacontent erin te wrappen. Dit gebeurt in het bestand _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>
);
}Je bent er nu in geslaagd een layout te maken voor je developerportfolio. Voor dit portfolio richten we ons meer op Next.js en hoe je je website naar Kinsta kunt deployen. Je kunt dus de stijlen in het styles/globals.css bestand kopiëren naar je eigen project. Als je je portfoliowebsite in dev modus start, zou je nu de layout van je app moeten zien.
Nu is het tijd om je portfoliowebsite de juiste content te geven.
Portfoliocomponenten bouwen
Je kunt nu individuele componenten maken voor elke sectie van het developerportfolio. Al deze componenten worden geïmporteerd in de indexpagina van je Next.js project, zodat ze kunnen worden weergegeven wanneer je je project start met npm run dev.
De Hero component
De Hero component is de eerste sectie onder de Navbar, die vooral bedoeld is om de aandacht van de gebruiker te trekken en hem een idee te geven waar de website of applicatie over gaat.
// 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;In de code hierboven zie je dat de Next.js Image component wordt gebruikt in plaats van de HTML img tag om de afbeelding toe te voegen, omdat die automatische afbeeldingsoptimalisatie, resizing en nog veel meer mogelijk maakt.
In de About component zie je ook dat er een eenvoudige paragraaf is toegevoegd om iets over de developer te vertellen, naast enkele sociale pictogrammen van Font Awesome om sociale links toe te voegen.
Zo zou de Hero component eruit moeten zien:
Je kunt meer content aan de Hero component toevoegen, de stijlen in het styles/globals.css bestand aanpassen of zelfs deze sectie op je eigen manier nabouwen.
De About component
De About component is bedoeld om lezers of mensen die je portfolio bezoeken meer informatie over je te vertellen in zoveel alinea’s als je wilt. Als je meer over jezelf wilt vertellen, kun je een speciale “About Me” pagina maken en daar een knop aan toevoegen om meer over jezelf te lezen.
// 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;De code hierboven bevat twee alinea’s tekst over de developer en een afbeelding van de developer. Zo zal de About sectie er naar verwachting uitzien:
Je kunt de stijlen altijd tweaken om meer afbeeldingen en nog veel meer toe te voegen.
De Skills component
Het Skills component is bedoeld om enkele van de meest gebruikte technologieën van de developer te tonen, of technologieën die de developer in het verleden heeft gebruikt.
Je kunt dit gemakkelijker onderhouden door een array te maken in een extern bestand en dan te importeren in de skills component, zodat je er doorheen kunt lopen in plaats van soortgelijke code te dupliceren.
// 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;In bovenstaande code wordt voor elke vaardigheid een kaart gemaakt, en elke kaart bevat het technologie icoontje van font-awesome en de technologienaam. Je kunt ook meer stijlen toevoegen en de code tweaken om hem aantrekkelijker en unieker te maken.
Het Projects component
Het Projects component is een van de belangrijke onderdelen van het developerportfolio. Projecten leveren tastbaar bewijs van de vaardigheden en bekwaamheden van een developer en tonen hun vermogen om hun kennis toe te passen op echte problemen.
Elk project bevat een korte beschrijving van het project, een link naar de broncode (we gebruiken hier GitHub links), en eventuele andere details die je wilt toevoegen.
Je kunt een array maken voor de details van elk project en die dan importeren in je component om te voorkomen dat je ze hard moet coderen.
Laten we een bestand data.js maken om de array met projectgegevens op te slaan. Je kunt dit bestand opslaan in de component map of in de pages/api map. Voor deze demo sla ik het op in de componentenmap. Deze array zal een object bevatten voor elk project, en het object zal de projectnaam, beschrijving en GitHub link bevatten.
// 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',
},
];Je kunt nu een projectcomponent maken om deze gegevens te gebruiken door er eenvoudig doorheen te loopen. Je kunt elke JavaScript iteratiemethode gebruiken, maar voor deze tutorial gebruik je de JavaScript map() array methode om door de gegevensarray te loopen na het importeren in de Projecten component.
// 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;In de bovenstaande code heb je met succes herhaling vermeden door door de array te loopen om alle projecten in de Projects component uit te voeren, waardoor het gemakkelijk is om meer projecten te onderhouden en toe te voegen.
Het Contact Component
Eén reden om een developerportfolio te maken is dat potentiële klanten je kunnen bereiken. Een manier zou zijn dat mensen je een e-mail sturen, en dat is wat we in dit Contact component zullen faciliteren.
// 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;Plaats je e-mailadres in de tag a, zodat de knop een e-mailprogramma start met een aan jou gericht bericht.
Je hebt nu met succes alle componenten voor je portfolio applicatie gemaakt. De volgende stap is ze toe te voegen aan je indexpagina. Navigeer naar het bestand pages/index.js – dat standaard wordt aangemaakt – en vervang de code ervan door het volgende.
// 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;Als je nu je applicatie uitvoert, zul je zien dat er een volledige portfoliowebsite is gemaakt. Laten we tot slot, voordat je je applicatie inzet, een dependency installeren. Een voordeel van het gebruik van Next.js zijn de vele mogelijkheden die het biedt, zoals bestandsgebaseerde routing, optimalisatie van afbeeldingen, en nog veel meer.
Afbeeldingsoptimalisatie wordt afgehandeld met de Next.js Image component. Voordat je een applicatie in productie neemt die de Next.js Image component gebruikt, wordt het sterk aangeraden om sharp te installeren. Je kunt dit doen door naar je terminal te navigeren, ervoor te zorgen dat je in de map van je project bent, en dan het volgende commando uit te voeren:
npm i sharpJe kunt nu je applicatie deployen, en de images zullen goed werken met de volledige optimalisatie die Next.js biedt.
Zo deploy je een Next.js applicatie naar Kinsta
Als je eenmaal tevreden bent met je portfolio waarin je beste ontwikkelingswerk en belangrijke informatie te zien is, wil je het waarschijnlijk delen met anderen, toch? Laten we eens kijken hoe je dat doet met behulp van GitHub en Kinsta’s Applicatie Hosting platform.
Je code naar GitHub pushen
Er zijn verschillende manieren om codes naar GitHub te pushen, maar laten we voor deze tutorial Git gebruiken. Git wordt veel gebruikt bij softwareontwikkeling omdat het een betrouwbare en efficiënte manier is om codewijzigingen te beheren, samen te werken aan projecten en de versiegeschiedenis bij te houden.
Je kunt je code uploaden naar GitHub met behulp van de volgende stappen:
Maak eerst een nieuwe repository aan (net als een lokale map om je code in op te slaan). Je kunt dit doen door in te loggen op je GitHub account, te klikken op de + knop in de rechterbovenhoek van het scherm en New repository te selecteren uit het dropdownmenu, zoals te zien is in de afbeelding hieronder.
De volgende stap is om je repository een naam te geven, een beschrijving toe te voegen (optioneel), en te selecteren of je wilt dat je repository openbaar of privé is. Klik dan op Create repository. Je kunt nu je code naar de nieuwe GitHub repository pushen.
Alles wat nodig is om je code met Git te pushen is de URL van het repository, die je kunt vinden op de hoofdpagina van het repository, onder de knop Clone or download, of in de stappen die verschijnen na het aanmaken van een repository.
Je kunt je voorbereiden op het pushen van je code door je terminal of commandoprompt te openen en naar de map te navigeren die je project bevat. Gebruik het volgende commando om een lokaal Git repository te initialiseren:
git initVoeg nu je code toe aan de lokale Git repository met het volgende commando:
git add .Bovenstaand commando voegt alle bestanden in de huidige map en zijn submappen toe aan de nieuwe Git repository. Je kunt nu je wijzigingen vastleggen met het volgende commando:
git commit -m "my first commit"Opmerking: Je kunt “my first commit” vervangen door je eigen korte boodschap waarin je de wijzigingen beschrijft.
Tenslotte kun je je code naar GitHub pushen met de volgende commando’s:
git remote add origin [repository URL]
git push -u origin masterOpmerking: Zorg ervoor dat je “[repository URL]” vervangt door de URL van je eigen GitHub repository.
Als je deze stappen hebt uitgevoerd, is je code naar GitHub gepushd en toegankelijk via de URL van je repository. Je kunt je repository nu deployen naar Kinsta.
Je portfolio deployen naar Kinsta
Het deployen naar Kinsta gebeurt in slechts enkele minuten. Begin bij het My Kinsta dashboard om in te loggen of je account aan te maken.
Vervolgens autoriseer je Kinsta op GitHub in deze snelle stappen:
- Klik op Applicaties in de linker zijbalk
- Klik op Dienst toevoegen
- Klik in het dropdownmenu op Applicatie omdat je een Next.js applicatie op Kinsta wilt deployen.
Er verschijnt een modal waarmee je de repository kunt selecteren die je wilt deployen.
Als je meerdere branches in je repository hebt, kun je degene selecteren die je wilt deployen. Je kunt ook een naam toekennen aan deze applicatie. Zorg ervoor dat je een datacenterlocatie kiest uit de beschikbare 25, en dan zal Kinsta automatisch een startcommando detecteren.
Op dit punt zal je applicatie beginnen te deployen. Binnen enkele minuten wordt een link gegeven om toegang te krijgen tot de uitgezette versie van je applicatie. In dit geval is dat: https://kinsta-developer-portfolio-ir8w8.kinsta.app/
Opmerking: Automatische deployment is ingeschakeld, dus Kinsta deployt je applicatie automatisch opnieuw wanneer je wijzigingen aanbrengt in je codebase en deze naar GitHub pusht.
Samenvatting
Er zijn verschillende redenen waarom developers het gebruik van Next.js voor hun webprojecten zouden moeten overwegen. Ten eerste levert het kant-en-klaar geoptimaliseerde prestaties, met features als pre-fetching en het splitsen van code die helpen de laadtijd van pagina’s te verkorten. Ten tweede biedt het een vertrouwde ontwikkelervaring voor React developers, met ondersteuning van populaire tools zoals gestileerde componenten en de nieuwste React features.
Kinsta biedt ondersteuning voor verschillende deploymentopties voor Next.js, waaronder traditionele servergebaseerde hosting en moderne serverloze platforms. Hierdoor kunnen developers de deploymentoptie kiezen die het beste bij hun behoeften past, terwijl ze profiteren van de prestatie-optimalisaties en andere voordelen van het framework.
In deze tutorial heb je stap voor stap geleerd hoe je een responsieve portfoliosite bouwt met Next.js en deze vervolgens deployt op Kinsta.
Je kunt Kinsta’s Applicatie Hosting gratis proberen, en als het je bevalt, kies dan voor ons Hobby abonnement vanaf $7/maand.
Nu is het jouw beurt om jezelf uit te dagen: voeg meer features toe aan je pas ontwikkelde portfoliowebsite! Hier zijn een paar ideeën om je creatieve sap te laten stromen: voeg meer pagina’s toe met gedetailleerde informatie, integreer een blog met MDX, introduceer wat animatie. Deel je projecten en ervaringen in de comments hieronder!
Laat een reactie achter