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 deep friendship that still binds us. I count myself fortunate to know her as one of my closest friends.
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 solidified. In Tautenhain, the opportunity arose to move into the Dachsbau and make her dream come true. To put it stylishly and in contemporary terms: Madlen wanted to start a business. Not only to find a new home there, but also to bundle her skills and interests in one place and turn her passion into a profession.
She came to Julia and me with the words that she could only imagine us designing the Dachsbau concept and building her website. Which honored us both. A project done in the context of friendship requires a clear line to maintain the boundary between that very 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 color. To that end, we quickly picked up Color Claim, a collection of color palettes. The project was conceived in 2012 by Tobias van Schneider with the aim of collecting and combining colors for his future projects. One particular color range smiled at us unanimously, so we detached it from the website and generated the color gradations with Tailwind Shades.
In the next step, we set out to search for inspiration for visual building blocks. Typewolf’s Site of the Day offers manifold options, from which we drew loose inspiration. At the same time, we were on the lookout for fonts that hadn’t been seen 100 times already. I am happiest with the headline font, Henrietta. How aesthetically simple it is!
Illustration
I can’t draw. Fortunately, I don’t have to either, because I was fortunate to have Julia (@mum.mal.mini) by my side for this project. She draws warmheartedly and can adapt to different styles. After a few test drawings, the illustrations for the website emerged – from the abstracted four-sided farmstead to the badger lying in the bottom right corner of the screen. So cute!
Technical Implementation: Prototype for Kirby Integration With Nuxt
From the outset, I set myself the goal not only to design a beautiful website, but also to create something architecturally new. Which means implementing the frontend with Nuxt and using Kirby as the backend headless. My fingers were itching to build a best-practice solution, since there was none. So the website was also a prototype at the same time.
In principle, the Kirby website advertises being “headless” ready, but in reality it’s a bit more involved to set up an instance headless. Therefore, in the first step, I created the kirby-headless-starter, a starter kit for Kirby that is primarily tailored for headless use. Features include, among others, support for bearer token authentication (which Kirby does not support by default) and CORS handling.
Subsequently, I began writing a module for Nuxt with which data can be requested from the frontend via queries from the backend using the Kirby Query Language (KQL). Over the course of a few months, nuxt-kql emerged, of which I am proud.
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.
Source Code
Since the project was created entirely on a volunteer basis, and indirectly intended to show the capabilities of nuxt-kql, you are welcome to inspect the code.
The code is licensed under the MIT license, texts and images are licensed under CC BY-NC-SA 4.0.