Mijn persoonlijke CV website

Mijn persoonlijke CV en de website die momenteel wordt bekeken. Het is gebouwd met het doel om mijn vaardigheden op een praktische en toegankelijke manier te tonen.

Waarom een website?

Een CV is een levend document, wat betekent dat het eigenlijk nooit af is. Het evolueert constant naarmate je groeit en ervaring opdoet. Om deze reden had ik een CV nodig dat snel en gemakkelijk kon worden bijgewerkt. Het antwoord? Mijn CV als een website. Dit biedt mij verschillende voordelen:

• Het CV kan eenvoudig bijgewerkt naarmate ik nieuwe projecten maak en mijn vaardigheden verbeter
• Het is openbaar toegankelijk op het web voor iedereen om te bekijken
• Het biedt een praktische manier om mijn web development vaardigheden te tonen
• Ik ben niet gelimiteerd tot alleen statische tekst, maar ik kan ook interactie toevoegen
• Ik kan eenvoudig linken naar mijn uitgelichte projecten en mijn proces uitleggen, zoals ik dat nu doe

De Tech Stack

Nu ik wist dat ik het als een website wilde, moest ik een tech stack kiezen om in te werken. Hiervoor heb ik de volgende technologieën gekozen:

• MDX, om de "database" direct in versiebeheer te hebben, en direct componenten te kunnen gebruiken
• NextJS, voor automatische hot reloading
• TailwindCSS, voor snelle styling van componenten zonder te hoeven schakelen tussen meerdere bestanden
• Vitest, om de code te unit testen

MDX

MDX is de kern van de website. Ik wist dat ik Markdown wilde gebruiken om mijn content op te slaan. Dit stelt me in staat om al mijn content in versiebeheer te houden. Hiermee is het niet nodig om reguliere back-ups van of onderhoud aan een database uit te voeren. Natuurlijk is dit geen ideale oplossing voor veel websites met content editors, maar voor mijn doeleinden is het perfect. Wanneer ik iets wil veranderen, hoef ik niet in een CMS in te loggen. Ik kan gewoon een bestand openen en het direct bewerken.

NextJS

Nu ik wist dat ik Markdown wilde gebruiken, moest ik een tech stack kiezen die hier goed op aansluit. Oorspronkelijk overwoog ik om Hugo te gebruiken, omdat het een zeer snelle static site generator is. Het is ook vrij eenvoudig om live reloading toe te voegen, wat het makkelijk maakt om de content die ik schrijf direct te bekijken terwijl ik het schrijf. Ik zou zelfs inline HTML templates kunnen toevoegen, met behulp van shortcodes. De andere optie was om MDX te gebruiken. Het grootste voordeel hiervan was voor mij dat het volledige JSX componenten ondersteunt. Dit lijkt erg op shortcodes in Hugo, maar is naar mijn mening net iets prettiger om te gebruiken. Aangezien MDX standaard JSX componenten gebruikt, wilde ik een JSX-gebaseerd framework met goede out-of-the-box MDX integratie. NextJS leek op dat moment de meest volwassen MDX ondersteuning te hebben. Ik ben ook een groot fan van server components, omdat het de uiteindelijke JavaScript bundle size van elke geladen pagina verkleint.

TailwindCSS

Als laatste is er TailwindCSS voor de styling. Er zijn verschillende meningen over, maar ik vind het erg fijn om te gebruiken. Het grootste voordeel voor mij is dat ik nooit van bestand hoef te wisselen om een component te stylen. Het is ook een zeer goede manier om de uiteindelijke CSS bestandsgrootte relatief klein te houden, omdat alleen de gebruikte HTML classes in de stylesheet voorkomen.

Vitest

Om zeker te zijn dat mijn logica en componenten allemaal goed werken, gebruik ik Vitest om deze te unit testen. Voor logica zoals in de middleware is dit erg behulpzaam wanneer ik iets wil wijzigen. Uiteraard is de logica in dit bestand niet ingewikkeld. Maar het zorgt ervoor dat ik niet handmatig alle logica en code paths opnieuw hoef te testen nadat ik een wijziging maak, en het brengt me zekerheid dat ik tijdens het testen niet per ongeluk wat oversla.