Jabeja's Nieuwe Website Is Live!

Na maanden van ontwikkeling zijn we trots om onze volledig vernieuwde website te presenteren. Niet zomaar een redesign, maar een complete herbouw met de nieuwste technologieën. In dit artikel nemen we je mee achter de schermen.

Waarom een nieuwe website?

Als webdesign bureau moeten we praktiseren wat we prediken. Onze oude website deed z'n werk, maar weerspiegelde niet meer waar we voor staan: cutting-edge development, performance-first design en schaalbare architectuur.

De nieuwe site is onze digitale showcase. Alles wat we voor klanten bouwen, hebben we eerst op onszelf toegepast.

De technologie stack

Framework: Next.js 16 + React 19

We draaien op de nieuwste versies van Next.js (16.1) en React (19.2). Waarom?

• App Router: De modernste manier om React applicaties te structureren
• Server Components: Snellere laadtijden door server-side rendering waar mogelijk
• Turbopack: Razendsnelle development builds
• TypeScript 5.9: Strict mode voor maximale type safety

Styling: Tailwind CSS 4.1

Geen custom CSS chaos, maar een gestructureerd design systeem:

• Utility-first approach voor consistente styling
• Custom Satoshi font voor een unieke look
• HSL-based CSS variables voor theming
• Motion (Framer Motion) voor subtiele animaties

Database: Supabase

Een serverless PostgreSQL database met ingebouwde authenticatie:

• Real-time mogelijkheden voor live updates
• Row Level Security voor veilige data toegang
• Admin panel authenticatie
• Content management voor blog posts

Storage: Cloudflare R2

Al onze afbeeldingen worden gehost op Cloudflare R2:

• S3-compatible object storage
• Globaal CDN voor snelle levering
• Automatische caching (1 jaar)
• Admin uploads via secure API

Email: Resend

Transactionele emails voor formulieren:

• Contact bevestigingen
• Lead notificaties
• Branded HTML templates
• XSS-preventie op alle user input

Belangrijkste features

Academy (Blog)

Ons kennisplatform draait op MDX (Markdown + React):

• 14+ artikelen over webdesign, SEO en development
• Automatische internal linking: Het systeem herkent keywords en linkt automatisch naar relevante artikelen
• Scheduled publishing: Plan posts vooruit met automatische publicatie
• AI image generation: Blog thumbnails gegenereerd met FAL.ai
• Reading time: Automatisch berekende leestijd

Case Studies

Al onze projecten gedocumenteerd:

• 10+ uitgewerkte cases met resultaten
• Gestructureerde data voor Google
• Filterbare categorieën
• Schema.org markup voor rich snippets

Formulieren

Lead generatie met meerdere beveiligingslagen:

• Honeypot velden: Onzichtbaar voor gebruikers, gevuld door bots
• Timing checks: Te snelle submissions worden geblokkeerd
• Rate limiting: 3-5 requests per minuut per IP
• Zod validatie: Server-side schema validatie
• Dubbele bevestiging: Email naar admin én gebruiker

Admin Panel

Volledig beheer via een beveiligde admin interface:

• Dashboard met overzicht van submissions
• Blog post management (status, datum, afbeelding)
• Contact en lead submissions met status tracking
• Export functionaliteit naar CSV
• Soft delete voor data recovery

Performance & SEO

Core Web Vitals

We scoren consistent hoog op Google's metrics:

• LCP (Largest Contentful Paint): < 2.5s
• FID (First Input Delay): < 100ms
• CLS (Cumulative Layout Shift): < 0.1
• Lighthouse Score: 100/100

SEO Optimalisaties

• Structured Data: Organization, LocalBusiness, BlogPosting, FAQ schemas
• Dynamic Sitemap: Automatisch gegenereerd met alle routes
• Meta tags: Open Graph en Twitter Cards
• Canonical URLs: Voorkom duplicate content
• ISR: Incremental Static Regeneration voor snelle pagina's

Internationalisatie

• next-intl voor Nederlandse content
• Locale-aware routing
• Vertaalbare UI strings
• SEO-vriendelijke URL structuur

Privacy & GDPR

Cookie Consent

GDPR-compliant consent management:

• GA4 Consent Mode: Analytics alleen na toestemming
• LocalStorage: Consent keuze wordt onthouden
• Duidelijke keuzes: Accepteren of weigeren, geen dark patterns

Analytics

We gebruiken een combinatie van tools:

• Google Analytics 4: Basis website analytics
• Leadinfo: B2B lead identificatie
• Microsoft Clarity: Session recordings en heatmaps

Alle tools respecteren de cookie consent keuze van bezoekers.

Technische highlights

Automatische Internal Linking

Een van onze meest geavanceerde features. Het systeem:

1. Analyseert alle gepubliceerde blog posts
2. Extraheert keywords uit titels en tags
3. Linkt automatisch bij eerste vermelding in andere artikelen
4. Prioriteert relevante matches (zelfde categorie, gedeelde tags)
5. Respecteert limieten (max 10 links per artikel)

Dit verbetert SEO en gebruikerservaring zonder handmatig werk.

Scheduled Publishing

Blog posts kunnen vooruit gepland worden:

• Stel status in op "scheduled"
• Kies een publish_date
• Cron job controleert dagelijks
• Automatische status update naar "published"
• ISR cache invalidatie voor directe zichtbaarheid

Multi-layer Anti-Spam

Onze formulieren zijn beschermd op meerdere niveaus:

1. Client-side: Honeypot veld + timing check
2. Server-side: Rate limiting per IP
3. Validation: Zod schema check
4. Response: Fake success voor gedetecteerde bots

Waarom deze keuzes?

Next.js over alternatieven

We kozen Next.js boven Gatsby, Remix of pure React:

• Beste balans tussen DX en performance
• Vercel hosting integratie
• Sterke community en ecosystem
• App Router is de toekomst van React

Supabase over Firebase

• Open source (geen vendor lock-in)
• PostgreSQL (echte SQL queries)
• Betere pricing voor kleine projecten
• Ingebouwde authenticatie

Tailwind over styled-components

• Betere performance (geen runtime)
• Consistenter design systeem
• Snellere development
• Geen CSS-in-JS overhead

Wat dit betekent voor klanten

Deze website is niet alleen onze visitekaart, het is ons bewijs. Alles wat we hier hebben gebouwd, kunnen we ook voor jou bouwen:

• Snelle, moderne websites met de nieuwste technologieën
• Schaalbare architectuur die meegroeit met je business
• SEO-geoptimaliseerd vanaf de eerste regel code
• Admin panels voor eenvoudig content beheer
• Lead generatie met slimme formulieren

Conclusie

Onze nieuwe website is meer dan een redesign. Het is een statement over hoe moderne websites gebouwd moeten worden: snel, veilig, schaalbaar en gebruiksvriendelijk.

Benieuwd wat we voor jouw bedrijf kunnen betekenen? Vraag een gratis website analyse aan en ontdek de mogelijkheden.

---

De cijfers op een rij

---

Veelgestelde vragen

Kan ik ook zo'n website krijgen?

Absoluut. Alle technologieën die we hier gebruiken, zetten we ook in voor klantprojecten. Het verschilt per project welke stack het beste past.

Is dit niet overkill voor een kleine website?

Voor een simpele brochure website? Misschien. Maar zodra je groeit, schaalt deze architectuur moeiteloos mee. Geen dure migraties later.

Hoe zit het met de kosten?

Een website met deze stack is een investering, maar betaalt zich terug in performance, SEO en onderhoud. Bekijk onze website kosten gids voor meer informatie.

Kan ik zelf content beheren?

Ja. Het admin panel maakt het eenvoudig om blog posts, afbeeldingen en formulier submissions te beheren zonder technische kennis.