Launching devillers.nl v4

Disclaimer: This blog post was generated by OpenAI GPT 5.3 using Codex and serves primarily as a summary of my vibe coding session to overhaul this website.

Today I am launching the fourth iteration of my personal website: devillers.nl v4.

This rebuild was not just a visual refresh. The goal was to modernize the foundation while preserving the value of everything that already worked: content, URLs, and discoverability.

Chopping wood with Generative AI

For this iteration, Codex did the majority of implementation work: scaffolding, migration, refactors, route-safe updates, UI iterations, and repeated polish passes based on prompt-by-prompt feedback.

I acted as product owner and reviewer: setting constraints, steering design intent, and tightening the result through iterative direction.

Most importantly, I was able to redo the entire website in under 2 hours with minimal human intervention. AI is most definitely a game changer for the tech industry.

That collaboration model made it possible to move quickly without skipping engineering rigor.

I used Playwright to maintain a tight feedback loop with Codex throughout the rebuild. I guided Codex to work iteratively in small steps and verify each change after every iteration using Playwright. Playwright is also great when you want the LLM to visually inspect examples on the internet.

Guiding principles for the overhaul

The v4 migration followed a clear set of constraints from start to finish:

• Keep the same Next.js + MDX model, but upgrade to current package versions
• Reuse all existing content from the old website
• Preserve public URL structure for SEO (/, /about, /blog, /blog/[slug], /work, /work/[slug])
• Replace Chakra UI completely with Tailwind CSS and custom components
• Keep the design typography-heavy, minimal, and mobile-friendly
• Support light mode, dark mode, and system preference with a manual toggle
• Keep heading/body typography consistent: Noto Serif + Roboto
• Keep the primary visual identity centered around #672a7b

In short: new codebase, familiar content, stable routes.

What changed

The implementation touched nearly every layer of the site:

• Full App Router architecture for pages and content rendering
• New Tailwind-first design system and component library
• Refreshed home page and cleaner About page
• Updated Work and Blog index headers and card interactions
• Better mobile behavior across key layouts
• Route-level previous/next navigation for Work and Blog detail pages
• Carousel updates including overlaid controls and mobile swipe gestures
• Syntax highlighting for code blocks using PrismJS in MdxCodeBlock
• Social links and iconography updates across landing, About, and footer
• Asset compatibility fixes for legacy/broken historical paths
• Route extraction and old-vs-new link verification work to reduce regressions

Tech stack

v4 currently runs on:

• Next.js (App Router)
• React
• TypeScript
• Tailwind CSS
• MDX via next-mdx-remote
• next-themes for theme persistence/system sync
• PrismJS for code syntax highlighting
• react-icons (including Font Awesome icons)
• Playwright for browser-level checks

Closing

v4 is intentionally simple. The design gets out of the way, the writing stays central, and the technical foundation is much easier to extend.

This is exactly what I wanted from the fourth iteration: less noise, more clarity, and a codebase that can keep evolving.

Version history summary