Development of robinwichmann.com
Concept and development of a modern portfolio website with Next.js and React
May 2025
Project
Development of robinwichmann.com
Technologies Used
Challenge
As a web developer, I wanted to build a personal portfolio website that doesn't just showcase my skills but is itself an example of them: modern, interactive, and technically clean.
The biggest challenge was bringing all of my requirements together:
- A modern, appealing user interface with an intuitive, lively design that invites visitors to explore and play around
- Fast load times and optimal performance
- Responsive design for all devices
- SEO optimization
- Easy maintainability and extensibility
- Accessibility in line with WCAG standards
Solution
I went with a modern tech stack that delivers performance, developer experience, and future-proofing:
1. Frontend framework
I chose Next.js 15 as the framework, offering server-side rendering (SSR), static site generation, and optimized performance. Combined with React 19, it enabled efficient component-based development.
2. Language and typing
TypeScript let me build a robust codebase that catches type errors early and improves maintainability. Strict typing keeps data structures consistent and makes future extensions easier.
3. Styling and animations
TailwindCSS 4 transformed my styling system by using the OKLCH color space for more vivid colors and more precise gradients. The CSS-first configuration allowed me to drop a separate tailwind.config.js and define design tokens directly through CSS variables and the @theme directive. For the complex background animations in particular, I used CSS @property definitions combined with CSS variables that transition smoothly between pages. For interactive components like the image gallery, I relied on Framer Motion, whose AnimatePresence component and directional transitions provide fluid enter and exit effects without hurting performance.
4. Deployment and hosting
The website is hosted on Cloudflare Pages, which provides global content delivery network (CDN) distribution, automatic SSL, and CI/CD integration. As a result, the site loads fast worldwide and is served securely.
5. Modular data structure
I implemented a modular data structure with TypeScript interfaces that organizes all of the website's content in structured, typed formats. This simplifies maintenance and makes content updates easy.
6. Testing and quality assurance
With Cypress, I implemented end-to-end tests that automatically verify critical user paths and functionality. This ensures new features or changes don't introduce regressions.
7. Migration to Coolify
After running on Cloudflare Pages for a while, I migrated the website to Coolify on my own server. Two drawbacks of the edge setup drove the decision. First, Cloudflare Pages forced a fully edge-runtime architecture, tying me closely to the provider and its Worker platform; even the contact form ran as a separate Cloudflare Worker next to the actual app. Second, edge functions are only instantiated on the first request: that gives you globally low latency once warm, but after idle periods it regularly leads to noticeably slower initial delivery (cold starts), especially for rarely visited routes.
8. Deployment with Docker and Coolify
The new infrastructure is based on a multi-stage Dockerfile that ships Next.js in standalone mode as a classic Node.js server. Coolify handles builds, deployments, SSL certificates, and reverse-proxy configuration, comparable to a self-hosted alternative to Vercel or Cloudflare Pages. The Server Actions now talk directly to the Brevo API, so the separate Cloudflare Worker for the contact form could be removed entirely. The result: a persistent process without cold starts, full control over the runtime environment, and far less vendor lock-in at comparable performance.
Code Examples
Results
The development resulted in a modern, high-performance portfolio website:
- Lighthouse score above 95 in every category (Performance, Accessibility, Best Practices, SEO)
- Fast load times under 2 seconds, even on mobile networks
- Responsive design that works flawlessly on all devices
- Automated deployment pipeline with Cloudflare Pages
- Comprehensive testing strategy with Cypress for E2E tests
- Modular, well-structured codebase that's easy to extend
- WCAG-compliant accessibility for an inclusive user experience
- Optimized color palette using the OKLCH color space for a more vibrant look and better gradients, especially visible in the page-specific background animations
The website serves not only as a portfolio but also as a playground for new web technologies and best practices. Thanks to the chosen architecture, I can implement and test new features quickly while still delivering an optimal user experience.
Insights
Lighthouse report with excellent scores for Performance, Accessibility, Best Practices, and SEO.
