About this project
De Groene Droom (demo)
A sleek portfolio website designed to mirror the elegance and calm of luxury gardens, giving potential clients an inspiring first impression.
Year
2025
Type
Webdesign & Development
Agency
HQ Online / Personal
Goal
Design and Development showcase
Link to demo website
Originally developed as a concept for a client at HQ Online, this design was later adapted and turned into a real, working demo project called ‘De Groene Droom’. The initial goal was to create a simple but refined portfolio website that could show off a range of high-end garden designs without overwhelming visitors. The project kicked off with moodboards and sketches to find the right tone and visual direction, focusing on creating a layout that felt calm and inviting.
Early on, the design saw several rounds of refinement, tweaking the visual hierarchy, typography, and layout to balance a sense of luxury with easy usability. As the client’s priorities shifted, the project was no longer needed for them. Rather than letting the concept go to waste, I decided to repurpose the design for a fictional client and turn it into a fully functional demo site. This way, the project could still serve as a showcase for both the design and the development work involved.
The final demo site was built from the ground up using Nuxt and Tailwind, staying true to the grids, layouts, and design system established during the design phase. The layout is clean and spacious, using warm colors and clear typography to create a calm and welcoming vibe. Smooth animations and subtle visual flourishes bring a bit of life to the pages without feeling overdone. The build itself prioritized clean, maintainable code and performance, ensuring the demo is polished and technically solid.
By taking the original client project and turning it into a real, working example, I was able to give this design a new purpose. It now serves as a live showcase of how I approach both design and development, from initial moodboards and sketches to final responsive implementation. You can explore the actual demo to see how it all came together in practice. Link to demo website
Impressions
Process
The process began with initial sketches and moodboards to establish the tone and visual direction. These early concepts were refined in iterative loops, incorporating feedback to fine-tune the composition and animation details. The build phase prioritized clean, maintainable code and performance, ensuring that the demo would feel both polished and technically solid.
The process began with initial sketches and moodboards to establish the tone and visual direction. These early concepts were refined in iterative loops, incorporating feedback to fine-tune the composition and animation details. The build phase prioritized clean, maintainable code and performance, ensuring that the demo would feel both polished and technically solid.
Other projects
This project demonstrates how a careful balance of elegance and calm can be translated into a digital experience. Interested in more of my work? Explore the related projects below.
