Hoe deze website is gebouwd

Overzicht van het project

Deze website is een portfolio-site gebouwd met Quarto, een open-source tool voor het maken van wetenschappelijke en technische publicaties. Het combineert Markdown, HTML en CSS voor een professionele uitstraling.

Belangrijke kenmerken:

Responsive design: Werkt goed op desktop, tablet en mobiel
Snelle laadtijden: Statische site zonder server-side processing
SEO-vriendelijk: Geoptimaliseerd voor zoekmachines
Social sharing: Met Open Graph meta tags voor mooie previews
Automatische deployment: Via GitHub Actions naar GitHub Pages

Gebruikte technologieën

Core tools:

Quarto: Voor het genereren van de statische site
Markdown: Voor het schrijven van content
HTML/CSS: Voor custom layouts en styling
Bootstrap Flatly theme: Voor een professionele basisstijl

Ontwikkelomgeving:

VS Code: Als code editor
Git: Voor versiebeheer
GitHub: Voor hosting van de repository en Pages

Deployment:

GitHub Actions: Voor geautomatiseerde builds
GitHub Pages: Voor hosting van de website

Stap-voor-stap bouwproces

1. Project setup

Initiële Quarto project structuur aangemaakt
Basis configuratie in _quarto.yml ingesteld
Flatly Bootstrap theme geselecteerd

2. Content creatie

Homepage (index.qmd) ontworpen met custom HTML blokken
About pagina (about.qmd) gemaakt met persoonlijke informatie
Skills sectie toegevoegd met interactieve hover effecten

3. Styling en design

Custom CSS in styles.css geschreven
Responsive grid layouts geïmplementeerd
Hover animaties en transitions toegevoegd
Quarto-specifieke elementen verborgen voor clean design

4. Functionaliteit toevoegen

Contact links geïntegreerd
Social sharing meta tags toegevoegd
Cookie consent banner geïnstalleerd

5. Testing en debugging

Lokale previews getest met quarto preview
HTML rendering problemen opgelost
CSS compatibiliteit gecontroleerd

6. Deployment setup

GitHub Actions workflow aangemaakt
Permissions geconfigureerd voor automatische deployment
Site succesvol gepubliceerd naar GitHub Pages

Uitdagingen en oplossingen

Uitdaging 1: HTML rendering op GitHub Pages

Probleem: GitHub Pages probeerde de bronbestanden te verwerken als Jekyll, wat leidde tot verkeerde HTML rendering.

Oplossing: Een GitHub Actions workflow geïmplementeerd die de site eerst lokaal rendert naar de _site folder en deze vervolgens deployt.

Uitdaging 2: CSS niet geladen

Probleem: Custom styles werden niet toegepast op de live site.

Oplossing: Geïdentificeerd dat de deployment workflow alleen de gerenderde bestanden uploadde, maar de CSS werd correct geïncludeerd via Quarto’s build proces.

Uitdaging 3: Deployment permissions

Probleem: 403 fout bij deployment vanwege ontbrekende schrijftoegang.

Oplossing: permissions blok toegevoegd aan de GitHub Actions workflow voor contents: write en pages: write.

Bestanden structuur

quarto-website/
├── _quarto.yml          # Site configuratie
├── index.qmd            # Homepage
├── about.qmd            # Over mij pagina
├── styles.css           # Custom styling
├── .github/
│   └── workflows/
│       └── quarto.yml   # Deployment workflow
└── _site/               # Gegenereerde site (niet in repo)

Leerpunten

Tijdens het bouwproces heb ik veel geleerd over: - Het werken met Quarto voor statische sites - Het combineren van Markdown met custom HTML/CSS - Het automatiseren van deployment met GitHub Actions - Het optimaliseren van websites voor social sharing - Het oplossen van deployment problemen op GitHub Pages

Bronnen en inspiratie

Deze website is geïnspireerd door moderne portfolio designs en volgt de Uncodixfy principes voor clean, functioneel design. Voor meer informatie over Quarto, bekijk de officiële documentatie.

Deze pagina is gemaakt om transparantie te bieden over het ontwikkelproces. Als je vragen hebt over specifieke aspecten, neem gerust contact op.