Dachsbau-Tautenhain.de
Website & Photography (2022)
Madlen and I have known each other since high school. At the time of writing (end of 2022) it is seventeen years. Crazy, because that’s more than half of my life. I even had a crush on her when I was at school. Tough teenage years! Over time, we developed a close friendship that still binds us. I consider myself lucky to have her as one of my closest friends in my life.
Not only did I dare to start a new career, but so did Madlen. However, she did not choose a self-taught career change, but a second degree. Psychology. In recent years she has discovered yoga for herself and has also begun training to become a yoga teacher. Hats off.
As she gained experience in university sports courses, her dream of setting up her own business sooner or later became a reality. In Tautenhain, the opportunity arose to move into the Dachsbau and make her dream come true. To put it in a smart and contemporary way: Madlen wanted to set up a business. Not only to find a new home, but also to combine her skills and interests and turn her passion into a profession.
She approached Julia and me and said that she could only imagine having us design and build her website. It was an honor for both of us. A project done in the context of friendship requires a clear boundary between friendship and work. I’m glad we managed that.
First Steps: Design
Just as a repository cannot represent a project without a descriptive emoticon (joke), Julia and I can only really get going when we can feel a project in terms of colour. To that end, we quickly picked up Color Claim, a collection of colour palettes. The project was conceived in 2012 by Tobias van Schneider with the aim of collecting and combining colours for his future projects. One particular colour palette smiled at us unanimously, so we removed it from the website and created the colour gradations with Tailwind Shades.
The next step was to look for inspiration for visual building blocks. Typewolf’s Site of the Day offers a wide range of options, and we were loosely inspired by them. At the same time, we were looking for fonts that hadn’t been seen 100 times before. I am most pleased with the headline font, Henrietta. What an aesthetically pleasing typeface it is!
Illustration
I can’t draw. Luckily, I didn't have to, because I had Julia (@mum.mal.mini) by my side for this project. She draws warmly and can work with different styles. After a few test drawings, the illustrations for the website were created – from the abstracted quadrangle to the badger in the bottom right corner of the screen. So cute!
Technical Implementation: Prototype for Kirby Integration With Nuxt
From the start, I set out not only to design a beautiful website, but also to create something architecturally new. This meant implementing the frontend with Nuxt and using Kirby headless as the backend. It tickled my fingers to build a best practice solution because there was none. So the site was also a prototype.
In principle, the Kirby website advertises itself as being “headless” ready, but in reality it is a bit more work to set up a headless instance. So as a first step, I created the kirby-headless-starter, a starter kit for Kirby that is primarily tailored for headless use. Features include support for bearer token authentication (which Kirby does not support by default) and CORS handling.
I then started writing a module for Nuxt that could be used to request data from the frontend via queries from the backend using the Kirby Query Language (KQL). Over the course of a few months, nuxt-kql was created, and I am proud of it.
Photography
No product can exist without packaging. To make the different parts of the “Dachsbau” tangible, you need content for the human eye. We created this in a photo shoot. Julia and Madlen were among the models in front of the camera.
For other photo assignments, I usually borrow a Sony G-Master lens. For the friendship assignment, however, I didn’t want to pay the rental fee and was looking forward to the challenge of manual focusing with my TTArtisan 50mm f1.4. Everyone is happy with the resulting snapshots. Nothing can be taken for granted.
Quellcode
Since the project is entirely volunteer driven, and indirectly intended to show the capabilities of nuxt-kql, you are welcome to inspect the code.